diff --git a/README.md b/README.md
index 936f34d..057754d 100644
--- a/README.md
+++ b/README.md
@@ -2,3 +2,55 @@
 Making shapes just using border-radius property. 
 
 ##[Live Demo](http://zafree.github.io/shapes/)
+
+<div id="usage">
+	<div class="col-md-4">
+		<h2>Style</h2>
+<pre>
+&lt;style&gt; 
+.red{	
+	height: 60px; 
+	width: 60px; 
+	background: red;
+} 
+.green{	
+	height: 60px; 
+	width: 60px; 
+	background: green;
+} 
+.blue{	
+	height: 60px; 
+	width: 60px; 
+	background: green;
+} 
+&lt;/style&gt; 
+</pre>
+	</div> 
+
+	<div class="col-md-4">
+		<h2>HTML</h2>
+	<pre style="padding:28px">
+	&lt;div class=&quot;red s-leaf&quot;&gt;&lt;/div&gt;
+	&lt;div class=&quot;green s-leaf&quot;&gt;&lt;/div&gt;
+	&lt;div class=&quot;blue s-leaf&quot;&gt;&lt;/div&gt;
+
+	&lt;div class=&quot;red s-leaf-2&quot;&gt;&lt;/div&gt;
+	&lt;div class=&quot;green s-leaf-2&quot;&gt;&lt;/div&gt;
+	&lt;div class=&quot;blue s-leaf-2&quot;&gt;&lt;/div&gt;
+
+	&lt;div class=&quot;red s-leaf-3&quot;&gt;&lt;/div&gt;
+	&lt;div class=&quot;green s-leaf-3&quot;&gt;&lt;/div&gt;
+	&lt;div class=&quot;blue s-leaf-3&quot;&gt;&lt;/div&gt;
+
+	&lt;div class=&quot;red s-leaf-4&quot;&gt;&lt;/div&gt;
+	&lt;div class=&quot;green s-leaf-4&quot;&gt;&lt;/div&gt;
+	&lt;div class=&quot;blue s-leaf-4&quot;&gt;&lt;/div&gt;
+	</pre>
+	</div> 
+
+
+	<div class="col-md-4">
+		<h2>View</h2>
+		<img src="https://lh5.googleusercontent.com/nHy1CheF6Bvi6oLETm2XApTvkmYpIvAntLebg7NpsZ_olkTJ1XoPb-qWyAwVwAu2VI8Eq2UfU1N_NWo=w1342-h561" alt="">
+	</div> 
+</div> 
diff --git a/index.html b/index.html
index 88ccdae..c804c95 100644
--- a/index.html
+++ b/index.html
@@ -5,38 +5,35 @@
 		<title>Shapes 2015</title>
 		<meta name="description" content="">
 		<meta name="viewport" content="width=device-width">
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.min.js"></script>
 		<link rel="shortcut icon" href="/favicon.ico">
 		<link rel="stylesheet" href="css/bootstrap.min.css" />
 		<link rel="stylesheet" href="css/bootaide.min.css" />
 		<link rel="stylesheet" href="dist/css/shapes.min.css" />
 		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 		<style>
-			.col {
-				float: left;
-				width: 20%;
-				margin-right: 0;
-				margin-left: 0;
-				
-			}
-				
 			.shape ul {
 				padding: 20px 0 10px;
 			}
 			
 			.shape li {
 				list-style: none;
-				height: 60px;
-				width: 60px;
-				background: #fff;
 				margin-bottom: 35px;
 			}
 			
 			.shape li:last-child {
 				margin-bottom: 0;
 			}
+
+			.shape li div{
+				height: 60px;
+				width: 60px;
+				background: #fff;
+				float: left;
+			}
 			
 			.shape li span {
-				margin-left: 75px;
+				margin-left: 25px;
 				line-height: 60px;
 				font-size: 16px;
 			}
@@ -44,7 +41,59 @@
 			.shape ul {
 				margin-bottom: 75px;
 			}
+			
+			/*example*/
+			.red, .green, .blue{	
+				height: 60px; 
+				width: 60px; 
+				float: left;
+				margin: 10px;
+			} 
+			.red{	
+				background: red;
+				clear: both;
+			} 			
+			.green{	
+				background: green;
+			} 
+			.blue{	
+				background: blue;
+			} 
 		</style>
+
+		<script type="text/template" id="template">
+			<%_.each(cols, function(shapes, col){%>
+			<!--col-<%=col%> starts-->
+			<div class="col-md-2">
+				<%_.each(shapes, function(shape){%>
+				<ul>
+					<li><div class="s-<%=shape%>"></div><span>s-<%=shape%></span></li>
+					<li><div class="s-<%=shape%>-2"></div><span>s-<%=shape%>-2</span></li>
+					<li><div class="s-<%=shape%>-3"></div><span>s-<%=shape%>-3</span></li>
+					<li><div class="s-<%=shape%>-4"></div><span>s-<%=shape%>-4</span></li>
+				</ul>
+				<%})%>
+			</div>
+			<!--col-<%=col%> ends-->
+			<%})%>
+		</script>
+
+		<script>
+		var template = document.getElementById('template').innerHTML;
+		var cols = [
+		  ["square", "round", "drop", "uoda", "slope"],
+		  ["screen", "egg", "leaf", "lealo", "tray"],
+		  ["lope", "rugby", "lady", "aleto", "toope"],
+		  ["flag", "kula", "bird", "hello", "curv"],
+		  ["rag", "glap", "holo", "kullo", "bucket"],
+		  ["pick", "bomb"]
+		];
+
+		window.onload = function(){
+			var html = _.template(template)({cols: cols});
+			document.getElementById("shapes").innerHTML = html;
+		};
+		</script>
 	</head>
 	<body>
 		<!--[if lt IE 10]>
@@ -55,196 +104,79 @@
 
 		<section class="p-v-xxl bg-dark lter">
 			<div class="container">
-				<div class="row shape">
+				<div class="row">
 					<h2 class="text-center m-b-xxl">Making shapes just using <span class="text-danger">border-radius</span> property</h2>
-					
-					<!--1st -->
-					<div class="col">
-						<ul>
-							<li class="s-square"><span>s-square</span></li>
-							<li class="s-square-2"><span>s-square-2</span></li>
-							<li class="s-square-3"><span>s-square-3</span></li>
-							<li class="s-square-4"><span>s-square-4</span></li>
-						</ul>
-						<ul>
-							<li class="s-screen"><span>s-screen</span></li>
-							<li class="s-screen-2"><span>s-screen-2</span></li>
-							<li class="s-screen-3"><span>s-screen-3</span></li>
-							<li class="s-screen-4"><span>s-screen-4</span></li>
-						</ul>
-						<ul>
-							<li class="s-lope"><span>s-lope</span></li>
-							<li class="s-lope-2"><span>s-lope-2</span></li>
-							<li class="s-lope-3"><span>s-lope-3</span></li>
-							<li class="s-lope-4"><span>s-lope-4</span></li>
-						</ul>
-						<ul>
-							<li class="s-flag"><span>s-flag</span></li>
-							<li class="s-flag-2"><span>s-flag-2</span></li>
-							<li class="s-flag-3"><span>s-flag-3</span></li>
-							<li class="s-flag-4"><span>s-flag-4</span></li>
-						</ul>
-						<ul>
-							<li class="s-rag"><span>s-rag</span></li>
-							<li class="s-rag-2"><span>s-rag-2</span></li>
-							<li class="s-rag-3"><span>s-rag-3</span></li>
-							<li class="s-rag-4"><span>s-rag-4</span></li>
-						</ul>
-					</div>
-					<!--/ 1st -->
-					
-					<!--2nd -->
-					<div class="col">
-						<ul>
-							<li class="s-round"><span>s-round</span></li>
-							<li class="s-round-2"><span>s-round-2</span></li>
-							<li class="s-round-3"><span>s-round-3</span></li>
-							<li class="s-round-4"><span>s-round-4</span></li>
-						</ul>
-						<ul>
-							<li class="s-egg"><span>s-egg</span></li>
-							<li class="s-egg-2"><span>s-egg-2</span></li>
-							<li class="s-egg-3"><span>s-egg-3</span></li>
-							<li class="s-egg-4"><span>s-egg-4</span></li>
-						</ul>
-						<ul>
-							<li class="s-rugby"><span>s-rugby</span></li>
-							<li class="s-rugby-2"><span>s-rugby-2</span></li>
-							<li class="s-rugby-3"><span>s-rugby-3</span></li>
-							<li class="s-rugby-4"><span>s-rugby-4</span></li>
-						</ul>
-						<ul>
-							<li class="s-kula"><span>s-kula</span></li>
-							<li class="s-kula-2"><span>s-kula-2</span></li>
-							<li class="s-kula-3"><span>s-kula-3</span></li>
-							<li class="s-kula-4"><span>s-kula-4</span></li>
-						</ul>
-						<ul>
-							<li class="s-glap"><span>s-glap</span></li>
-							<li class="s-glap-2"><span>s-glap-2</span></li>
-							<li class="s-glap-3"><span>s-glap-3</span></li>
-							<li class="s-glap-4"><span>s-glap-4</span></li>
-						</ul>
-						<ul>
-							<li class="s-pick"><span>s-pick</span></li>
-							<li class="s-pick-2"><span>s-pick-2</span></li>
-							<li class="s-pick-3"><span>s-pick-3</span></li>
-							<li class="s-pick-4"><span>s-pick-4</span></li>
-						</ul>
-						<ul>
-							<li class="s-bomb"><span>s-bomb</span></li>
-							<li class="s-bomb-2"><span>s-bomb-2</span></li>
-							<li class="s-bomb-3"><span>s-bomb-3</span></li>
-							<li class="s-bomb-4"><span>s-bomb-4</span></li>
-						</ul>			
-					</div>
-					<!--/ 2nd -->
-					
-					<!--3rd -->
-					<div class="col">
-						<ul>
-							<li class="s-drop"><span>s-drop</span></li>
-							<li class="s-drop-2"><span>s-drop-2</span></li>
-							<li class="s-drop-3"><span>s-drop-3</span></li>
-							<li class="s-drop-4"><span>s-drop-4</span></li>
-						</ul>
-						<ul>
-							<li class="s-leaf"><span>s-leaf</span></li>
-							<li class="s-leaf-2"><span>s-leaf-2</span></li>
-							<li class="s-leaf-3"><span>s-leaf-3</span></li>
-							<li class="s-leaf-4"><span>s-leaf-4</span></li>					
-						</ul>
-						<ul>
-							<li class="s-lady"><span>s-lady</span></li>
-							<li class="s-lady-2"><span>s-lady-2</span></li>
-							<li class="s-lady-3"><span>s-lady-3</span></li>
-							<li class="s-lady-4"><span>s-lady-4</span></li>
-						</ul>
-						<ul>
-							<li class="s-bird"><span>s-bird</span></li>
-							<li class="s-bird-2"><span>s-bird-2</span></li>
-							<li class="s-bird-3"><span>s-bird-3</span></li>
-							<li class="s-bird-4"><span>s-bird-4</span></li>
-						</ul>
-						<ul>
-							<li class="s-holo"><span>s-holo</span></li>
-							<li class="s-holo-2"><span>s-holo-2</span></li>
-							<li class="s-holo-3"><span>s-holo-3</span></li>
-							<li class="s-holo-4"><span>s-holo-4</span></li>
-						</ul>
-					</div>
-					<!--/ 3rd -->
-					
-					<!--4th -->
-					<div class="col">
-						<ul>
-							<li class="s-uoda"><span>s-uoda</span></li>
-							<li class="s-uoda-2"><span>s-uoda-2</span></li>
-							<li class="s-uoda-3"><span>s-uoda-3</span></li>
-							<li class="s-uoda-4"><span>s-uoda-4</span></li>
-						</ul>
-						<ul>
-							<li class="s-lealo"><span>s-lealo</span></li>
-							<li class="s-lealo-2"><span>s-lealo-2</span></li>
-							<li class="s-lealo-3"><span>s-lealo-3</span></li>
-							<li class="s-lealo-4"><span>s-lealo-4</span></li>
-						</ul>
-						<ul>
-							<li class="s-aleto"><span>s-aleto</span></li>
-							<li class="s-aleto-2"><span>s-aleto-2</span></li>
-							<li class="s-aleto-3"><span>s-aleto-3</span></li>
-							<li class="s-aleto-4"><span>s-aleto-4</span></li>
-						</ul>
-						<ul>
-							<li class="s-hello"><span>s-hello</span></li>
-							<li class="s-hello-2"><span>s-hello-2</span></li>
-							<li class="s-hello-3"><span>s-hello-3</span></li>
-							<li class="s-hello-4"><span>s-hello-4</span></li>
-						</ul>
-						<ul>
-							<li class="s-kullo"><span>s-kullo</span></li>
-							<li class="s-kullo-2"><span>s-kullo-2</span></li>
-							<li class="s-kullo-3"><span>s-kullo-3</span></li>
-							<li class="s-kullo-4"><span>s-kullo-4</span></li>
-						</ul>
-					</div>
-					<!--/ 4th -->
-					
-					<!--5th -->
-					<div class="col">
-						<ul>
-							<li class="s-slope"><span>s-slope</span></li>
-							<li class="s-slope-2"><span>s-slope-2</span></li>
-							<li class="s-slope-3"><span>s-slope-3</span></li>
-							<li class="s-slope-4"><span>s-slope-4</span></li>
-						</ul>
-						<ul>
-							<li class="s-tray"><span>s-tray</span></li>
-							<li class="s-tray-2"><span>s-tray-2</span></li>
-							<li class="s-tray-3"><span>s-tray-3</span></li>
-							<li class="s-tray-4"><span>s-tray-4</span></li>
-						</ul>
-						<ul>
-							<li class="s-toope"><span>s-toope</span></li>
-							<li class="s-toope-2"><span>s-toope-2</span></li>
-							<li class="s-toope-3"><span>s-toope-3</span></li>
-							<li class="s-toope-4"><span>s-toope-4</span></li>
-						</ul>
-						<ul>
-							<li class="s-curv"><span>s-curv</span></li>
-							<li class="s-curv-2"><span>curv-2</span></li>
-							<li class="s-curv-3"><span>s-curv-3</span></li>
-							<li class="s-curv-4"><span>s-curv-4</span></li>
-						</ul>
-						<ul>
-							<li class="s-bucket"><span>s-bucket</span></li>
-							<li class="s-bucket-2"><span>s-bucket-2</span></li>
-							<li class="s-bucket-3"><span>s-bucket-3</span></li>
-							<li class="s-bucket-4"><span>s-bucket-4</span></li>
-						</ul>
-					</div>
-					<!--/ 5th -->
-					
+
+					<div id="usage">
+						<div class="col-md-4">
+							<h2>Style</h2>
+<pre>
+&lt;style&gt; 
+.red{	
+	height: 60px; 
+	width: 60px; 
+	background: red;
+} 
+.green{	
+	height: 60px; 
+	width: 60px; 
+	background: green;
+} 
+.blue{	
+	height: 60px; 
+	width: 60px; 
+	background: green;
+} 
+&lt;/style&gt; 
+</pre>
+						</div> <!-- .col-md-4 -->
+
+						<div class="col-md-4">
+							<h2>HTML</h2>
+<pre style="padding:28px">
+&lt;div class=&quot;red s-leaf&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;green s-leaf&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;blue s-leaf&quot;&gt;&lt;/div&gt;
+
+&lt;div class=&quot;red s-leaf-2&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;green s-leaf-2&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;blue s-leaf-2&quot;&gt;&lt;/div&gt;
+
+&lt;div class=&quot;red s-leaf-3&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;green s-leaf-3&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;blue s-leaf-3&quot;&gt;&lt;/div&gt;
+
+&lt;div class=&quot;red s-leaf-4&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;green s-leaf-4&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;blue s-leaf-4&quot;&gt;&lt;/div&gt;
+</pre>
+						</div> <!-- .col-md-4 -->
+
+
+						<div class="col-md-4">
+							<h2>View</h2>
+							<div class="red s-leaf"></div>
+							<div class="green s-leaf"></div>
+							<div class="blue s-leaf"></div>
+
+							<div class="red s-leaf-2"></div>
+							<div class="green s-leaf-2"></div>
+							<div class="blue s-leaf-2"></div>
+							
+							<div class="red s-leaf-3"></div>
+							<div class="green s-leaf-3"></div>
+							<div class="blue s-leaf-3"></div>
+
+							
+							<div class="red s-leaf-4"></div>
+							<div class="green s-leaf-4"></div>
+							<div class="blue s-leaf-4"></div>
+						</div> <!-- .col-md-4 -->
+					</div> <!-- #usage -->
+				</div>
+
+				<div class="row shape">				
+					<div id="shapes"></div>
 				</div>
 			</div>