diff --git a/app/assets/javascripts/backbone/templates/habits/habit.jst.ejs b/app/assets/javascripts/backbone/templates/habits/habit.jst.ejs
index 108782bce5..8582fc681b 100644
--- a/app/assets/javascripts/backbone/templates/habits/habit.jst.ejs
+++ b/app/assets/javascripts/backbone/templates/habits/habit.jst.ejs
@@ -1,27 +1,24 @@
-<li id="habit_<%= id %>" class="habit habit-type-<%= habit_type %> <!-- TODO score_color -->">
+<!-- Habits -->
+<% if (habit_type==1) { %>
+  <a href="#" class="vote-up">+</a>
+  <a href="#" class="vote-down">-</a>
+  <%= name %>
+<% } else { %>
   
-  <!-- Habits -->
-  <% if (habit_type==1) { %>
-    <a href="#" class="vote-up">+</a>
-    <a href="#" class="vote-down">-</a>
-    <%= name %>
+  <!-- Daily & Todos -->
+  <% if (done) { %>
+    <a href="#" class="vote-down">[X]</a>
+    <strike><%= name %></strike>
   <% } else { %>
-    
-    <!-- Daily & Todos -->
-    <% if (done) { %>
-      <a href="#" class="vote-down">[X]</a>
-      <strike><%= name %></strike>
-    <% } else { %>
-      <a href="#" class="vote-up">[ ]</a>
-      <%= name %>
-    <% } %>
+    <a href="#" class="vote-up">[ ]</a>
+    <%= name %>
   <% } %>
-  <div class='edit'>
-    <% if (notes) { %>
-      <!-- TODO image_tag('comment.png', :class=>'comment') -->
-      <img src='/images/comment.png' class="comment" />
-      <div class='qtip'><%= notes %></div>
-    <% } %>
-    <a href="#/<%= id %>/edit">Edit</a>
-  </div>
-</li>
+<% } %>
+<div class='edit'>
+  <% if (notes) { %>
+    <!-- TODO image_tag('comment.png', :class=>'comment') -->
+    <img src='/images/comment.png' class="comment" />
+    <div class='qtip'><%= notes %></div>
+  <% } %>
+  <a href="#/<%= id %>/edit">Edit</a>
+</div>
diff --git a/app/assets/javascripts/backbone/views/habits/habit_view.js.coffee b/app/assets/javascripts/backbone/views/habits/habit_view.js.coffee
index c79f7ffe6d..f2ba5ca970 100644
--- a/app/assets/javascripts/backbone/views/habits/habit_view.js.coffee
+++ b/app/assets/javascripts/backbone/views/habits/habit_view.js.coffee
@@ -8,8 +8,6 @@ class HabitTracker.Views.Habits.HabitView extends Backbone.View
     "click .vote-up" : "voteUp"
     "click .vote-down" : "voteDown"
 
-  tagName: "li"
-  
   destroy: () ->
     @model.destroy()
     this.remove()
@@ -18,14 +16,30 @@ class HabitTracker.Views.Habits.HabitView extends Backbone.View
   voteUp: ->
     @model.vote("up")
     @trigger("reset")
-    # console.log($(@el).parent().sibling('#habits-todos-done'))
-    # if @model.isRemainingTodo and $(@el).parent().id=="habits-remaining-todos"
-      # $(@el).parent().sibling('#habits-done-todos').append(this)
 
   voteDown: ->
     @model.vote("down")
 
+  tagName: "li"
+  
+  # why is @model not available in this function? having to pass it in like this
+  dynamicClass= (model) ->
+    output = "habit habit-type-#{model.get('habit_type')}"
+    if model.get("done") then output += " done"
+    score = model.get("score")
+    switch
+      when score<-8 then output += ' color-red'
+      when score>=-8 and score<-5 then output += ' color-pink'
+      when score>=-5 and score<-1 then output += ' color-orange' 
+      when score>=-1 and score<1 then output += ' color-yellow'
+      when score>=1 and score<5 then output += ' color-green' 
+      when score>=5 and score<10 then output += ' color-light-blue' 
+      when score>=10 then output += ' color-blue'
+    return output
+    
   render: ->
+    $(@el).attr('id', "habit_#{@model.get('id')}")
+    $(@el).attr('class', dynamicClass(@model))
     $(@el).html(@template(@model.toJSON() ))
     
     @$(".comment").qtip content: