diff --git a/css/component.css b/css/component.css
index ce5d899..0bf2b50 100755
--- a/css/component.css
+++ b/css/component.css
@@ -24,6 +24,7 @@
 }
 
 /* normalize the input elements, make them look like everything else */
+
 .nl-form input,
 .nl-form select,
 .nl-form button {
@@ -189,7 +190,7 @@ input:focus::-moz-placeholder {
 	color: rgba(255,255,255,0.2);
 }
 
-input:-ms-input-placeholder {  
+input:-ms-input-placeholder {
 	color: rgba(255,255,255,0.8);
 }
 
@@ -282,4 +283,4 @@ input:focus::-ms-input-placeholder {
 	.nl-form {
 		font-size: 2em;
 	}
-}
\ No newline at end of file
+}
diff --git a/css/default.css b/css/default.css
index 6142354..51b5b4d 100755
--- a/css/default.css
+++ b/css/default.css
@@ -12,7 +12,7 @@
 	font-style: normal;
 }
 
-*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
+*:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
 body, html { font-size: 100%; padding: 0; margin: 0;}
 
 /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
@@ -138,4 +138,4 @@ a:active {
 		display: none;
 	}
 
-}
\ No newline at end of file
+}
diff --git a/css/material-datetime-picker.css b/css/material-datetime-picker.css
index 0003780..b5b8f1c 100644
--- a/css/material-datetime-picker.css
+++ b/css/material-datetime-picker.css
@@ -12,6 +12,7 @@
     opacity: 1; }
 
 .c-datepicker {
+  color: #000000;
   min-height: 610px;
   position: fixed;
   left: 50%;
diff --git a/index.html b/index.html
index 3972301..3249df3 100755
--- a/index.html
+++ b/index.html
@@ -26,44 +26,18 @@
 		    } */
 
 		    .c-btn {
-		      font-size: 14px;
-		      text-transform: capitalize;
-		      font-weight: 600;
-		      display: inline-block;
-		      line-height: 36px;
-		      cursor: pointer;
-		      text-align: center;
-		      text-transform: uppercase;
-		      min-width: 88px;
-		      height: 36px;
-		      margin: 10px 8px;
-		      padding: 0 8px;
-		      text-align: center;
-		      letter-spacing: .5px;
-		      border-radius: 2px;
-		      background: #F1F1F1;
-		      color: #393939;
-		      transition: background 200ms ease-in-out;
-		      box-shadow: 0 3.08696px 5.82609px 0 rgba(0, 0, 0, 0.16174), 0 3.65217px 12.91304px 0 rgba(0, 0, 0, 0.12435);
 		    }
 
 		    .c-btn--flat {
-		      background: transparent;
-		      margin: 10px 8px;
-		      min-width: 52px;
 		    }
 
 		    .c-btn:hover {
-		      background: rgba(153, 153, 153, 0.2);
-		      color: #393939;
 		    }
 
 		    .c-btn:active {
-		      box-shadow: 0 9.6087px 10.78261px 0 rgba(0, 0, 0, 0.17217), 0 13.56522px 30.3913px 0 rgba(0, 0, 0, 0.15043);
 		    }
 
 		    .c-btn--flat, .c-btn--flat:hover, .c-btn--flat:active {
-		      box-shadow: none;
 		    }
 
 		  </style>
@@ -80,40 +54,18 @@
 				<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=15139"><span>Back to the Codrops Article</span></a></span>
 			</div>
 			<header>
-				<h1>Smart Contract Creator<span>with custom input elements</span></h1>
+				<h1>Smart Contract Creator <span>with custom input elements</span></h1>
 			</header>
 			<div class="main clearfix">
 				<form id="nl-form" class="nl-form">
-					I feel to eat
+					Create Smart Contract with the name <input type="text" value="" placeholder="elections" data-subline="For example: <em>Land-ownership</em> or <em>Vivek-will</em>"/>@ <br />of the type
 					<select>
-						<option value="1" selected>any food</option>
-						<option value="2">Indian</option>
-						<option value="3">French</option>
-						<option value="4">Japanese</option>
-						<option value="2">Italian</option>
-					</select>
-					<br />in a
-					<select>
-						<option value="1" selected>standard</option>
-						<option value="2">fancy</option>
-						<option value="3">hip</option>
-						<option value="4">traditional</option>
-						<option value="2">romantic</option>
-					</select>
-					restaurant
-					<br />at
-					<select>
-						<option value="1" selected>anytime</option>
-					 	<option value="1">7 p.m.</option>
-					 	<option value="2">8 p.m.</option>
-					 	<option value="3">9 p.m.</option>
-					</select>
-					in <input type="text" value="" placeholder="any city" data-subline="For example: <em>Los Angeles</em> or <em>New York</em>"/>
+						<option value="1" selected>one-time-event</option>
+					</select>* using the asset <input type="text" value="" placeholder="rmt" data-subline="For example: <em>rmt</em> or <em>alphacoin</em>"/>#  at the address <input type="text" value="" placeholder="FLO Address" data-subline="For example: <em>FFE1n1rAeCwAhtj2iQMEfmtHgeASGPvM4e</em> or <em>FDFyvAMqbiNSQ4JMEMG2DQ2s8y73yMFM1S</em>"/>$ with contractconditions: 1. contractAmount=<input type="text" value="" placeholder="5rmt" data-subline="For example: <em>5rmt</em> or <em>4alphacoin/em>"/> 2. userchoices=<input type="text" value="" placeholder="NAMO=WIN | NAMO=LOSE" data-subline="For example: Write your contract conditions separated by '|' "/> 3. expirytime=
 
 					<!-- date time picker content-->
-					differentiation text
-					<a class="c-btn c-datepicker-btn">
-						<span class="material-icon">date-time</span>
+					<a id='widgetAttribute' class="nl-field-toggle">
+						<span id='widgetButton' class="material-icon">date-time</span>
 					</a>
 
 					<pre id="output"></pre>
@@ -141,10 +93,11 @@
 
 		    var picker = new MaterialDatetimePicker({})
 		      .on('submit', function(d) {
-		        output.innerText = d;
+		        var element = document.getElementById('widgetButton');
+		        element.innerHTML = d;
 		      });
 
-		    var el = document.querySelector('.c-datepicker-btn');
+		    var el = document.getElementById('widgetAttribute');
 		    el.addEventListener('click', function() {
 		      picker.open();
 		    }, false);
diff --git a/js/nlform.js b/js/nlform.js
index 6f02c90..fcec7fb 100644
--- a/js/nlform.js
+++ b/js/nlform.js
@@ -38,6 +38,11 @@
 				self.fldOpen++;
 				self.fields.push( new NLField( self, el, 'input', self.fldOpen ) );
 			} );
+			Array.prototype.slice.call( this.el.querySelectorAll( 'a' + self.elClass ) ).forEach( function( el, i ) {
+				self.fldOpen++;
+				//self.fields.push( new NLField( self, el, 'dropdown', self.fldOpen ) );
+
+			} );
 			this.overlay.addEventListener( 'click', function(ev) { self._closeFlds(); } );
 			this.overlay.addEventListener( 'touchstart', function(ev) { self._closeFlds(); } );
 		},
@@ -69,6 +74,9 @@
 			else if( this.type === 'input' ) {
 				this._createInput();
 			}
+			else if( this.type === 'widget' ) {
+				//this._createInput();
+			}
 		},
 		_createDropDown : function() {
 			var self = this;