diff --git a/rowers/models.py b/rowers/models.py
index 7624c996..efc43f81 100644
--- a/rowers/models.py
+++ b/rowers/models.py
@@ -2427,6 +2427,31 @@ class PlannedSessionStep(models.Model):
     notes = models.TextField(default='',max_length=200, blank=True, null=True)
     color = models.TextField(default='#ddd',max_length=200)
 
+    def save(self, *args, **kwargs):
+        if self.intensity == "Warmup":
+            self.color = "#ffcccb"
+        elif self.intensity == "Cooldown":
+            self.color = '#90ee90'
+        elif self.intensity == "Rest":
+            self.color = 'add8e6'
+
+        super(PlannedSessionStep, self).save(*args, **kwargs)
+
+class StepEditorForm(ModelForm):
+    class Meta:
+        model = PlannedSessionStep
+        fields = [
+            'name',
+            #'type',
+            'durationtype',
+            'durationvalue',
+            'intensity',
+                  ]
+
+        widgets = {
+            'name': forms.Textarea(attrs={'rows':1, 'cols':50}),
+        }
+
 
 class PlannedSession(models.Model):
 
diff --git a/rowers/templates/stepeditor.html b/rowers/templates/stepeditor.html
index 85a6478f..2d92d0de 100644
--- a/rowers/templates/stepeditor.html
+++ b/rowers/templates/stepeditor.html
@@ -7,6 +7,15 @@
 
 {% block main %}
 <h2>Plan Training Steps</h2>
+<p>
+  WARNING: This is experimental functionality which may not behave as you
+  expect. Does not work on smartphones.
+</p>
+<p>
+  Drag from Library to Training to add a step to the end.
+  Drag on top of a training step to insert after it.
+  Drag out of Training to remove a step.
+</p>
 <div class="stepcontainer" id="list">
 <section class="drop-zone">
 <h2>Training</h2>
@@ -14,7 +23,7 @@
 <section class="library">
   <h2>Library</h2>
   {% for step in steps %}
-  <div draggable="true" class="trainingstep" style="background-color: {{ step.color }}">
+  <div draggable="true" class="trainingstep {{ step.intensity }}" >
     <div  id="{{ forloop.counter }}" class="stepcontent">
     {{ step.name }}
     </div>
@@ -22,8 +31,15 @@
   {% endfor %}
 </div>
 </section>
-<section class="trash-can">
-  <h2>Remove</h2>
+<section>
+  <h2>Add new step</h2>
+  <form enctype="multipart/multipart/form-data" method="post">
+  <table>
+    {{ form.as_table }}
+  </table>
+  {% csrf_token %}
+  <input name="newstep" type="submit" value="Add to Library">
+  </form>
 </section>
 {% endblock %}
 
@@ -33,11 +49,25 @@
 </script>
 <script>
     let dragged;
+    let origcolor;
+
+    function saveState() {
+      var list = [];
+      steps = document.querySelector('.drop-zone');
+      steps.childNodes.forEach(function(item) {
+        if (item.className && item.className.includes("trainingstep")) {
+          console.log(item);
+        }
+      });
+      console.log(list);
+    }
+
 
     function handleDragStart(event) {
       let target = event.target;
       if (target) {
         dragged = target;
+        origcolor = dragged.style.backgroundColor;
         event.dataTransfer.setData('text', target.id);
         event.dataTransfer.dropEffect = 'move';
         // Make it half transparent
@@ -49,7 +79,11 @@
       if (event.target) {
         // Reset the transparency
         event.target.style.opacity = ''; // reset opacity when drag ends
+        items.forEach(function (item) {
+          item.classList.remove('over');
+        });
         dragged = null;
+        origcolor = null;
       }
     }
 
@@ -62,7 +96,10 @@
     }
 
     function handleDragEnter(event) {
+      this.classList.add('over');
       const target = event.target;
+      overcolor = event.target.style.backgroundColor;
+
       if (target && dragged) {
         event.preventDefault();
         // Set the dropEffect to move
@@ -72,19 +109,22 @@
     }
 
     function handleDragLeave(event) {
-      console.log(event.target.nodeName);
-      event.target.style.background = '';
+      event.target.style.backgroundColor = '';
+
+      if (dragged.parentNode.className.includes("drop-zone")) {
+        console.log("trashing");
+        trash(event);
+      }
     }
 
     function trash(event) {
       const target = event.target;
-      console.log("trash", target)
-      target.style.backgroundColor = '';
+      event.target.style.backgroundColor = '';
       if (target && dragged) {
         event.preventDefault();
-        console.log(dragged.parentNode.className);
-        if (dragged.parentNode.className == "drop-zone") {
+        if (dragged.parentNode.className.includes("drop-zone")) {
           dragged.remove();
+          saveState();
         }
       }
     }
@@ -98,18 +138,24 @@
         // dragged.parentNode.removeChild(dragged);
         if (target.nodeName == "SECTION") {
           dragged.style.opacity = '';
+          dragged.style.backgroundColor = origcolor;
           var dropped = dragged.cloneNode(true);
           target.appendChild(dropped);
         }
         if (target.nodeName == 'DIV') {
           // insert after
           dragged.style.opacity = '';
+          dragged.style.backgroundColor = origcolor;
           var dropped = dragged.cloneNode(true);
           if (target.parentNode.nodeName == 'SECTION') {
             target.after(dropped);
           }
+          if (target.parentNode.parentNode.nodeName == 'SECTION') {
+            target.parentNode.after(dropped);
+          }
         }
       }
+      saveState();
   }
 
   function noDrop(event) {
@@ -124,15 +170,12 @@
     dropzone.addEventListener('dragover', handleDragOver);
     dropzone.addEventListener('dragstart', handleDragStart);
     dropzone.addEventListener('dragend', handleDragEnd);
-    let trashcan = document.querySelector('.trash-can');
-    trashcan.addEventListener('drop', trash)
-    trashcan.addEventListener('dragenter', handleDragEnter);
-    trashcan.addEventListener('dragleave', handleDragLeave);
-    trashcan.addEventListener('dragover', handleDragOver);
+
     let items = document.querySelectorAll('.stepcontainer .trainingstep');
     items.forEach(function(item) {
       item.addEventListener('dragstart', handleDragStart);
       item.addEventListener('dragend', handleDragEnd);
+      item.addEventListener('dragleave', handleDragLeave);
       item.addEventListener('drop',noDrop);
       item.addEventListener('dragenter',noDrop);
     });
diff --git a/rowers/views/planviews.py b/rowers/views/planviews.py
index 169d84c7..d16e3025 100644
--- a/rowers/views/planviews.py
+++ b/rowers/views/planviews.py
@@ -2963,35 +2963,23 @@ def rower_create_trainingplan(request, id=0):
                   message="This functionality requires a Coach or Self-Coach plan",
                   redirect_field_name=None)
 def stepeditor(request, id=0):
-    step1 = PlannedSessionStep(
-        manager = request.user,
-        name = "Warming Up",
-        intensity = "Warmup",
-        durationtype = "Time",
-        durationvalue = 60000,
-    )
 
-    step2 = PlannedSessionStep(
-        manager = request.user,
-        name = "Steady",
-        intensity = "Active",
-        durationtype = "Time",
-        durationvalue = 180000,
-    )
+    form = StepEditorForm()
 
-    step3 = PlannedSessionStep(
-        manager = request.user,
-        name = "Cooling Down",
-        intensity = "Cooldown",
-        durationtype = "Time",
-        durationvalue = 60000,
-    )
+    if request.method == 'POST':
+        form = StepEditorForm(request.POST)
+        if form.is_valid():
+            step = form.save(commit=False)
+            step.manager = request.user
+            step.save()
 
-    steps = [step1,step2,step3]
+
+    steps = PlannedSessionStep.objects.filter(manager=request.user)
 
     return render(request, 'stepeditor.html',
                   {
                       'steps':steps,
+                      'form':form,
                   })
 
 @user_passes_test(can_plan, login_url="/rowers/paidplans",
diff --git a/rowers/views/statements.py b/rowers/views/statements.py
index c2238e68..257391fe 100644
--- a/rowers/views/statements.py
+++ b/rowers/views/statements.py
@@ -167,7 +167,8 @@ from rowers.models import (
     IndoorVirtualRaceResultForm, IndoorVirtualRaceResult,
     IndoorVirtualRaceForm, PlannedSessionCommentForm,
     Alert, Condition, StaticChartRowerForm,
-    FollowerForm, VirtualRaceAthleteForm, InstantPlanForm, DataRowerForm
+    FollowerForm, VirtualRaceAthleteForm, InstantPlanForm, DataRowerForm,
+    StepEditorForm,
 )
 from rowers.models import (
     FavoriteForm, BaseFavoriteFormSet, SiteAnnouncement, BasePlannedSessionFormSet,
diff --git a/static/css/rowsandall2.css b/static/css/rowsandall2.css
index c1fadd43..da382d2c 100644
--- a/static/css/rowsandall2.css
+++ b/static/css/rowsandall2.css
@@ -341,20 +341,25 @@ th.rotate > div > span {
   border: 3px dotted #666;
 }
 
+.trainingstep.Warmup {
+    background-color: #ffcccb;
+}
+
+.trainingstep.Cooldown {
+    background-color: #90ee90;
+}
+
+.trainingstep.Rest {
+    background-color: #add8e6;
+}
+
 .drop-zone {
   position: relative;
   overflow: hidden;
   background: #878787;
   color: white;
   padding: 10px;
-}
-
-.trash-can {
-  position: relative;
-  overflow: hidden;
-  background: red;
-  color: white;
-  padding: 10px;
+  padding-bottom: 40px;
 }
 
 .divlines {