diff --git a/server/documents/elements/list.html.eco b/server/documents/elements/list.html.eco
old mode 100644
new mode 100755
index e257bb8b6..f41353c18
--- a/server/documents/elements/list.html.eco
+++ b/server/documents/elements/list.html.eco
@@ -11,7 +11,7 @@ type        : 'UI Element'
 
 themes      : ['Default']
 ---
-<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/views/list.less" />
+<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/list.less" />
 
 <%- @partial('header') %>
 <div class="main container">
@@ -27,72 +27,70 @@ themes      : ['Default']
   <h2 class="ui dividing header">Types</h2>
   <div class="example">
     <h4 class="ui header">List</h4>
-    <p>A simple list</p>
+    <p>A list</p>
     <div class="ui list">
       <div class="item">Apples</div>
       <div class="item">Pears</div>
       <div class="item">Oranges</div>
     </div>
   </div>
-  <div class="example">
-    <h4 class="ui header">List</h4>
-    <p>A list using all optional content types</p>
+  <div class="another example">
     <div class="ui list">
       <div class="item">
-        <img class="ui top aligned avatar image" src="/images/demo/avatar2.jpg">
+        <img class="ui top aligned avatar image" src="/images/avatar/small/daniel.jpg">
         <div class="content">
-          <div class="header">Schnoodle</div>
-          Your new dog
+          <div class="header">Daniel Louise</div>
+          Friends since 1992
           <div class="list">
             <div class="item">
-              <i class="right triangle icon"></i>
+              <i class="top aligned right triangle icon"></i>
               <div class="content">
-                <a class="header">Thanks for being my owner</a>
-                <div class="description">Im so glad you chose to bring me home from the shelter...</div>
+                <a class="header">Hey man</a>
+                <div class="description">Hey man so I forgot to send you an invite to my party, but its this saturday...</div>
               </div>
             </div>
             <div class="item">
-              <i class="right triangle icon"></i>
+              <i class="top aligned right triangle icon"></i>
               <div class="content">
-                <a class="header">What a walk</a>
+                <a class="header">What a day</a>
                 <div class="description">Man i am so tired that walk today really was too far...</div>
               </div>
             </div>
             <div class="item">
-              <i class="right triangle icon"></i>
+              <i class="top aligned right triangle icon"></i>
               <div class="content">
-                <a class="header">Sorry about your old dog</a>
-                <div class="description">Is this your address? I'm getting dropped off from the SPCA...</div>
+                <a class="header">How does polar bear</a>
+                <div class="description">Have you ever wondered? How polar bear know what apple is...</div>
               </div>
             </div>
           </div>
         </div>
       </div>
       <div class="item">
-        <img class="ui top aligned avatar image" src="/images/demo/avatar3.jpg">
+        <img class="ui top aligned avatar image" src="/images/avatar/small/steve.jpg">
         <div class="content">
-          <div class="header">Ragamuffin</div>
-          Your old dog.
+          <div class="header">Steve Jobes</div>
+          Work acquaintance from Apple
           <div class="list">
             <div class="item">
-              <i class="right triangle icon"></i>
+              <i class="top aligned right triangle icon"></i>
               <div class="content">
-                <a class="header">Was on a walk today</a>
-                <div class="description">Here's a picture of me on the farm with a cow...</div>
+                <a class="header">Inspirational!</a>
+                <div class="description">Check out this amazing TED video that I did a couple months ago...</div>
               </div>
             </div>
             <div class="item">
-              <i class="right triangle icon"></i>
+              <i class="top aligned right triangle icon"></i>
               <div class="content">
                 <a class="header">Ruff Ruff</a>
-                <div class="description">I know i usually message you in english but i wanted to see how your dog language was progressing...</div>
+                <div class="description">Have you ever tried animal meditation? Today I spent 30 minutes as a dog...</div>
               </div>
             </div>
             <div class="item">
-              <i class="right triangle icon"></i>
+              <i class="top aligned right triangle icon"></i>
               <div class="content">
                 <a class="header">Reaching Out</a>
-                <div class="description">Hey its your old dog, been a while since you sent me to the farm...</div>
+                <div class="description">Hey there's a new role at Apple you might be great for...</div>
               </div>
             </div>
           </div>
@@ -105,29 +103,32 @@ themes      : ['Default']
     <h4 class="ui header">Bulleted</h4>
     <p>A list can mark items with a bullet</p>
     <div class="ui bulleted list">
-      <div class="item">Cats</div>
-      <div class="item">Horses</div>
-      <div class="item">Dogs
+      <a class="item">Gaining Access</a>
+      <a class="item">Inviting Friends</a>
+      <div class="item">
+        <a>Benefits</a>
         <div class="list">
-          <div class="item">Labradoodles</div>
-          <div class="item">Shiba Inu</div>
-          <div class="item">Mastiff</div>
+          <a class="item">Use Anywhere</a>
+          <a class="item">Rebates</a>
+          <a class="item">Discounts</a>
         </div>
       </div>
+      <a class="item">Warranty</a>
     </div>
   </div>
   <div class="another example">
     <div class="ignored ui info message">For convenience, a simple bulleted list can also use <code>ul</code> tag.</div>
     <ul class="ui list">
-      <li>Cats</li>
-      <li>Horses</li>
-      <li>Dogs</li>
+      <li>Gaining Access</li>
+      <li>Inviting Friends</li>
+      <li>Benefits</li>
         <ul>
-          <li>Labradoodles</li>
-          <li>Shiba Inu</li>
-          <li>Mastiff</li>
+          <li>Use Anywhere</li>
+          <li>Rebates</li>
+          <li>Discounts</li>
         </ul>
       </li>
+      <li>Warranty</li>
     </ul>
   </div>
 
@@ -135,30 +136,32 @@ themes      : ['Default']
     <h4 class="ui header">Ordered</h4>
     <p>A list can be ordered numerically</p>
     <div class="ui ordered list">
-      <div class="item">Getting Started</div>
-      <div class="item">Introduction</div>
-      <div class="item">Languages
+      <a class="item">Getting Started</a>
+      <a class="item">Introduction</a>
+      <div class="item">
+        <a>Languages</a>
         <div class="list">
-          <div class="item">HTML</div>
-          <div class="item">Javascript</div>
-          <div class="item">CSS</div>
+          <a class="item">HTML</a>
+          <a class="item">Javascript</a>
+          <a class="item">CSS</a>
         </div>
       </div>
-      <div class="item">Review</div>
+      <a class="item">Review</a>
     </div>
   </div>
   <div class="another example">
     <div class="ignored ui info message">An ordered list can also use the <code>ol</code> tag</div>
     <ol class="ui list">
-      <li>Cats</li>
-      <li>Horses</li>
-      <li>Dogs</li>
+      <li>Signing Up</li>
+      <li>User Benefits</li>
+      <li>User Types
         <ol>
-          <li>Labradoodles</li>
-          <li>Shiba Inu</li>
-          <li>Mastiff</li>
+          <li>Admin</li>
+          <li>Power User</li>
+          <li>Regular User</li>
         </ol>
       </li>
+      <li>Deleting Your Account</li>
     </ol>
   </div>
 
@@ -166,7 +169,7 @@ themes      : ['Default']
     <h4 class="ui header">Link</h4>
     <p>A link list is specially formatted for page links</p>
     <div class="ui link list">
-      <a class="item">Home</a>
+      <div class="active item">Home</div>
       <a class="item">About</a>
       <a class="item">Jobs</a>
       <a class="item">Team</a>
@@ -178,29 +181,25 @@ themes      : ['Default']
   <div class="example">
     <h4 class="ui header">Icon</h4>
     <p>A list item can contain an icon</p>
-    <div class="ui list">
-      <a class="item">
-        <i class="help icon"></i>
-        An icon immediately inside an item sits inline this content will sit under the icon if there is a line break
-      </a>
-    </div>
-  </div>
-  <div class="another example">
     <div class="ui list">
       <a class="item">
         <i class="help icon"></i>
         <div class="content">
-          <div class="header">This is a floated icon</div>
+          <div class="header">Floated Icon</div>
           <div class="description">This text will always have a left margin to make sure it sits alongside your icon</div>
         </div>
       </a>
       <a class="item">
         <i class="top aligned right triangle icon"></i>
         <div class="content">
-          <div class="header">Floated Icon Alignment</div>
+          <div class="header">Icon Alignment</div>
           <div class="description">Floated icons are, by default, middle aligned. To have an icon top aligned try this example.</div>
         </div>
       </a>
+      <a class="item">
+        <i class="help icon"></i>
+        An icon immediately inside an item sits inline this content will sit under the icon if there is a line break
+      </a>
     </div>
   </div>
 
@@ -210,43 +209,47 @@ themes      : ['Default']
     <div class="ui list">
       <div class="item">
         <div class="ui avatar image">
-          <img src="/images/demo/avatar2.jpg">
+          <img src="/images/avatar/small/daniel.jpg">
         </div>
         <div class="content">
-          Twin 1
+          <a class="header">Daniel Louise</a>
+          <div class="description">Last seen watching <a><b>Arrested Development</b></a> just now.</div>
         </div>
       </div>
       <div class="item">
         <div class="ui avatar image">
-          <img src="/images/demo/avatar2.jpg">
+          <img src="/images/avatar/small/stevie.jpg">
         </div>
         <div class="content">
-          Twin 2
+          <a class="header">Stevie Feliciano</a>
+          <div class="description">Last seen watching <a><b>Bob's Burgers</b></a> 10 hours ago.</div>
         </div>
       </div>
       <div class="item">
         <div class="ui avatar image">
-          <img src="/images/demo/avatar2.jpg">
+          <img src="/images/avatar/small/elliot.jpg">
         </div>
         <div class="content">
-          Twin 3
+          <a class="header">Elliot Fu</a>
+          <div class="description">Last seen watching <a><b>The Godfather Part 2</b></a> yesterday.</div>
         </div>
       </div>
       <div class="item">
         <div class="ui avatar image">
-          <img src="/images/demo/avatar2.jpg">
+          <img src="/images/avatar/small/jenny.jpg">
         </div>
         <div class="content">
-          Twin 4
+          <a class="header">Jenny Hess</a>
+          <div class="description">Last seen watching <a><b>Twin Peaks</b></a> 3 days ago.</div>
         </div>
       </div>
       <div class="item">
         <div class="ui top aligned avatar image">
-          <img src="/images/demo/avatar2.jpg">
+          <img src="/images/avatar/small/veronika.jpg">
         </div>
         <div class="content">
-          <div class="header">Twin 5</div>
-          <div class="description">Twin 5 has a long description and requires a different vertical align to not look awkwardly aligned</div>
+          <a class="header">Veronika Ossi</a>
+          <div class="description">Has not watched anything recently</div>
         </div>
       </div>
     </div>
@@ -254,12 +257,15 @@ themes      : ['Default']
 
   <div class="example">
     <h4 class="ui header">Link</h4>
-    <p>A list can contain items that link</p>
+    <p>A list can contain links</p>
     <div class="ui list">
       <a class="item">What is a FAQ?</a>
-      <a class="item">How does one go about reading answers to questions in a FAQ</a>
-      <a class="item">How do you close a web browser?</a>
-      <a class="item">What is the most popular FAQ question?</a>
+      <div class="item">
+        <a class="header">Learn More</a>
+        <div class="description">
+          Learn more about this site on <a>our FAQ page</a>.
+        </div>
+      </div>
     </div>
   </div>
 
@@ -326,17 +332,17 @@ themes      : ['Default']
     <p>Any element inside a list can be floated left or right</p>
     <div class="ui divided list">
       <div class="item">
-        <div class="right floated tiny teal ui button">View Listing</div>
-        <img class="ui avatar image" src="/images/demo/avatar2.jpg">
+        <div class="right floated basic ui button">Add</div>
+        <img class="ui avatar image" src="/images/avatar/small/justen.jpg">
         <div class="content">
-          <div class="header">New York Dog Fair</div>
+          <div class="header">Justen Kitsune</div>
         </div>
       </div>
       <div class="item">
-        <div class="right floated tiny teal ui button">View Listing</div>
-        <img class="ui avatar image" src="/images/demo/avatar3.jpg">
+        <div class="right floated basic ui button">Add</div>
+        <img class="ui avatar image" src="/images/avatar/small/joe.jpg">
         <div class="content">
-          <div class="header">Dog Appreciation Day</div>
+          <div class="header">Joe Henderson</div>
         </div>
       </div>
     </div>
@@ -350,24 +356,24 @@ themes      : ['Default']
     <p>A list can be formatted horizontally</p>
     <div class="ui horizontal list">
       <div class="item">
-        <img class="ui avatar image" src="/images/demo/avatar.jpg">
+        <img class="ui avatar image" src="/images/avatar/small/tom.jpg">
         <div class="content">
-          <div class="header">Snickerdoodle</div>
-          An excellent companion
+          <div class="header">Tom</div>
+          Top Contributor
         </div>
       </div>
       <div class="item">
-        <img class="ui avatar image" src="/images/demo/avatar2.jpg">
+        <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
         <div class="content">
-          <div class="header">Poodle</div>
-          A poodle, its pretty basic
+          <div class="header">Christian Rocha</div>
+          Admin
         </div>
       </div>
       <div class="item">
-        <img class="ui avatar image" src="/images/demo/avatar3.jpg">
+        <img class="ui avatar image" src="/images/avatar/small/matt.jpg">
         <div class="content">
-          <div class="header">Paulo</div>
-          He's also a dog
+          <div class="header">Matt</div>
+          Top Rated User
         </div>
       </div>
     </div>
@@ -375,25 +381,42 @@ themes      : ['Default']
 
   <div class="another example">
     <div class="ui ordered horizontal list">
-      <div class="item">New York City</div>
-      <div class="item">Chicago</div>
-      <div class="item">Los Angeles</div>
-      <div class="item">San Francisco</div>
-    </div>
-  </div>
-  <div class="another example">
-    <div class="ui horizontal bulleted list">
       <div class="item">
-        Apples
+        <img class="ui avatar image" src="/images/avatar/small/tom.jpg">
+        <div class="content">
+          <div class="header">Steve Jobes</div>
+          50 Points
+        </div>
       </div>
       <div class="item">
-        Pears
+        <img class="ui avatar image" src="/images/avatar/small/stevie.jpg">
+        <div class="content">
+          <div class="header">Stevie Feliciano</div>
+          44 Points
+        </div>
       </div>
       <div class="item">
-        Oranges
+        <img class="ui avatar image" src="/images/avatar/small/jenny.jpg">
+        <div class="content">
+          <div class="header">Jenny Hess</div>
+          11 Points
+        </div>
       </div>
+    </div>
+  </div>
+  <div class="another example">
+    <div class="ui horizontal bulleted link list">
+      <a class="item">
+        Terms and Conditions
+      </a>
+      <a class="item">
+        Privacy Policy
+      </a>
+      <a class="item">
+        Contact Us
+      </a>
       <div class="item">
-        Soursop
+        Copyright 2014 Semantic UI
       </div>
     </div>
   </div>
@@ -430,24 +453,21 @@ themes      : ['Default']
     <p>A selection list formats list items as possible choices</p>
     <div class="ui selection list">
       <div class="item">
-        <img class="ui avatar image" src="/images/demo/avatar.jpg">
+        <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
         <div class="content">
-          <div class="header">Snickerdoodle</div>
-          An excellent companion
+          <div class="header">Helen</div>
         </div>
       </div>
       <div class="item">
-        <img class="ui avatar image" src="/images/demo/avatar2.jpg">
+        <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
         <div class="content">
-          <div class="header">Poodle</div>
-          A poodle, its pretty basic
+          <div class="header">Christian</div>
         </div>
       </div>
       <div class="item">
-        <img class="ui avatar image" src="/images/demo/avatar3.jpg">
+        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
         <div class="content">
-          <div class="header">Paulo</div>
-          He's also a dog
+          <div class="header">Daniel</div>
         </div>
       </div>
     </div>
@@ -460,127 +480,142 @@ themes      : ['Default']
     </div>
     <div class="ui animated list">
       <div class="item">
-        <img class="ui avatar image" src="/images/demo/avatar.jpg">
+        <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
         <div class="content">
-          <div class="header">Snickerdoodle</div>
-          An excellent companion
+          <div class="header">Helen</div>
         </div>
       </div>
       <div class="item">
-        <img class="ui avatar image" src="/images/demo/avatar2.jpg">
+        <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
         <div class="content">
-          <div class="header">Poodle</div>
-          A poodle, its pretty basic
+          <div class="header">Christian</div>
         </div>
       </div>
       <div class="item">
-        <img class="ui avatar image" src="/images/demo/avatar3.jpg">
+        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
         <div class="content">
-          <div class="header">Paulo</div>
-          He's also a dog
+          <div class="header">Daniel</div>
         </div>
       </div>
-    </div>
   </div>
 
   <div class="example">
     <h4 class="ui header">Relaxed</h4>
     <p>A list can relax its padding to provide more negative space</p>
-    <div class="ui relaxed divided list">
+
+    <div class="ui relaxed list">
       <div class="item">
-        <i class="map marker icon"></i>
+        <div class="ui avatar image">
+          <img src="/images/avatar/small/daniel.jpg">
+        </div>
         <div class="content">
-          <a class="header">New York City</a>
-          <div class="description">A lovely city</div>
+          <a class="header">Daniel Louise</a>
+          <div class="description">Last seen watching <a><b>Arrested Development</b></a> just now.</div>
         </div>
       </div>
       <div class="item">
-        <i class="map marker icon"></i>
+        <div class="ui avatar image">
+          <img src="/images/avatar/small/stevie.jpg">
+        </div>
         <div class="content">
-          <a class="header">Chicago</a>
-          <div class="description">A lovely city</div>
+          <a class="header">Stevie Feliciano</a>
+          <div class="description">Last seen watching <a><b>Bob's Burgers</b></a> 10 hours ago.</div>
         </div>
       </div>
       <div class="item">
-        <i class="map marker icon"></i>
+        <div class="ui avatar image">
+          <img src="/images/avatar/small/elliot.jpg">
+        </div>
         <div class="content">
-          <a class="header">Los Angeles</a>
-          <div class="description">A lovely city</div>
+          <a class="header">Elliot Fu</a>
+          <div class="description">Last seen watching <a><b>The Godfather Part 2</b></a> yesterday.</div>
         </div>
       </div>
     </div>
   </div>
   <div class="another example">
-    <div class="ui very relaxed divided list">
+    <div class="ui relaxed horizontal list">
       <div class="item">
-        <i class="map marker icon"></i>
+        <div class="ui avatar image">
+          <img src="/images/avatar/small/daniel.jpg">
+        </div>
         <div class="content">
-          <a class="header">New York City</a>
-          <div class="description">A lovely city</div>
+          <a class="header">Daniel Louise</a>
         </div>
       </div>
       <div class="item">
-        <i class="map marker icon"></i>
+        <div class="ui avatar image">
+          <img src="/images/avatar/small/stevie.jpg">
+        </div>
         <div class="content">
-          <a class="header">Chicago</a>
-          <div class="description">A lovely city</div>
+          <a class="header">Stevie Feliciano</a>
         </div>
       </div>
       <div class="item">
-        <i class="map marker icon"></i>
+        <div class="ui avatar image">
+          <img src="/images/avatar/small/elliot.jpg">
+        </div>
         <div class="content">
-          <a class="header">Los Angeles</a>
-          <div class="description">A lovely city</div>
+          <a class="header">Elliot Fu</a>
         </div>
       </div>
     </div>
   </div>
   <div class="another example">
-    <div class="ui relaxed horizontal divided list">
+    <div class="ui very relaxed list">
       <div class="item">
-        <i class="map marker icon"></i>
+        <div class="ui avatar image">
+          <img src="/images/avatar/small/daniel.jpg">
+        </div>
         <div class="content">
-          <a class="header">New York City</a>
-          <div class="description">A lovely city</div>
+          <a class="header">Daniel Louise</a>
+          <div class="description">Last seen watching <a><b>Arrested Development</b></a> just now.</div>
         </div>
       </div>
       <div class="item">
-        <i class="map marker icon"></i>
+        <div class="ui avatar image">
+          <img src="/images/avatar/small/stevie.jpg">
+        </div>
         <div class="content">
-          <a class="header">Chicago</a>
-          <div class="description">A lovely city</div>
+          <a class="header">Stevie Feliciano</a>
+          <div class="description">Last seen watching <a><b>Bob's Burgers</b></a> 10 hours ago.</div>
         </div>
       </div>
       <div class="item">
-        <i class="map marker icon"></i>
+        <div class="ui avatar image">
+          <img src="/images/avatar/small/elliot.jpg">
+        </div>
         <div class="content">
-          <a class="header">Los Angeles</a>
-          <div class="description">A lovely city</div>
+          <a class="header">Elliot Fu</a>
+          <div class="description">Last seen watching <a><b>The Godfather Part 2</b></a> yesterday.</div>
         </div>
       </div>
     </div>
   </div>
   <div class="another example">
-    <div class="ui very relaxed horizontal divided list">
+    <div class="ui very relaxed horizontal list">
       <div class="item">
-        <i class="map marker icon"></i>
+        <div class="ui avatar image">
+          <img src="/images/avatar/small/daniel.jpg">
+        </div>
         <div class="content">
-          <a class="header">New York City</a>
-          <div class="description">A lovely city</div>
+          <a class="header">Daniel Louise</a>
         </div>
       </div>
       <div class="item">
-        <i class="map marker icon"></i>
+        <div class="ui avatar image">
+          <img src="/images/avatar/small/stevie.jpg">
+        </div>
         <div class="content">
-          <a class="header">Chicago</a>
-          <div class="description">A lovely city</div>
+          <a class="header">Stevie Feliciano</a>
         </div>
       </div>
       <div class="item">
-        <i class="map marker icon"></i>
+        <div class="ui avatar image">
+          <img src="/images/avatar/small/elliot.jpg">
+        </div>
         <div class="content">
-          <a class="header">Los Angeles</a>
-          <div class="description">A lovely city</div>
+          <a class="header">Elliot Fu</a>
         </div>
       </div>
     </div>
@@ -591,24 +626,27 @@ themes      : ['Default']
     <p>A list can show divisions between content</p>
     <div class="ui divided list">
       <div class="item">
-        <img class="ui avatar image" src="/images/demo/avatar.jpg">
+        <div class="ui avatar image">
+          <img src="/images/avatar/small/daniel.jpg">
+        </div>
         <div class="content">
-          <div class="header">Snickerdoodle</div>
-          An excellent companion
+          <a class="header">Daniel Louise</a>
         </div>
       </div>
       <div class="item">
-        <img class="ui avatar image" src="/images/demo/avatar2.jpg">
+        <div class="ui avatar image">
+          <img src="/images/avatar/small/stevie.jpg">
+        </div>
         <div class="content">
-          <div class="header">Poodle</div>
-          A poodle, its pretty basic
+          <a class="header">Stevie Feliciano</a>
         </div>
       </div>
       <div class="item">
-        <img class="ui avatar image" src="/images/demo/avatar3.jpg">
+        <div class="ui avatar image">
+          <img src="/images/avatar/small/elliot.jpg">
+        </div>
         <div class="content">
-          <div class="header">Paulo</div>
-          He's also a dog
+          <a class="header">Elliot Fu</a>
         </div>
       </div>
     </div>
@@ -640,21 +678,21 @@ themes      : ['Default']
     <p>A list can divide its items into cells</p>
     <div class="ui celled list">
       <div class="item">
-        <img class="ui avatar image" src="/images/demo/avatar.jpg">
+        <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
         <div class="content">
           <div class="header">Snickerdoodle</div>
           An excellent companion
         </div>
       </div>
       <div class="item">
-        <img class="ui avatar image" src="/images/demo/avatar2.jpg">
+        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
         <div class="content">
           <div class="header">Poodle</div>
           A poodle, its pretty basic
         </div>
       </div>
       <div class="item">
-        <img class="ui avatar image" src="/images/demo/avatar3.jpg">
+        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
         <div class="content">
           <div class="header">Paulo</div>
           He's also a dog
@@ -686,128 +724,155 @@ themes      : ['Default']
   <div class="example">
     <h4 class="ui header">Sizes</h4>
     <p>A list can vary in size</p>
-    <div class="ui mini bulleted horizontal list">
+    <div class="ui mini horizontal divided list">
       <div class="item">
-        Apples
+        <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
+        <div class="content">
+          <a class="header">Helen</a>
+        </div>
       </div>
       <div class="item">
-        Oranges
+        <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
+        <div class="content">
+          <a class="header">Christian</a>
+        </div>
       </div>
       <div class="item">
-        Pinapples
+        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
+        <div class="content">
+          <a class="header">Daniel</a>
+        </div>
       </div>
     </div>
   </div>
   <div class="another example">
-    <div class="ui tiny bulleted horizontal list">
+    <div class="ui tiny horizontal list">
       <div class="item">
-        Apples
+        <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
+        <div class="content">
+          <a class="header">Helen</a>
+        </div>
       </div>
       <div class="item">
-        Oranges
+        <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
+        <div class="content">
+          <a class="header">Christian</a>
+        </div>
       </div>
       <div class="item">
-        Pinapples
+        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
+        <div class="content">
+          <a class="header">Daniel</a>
+        </div>
       </div>
     </div>
   </div>
   <div class="another example">
-    <div class="ui small bulleted horizontal list">
+    <div class="ui small horizontal list">
       <div class="item">
-        Apples
+        <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
+        <div class="content">
+          <a class="header">Helen</a>
+        </div>
       </div>
       <div class="item">
-        Oranges
+        <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
+        <div class="content">
+          <a class="header">Christian</a>
+        </div>
       </div>
       <div class="item">
-        Pinapples
+        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
+        <div class="content">
+          <a class="header">Daniel</a>
+        </div>
       </div>
     </div>
   </div>
   <div class="another example">
-    <div class="ui large list">
+    <div class="ui large horizontal divided list">
       <div class="item">
-        <i class="mail outline icon"></i>
+        <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
         <div class="content">
-          Thanks for being my owner
+          <a class="header">Helen</a>
         </div>
       </div>
       <div class="item">
-        <i class="mail outline icon"></i>
+        <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
         <div class="content">
-          What a walk
+          <a class="header">Christian</a>
         </div>
       </div>
       <div class="item">
-        <i class="map icon"></i>
+        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
         <div class="content">
-          Sorry about your old dog
+          <a class="header">Daniel</a>
         </div>
       </div>
     </div>
   </div>
   <div class="another example">
-    <div class="ui big list">
+    <div class="ui big horizontal divided list">
       <div class="item">
-        <i class="mail outline icon"></i>
+        <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
         <div class="content">
-          Thanks for being my owner
+          <a class="header">Helen</a>
         </div>
       </div>
       <div class="item">
-        <i class="mail outline icon"></i>
+        <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
         <div class="content">
-          What a walk
+          <a class="header">Christian</a>
         </div>
       </div>
       <div class="item">
-        <i class="map icon"></i>
+        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
         <div class="content">
-          Sorry about your old dog
+          <a class="header">Daniel</a>
         </div>
       </div>
     </div>
   </div>
   <div class="another example">
-    <div class="ui huge list">
+    <div class="ui huge horizontal divided list">
       <div class="item">
-        <i class="mail outline icon"></i>
+        <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
         <div class="content">
-          Thanks for being my owner
+          <a class="header">Helen</a>
         </div>
       </div>
       <div class="item">
-        <i class="mail outline icon"></i>
+        <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
         <div class="content">
-          What a walk
+          <a class="header">Christian</a>
         </div>
       </div>
       <div class="item">
-        <i class="map icon"></i>
+        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
         <div class="content">
-          Sorry about your old dog
+          <a class="header">Daniel</a>
         </div>
       </div>
     </div>
   </div>
   <div class="another example">
-    <div class="ui massive list">
+    <div class="ui massive horizontal divided list">
       <div class="item">
-        <i class="mail outline icon"></i>
+        <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
         <div class="content">
-          Thanks for being my owner
+          <a class="header">Helen</a>
         </div>
       </div>
       <div class="item">
-        <i class="mail outline icon"></i>
+        <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
         <div class="content">
-          What a walk
+          <a class="header">Christian</a>
         </div>
       </div>
       <div class="item">
-        <i class="map icon"></i>
+        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
         <div class="content">
-          Sorry about your old dog
+          <a class="header">Daniel</a>
         </div>
       </div>
     </div>
diff --git a/server/layouts/default.html.eco b/server/layouts/default.html.eco
index 5c4721bb7..84d650465 100755
--- a/server/layouts/default.html.eco
+++ b/server/layouts/default.html.eco
@@ -42,6 +42,7 @@
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/image.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/input.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/label.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/list.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/loader.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/reveal.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/progress.css">
@@ -57,7 +58,6 @@
 
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/views/card.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/views/comment.css">
-  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/views/list.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/views/feed.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/views/item.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/views/statistic.css">
diff --git a/src/definitions/elements/list.less b/src/definitions/elements/list.less
index 03e35aef5..ab9a0ff5d 100755
--- a/src/definitions/elements/list.less
+++ b/src/definitions/elements/list.less
@@ -216,7 +216,8 @@ ol.ui.list ol,
   font-size: 1rem;
 }
 .ui.horizontal.list > .item:first-child {
-  margin-left: 0em;
+  margin-left: 0em !important;
+  padding-left: 0em !important;
 }
 .ui.horizontal.list .list {
   padding-left: 0em;
@@ -290,7 +291,7 @@ ol.ui.list ol,
 .ui.link.list .item a:active {
   color:@linkListItemDownColor;
 }
-.ui.link.list a.active.item,
+.ui.link.list .active.item,
 .ui.link.list .active.item a {
   color: @linkListItemActiveColor;
 }
@@ -404,6 +405,7 @@ ul.ui.list li:before,
   left: @bulletOffset;
   content: @bulletCharacter;
   opacity: @bulletOpacity;
+  color: @bulletColor;
   vertical-align: @bulletVerticalAlign;
 }
 
@@ -458,6 +460,7 @@ ol.ui.list li:before,
   counter-increment: @orderedCountName;
   content: @orderedCountContent;
   text-align: @orderedCountTextAlign;
+  color: @orderedCountColor;
   vertical-align: @orderedCountVerticalAlign;
   opacity: @orderedCountOpacity;
 }
@@ -554,9 +557,7 @@ ol.ui.horizontal.list li:before,
 }
 .ui.horizontal.divided.list > .item:first-child {
   border-left: none;
-  padding-left: 0em;
 }
-
 /* Inverted */
 .ui.divided.inverted.list > .item,
 .ui.divided.inverted.list > .list,
diff --git a/src/themes/packages/default/elements/list.variables b/src/themes/packages/default/elements/list.variables
old mode 100644
new mode 100755
index bb97432d4..6491b6c71
--- a/src/themes/packages/default/elements/list.variables
+++ b/src/themes/packages/default/elements/list.variables
@@ -15,8 +15,7 @@
 @horizontalPadding: 0em;
 
 /* Sub List */
-@childListDistance: 0.5em;
-@childListPadding: @childListDistance 0em 0em 0em;
+@childListPadding: 0.75em 0em 0.25em 0.5em;
 @childListIndent: 1em;
 
 /* List Item */
@@ -135,6 +134,7 @@
 
 @bulletOpacity: 1;
 @bulletCharacter: '•';
+@bulletColor: @textColor;
 @bulletVerticalAlign: top;
 @bulletChildDistance: @bulletDistance;
 
@@ -145,10 +145,11 @@
 /* Ordered List */
 @orderedCountName: ordered;
 @orderedCountContent: counters(ordered, ".") " ";
+@orderedCountColor: @textColor;
 @orderedCountDistance: 1.25rem;
-@orderedCountOpacity: 0.6;
+@orderedCountOpacity: 0.8;
 @orderedCountTextAlign: right;
-@orderedCountVerticalAlign: top;
+@orderedCountVerticalAlign: middle;
 
 @orderedChildCountDistance: 2em;
 @orderedChildCountOffset: -2em;
diff --git a/src/themes/packages/default/globals/site.variables b/src/themes/packages/default/globals/site.variables
index a4d5f6737..e8aac953d 100755
--- a/src/themes/packages/default/globals/site.variables
+++ b/src/themes/packages/default/globals/site.variables
@@ -13,8 +13,8 @@
        Fonts
 --------------------*/
 
-@headerFont    : "Helvetica Neue", Arial, Helvetica, sans-serif;
-@pageFont      : "Helvetica Neue", Arial, Helvetica, sans-serif;
+@headerFont    : "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@pageFont      : "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
 @fontSmoothing : antialiased;
 
 /*-------------------