diff --git a/www/_includes/nav-modules.html b/www/_includes/nav-modules.html
index 95d26c70..c7f60fb0 100644
--- a/www/_includes/nav-modules.html
+++ b/www/_includes/nav-modules.html
@@ -28,14 +28,13 @@
 	                        <li>
 	                        	<a href="{{ site.baseurl }}/modules/zoomable">Zoomable</a>
 		                        <ul class="hide-inactive">
-									<li><a href="{{ site.baseurl }}/modules/zoomable/#using-mobify-zoomablejs">Initialize</a></li>		                        
+			                        <li><a href="{{ site.baseurl }}/modules/zoomable-examples">Examples</a></li>
 			                        <li><a href="{{ site.baseurl }}/modules/zoomable/#methods">Methods</a></li>
 			                        <li><a href="{{ site.baseurl }}/modules/zoomable/#configuration">Configuration</a></li>
 			                        <li><a href="{{ site.baseurl }}/modules/zoomable/#classes">Classes</a></li>
 			                        <li><a href="{{ site.baseurl }}/modules/zoomable/#default-styles">Default Styles</a></li>
 			                        <li><a href="{{ site.baseurl }}/modules/zoomable/#events">Events</a></li>
 			                        <li><a href="{{ site.baseurl }}/modules/zoomable/#limitations">Limitations</a></li>
-			                        <li><a href="{{ site.baseurl }}/modules/zoomable-examples">Examples</a></li>
 		                        </ul>
 		                </li>
 	                </ul>
diff --git a/www/modules/accordion-examples.md b/www/modules/accordion-examples.md
index 5b06c4bd..21fb4608 100644
--- a/www/modules/accordion-examples.md
+++ b/www/modules/accordion-examples.md
@@ -4,7 +4,7 @@ title: Mobify.js Accordion Examples
 ---
 
 <link rel="stylesheet" href="{{ site.baseurl }}/static/examples/css/accordion.css">
-<link rel="stylesheet" href="{{ site.baseurl }}/static/examples/css/accordion-controls.css">
+<link rel="stylesheet" href="{{ site.baseurl }}/static/examples/css/accordion-style.css">
 
 # Accordion Examples
 
@@ -12,42 +12,80 @@ title: Mobify.js Accordion Examples
 <h2>Basic Accordion</h2>
 <ul class="m-accordion">
     <li class="m-item">
-        <h3 class="header">
-            <a>Tab1</a>
+        <h3 class="m-header">
+            <a>Food Trucks</a>
         </h3>
-        <div class="content">
-            <div class="inner-content">
-                <h2>Content 1</h2>
-                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui icia deserunt mollit anim id est laborum.</p>
+        <div class="m-content">
+            <div class="m-inner-content">
+                <h2>Put a bird on it</h2>
+                <p>Pickled keytar ethnic flexitarian, vegan ethical sartorial 8-bit yr williamsburg. Flexitarian typewriter viral, wolf banh mi gastropub letterpress street art mcsweeney's raw denim kogi semiotics blog.</p>
             </div>
         </div>
     </li>
     <li class="m-item">
-        <h3 class="header">
-            <a>Tab2</a>
+        <h3 class="m-header">
+            <a>PBR</a>
         </h3>
-        <div class="content">
-            <div class="inner-content">
-                <h2>Content 2</h2>
-                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
+        <div class="m-content">
+            <div class="m-inner-content">
+                <h2>Helvetica</h2>
+                <p> Williamsburg quinoa sartorial, tattooed VHS food truck polaroid authentic gentrify Austin readymade vinyl dreamcatcher freegan seitan.</p> 
             </div>
         </div>
     </li>
     <li class="m-item">
-        <h3 class="header">
-            <a>Tab3</a>
+        <h3 class="m-header">
+            <a>Fixies</a>
         </h3>
-        <div class="content">
-            <div class="inner-content">
-                <h2>Content 3</h2>
-                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui icia deserunt mollit anim id est laborum.</p>
-                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui icia deserunt mollit anim id est laborum.</p>
+        <div class="m-content">
+            <div class="m-inner-content">
+                <h2>You probably haven't heard of them</h2>
+                <p>Fanny pack seitan PBR synth, kale chips master cleanse helvetica high life artisan you probably haven't heard of them. Craft beer salvia high life, art party small batch retro pickled butcher scenester kale chips brooklyn 8-bit vinyl.</p>
+                <p>Trust fund mustache typewriter, portland artisan irony seitan master cleanse biodiesel ethnic banh mi bushwick squid semiotics truffaut. Marfa vinyl mumblecore, selvage beard kale chips gentrify four loko gluten-free messenger bag cliche vice forage.</p>
             </div>
         </div>
     </li>
 </ul>
 
 
+
+<h2>Basic Accordion with Images</h2>
+<ul class="m-accordion m-accordion-images">
+    <li class="m-item">
+        <h3 class="m-header">
+            <a>Portland</a>
+        </h3>
+        <div class="m-content">
+            <div class="m-inner-content">
+                <p>Pickled keytar ethnic flexitarian, vegan ethical sartorial 8-bit yr williamsburg. Flexitarian typewriter viral, wolf banh mi gastropub letterpress street art mcsweeney's raw denim kogi semiotics blog.</p>
+            </div>
+        </div>
+    </li>
+    <li class="m-item">
+        <h3 class="m-header">
+            <a>Willamsburg</a>
+        </h3>
+        <div class="m-content">
+            <div class="m-inner-content">
+                <p> Williamsburg quinoa sartorial, tattooed VHS food truck polaroid authentic gentrify Austin readymade vinyl dreamcatcher freegan seitan.</p> 
+            </div>
+        </div>
+    </li>
+    <li class="m-item">
+        <h3 class="m-header">
+            <a>Austin</a>
+        </h3>
+        <div class="m-content">
+            <div class="m-inner-content">
+                <p>Trust fund mustache typewriter, portland artisan irony seitan master cleanse biodiesel ethnic banh mi bushwick squid semiotics truffaut. Marfa vinyl mumblecore, selvage beard kale chips gentrify four loko gluten-free messenger bag cliche vice forage.</p>
+            </div>
+        </div>
+    </li>
+</ul>
+
+
+
+
 <script src="{{ site.baseurl }}/static/examples/js/accordion.js"></script>
 <script>
     $(function() { $('.m-accordion').accordion(); });
diff --git a/www/modules/accordion.md b/www/modules/accordion.md
index b3c58270..7870c16e 100644
--- a/www/modules/accordion.md
+++ b/www/modules/accordion.md
@@ -4,7 +4,7 @@ title: Mobify.js Accordion Module
 ---
 
 <link rel="stylesheet" href="{{ site.baseurl }}/static/examples/css/accordion.css">
-<link rel="stylesheet" href="{{ site.baseurl }}/static/examples/css/accordion-controls.css">
+<link rel="stylesheet" href="{{ site.baseurl }}/static/examples/css/accordion-style.css">
 
 # Accordion
 
@@ -12,33 +12,33 @@ Try it out:
 
 <ul class="m-accordion">
     <li class="m-item">
-        <h3 class="header">
+        <h3 class="m-header">
             <a>Tab1</a>
         </h3>
-        <div class="content">
-            <div class="inner-content">
+        <div class="m-content">
+            <div class="m-inner-content">
                 <h2>Content 1</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui icia deserunt mollit anim id est laborum.</p>
             </div>
         </div>
     </li>
     <li class="m-item">
-        <h3 class="header">
+        <h3 class="m-header">
             <a>Tab2</a>
         </h3>
-        <div class="content">
-            <div class="inner-content">
+        <div class="m-content">
+            <div class="m-inner-content">
                 <h2>Content 2</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
             </div>
         </div>
     </li>
     <li class="m-item">
-        <h3 class="header">
+        <h3 class="m-header">
             <a>Tab3</a>
         </h3>
-        <div class="content">
-            <div class="inner-content">
+        <div class="m-content">
+            <div class="m-inner-content">
                 <h2>Content 3</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui icia deserunt mollit anim id est laborum.</p>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui icia deserunt mollit anim id est laborum.</p>
diff --git a/www/static/examples/css/accordion-controls.css b/www/static/examples/css/accordion-style.css
similarity index 63%
rename from www/static/examples/css/accordion-controls.css
rename to www/static/examples/css/accordion-style.css
index 5944b860..3312b3df 100644
--- a/www/static/examples/css/accordion-controls.css
+++ b/www/static/examples/css/accordion-style.css
@@ -1,12 +1,15 @@
+/* Base Style */
 .m-accordion {
     color: black;
 }
-
-.m-accordion .header {
+.m-accordion .m-header {
     height: 54px;
+    line-height: 52px;
     padding: 0 20px;
     border: solid 1px #ededed;
     border-width: 1px 0;
+    position: relative;
+    cursor: pointer;
     background: #ffffff; /* Old browsers */
     background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 100%); /* FF3.6+ */
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
@@ -14,10 +17,8 @@
     background: -o-linear-gradient(top,  #ffffff 0%,#f6f6f6 100%); /* Opera 11.10+ */
     background: -ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 100%); /* IE10+ */
     background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 100%); /* W3C */
-    line-height: 52px;
-    cursor: pointer;
 }
-    .m-accordion .header:hover, .m-accordion .header:focus {    
+    .m-accordion .m-header:hover, .m-accordion .hm-eader:focus {    
         z-index: 2;
         background: #ffffff; /* Old browsers */
         background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 100%); /* FF3.6+ */
@@ -28,7 +29,7 @@
         background: linear-gradient(to bottom,  #f6f6f6 0%,#f0f0f0 100%); /* W3C */
         border-bottom-color: #d6d6d6;
     }
-    .m-accordion .m-item:first-child .header {
+    .m-accordion .m-item:first-child .m-header {
         -webkit-border-top-left-radius: 9px;
         -webkit-border-top-right-radius: 9px;
         -moz-border-radius-topleft: 9px;
@@ -36,7 +37,7 @@
         border-top-left-radius: 9px;
         border-top-right-radius: 9px;
     }
-    .m-accordion .m-item:last-child .header, .m-accordion .m-active:last-child .inner-content {
+    .m-accordion .m-item:last-child .m-header, .m-accordion .m-active:last-child .m-inner-content {
         -webkit-border-bottom-left-radius: 9px;
         -webkit-border-bottom-right-radius: 9px;
         -moz-border-radius-bottomleft: 9px;
@@ -44,24 +45,48 @@
         border-bottom-left-radius: 9px;
         border-bottom-right-radius: 9px;
     }
-    .m-accordion .m-active:last-child .header {
+    .m-accordion .m-active:last-child .m-header {
         -webkit-border-radius: 0;
         -moz-border-radius: 0;
         border-radius: 0;
     }
-
-
-.m-accordion .header a {
+.m-accordion .m-header a {
     color: black;
 }
-
-.m-accordion .inner-content {
+.m-accordion .m-inner-content {
     padding: 10px 20px;
     background: white;
 }
-
 .m-accordion h2 {
     margin: 0;
     color: black;
     text-shadow: none;
 }
+
+
+/* Accordion with Images */
+.m-accordion-images .m-header:after {
+    content : "";
+    display: block;
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    margin-top: -11px;
+    z-index: 9;
+    width: 22px;
+    height: 22px;
+    background: url(../img/accordion.png) 0 -20px no-repeat;
+}
+    .m-accordion-images .m-active .m-header:after {
+        background-position: 0 -43px;
+    }
+/* -- Retina version -- */
+@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
+    .m-accordion-images .m-header:after {
+        background-position: -11px 0;
+        background-size: 33px 43px;
+    }
+    .m-accordion-images .m-active .m-header:after {
+        background-position: -11px -22px;
+    }
+}
\ No newline at end of file
diff --git a/www/static/examples/css/accordion.css b/www/static/examples/css/accordion.css
index 6fe260f3..5f80aab8 100644
--- a/www/static/examples/css/accordion.css
+++ b/www/static/examples/css/accordion.css
@@ -5,21 +5,19 @@
     list-style: none;
     margin: 0;
 }
-
-.m-accordion .content {
-    -webkit-transition: max-height 1s ease;
-    -moz-transition: max-height 1s ease;
-    -o-transition: max-height 1s ease;
-    transition: max-height 1s ease;
+.m-accordion .m-content {
+    -webkit-transition: max-height 0.5s ease;
+    -moz-transition: max-height 0.5s ease;
+    -o-transition: max-height 0.5s ease;
+    transition: max-height 0.5s ease;
     overflow: hidden;
     max-height: 0;
 }
-
-.m-accordion .m-active .content {
+.m-accordion .m-active .cm-ontent {
     max-height: 10000px; /* IE hack */
 }
 
-.m-accordion .header {
+.m-accordion .m-header {
     z-index: 1;
     position: relative;
     margin-top: -1px;
@@ -30,6 +28,6 @@
     margin: 0;
 }
 
-.m-accordion .header > a {
+.m-accordion .m-header > a {
     pointer-events: none;   
 }
diff --git a/www/static/examples/img/accordion.png b/www/static/examples/img/accordion.png
new file mode 100644
index 00000000..522d98ee
Binary files /dev/null and b/www/static/examples/img/accordion.png differ
diff --git a/www/static/examples/js/accordion.js b/www/static/examples/js/accordion.js
index 6e175fcf..942e4911 100644
--- a/www/static/examples/js/accordion.js
+++ b/www/static/examples/js/accordion.js
@@ -124,13 +124,13 @@ Mobify.UI.Accordion = (function($, Utils) {
         function close($item) {
             $item.removeClass('m-opened');
             $item.addClass('m-closed')
-            var $content = $item.find('.content');
+            var $content = $item.find('.m-content');
             if(!Utils.events.transitionend) $item.toggleClass('m-active');
             $content.css('max-height', 0)
         };
         
         function open($item) {
-            var $content = $item.find('.content');
+            var $content = $item.find('.m-content');
             $item.toggleClass('m-active');
             $item.removeClass('m-closed');
             $item.addClass('m-opened')
@@ -180,21 +180,21 @@ Mobify.UI.Accordion = (function($, Utils) {
 
         // Open items that are hash linked
         var hash = location.hash;
-        var $hashitem = $element.find('.header a[href="'+hash+'"]');
+        var $hashitem = $element.find('.m-header a[href="'+hash+'"]');
   
         if ($hashitem.length) {
             open($hashitem.parent());
         }
 
         // bind events
-        $element.find('.header')
+        $element.find('.m-header')
             .on(Utils.events.down, down)
             .on(Utils.events.move, move)
             .on(Utils.events.up, up)
             .on('click', click);
 
         if (Utils.events.transitionend) {
-            $element.find('.content').on(Utils.events.transitionend, endTransition);
+            $element.find('.m-content').on(Utils.events.transitionend, endTransition);
         }
         
     };