diff --git a/addon/components/sequential-render.hbs b/addon/components/sequential-render.hbs
index e6757f6..2eca1af 100644
--- a/addon/components/sequential-render.hbs
+++ b/addon/components/sequential-render.hbs
@@ -1,11 +1,11 @@
 {{yield (hash
   content=this.content
   isContentLoading=this.isContentLoading
-  render-content=(component "sequential-render/content"
+  contentTemplate=(component "sequential-render/content"
     isFullFilled=this.isFullFilled
     showFadedState=this.showFadedState
   )
-  loader-state=(component "sequential-render/loader-state"
+  loaderTemplate=(component "sequential-render/loader-state"
     isFullFilled=this.isFullFilled
   )
   retry=this.retry
diff --git a/addon/components/sequential-render.js b/addon/components/sequential-render.js
index d775235..66fe17a 100644
--- a/addon/components/sequential-render.js
+++ b/addon/components/sequential-render.js
@@ -18,14 +18,14 @@
       @getData={{this.executePromise}}
       @renderCallback={{action 'contentRenderCallback'}} as |renderHash|
     >
-      <renderHash.loader-state>
+      <renderHash.loaderTemplate>
         // Handle loading state if required
-      </renderHash.loader-state>
-      <renderHash.render-content @loaderClass="loader-fade">
+      </renderHash.loaderTemplate>
+      <renderHash.contentTemplate @loaderClass="loader-fade">
         // Use renderHash.content to render the content.
         // Use renderHash.isContentLoading to act based on the data loading state.
         // Use renderHash.retry action to retrigger data fetch and rendering as applicable.
-      {{/renderHash.render-content}}
+      </renderHash.contentTemplate>
     </SequentialRender>
   ```
   @class sequential-render
@@ -33,9 +33,9 @@
   @yield {Hash} renderHash
   @yield {Any} renderHash.content The response from performing getData.
   @yield {boolean} renderHash.isContentLoading Flag to check the loading state of the data fetch.
-  @yield {component} renderHash.render-content Block component used to render the content of the item.
+  @yield {component} renderHash.contentTemplate Block component used to render the content of the item.
         Accepts loaderClass as an argument. This class can be used to style the subsequent loading states for the item during rerender.  
-  @yield {component} renderHash.loader-state Block component used to render the loading state of the item.
+  @yield {component} renderHash.loaderTemplate Block component used to render the loading state of the item.
   @yield {action} renderHash.retry Exposes an action which can be used to retry the data fetch + render process without affecting the queue / app render states..
 */
 
diff --git a/tests/dummy/app/components/example-optimized/template.hbs b/tests/dummy/app/components/example-optimized/template.hbs
index b2ee929..09037fc 100644
--- a/tests/dummy/app/components/example-optimized/template.hbs
+++ b/tests/dummy/app/components/example-optimized/template.hbs
@@ -4,7 +4,7 @@
   <div class="flex1 schoolroom__mainpanel">
     <h2 class="maintitle">Dumbledore's Army</h2>
     <SequentialRender @renderPriority={{0}} @taskName="getSpellWork" @getData={{@getSpellWork}} as |spellHash|>
-      <spellHash.render-content>
+      <spellHash.contentTemplate>
         {{#each @spellWork as |spell|}}
           <div class="card">
             <div class="title">
@@ -15,10 +15,10 @@
             </div>
           </div>
         {{/each}}
-      </spellHash.render-content>
-      <spellHash.loader-state>
+      </spellHash.contentTemplate>
+      <spellHash.loaderTemplate>
         <div class="loader"></div>
-      </spellHash.loader-state>
+      </spellHash.loaderTemplate>
     </SequentialRender>
   </div>
   <div class="schoolroom__sidepane">
@@ -27,7 +27,7 @@
         Participants
       </h4>
       <SequentialRender @renderPriority={{1}} @taskName="getParticipants" @getData={{@getParticipants}} as |participantsHash|>
-        <participantsHash.render-content>
+        <participantsHash.contentTemplate>
           <div class="element-flex avatarpane">
             {{#each @participantsList as |person|}}
               <div class="avatar-item" aria-label={{person.name}}>
@@ -35,10 +35,10 @@
               </div>
             {{/each}}
           </div>
-        </participantsHash.render-content>
-        <participantsHash.loader-state>
+        </participantsHash.contentTemplate>
+        <participantsHash.loaderTemplate>
           <div class="loader"></div>
-        </participantsHash.loader-state>
+        </participantsHash.loaderTemplate>
       </SequentialRender>
     </div>
 
@@ -47,14 +47,14 @@
         Quick Notes
       </h4>
       <SequentialRender @renderPriority={{1}} @taskName="getNotes" @getData={{@getNotes}} as |notesHash|>
-        <notesHash.render-content>
+        <notesHash.contentTemplate>
           <div class="editor" contenteditable="true">
             {{@notes}}
           </div>
-        </notesHash.render-content>
-        <notesHash.loader-state>
+        </notesHash.contentTemplate>
+        <notesHash.loaderTemplate>
           <div class="loader"></div>
-        </notesHash.loader-state>
+        </notesHash.loaderTemplate>
       </SequentialRender>
     </div>
   </div>
diff --git a/tests/dummy/app/templates/docs/usage.md b/tests/dummy/app/templates/docs/usage.md
index fdd6ab3..0e54f68 100644
--- a/tests/dummy/app/templates/docs/usage.md
+++ b/tests/dummy/app/templates/docs/usage.md
@@ -38,12 +38,12 @@ In this example, the critical or hero element is the content inside the left pan
 ```
 <div class="flex1 schoolroom__mainpanel">
   <h2 class="maintitle">Dumbledore's Army</h2>
-  <sequential-render
+  <SequentialRender
     renderPriority={{0}}
     taskName="getSpellWork"
     getData={{this.getSpellWork}} as |spellHash|
   >
-    <spellHash.render-content>
+    <spellHash.contentTemplate>
       {{#each this.spellWork as |spell|}}
         <div class="card">
           <div class="title">
@@ -54,11 +54,11 @@ In this example, the critical or hero element is the content inside the left pan
           </div>
         </div>
       {{/each}}
-    </spellHash.render-content>
-    <spellHash.loader-state>
+    </spellHash.contentTemplate>
+    <spellHash.loaderTemplate>
      // ...Loader
-    </spellHash.loader-state>
-  </sequential-render>
+    </spellHash.loaderTemplate>
+  </SequentialRender>
 </div>
 ```
 
diff --git a/tests/integration/components/sequential-render-test.js b/tests/integration/components/sequential-render-test.js
index e1ddde7..8ba66ca 100644
--- a/tests/integration/components/sequential-render-test.js
+++ b/tests/integration/components/sequential-render-test.js
@@ -50,13 +50,13 @@ module(
         @renderCallback={{this.afterTask1}}
         as |seq1|
       >
-        <seq1.render-content @loaderClass="content--faded">
+        <seq1.contentTemplate @loaderClass="content--faded">
           <h1>Render first: 
             {{#unless seq1.isContentLoading}}
               <span data-test-id="seq1-content">{{seq1.content.label}}</span>
             {{/unless}}
           </h1>
-        </seq1.render-content>
+        </seq1.contentTemplate>
       </SequentialRender>
       `);
 
@@ -72,12 +72,12 @@ module(
         @renderCallback={{this.afterTask1}}
         as |firstComponent|
       >
-        <firstComponent.render-content>
+        <firstComponent.contentTemplate>
           <h1>first</h1>
-        </firstComponent.render-content>
-        <firstComponent.loader-state>
+        </firstComponent.contentTemplate>
+        <firstComponent.loaderTemplate>
           <h1>Loading...</h1>
-        </firstComponent.loader-state>
+        </firstComponent.loaderTemplate>
       </SequentialRender>
       <SequentialRender
         @renderPriority={{0}}
@@ -85,12 +85,12 @@ module(
         @renderCallback={{this.afterTask2}}
         as |secondComponent|
       >
-        <secondComponent.render-content>
+        <secondComponent.contentTemplate>
           <h1>Second</h1>
-        </secondComponent.render-content>
-        <secondComponent.loader-state>
+        </secondComponent.contentTemplate>
+        <secondComponent.loaderTemplate>
           <h1>Loading...</h1>
-        </secondComponent.loader-state>
+        </secondComponent.loaderTemplate>
       </SequentialRender>
       `);
       assert.verifySteps([AFTER_RENDER.second, AFTER_RENDER.first]);
@@ -104,9 +104,9 @@ module(
         @renderCallback={{this.afterTask1}}
         as |seq|
       >
-        <seq.render-content>
+        <seq.contentTemplate>
           <h1>Render Second</h1>
-        </seq.render-content>
+        </seq.contentTemplate>
       </SequentialRender>
       <SequentialRender
         @renderPriority={{1}}
@@ -115,11 +115,11 @@ module(
         @renderCallback={{this.afterTask2}}
         as |seq1|
       >
-        <seq1.render-content>
+        <seq1.contentTemplate>
           <h1>Render Second: 
             <span data-test-id="seq1-content">{{seq1.content.label}}</span>
           </h1>
-        </seq1.render-content>
+        </seq1.contentTemplate>
       </SequentialRender>
       <SequentialRender
         @renderPriority={{1}}
@@ -127,9 +127,9 @@ module(
         @renderCallback={{this.afterTask3}}
         as |seq1|
       >
-        <seq1.render-content>
+        <seq1.contentTemplate>
           <h1>Render Second</h1>
-        </seq1.render-content>
+        </seq1.contentTemplate>
       </SequentialRender>
       `);
       assert.verifySteps([
@@ -148,9 +148,9 @@ module(
         @renderCallback={{this.afterTask1}}
         as |seq|
       >
-        <seq.render-content>
+        <seq.contentTemplate>
           <h1>Render Second</h1>
-        </seq.render-content>
+        </seq.contentTemplate>
       </SequentialRender>
       <SequentialRender
         @renderPriority={{2}}
@@ -159,9 +159,9 @@ module(
         @renderCallback={{this.afterTask2}}
         as |seq1|
       >
-        <seq1.render-content>
+        <seq1.contentTemplate>
           <h1>Render Second</h1>
-        </seq1.render-content>
+        </seq1.contentTemplate>
       </SequentialRender>
       <SequentialRender
         @renderPriority={{4}}
@@ -169,9 +169,9 @@ module(
         @renderCallback={{this.afterTask3}}
         as |seq1|
       >
-      <seq1.render-content>
+      <seq1.contentTemplate>
         <h1>Render Second</h1>
-      </seq1.render-content>
+      </seq1.contentTemplate>
       </SequentialRender>
       `);
       assert.verifySteps([
@@ -189,9 +189,9 @@ module(
         @renderCallback={{this.afterTask1}}
         as |seq|
       >
-        <seq.render-content>
+        <seq.contentTemplate>
           <h1>Render Second</h1>
-        </seq.render-content>
+        </seq.contentTemplate>
       </SequentialRender>
       <SequentialRender
         @renderPriority={{1}}
@@ -200,9 +200,9 @@ module(
         @renderCallback={{this.afterTask2}}
         as |seq1|
       >
-      <seq1.render-content>
+      <seq1.contentTemplate>
         <h1>Render Second</h1>
-      </seq1.render-content>
+      </seq1.contentTemplate>
       </SequentialRender>
       <SequentialRender
         @renderPriority={{1}}
@@ -210,9 +210,9 @@ module(
         @renderCallback={{this.afterTask3}}
         as |seq1|
       >
-      <seq1.render-content>
+      <seq1.contentTemplate>
         <h1>Render Second</h1>
-      </seq1.render-content>
+      </seq1.contentTemplate>
       </SequentialRender>
       `);
       assert.verifySteps([
@@ -237,9 +237,9 @@ module(
         @getData={{this.getDataThrowsError}}
         as |seq1|
       >
-      <seq1.render-content>
+      <seq1.contentTemplate>
         <h1>Render Second</h1>
-      </seq1.render-content>
+      </seq1.contentTemplate>
       </SequentialRender>
       `);
     });
@@ -251,12 +251,12 @@ module(
         @taskName="Task1"
         @renderCallback={{this.afterTask1}} as |SequentialRenderItem|
       >
-        <SequentialRenderItem.render-content>
+        <SequentialRenderItem.contentTemplate>
           <h1>Render First</h1>
-        </SequentialRenderItem.render-content>
-        <SequentialRenderItem.loader-state>
+        </SequentialRenderItem.contentTemplate>
+        <SequentialRenderItem.loaderTemplate>
           Loading...
-        </SequentialRenderItem.loader-state>
+        </SequentialRenderItem.loaderTemplate>
       </SequentialRender>
       <SequentialRender
         @renderPriority={{2}}
@@ -264,12 +264,12 @@ module(
         @getData={{this.getData}}
         @renderCallback={{this.afterTask2}} as |SequentialRenderItem|
       >
-        <SequentialRenderItem.render-content>
+        <SequentialRenderItem.contentTemplate>
           <h1>Render Third</h1>
-        </SequentialRenderItem.render-content>
-        <SequentialRenderItem.loader-state>
+        </SequentialRenderItem.contentTemplate>
+        <SequentialRenderItem.loaderTemplate>
           Loading...
-        </SequentialRenderItem.loader-state>
+        </SequentialRenderItem.loaderTemplate>
       </SequentialRender>
       <SequentialRender
         @renderPriority={{1}}
@@ -277,13 +277,13 @@ module(
         @getData={{this.getData}}
         @renderCallback={{this.afterTask3}} as |SequentialRenderItem|
       >
-        <SequentialRenderItem.render-content>
+        <SequentialRenderItem.contentTemplate>
           <h1>Render First</h1>
           <button type='button' data-test-id='retry-button' {{on "click" (fn SequentialRenderItem.retry)}}>Retry</button>
-        </SequentialRenderItem.render-content>
-        <SequentialRenderItem.loader-state>
+        </SequentialRenderItem.contentTemplate>
+        <SequentialRenderItem.loaderTemplate>
           Loading...
-        </SequentialRenderItem.loader-state>
+        </SequentialRenderItem.loaderTemplate>
       </SequentialRender>
       `);
       await click('[data-test-id="retry-button"]');
@@ -302,12 +302,12 @@ module(
         @taskName="Task1"
         @renderCallback={{this.afterTask1}} as |SequentialRenderItem|
       >
-        <SequentialRenderItem.render-content>
+        <SequentialRenderItem.contentTemplate>
           <h1>Render First</h1>
-        </SequentialRenderItem.render-content>
-        <SequentialRenderItem.loader-state>
+        </SequentialRenderItem.contentTemplate>
+        <SequentialRenderItem.loaderTemplate>
           Loading...
-        </SequentialRenderItem.loader-state>
+        </SequentialRenderItem.loaderTemplate>
       </SequentialRender>
       <SequentialRender
         @renderPriority={{2}}
@@ -315,36 +315,36 @@ module(
         @getData={{this.getData}}
         @renderCallback={{this.afterTask2}} as |SequentialRenderItem|
       >
-        <SequentialRenderItem.render-content>
+        <SequentialRenderItem.contentTemplate>
           <h1>Render Third</h1>
           <SequentialRender
             @renderPriority={{3}}
             @taskName="Task4"
             @renderCallback={{this.afterTask4}} as |SequentialRenderItem|
           >
-            <SequentialRenderItem.render-content>
+            <SequentialRenderItem.contentTemplate>
               <h1>Render fourth</h1>
-            </SequentialRenderItem.render-content>
-            <SequentialRenderItem.loader-state>
+            </SequentialRenderItem.contentTemplate>
+            <SequentialRenderItem.loaderTemplate>
               Loading...
-            </SequentialRenderItem.loader-state>
+            </SequentialRenderItem.loaderTemplate>
           </SequentialRender>
           <SequentialRender
             @renderPriority={{1}}
             @taskName="Task5"
             @renderCallback={{this.afterTask5}} as |SequentialRenderItem|
           >
-            <SequentialRenderItem.render-content>
+            <SequentialRenderItem.contentTemplate>
               <h1>Render fifth</h1>
-            </SequentialRenderItem.render-content>
-            <SequentialRenderItem.loader-state>
+            </SequentialRenderItem.contentTemplate>
+            <SequentialRenderItem.loaderTemplate>
               Loading...
-            </SequentialRenderItem.loader-state>
+            </SequentialRenderItem.loaderTemplate>
           </SequentialRender>
-        </SequentialRenderItem.render-content>
-        <SequentialRenderItem.loader-state>
+        </SequentialRenderItem.contentTemplate>
+        <SequentialRenderItem.loaderTemplate>
           Loading...
-        </SequentialRenderItem.loader-state>
+        </SequentialRenderItem.loaderTemplate>
       </SequentialRender>
       <SequentialRender
         @renderPriority={{1}}
@@ -352,13 +352,13 @@ module(
         @getData={{this.getData}}
         @renderCallback={{this.afterTask3}} as |SequentialRenderItem|
       >
-        <SequentialRenderItem.render-content>
+        <SequentialRenderItem.contentTemplate>
           <h1>Render First</h1>
           <button type='button' data-test-id='retry-button' {{on "click" (fn SequentialRenderItem.retry)}}>Retry</button>
-        </SequentialRenderItem.render-content>
-        <SequentialRenderItem.loader-state>
+        </SequentialRenderItem.contentTemplate>
+        <SequentialRenderItem.loaderTemplate>
           Loading...
-        </SequentialRenderItem.loader-state>
+        </SequentialRenderItem.loaderTemplate>
       </SequentialRender>
       `);
       assert.verifySteps([