diff --git a/_layouts/recipe.html b/_layouts/recipe.html
index 15822c5d9..dba8485a7 100644
--- a/_layouts/recipe.html
+++ b/_layouts/recipe.html
@@ -2,7 +2,7 @@
 layout: default
 ---
 <div class="container" itemscope itemtype="http://schema.org/Recipe">
-  
+
 <!-- call up the image and image credit link -->
   {% for image in page.image %}
   <div class="xs-p2">
@@ -27,10 +27,10 @@ <h1 class="post-title center m1 sm-mt3" itemprop="name">{{ page.title }}</h1>
   <div class="px2 mt3 clearfix">
     <div class="sm-col-8 center mx-auto" itemprop="description">{{page.content}}</div>
   </div>
-  
+
 <!-- call up recipe and directions -->
   <div class="clearfix mt3">
-  
+
     <div class="sm-col sm-col-6 lg-col-6">
       <!-- check if it's a component-based recipe -->
       {% if page.components %}
@@ -48,38 +48,56 @@ <h4 class="blue mt0 mb2 xs-center">Ingredients</h4>
       <ul itemprop="ingredients">
         <!-- list ingredients that make up recipe -->
         {% for ingredient in page.ingredients %}
-        <li itemprop="recipeIngredient">{{ ingredient | markdownify }}</li>
+          {% if ingredient.first %}
+          <h4>{{ ingredient.first[0] }}</h4>
+          <ul itemprop="recipeIngredientGroup">
+            {% for i in ingredient.first[1] %}
+            <li itemprop="recipeIngredient">{{ i | markdownify }}</li>
+            {% endfor %}
+          </ul>
+          {% else %}
+          <li itemprop="recipeIngredient">{{ ingredient | markdownify }}</li>
+          {% endif %}
         {% endfor %}
       </ul>
       {% endif %}
     </div>
-    
+
     <div class="sm-col sm-col-6 lg-col-6">
       <h4 class="blue mt0 mb2 xs-center">Directions</h4>
       <ul itemprop="recipeInstructions">
         {% for direction in page.directions %}
-        <li>{{ direction | markdownify }}</li>
+          {% if direction.first %}
+          <h4>{{ direction.first[0] }}</h4>
+          <ul itemprop="instructionGroup">
+            {% for d in direction.first[1] %}
+            <li itemprop="instruction">{{ d | markdownify }}</li>
+            {% endfor %}
+          </ul>
+          {% else %}
+          <li itemprop="instruction">{{ direction | markdownify }}</li>
+          {% endif %}
         {% endfor %}
       </ul>
     </div>
-  
+
   </div>
 <!-- end recipe and directions -->
 
 <!-- check if it's a component-based recipe, render it -->
   {% if page.components %}
-  
+
   <div class="components bg-darken-2 p2 mt3 mb3 center">
     &darr; This is a <strong class="blue">component-based recipe</strong> (fancy talk for making the dish in pieces, then assembling). &darr;
   </div>
-  
+
   <div class="clearfix mxn2">
   {% for component in page.components %}
     <div class="sm-col sm-col-4 px2">
     {% for recipe in site.components %}
     {% if recipe.title == component %}
       <h4 class="blue center">{{recipe.title}}</h4>
-      
+
       {% for image in recipe.image %}
       <div class="image ratio bg-cover" style="background-image:url({{site.baseurl}}/images/{{ image }});">
         <img class="hide" itemprop="photo" src="{{site.baseurl}}/images/{{ image }}" />
@@ -92,30 +110,48 @@ <h4 class="blue center">{{recipe.title}}</h4>
           {% endfor %}
         {% endif %}
       {% endfor %}
-      
+
       <h4 class="blue regular xs-center">Ingredients</h4>
         <ul class="ingredients" itemprop="ingredients">
-        {% for item in recipe.ingredients %}
-        <li itemprop="ingredient">{{ item | markdownify }}</li>
-        {% endfor %}
+          {% for ingredient in recipe.ingredients %}
+            {% if ingredient.first %}
+            <h4>{{ ingredient.first[0] }}</h4>
+            <ul itemprop="recipeIngredientGroup">
+              {% for i in ingredient.first[1] %}
+              <li itemprop="recipeIngredient">{{ i | markdownify }}</li>
+              {% endfor %}
+            </ul>
+            {% else %}
+            <li itemprop="recipeIngredient">{{ ingredient | markdownify }}</li>
+            {% endif %}
+          {% endfor %}
       </ul>
-      
+
       <h4 class="blue regular xs-center">Steps</h4>
         <ul itemprop="instructions">
-        {% for item in recipe.directions %}
-        <li>{{ item | markdownify }}</li>
+        {% for direction in recipe.directions %}
+          {% if direction.first %}
+          <h4>{{ direction.first[0] }}</h4>
+          <ul itemprop="instructionGroup">
+            {% for d in direction.first[1] %}
+            <li itemprop="instruction">{{ d | markdownify }}</li>
+            {% endfor %}
+          </ul>
+          {% else %}
+          <li itemprop="instruction">{{ direction | markdownify }}</li>
+          {% endif %}
         {% endfor %}
       </ul>
-          
+
     {% endif %}
     {% endfor %}
     </div>
   {% endfor %}
   </div>
-  
+
   {% endif %}
 <!-- end components -->
-  
+
   {% for category in page.categories %}
     <p class="clearfix">Category: <span itemprop="recipeCategory">{{ category }}</span></p>
   {% endfor %}
@@ -148,5 +184,5 @@ <h4 class="blue regular xs-center">Steps</h4>
   });
 
   });
-  
-</script>
\ No newline at end of file
+
+</script>
diff --git a/css/main.scss b/css/main.scss
old mode 100755
new mode 100644