diff --git a/test-app/app/controllers/index.js b/test-app/app/controllers/index.js
index 484b63e8..c362738a 100644
--- a/test-app/app/controllers/index.js
+++ b/test-app/app/controllers/index.js
@@ -15,6 +15,8 @@ export default class ModifierController extends Controller {
     { fruit: 'lemon', day: 'Sunday' },
   ];
 
+  @tracked mutableRecords = ['Zero', 'One', 'Two', 'Three', 'Four'];
+
   @action handleDragChange(reordered) {
     this.records = reordered;
   }
@@ -76,4 +78,24 @@ export default class ModifierController extends Controller {
     set(this, 'model.itemsGrid2', newOrder);
     set(this, 'model.dragged', draggedModel);
   }
+
+  @action
+  updateMutable(newOrder, draggedMode) {
+    this.mutableRecords = newOrder;
+  }
+
+  @action
+  removeItemHorizontal(item) {
+    this.mutableRecords = this.mutableRecords.filter(
+      (record) => record !== item,
+    );
+  }
+
+  @action
+  addItemToHorizontal() {
+    this.mutableRecords = [
+      ...this.mutableRecords,
+      `Item ${this.mutableRecords.length + 1}`,
+    ];
+  }
 }
diff --git a/test-app/app/styles/app.css b/test-app/app/styles/app.css
index 5fba0d8a..022a817c 100644
--- a/test-app/app/styles/app.css
+++ b/test-app/app/styles/app.css
@@ -295,3 +295,39 @@
 .word-break {
   word-wrap: break-word;
 }
+
+.flex {
+  display: flex;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.align-items-center {
+  align-items: center;
+}
+
+.space-between {
+  justify-content: space-between;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.mr-5 {
+  margin-right: 5px;
+}
\ No newline at end of file
diff --git a/test-app/app/templates/index.hbs b/test-app/app/templates/index.hbs
index d3fcad84..3605f35b 100644
--- a/test-app/app/templates/index.hbs
+++ b/test-app/app/templates/index.hbs
@@ -67,7 +67,51 @@
         {{~/each}}
       </ol>
     </section>
-    
+
+    <section class='horizontal-demo'>
+      <h3 class='flex align-items-center'>Horizontal Mutable
+        &nbsp; &nbsp;<button type='button' {{on 'click' this.addItemToHorizontal}}>Add Item</button>
+      </h3>
+
+      <div class='flex align-items-center full-width'>
+        <ol
+          class='flex-1' data-test-horizontal-demo-group
+          {{sortable-group
+            this.mutableRecords
+            direction='x'
+            onChange=this.updateMutable
+            itemVisualClass=this.itemVisualClass
+            handleVisualClass=this.handleVisualClass
+            groupName='horizontal-add-1'
+          }}
+        >
+          {{#each this.mutableRecords as |item|~}}
+            <li data-test-horizontal-demo-handle tabindex='0' {{sortable-item model=item groupName='horizontal-add-1'}}>
+              <ItemPresenter @item={{item}} />
+              <button type='button' {{on 'click' (fn this.removeItemHorizontal item)}}>x</button>
+            </li>
+          {{~/each}}
+        </ol>
+        <ol
+          data-test-horizontal-demo-group
+          {{sortable-group
+            direction='x'
+            onChange=this.updateMutable
+            itemVisualClass=this.itemVisualClass
+            handleVisualClass=this.handleVisualClass
+            groupName='horizontal-add-2'
+          }}>
+          {{#each this.mutableRecords as |item|~}}
+            <li data-test-horizontal-demo-handle tabindex='0' {{sortable-item model=item groupName='horizontal-add-2'}}>
+              <ItemPresenter @item={{item}} />
+              <button type='button' {{on 'click' (fn this.removeItemHorizontal item)}}>x
+              </button>
+            </li>
+          {{~/each}}
+        </ol>
+      </div>
+    </section>
+
     <section class="grid-demo">
       <div class="row">
         <div class="col">
@@ -77,13 +121,13 @@
       <div class="row">
         <div class="col">
           <div class="row" data-test-grid-demo-group
-          {{sortable-group
-            direction='grid'
-            onChange=this.updateGrid
-            itemVisualClass=this.itemVisualClass
-            handleVisualClass=this.handleVisualClass
-            groupName='grid'
-          }}>
+            {{sortable-group
+              direction='grid'
+              onChange=this.updateGrid
+              itemVisualClass=this.itemVisualClass
+              handleVisualClass=this.handleVisualClass
+              groupName='grid'
+            }}>
             {{#each @model.itemsGrid as |item|~}}
               <div class="col-120" data-test-grid-demo-handle tabindex='0' {{sortable-item model=item groupName='grid'}}>
                 <div class="card">
@@ -123,18 +167,18 @@
       {{! template-lint-disable table-groups}}
       <table>
         <thead>
-          <tr>
-            <th>&vArr;</th>
-            <th>Item</th>
-          </tr>
+        <tr>
+          <th>&vArr;</th>
+          <th>Item</th>
+        </tr>
         </thead>
         <tbody {{sortable-group onChange=this.update groupName='table'}}>
-          {{#each @model.items as |item|}}
-            <tr data-test-table-demo-item class='handle' {{sortable-item model=item groupName='table'}}>
-              <td><span data-test-table-demo-handle data-item={{item}} class='handle'>&vArr;</span></td>
-              <td>{{item}}</td>
-            </tr>
-          {{/each}}
+        {{#each @model.items as |item|}}
+          <tr data-test-table-demo-item class='handle' {{sortable-item model=item groupName='table'}}>
+            <td><span data-test-table-demo-handle data-item={{item}} class='handle'>&vArr;</span></td>
+            <td>{{item}}</td>
+          </tr>
+        {{/each}}
         </tbody>
       </table>
     </section>
@@ -225,4 +269,4 @@
     </ol>
 
   </section>
-</article>
+</article>
\ No newline at end of file