diff --git a/docs/render/recipe.css b/docs/render/recipe.css
index 468a91b..4a38b04 100644
--- a/docs/render/recipe.css
+++ b/docs/render/recipe.css
@@ -3,7 +3,7 @@
 }
 
 body {
-  margin: 0 5vw;
+  margin: 0 8vw;
 }
 
 .thumbnail {
@@ -18,6 +18,10 @@ body {
   box-sizing: border-box;
 }
 
+.ingredients:hover .noun {
+/* text-decoration:underline;   */
+}
+
 img.publisher {
   max-width: 5em;
   /* margin-top: -0.5em; */
@@ -61,6 +65,10 @@ h1 {
 .ingredient.hovered {
 background-color:#f1f1f1;
 }
+
+.ingredient.hovered {
+  background-color: rgba(255, 221, 0, 0.608);
+}
 .metadata {
   display: flex;
   flex-wrap: wrap;
@@ -74,7 +82,7 @@ ul.step {
   padding-inline-start: 0;
   list-style-type:none;
 
-}
+padding: 0;margin: 0em;}
 
 .instructions:not(.numbered) .number {
   display: none;
@@ -99,11 +107,11 @@ span.number {
 
 
 li {
-  margin-bottom: 1em;
-}
+  padding: 0.25em 0.5em;
+margin-left: -0.5em;}
 li:hover {
   background-color:rgba(0,0,0,0.1);
-}
+border-radius: 2px;}
 
 .spacer {
   flex-grow: 1000;
@@ -149,21 +157,21 @@ li:hover {
 }
 
 .ingredients {
-  font-weight: 400;
-  font-size: 100%;
+  font-weight: 700;
+  font-size: 90%;
   /* padding-top: 1em; */
   flex: 0 1 35%;
-}
+/* color: rgba(0,0,0,0.8); */}
 .noun {
-  font-weight:600 ;
-}
+  font-weight: 700;
+color: rgba(0,0,0,1.0);}
 
 .instructions {
   white-space: pre-wrap;
   /* line-height: 125%; */
   /* font-size: 100%; */
   flex: 0 1 65%;
-  margin-top: -1px;
+  margin-top: -0.4em;
 }
 
 .substep {
@@ -172,11 +180,11 @@ li:hover {
 }
 .ingredient {
   padding: .25em 0em;
-  margin: 0 -1em;
+  margin: 0 0em 0 -3em;
   line-height: 1.25em;
   opacity: 0.75;
   cursor: pointer;
-  padding-left: 1em;
+  padding-left: 3em;
 }
 
 .ingredients .yield {
@@ -193,7 +201,7 @@ li:hover {
 }
 
 .ingredient.complete,
-.step.complete {
+.substep.complete {
   text-decoration: line-through;
   opacity: 0.33;
 }
@@ -216,7 +224,7 @@ li:hover {
   background-color: currentColor;
   opacity: .3;
   border:none;
-  margin: 0 0 1em 0;
+  margin: 0.25em 0;
 }
 hr {
   /* width: 100px;
diff --git a/docs/render/recipe.js b/docs/render/recipe.js
index c30b0a1..1ceb885 100644
--- a/docs/render/recipe.js
+++ b/docs/render/recipe.js
@@ -130,7 +130,7 @@ function formatTime(time) {
 }
 
 function markIngredient(e) {
-  e.target.classList.toggle("complete")
+  e.target.closest(".ingredient").classList.toggle("complete")
 }
 
 function highlightStep(e) {
@@ -138,7 +138,7 @@ function highlightStep(e) {
   //   e.target.parent.children.forEach((i,el) => {
   //     el.classList.toggle("complete", )
   //   }
-  e.target.closest(".step").classList.toggle("complete")
+  e.target.closest(".substep").classList.toggle("complete")
 
 }
 
@@ -230,7 +230,9 @@ function render() {
     let text = (instruction.text || instruction);
     if (text.startsWith("= ")) return m("h3", text.substring(2));
 
-    return m("li", { onclick: highlightStep },  m("span.number" + (step>9 ? ".big" : ""), `${step++}`), m("span.substep",{innerHTML:highlightTerms(FRACTION_MAP.replace(text.trim()), terms)}))
+    return m("li", { onclick: highlightStep }, 
+      m("span.number" + (step>9 ? ".big" : ""), `${step++}`),
+      m("span.substep",{innerHTML:highlightTerms(FRACTION_MAP.replace(text.trim()), terms)}))
   }
 
   function flattenInstructions(instruction) {