diff --git a/package.json b/package.json
index 4372b69..22d7a59 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
   "dependencies": {
     "angular": "^1.7.9",
     "angular-router-browserify": "0.0.2",
+    "angular-vs-repeat": "2.0.13",
     "axios": "^0.19.2",
     "body-parser": "^1.19.0",
     "diskdb": "^0.1.17",
diff --git a/web/app.js b/web/app.js
index a81b421..bc4dfeb 100644
--- a/web/app.js
+++ b/web/app.js
@@ -3,8 +3,9 @@ require('angular-router-browserify')(angular)
 require('./ext/lazyload')(angular)
 require('./ext/dragdrop')
 require('./ext/angularjs-scroll-glue')
+require('angular-vs-repeat');
 
-var app = angular.module('myApp', ['ngRoute', 'angularLazyImg', 'dndLists', 'luegg.directives'])
+var app = angular.module('myApp', ['ngRoute', 'vs-repeat', 'angularLazyImg', 'dndLists', 'luegg.directives'])
 
 app.service('plex',             require('./services/plex'))
 app.service('dizquetv',         require('./services/dizquetv'))
diff --git a/web/directives/channel-config.js b/web/directives/channel-config.js
index a21fde0..3f045b0 100644
--- a/web/directives/channel-config.js
+++ b/web/directives/channel-config.js
@@ -113,6 +113,7 @@ module.exports = function ($timeout, $location, dizquetv) {
                 setTimeout( () => {
                     scope.channel.programs.splice(dropIndex + index, 0, program);
                     updateChannelDuration()
+                    scope.$apply();
                 }, 1);
                 return true;
             }
@@ -375,15 +376,16 @@ module.exports = function ($timeout, $location, dizquetv) {
 
                 }
                 let ems = Math.pow( Math.min(24*60*60*1000, program.duration), 0.7 );
-                ems = ems / Math.pow(5*60*1000., 0.7);
-                ems = Math.max( 0.25 , ems);
-                let top = Math.max(0.0, (1.75 - ems) / 2.0) ;
+                ems = 1.3;
+                let top = 0.01;
                 if (top == 0.0) {
                     top = "1px";
                 } else {
                     top = top + "em";
                 }
 
+                
+
                 return {
                     'width': '0.5em',
                     'height': ems + 'em',
@@ -869,6 +871,7 @@ module.exports = function ($timeout, $location, dizquetv) {
                 scope.hasFlex = false;
                 for (let i = 0, l = scope.channel.programs.length; i < l; i++) {
                     scope.channel.programs[i].start = new Date(scope.channel.startTime.valueOf() + scope.channel.duration)
+                    scope.channel.programs[i].$index = i;
                     scope.channel.duration += scope.channel.programs[i].duration
                     scope.channel.programs[i].stop = new Date(scope.channel.startTime.valueOf() + scope.channel.duration)
                     if (scope.channel.programs[i].isOffline) {
@@ -906,6 +909,9 @@ module.exports = function ($timeout, $location, dizquetv) {
                         scope.error.programs = "No programs have been selected. Select at least one program."
                     else {
                         channel.startTime.setMilliseconds( scope.millisecondsOffset);
+                        for (let i = 0; i < scope.channel.programs.length; i++) {
+                            delete scope.channel.programs[i].$index;
+                        }
                         scope.onDone(JSON.parse(angular.toJson(channel)))
                     }
                     $timeout(() => { scope.error = {} }, 3500)
diff --git a/web/public/templates/channel-config.html b/web/public/templates/channel-config.html
index 902bc13..7d177cd 100644
--- a/web/public/templates/channel-config.html
+++ b/web/public/templates/channel-config.html
@@ -340,22 +340,10 @@
 
                         </div>
                         <div class="list-group list-group-root">
-                            <div ng-show="channel.programs.length &gt; 100">
-                                <div>Showing programs {{minProgramIndex+1}} to {{minProgramIndex+100}}</div>
-                            </div>
-                            <input ng-show="channel.programs.length &gt; 100"  type="range" ng-model="minProgramIndex" min="0" max="{{ channel.programs.length - 100 }}" />
-                            <div ng-if="minProgramIndex &gt; 0" class="list-group-item flex-container" >
-                                <div class="program-start">
-                                    {{ dateForGuide(channel.startTime) }}
-                                </div>
-
-                                <div style="margin-right: 5px; font-weight:ligther; text-align:center">
-                                    &#8942;
-                                </div>
-                            </div>
-                            <div ng-if="minProgramIndex &lt;= $index &amp;&amp; $index &lt; minProgramIndex+100" ng-repeat="x in channel.programs track by $index" ng-click="selectProgram($index)" dnd-list="" dnd-drop="dropFunction(index , $index, item)"
-                            >
-                              <div class="list-group-item flex-container program-row" dnd-draggable="x" dnd-moved="channel.programs.splice($index, 1);" dnd-effect-allowed="move"
+                          <div vs-repeat="options" style='max-height: 30em; overflow-y: auto;'>
+                            <div ng-repeat="x in channel.programs track by x.$index" ng-click="selectProgram(x.$index)" dnd-list="" dnd-drop="dropFunction(index , x.$index, item)" style="height: 1.5em; overflow:hidden">
+                                                        
+                              <div class="list-group-item flex-container program-row" dnd-draggable="x" dnd-moved="channel.programs.splice(x.$index, 1);" dnd-effect-allowed="move"
                               >
                                 
                                 <div class="program-start">
@@ -371,20 +359,12 @@
                                     <span ng-if="x.type === 'redirect' " ><i>Redirect to channel:</i> <b>{{x.channel}}</b></span>
                                 </div>
                                 <div class="flex-pull-right"></div>
-                                <button class="btn btn-sm btn-link" ng-click="removeItem($index);  $event.stopPropagation()">
+                                <button class="btn btn-sm btn-link" ng-click="removeItem(x.$index);  $event.stopPropagation()">
                                     <i class="text-danger fa fa-trash"></i>
                                 </button>
                               </div>
                             </div>
-                            <div ng-if="minProgramIndex &lt; channel.programs.length - 100" class="list-group-item flex-container" >
-                                <div class="program-start">
-                                    {{ dateForGuide(channel.programs[minProgramIndex + 100 - 1].stop)}}
-                                </div>
-
-                                <div style="margin-right: 5px; font-weight:ligther; text-align:center">
-                                    &#8942;
-                                </div>
-                            </div>
+                          </div>
                             <div class="list-group-item flex-container" ng-if="channel.programs.length &gt; 0" >
                                 <div class="program-start">
                                     {{ dateForGuide(channel.programs[channel.programs.length-1].stop)}}