diff --git a/app/views/admin/property_hires/edit_hire.html.erb b/app/views/admin/property_hires/edit_hire.html.erb
index 587190c..a618784 100644
--- a/app/views/admin/property_hires/edit_hire.html.erb
+++ b/app/views/admin/property_hires/edit_hire.html.erb
@@ -98,7 +98,7 @@
    label_col = 2
    input_col = 10
    if calendar_type == 0
-     right_col -= 5 
+     right_col -= 7
      label_col += 2
      input_col -= 2
    end
@@ -124,6 +124,33 @@ ul.list-unstyled li {
 .form-group .controls{
   margin-left: 0;
 }
+@media (min-width: 1200px){
+  .col-lg-7{
+    width: 58.3%;
+    float: left;
+  }
+  .col-lg-5{
+    width: 41.7%;
+    float: left;
+  }
+}
+@media (min-width: 768px){
+  .form-horizontal .col-sm-4 {
+    width: 33.33333333%;
+  }
+  .form-horizontal .col-sm-8 {
+    width: 66.66666667%;
+  }
+  .form-horizontal .col-sm-2 {
+    width: 16.66666667%;
+  }
+  .form-horizontal .col-sm-10 {
+    width: 83.33333333%;
+  }
+  .form-horizontal .col-sm-offset-4 {
+    margin-left: 33.33%;
+  }
+}
 </style>
 <style type="text/css">
   .full-size-img img {
@@ -262,6 +289,13 @@ ul.list-unstyled li {
       width: 25%;
     }
   }
+  form#new_p_hire .form-group input,form#new_p_hire .form-group select, form#new_p_hire .form-group textarea{
+    width: 100%;
+    max-width: 300px;
+  }
+  form#new_p_hire .form-group input[name="_rucaptcha"]{
+    width: auto;
+  }
 </style>
 <% if !property.can_be_hired %>
   <script type="text/javascript">
@@ -278,16 +312,16 @@ ul.list-unstyled li {
 <script type="text/javascript">
   var pick_date_mode = <%=property.set_availability%>;
 </script>
-<h3 class="property_title"><%= property.title %></h3>
+<h3 class="property_title"><%= property.title.html_safe %></h3>
 <article class="s-annc s-property">
 <section class="s-annc__post-wrap">
 <% if property.display_img %>
 <div class="s-annc__sub-img full-size-img">
   <img src="<%=property.image.url%>" alt="<%=property.title%>">
-  <span class="s-annc__img_description"><%=property.title%></span>
+  <span class="s-annc__img_description"><%=property.title.html_safe%></span>
 </div>
 <% end %>
-<h4 class="property_subtitle"><%= property.property_usage %></h4>
+<h4 class="property_subtitle"><%= property.property_usage.html_safe %></h4>
 <% property_carousel_images = property.property_carousel_images %>
 <% if property_carousel_images.count != 0 %>
   <div class="carousel_images">
@@ -325,7 +359,7 @@ ul.list-unstyled li {
     </div>
   </div>
 <% end %>
-<div class="property_note"><%= property.note %></div>
+<div class="property_note"><%= property.note.html_safe %></div>
 </section>
 <ul class="s-property__related-wrap list-unstyled no-print">
   <% if property.property_files.count != 0%>
@@ -356,7 +390,7 @@ ul.list-unstyled li {
 <% end %>
 </article>
 <% if property.calendar_type == 0 %>
-<div id="orbit_calendar" class="col-lg-7">
+<div id="orbit_calendar" class="col-lg-<%=12-right_col%>">
   <div id="sec1">
     <div class="btn-toolbar" id="navigation">
       <div id="calendar-nav">
@@ -607,7 +641,7 @@ ul.list-unstyled li {
   </div>
 
   <div class="form-group">
-    <div class="col-sm-offset-<%=label_col%> col-sm-5">
+    <div class="col-sm-offset-<%=label_col%> col-sm-<%=input_col%>">
       <div id="property-avaialable-alert" style="margin-bottom: 5px; padding: 10px;<%= 'display: none;' unless recover %>" class="alert alert-success" role="alert"><b>Hooray! </b>This property is available.</div>
       <div id="property-unavaialable-alert" style="margin-bottom: 5px; padding: 10px; display: none;" class="alert alert-danger" role="alert"><b>Sorry! </b><span> This property is available.</span></div>
        <div id="values-alert" style="margin-bottom: 5px; padding: 10px; display: none;" class="alert alert-warning" role="alert">
@@ -620,7 +654,7 @@ ul.list-unstyled li {
       </div>
     </div>
     <% if property.set_unavailibility %>
-     <div class="col-sm-offset-<%=label_col%> col-sm-5">
+     <div class="col-sm-offset-<%=label_col%> col-sm-<%=input_col%>">
         <b><%= t("property_hire.Unavailibility_Schedule") %></b>
         <div>
           <%= property.render_unavailable_message%>
@@ -638,26 +672,26 @@ ul.list-unstyled li {
   </div>
   <div class="form-group">
     <%= f.label :hiring_person_email, "*"+t("property_hire.hiring_person_email"), :class => "col-sm-#{label_col} control-label" %> 
-    <div class="col-sm-5">
+    <div class="col-sm-<%=input_col%>">
       <%= f.text_field :hiring_person_email, :class => "form-control", :value => (recover ? hire.hiring_person_email : ( current_user.member_profile.email rescue "")), :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
     </div>
   </div>
   <div class="form-group">
     <%= f.label :hiring_person_number, "*"+t("property_hire.hiring_person_number"), :class => "col-sm-#{label_col} control-label" %> 
-    <div class="col-sm-5">
+    <div class="col-sm-<%=input_col%>">
       <%= f.text_field :hiring_person_number, :class => "form-control", :value => (recover ? hire.hiring_person_number : ( current_user.member_profile.mobile_no rescue "")), :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
     </div>
   </div>
   <div class="form-group">
     <%= f.label :hiring_person_name, "*"+t("property_hire.hiring_person_name"), :class => "col-sm-#{label_col} control-label" %> 
-    <div class="col-sm-5">
+    <div class="col-sm-<%=input_col%>">
       <%= f.text_field :hiring_person_name, :class => "form-control", :value => (recover ? hire.hiring_person_name : ( current_user.name rescue "")), :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
       <%= f.hidden_field :hiring_person_id, :value => (current_user.member_profile.id.to_s rescue "") %>
     </div>
   </div>
   <div class="form-group">
     <%= f.label :reason_for_hire, "*"+t("property_hire.reason_for_hire"), :class => "col-sm-#{label_col} control-label" %> 
-    <div class="col-sm-5">
+    <div class="col-sm-<%=input_col%>">
       <%= f.text_field :reason_for_hire, :class => "form-control", :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
     </div>
   </div>
@@ -670,7 +704,7 @@ ul.list-unstyled li {
         <% type = sub_hash["type"] %>
         <div class="form-group">
             <%= f.label "notes_selector[#{index}]", name, :class => "col-sm-#{label_col} control-label" %> 
-        <div class="col-sm-5">
+        <div class="col-sm-<%=input_col%>">
           <% values.each_with_index do |v,i| %>
             <label class="checkbox-inline">
               <input type="<%=type%>" name="p_hire[notes_selector][<%=index.to_s%>][]" value="<%=i%>" <%= (type=="radio" && i == 0) ? "checked=\"checked\"" : "" %>>
@@ -686,7 +720,7 @@ ul.list-unstyled li {
   <% else %>
       <div class="form-group">
         <%= f.label :note_for_hire, t("property_hire.note_for_hire"), :class => "col-sm-#{label_col} control-label" %> 
-        <div class="col-sm-5">
+        <div class="col-sm-<%=input_col%>">
           <%= f.text_area :note_for_hire, :class => "form-control" %>
         </div>
       </div>
@@ -697,7 +731,7 @@ ul.list-unstyled li {
         <% required = (property[field_name]["required"] == "true" rescue false) %>
         <div class="form-group">
             <%= f.label field_name, (required ? "*" : "") + property.custom_text(field_name,"name"), :class => "col-sm-#{label_col} control-label" %> 
-            <div class="col-sm-5">
+            <div class="col-sm-<%=input_col%>">
                 <% placeholder = property.custom_text(field_name,"placeholder") %>
                 <% if required %>
                     <%= f.text_field field_name, :class => "form-control", :placeholder => placeholder, :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
diff --git a/app/views/email/p_hire_email.html.erb b/app/views/email/p_hire_email.html.erb
index 16075b4..4adc40f 100644
--- a/app/views/email/p_hire_email.html.erb
+++ b/app/views/email/p_hire_email.html.erb
@@ -8,11 +8,16 @@
   <%= t('property_hire.email_p_hire_content') %>
 <% end %>
 <br>
+<style>
+  .hire_infos td:first-child {
+    white-space: nowrap;
+  }
+</style>
 <% I18n.with_locale(@data['locale']) do %>
   <h3><%= property.title rescue nil %></h3>
   <% if !@data['hire_id'].nil? %>
     <% hire = PHire.where(id: @data['hire_id']).first %>
-    <table>
+    <table id="hire_infos">
       <thead>
         <tr>
           <td></td>
diff --git a/app/views/property_hires/hire.html.erb b/app/views/property_hires/hire.html.erb
index f9c8f50..2ae67a2 100644
--- a/app/views/property_hires/hire.html.erb
+++ b/app/views/property_hires/hire.html.erb
@@ -17,7 +17,7 @@
   label_col = 2
   input_col = 10
   if calendar_type == 0
-    right_col -= 5 
+    right_col -= 7
     label_col += 2
     input_col -= 2
   end
@@ -159,6 +159,13 @@
       width: 25%;
     }
   }
+  form#new_p_hire .form-group input,form#new_p_hire .form-group select, form#new_p_hire .form-group textarea{
+    width: 100%;
+    max-width: 300px;
+  }
+  form#new_p_hire .form-group input[name="_rucaptcha"]{
+    width: auto;
+  }
 </style>
 <% if !property.can_be_hired %>
 	<script type="text/javascript">
@@ -175,16 +182,16 @@
 <script type="text/javascript">
   var pick_date_mode = <%=property.set_availability%>;
 </script>
-<h3 class="property_title"><%= property.title %></h3>
+<h3 class="property_title"><%= property.title.html_safe %></h3>
 <article class="s-annc s-property">
 <section class="s-annc__post-wrap">
 <% if property.display_img %>
 <div class="s-annc__sub-img full-size-img">
   <img src="<%=property.image.url%>" alt="<%=property.title%>">
-  <span class="s-annc__img_description"><%=property.title%></span>
+  <span class="s-annc__img_description"><%=property.title.html_safe%></span>
 </div>
 <% end %>
-<h4 class="property_subtitle"><%= property.property_usage %></h4>
+<h4 class="property_subtitle"><%= property.property_usage.html_safe %></h4>
 <% property_carousel_images = property.property_carousel_images %>
 <% if property_carousel_images.count != 0 %>
   <div class="carousel_images">
@@ -222,7 +229,7 @@
     </div>
   </div>
 <% end %>
-<div class="property_note"><%= property.note %></div>
+<div class="property_note"><%= property.note.html_safe %></div>
 </section>
 <ul class="s-property__related-wrap list-unstyled no-print">
   <% if property.property_files.count != 0%>
@@ -253,7 +260,7 @@
 <% end %>
 </article>
 <% if property.calendar_type == 0 %>
-<div id="orbit_calendar" class="col-lg-7">
+<div id="orbit_calendar" class="col-lg-<%=12-right_col%>">
   <div id="sec1">
     <div class="btn-toolbar" id="navigation">
       <div id="calendar-nav">
@@ -504,7 +511,7 @@
 	</div>
 
   <div class="form-group">
-    <div class="col-sm-offset-<%=label_col%> col-sm-5">
+    <div class="col-sm-offset-<%=label_col%> col-sm-<%=input_col%>">
       <div id="property-avaialable-alert" style="margin-bottom: 5px; padding: 10px;<%= 'display: none;' unless recover %>" class="alert alert-success" role="alert"><b>Hooray! </b>This property is available.</div>
       <div id="property-unavaialable-alert" style="margin-bottom: 5px; padding: 10px; display: none;" class="alert alert-danger" role="alert"><b>Sorry! </b><span> This property is available.</span></div>
        <div id="values-alert" style="margin-bottom: 5px; padding: 10px; display: none;" class="alert alert-warning" role="alert">
@@ -517,7 +524,7 @@
       </div>
     </div>
     <% if property.set_unavailibility %>
-     <div class="col-sm-offset-<%=label_col%> col-sm-5">
+     <div class="col-sm-offset-<%=label_col%> col-sm-<%=input_col%>">
 	     	<b><%= t("property_hire.Unavailibility_Schedule") %></b>
 	     	<div>
           <%= property.render_unavailable_message%>
@@ -535,26 +542,26 @@
   </div>
   <div class="form-group">
 		<%= f.label :hiring_person_email, "*"+t("property_hire.hiring_person_email"), :class => "col-sm-#{label_col} control-label" %> 
-  	<div class="col-sm-5">
+  	<div class="col-sm-<%=input_col%>">
       <%= f.text_field :hiring_person_email, :class => "form-control", :value => (recover ? hire.hiring_person_email : ( current_user.member_profile.email rescue "")), :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
     </div>
   </div>
   <div class="form-group">
 		<%= f.label :hiring_person_number, "*"+t("property_hire.hiring_person_number"), :class => "col-sm-#{label_col} control-label" %> 
-  	<div class="col-sm-5">
+  	<div class="col-sm-<%=input_col%>">
       <%= f.text_field :hiring_person_number, :class => "form-control", :value => (recover ? hire.hiring_person_number : ( current_user.member_profile.mobile_no rescue "")), :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
     </div>
   </div>
   <div class="form-group">
 		<%= f.label :hiring_person_name, "*"+t("property_hire.hiring_person_name"), :class => "col-sm-#{label_col} control-label" %> 
-  	<div class="col-sm-5">
+  	<div class="col-sm-<%=input_col%>">
       <%= f.text_field :hiring_person_name, :class => "form-control", :value => (recover ? hire.hiring_person_name : ( current_user.name rescue "")), :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
       <%= f.hidden_field :hiring_person_id, :value => (current_user.member_profile.id.to_s rescue "") %>
     </div>
   </div>
   <div class="form-group">
 		<%= f.label :reason_for_hire, "*"+t("property_hire.reason_for_hire"), :class => "col-sm-#{label_col} control-label" %> 
-  	<div class="col-sm-5">
+  	<div class="col-sm-<%=input_col%>">
       <%= f.text_field :reason_for_hire, :class => "form-control", :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
     </div>
   </div>
@@ -567,7 +574,7 @@
         <% type = sub_hash["type"] %>
         <div class="form-group">
             <%= f.label "notes_selector[#{index}]", name, :class => "col-sm-#{label_col} control-label" %> 
-        <div class="col-sm-5">
+        <div class="col-sm-<%=input_col%>">
           <% values.each_with_index do |v,i| %>
             <label class="checkbox-inline">
               <input type="<%=type%>" name="p_hire[notes_selector][<%=index.to_s%>][]" value="<%=i%>" <%= (type=="radio" && i == 0) ? "checked=\"checked\"" : "" %>>
@@ -583,7 +590,7 @@
   <% else %>
       <div class="form-group">
     		<%= f.label :note_for_hire, t("property_hire.note_for_hire"), :class => "col-sm-#{label_col} control-label" %> 
-      	<div class="col-sm-5">
+      	<div class="col-sm-<%=input_col%>">
           <%= f.text_area :note_for_hire, :class => "form-control" %>
         </div>
       </div>
@@ -594,7 +601,7 @@
         <% required = (property[field_name]["required"] == "true" rescue false) %>
         <div class="form-group">
             <%= f.label field_name, (required ? "*" : "") + property.custom_text(field_name,"name"), :class => "col-sm-#{label_col} control-label" %> 
-            <div class="col-sm-5">
+            <div class="col-sm-<%=input_col%>">
                 <% placeholder = property.custom_text(field_name,"placeholder") %>
                 <% if required %>
                     <%= f.text_field field_name, :class => "form-control", :placeholder => placeholder, :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>