diff --git a/app/assets/stylesheets/reset.css b/app/assets/stylesheets/reset.css
index e79eb0b2..db9581fa 100644
--- a/app/assets/stylesheets/reset.css
+++ b/app/assets/stylesheets/reset.css
@@ -198,5 +198,11 @@ section.content {
     background-color: #007d72 !important;
 }
 
+/* FORM */
+.input-group-addon {
+    padding: 0rem 0rem;
+}
+/* END FORM */
+
 /* End Reset Theme */
 /* *************************************************** */
\ No newline at end of file
diff --git a/app/views/settings/promotions/_form.html.erb b/app/views/settings/promotions/_form.html.erb
index 5ee3924f..e68cb665 100755
--- a/app/views/settings/promotions/_form.html.erb
+++ b/app/views/settings/promotions/_form.html.erb
@@ -5,41 +5,81 @@
 
   <div class="form-inputs p-l-15">
     <div class="div-border">
-        <div class="row">
-          <div class="col-md-6"><%= f.input :promo_code  %></div>
-          <div class="col-md-6"></div>
-        </div>
         <div class="row">
           <div class="col-md-6">
-            <span>* Promo Start Date</span>
-            <%= f.date_field  :promo_start_date, :placeholder => "From Date" , :class => "form-control datepicker"%>
-            <br>
-          </div>
-          <div class="col-md-6">
-            <span>* Promo End Date</span>
-            <%= f.date_field :promo_end_date ,:placeholder => "To Date" , :class => "form-control datepicker"%>
+            <label>*Promo Code</label>
+            <div class="input-group"> 
+              <span class="input-group-addon">
+                  <i class="material-icons">vpn_key</i>
+              </span>            
+              <input type="text" name="promotion[promo_code]" value="<%= @promotion.promo_code%>" class="form-control" id="promotion_promo_code">    
+            </div>
           </div>
         </div>
+
         <div class="row">
           <div class="col-md-6">
-            <!-- <span>* Promo Start Hour</span> -->
-            <% if !@promotion.promo_start_hour.nil?%>
-              <%= f.input :promo_start_hour, as: :string, input_html: {  :value => @promotion.promo_start_hour.utc.strftime('%H:%M') } %>
-            <% else %>
-              <%= f.input :promo_start_hour, as: :string, input_html: { } %>
-            <% end %>
-            <!-- <span>Promo Start Hour</span>
-            <%= text_field_tag :promo_start_hour , nil, :placeholder => "From Time", :id => "fromtime", :class => 'form-control' %> -->
+            <label>* Start Date</label>
+            <div class="input-group">
+              <span class="input-group-addon">
+                <i class="material-icons">date_range</i>
+              </span>
+              <% if !@promotion.promo_start_date.nil?%>
+                <input type="text" name="promotion[promo_start_date]" value="<%= @promotion.promo_start_date.strftime('%A, %d-%m-%Y') %>" class="datepicker form-control" placeholder="Start Date...">
+              <% else %>
+                 <input type="text" name="promotion[promo_start_date]" class="datepicker form-control" placeholder="Start Date...">
+              <% end %>
+            </div>
           </div>
           <div class="col-md-6">
-            <!-- <span>* Promo End Hour</span> -->
-            <% if !@promotion.promo_end_hour.nil?%>
+            <label>* End Date</label>
+            <div class="input-group">
+              <span class="input-group-addon">
+                <i class="material-icons">date_range</i>
+              </span>
+              <% if !@promotion.promo_end_date.nil?%>
+                <input type="text" name="promotion[promo_end_date]" value="<%= @promotion.promo_end_date.strftime('%A, %d-%m-%Y') %>" class="datepicker form-control" placeholder="Start Date...">
+              <% else %>
+                 <input type="text" name="promotion[promo_end_date]" class="datepicker form-control" placeholder="End Date...">
+              <% end %>
+            </div>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-md-6">
+            <label class="control-label">* Start Hour</label>
+            <div class="input-group">
+              <span class="input-group-addon">
+                <i class="material-icons">access_time</i>
+              </span>
+                <% if !@promotion.promo_start_hour.nil?%>
+                  <input type="text" name="promotion[promo_start_hour]" value="<%= @promotion.promo_start_hour.utc.strftime('%H:%M') %>" class="timepicker form-control" placeholder="Start Time...">
+                <% else %>
+                   <input type="text" name="promotion[promo_start_hour]" class="timepicker form-control" placeholder="Start Time...">
+                <% end %>
+            </div>         
+          </div>
+          <div class="col-md-6">
+            <label class="control-label">* End Hour</label>
+            <div class="input-group">
+              <span class="input-group-addon">
+                <i class="material-icons">access_time</i>
+              </span>
+                <% if !@promotion.promo_end_hour.nil?%>
+                  <input type="text" name="promotion[promo_end_hour]" value="<%= @promotion.promo_end_hour.utc.strftime('%H:%M') %>" class="timepicker form-control" placeholder="End Time...">
+                <% else %>
+                   <input type="text" name="promotion[promo_end_hour]" class="timepicker form-control" placeholder="End Time...">
+                <% end %>
+            </div> 
+          <!--  <% if !@promotion.promo_end_hour.nil?%>
               <%= f.input :promo_end_hour, as: :string, input_html: {:value => @promotion.promo_end_hour.utc.strftime('%H:%M') },:class=>"form-control timepicker" %>
             <% else %>
               <%= f.input :promo_end_hour, as: :string, input_html: {},:class=>"form-control timepicker" %>
-            <% end %>
+            <% end %> -->
           </div>
         </div>
+
         <br>
         <div class="row checkboxes">
          <div class="col-md-2"><label class="control-label"><abbr title="required">*</abbr>  Promotion Day</label></div>
@@ -53,12 +93,19 @@
           <div class="col-md-1"><label><input class="selectDay" type="checkbox" name="Saturday" value="6" id="6"> Sat</label></div>
         </div>
         <br>
+
         <div class="row">
           <div class="col-md-6">
-            <%= f.input :promo_type,input_html: { class: "" },
-          collection: %w{Quantity Net_off Net_price Percentage},:class => 'form-control' ,:label => "Promotion Type" %>
+            <select name="promotion[promo_type]" class="form-control">
+                <option>Quantity</option>
+                <option>Net_off</option>
+                <option>Net_price</option>
+                <option>Percentage</option>
+            </select>
+          <!--   <%= f.input :promo_type, collection: %w{Quantity Net_off Net_price Percentage},:class => 'form-control' ,:label => "Promotion Type" %> -->
           </div>
         </div>
+
         <div class="row">
           <% arr =  MenuItem.active.order("name desc").pluck(:name,:item_code) %>
           <% Product.order("name desc").pluck(:name,:item_code).each do |p| %>
@@ -182,18 +229,31 @@ $(document).ready(function(){
   //   format:'H:m'
   // });
 
-  $('#promotion_promo_start_hour').on('change', function(event) {
-    $('#promotion_promo_start_hour').val($('#promotion_promo_start_hour').val().split(":")[0]+":00");
+  // $('#promotion_promo_start_hour').on('change', function(event) {
+  //   $('#promotion_promo_start_hour').val($('#promotion_promo_start_hour').val().split(":")[0]+":00");
+  // });
+
+  // $('#promotion_promo_end_hour').on('change', function(event) {
+  //   $('#promotion_promo_end_hour').val($('#promotion_promo_end_hour').val().split(":")[0]+":00");
+  // });
+
+  $('.datepicker').bootstrapMaterialDatePicker({
+      format: 'dddd DD MM YYYY',
+      clearButton: true,
+      weekStart: 1,
+      time: false
   });
 
-  $('#promotion_promo_end_hour').on('change', function(event) {
-    $('#promotion_promo_end_hour').val($('#promotion_promo_end_hour').val().split(":")[0]+":00");
+  $('.timepicker').bootstrapMaterialDatePicker({
+      format: 'HH:mm',
+      clearButton: true,
+      date: false
   });
 
-  var dayy = $("#promotion_promo_day").val().replace("[","").replace("]","");
-  jQuery.each( dayy.split(","), function( i, d ) {
-    $("input.selectDay[value='"+d+"']").prop( "checked", true );
-  });
+  // var dayy = $("#promotion_promo_day").val().replace("[","").replace("]","");
+  // jQuery.each( dayy.split(","), function( i, d ) {
+  //   $("input.selectDay[value='"+d+"']").prop( "checked", true );
+  // });
 
   var form = document.getElementById("new_promotion");
   var inputs = $("input");
@@ -202,7 +262,6 @@ $(document).ready(function(){
   var day = "[";
 
 $(".selectDay").click(function() {
-
       // debugger;
       day = "[";
       for (var j = 8; j <=15; j += 1){
@@ -226,6 +285,7 @@ $(".selectDay").click(function() {
 
   $("#promotion_original_product").select2();
   $(".item_code_place").select2();
+
   $(".item_code_place").on('change', function(event) {
     var ajax_url = "<%= settings_find_item_instance_path %>";
     var item_code =  this.value;
@@ -244,9 +304,12 @@ $(".selectDay").click(function() {
         }
     });
   });
+
   $(".promotion_promotion_products_item_code select").select2();
   $(".item_code_place1").select2();
+
   callforpromoproduct();
+
   $(".addProduct").on('click', function(event) {
     setTimeout(function(){
       $(".promotion_promotion_products_item_code select").select2();