diff --git a/web/directives/filler-config.js b/web/directives/filler-config.js
index ce95311..5b6bc3a 100644
--- a/web/directives/filler-config.js
+++ b/web/directives/filler-config.js
@@ -14,6 +14,41 @@ module.exports = function ($timeout) {
             scope.visible = false;
             scope.error = undefined;
 
+            function refreshContentIndexes() {
+                for (let i = 0; i < scope.content.length; i++) {
+                    scope.content[i].$index = i;
+                }
+            }
+
+            scope.contentSplice = (a,b) => {
+                scope.content.splice(a,b)
+                refreshContentIndexes();
+            }
+
+            scope.dropFunction = (dropIndex, program) => {
+                setTimeout( () => {
+                    if (program.$index < dropIndex) {
+                        scope.content.splice(scope.currentStartIndex + dropIndex-2, 0, program);
+                    } else {
+                        scope.content.splice(scope.currentStartIndex + dropIndex-1, 0, program);
+                    }
+                    refreshContentIndexes();
+                    scope.$apply();
+                }, 1);
+                return true;
+            }
+            scope.setUpWatcher = function setupWatchers() {
+                this.$watch('vsRepeat.startIndex', function(val) {
+                    scope.currentStartIndex = val;
+                });
+            };
+
+            scope.movedFunction = (index) => {
+                scope.content.splice(index, 1);
+            }
+
+
+
             scope.linker( (filler) => {
                 if ( typeof(filler) === 'undefined') {
                     scope.name = "";
@@ -26,6 +61,7 @@ module.exports = function ($timeout) {
                     scope.id = filler.id;
                     scope.title = "Edit Filler List";
                 }
+                refreshContentIndexes();
                 scope.visible = true;
             } );
 
@@ -49,7 +85,10 @@ module.exports = function ($timeout) {
                 scope.visible = false;
                 scope.onDone( {
                     name: scope.name,
-                    content: scope.content,
+                    content: scope.content.map( (c) => {
+                        delete c.$index
+                        return c;
+                    } ),
                     id: scope.id,
                 } );
             }
@@ -58,9 +97,11 @@ module.exports = function ($timeout) {
             }
             scope.sortFillers = () => {
                 scope.content.sort( (a,b) => { return a.duration - b.duration } );
+                refreshContentIndexes();
             }
             scope.fillerRemoveAllFiller = () => {
                 scope.content = [];
+                refreshContentIndexes();
             }
             scope.fillerRemoveDuplicates = () => {
                 function getKey(p) {
@@ -77,12 +118,14 @@ module.exports = function ($timeout) {
                     }
                 }
                 scope.content = newFiller;
+                refreshContentIndexes();
             }
             scope.importPrograms = (selectedPrograms) => {
                 for (let i = 0, l = selectedPrograms.length; i < l; i++) {
                     selectedPrograms[i].commercials = []
                 }
                 scope.content = scope.content.concat(selectedPrograms);
+                refreshContentIndexes();
                 scope.showPlexLibrary = false;
             }
 
diff --git a/web/public/templates/filler-config.html b/web/public/templates/filler-config.html
index f82bb4e..ca73a27 100644
--- a/web/public/templates/filler-config.html
+++ b/web/public/templates/filler-config.html
@@ -23,7 +23,7 @@
                             <div>
                                 <button class="btn btn-sm btn-secondary btn-programming-tools"
                                 ng-click="showTools = !showTools"
-                                ng-show="channel.programs.length !== 0">
+                                ng-show="content.length !== 0">
                                 <span
                                 class="fa {{ showTools ? 'fa-chevron-down' : 'fa-chevron-right'}}"></span>&nbsp;&nbsp;Tools
                                 </button>
@@ -61,9 +61,19 @@
     
                     </div>
                 </div>
+                <div vs-repeat class="modal-body container list-group list-group-root filler-list" 
+                 dnd-list="content" ng-if="showList()"
+                    vs-repeat-reinitialized="vsReinitialized(event, startIndex, endIndex)"
+                    ng-init="setUpWatcher()"
+                    dnd-drop="dropFunction(index , item)"
+                    dnd-list=""
 
-                <div class="modal-body container list-group list-group-root filler-list" vs-repeat="options" dnd-list="content" ng-if="showList()">
-                    <div class="list-group-item flex-container filler-row"  style="cursor: default;" ng-repeat="x in content" dnd-draggable="x" dnd-moved="content.splice($index, 1)" dnd-effect-allowed="move">
+                >
+                    <div class="list-group-item flex-container filler-row"  style="cursor: default; height:1.1em; overflow:hidden" ng-repeat="x in content" track-by="x.$index"  dnd-draggable="x" 
+                        "
+                        dnd-effect-allowed="move"
+                        dnd-moved="movedFunction(x.$index)"
+                        >
                         <div class="program-start" >
                             {{durationString(x.duration)}}
                         </div>
@@ -72,7 +82,7 @@
                             {{x.title}}
                         </div>
                         <div class="flex-pull-right">
-                            <button class="btn btn-sm btn-link" ng-click="content.splice($index,1)">
+                            <button class="btn btn-sm btn-link" ng-click="contentSplice(x.$index,1)">
                             <i class="text-danger fa fa-trash-alt" ></i>
                             </button>
                         </div>