diff --git a/account_payment_instalment/static/description/index.html b/account_payment_instalment/static/description/index.html
index 4cda132a7..84194359e 100644
--- a/account_payment_instalment/static/description/index.html
+++ b/account_payment_instalment/static/description/index.html
@@ -13,13 +13,13 @@
         </div>
         <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
         <ul style=" padding: 0 1px; list-style: none; ">
-            <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; "alt="check">
+            <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                 Instalment payment method for customers.
             </li>
-            <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png"style=" width: 22px; margin-right: 6px; "alt="check">
+            <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                 Different types of instalments.
             </li>
-            <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png"style=" width: 22px; margin-right: 6px; "alt="check">
+            <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                 Post journal entries with due dates.
             </li>
         </ul>
@@ -87,24 +87,24 @@
 
                             <li class="mb8"
                                 style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-                                <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">
+                                <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                                 Provision for instalment in the payment terms.
                             </li>
 
                             <li class="mb8"
                                 style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-                                <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">
+                                <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                                 Instalment by days, months and years.
                             </li>
 
                             <li class="mb8"
                                 style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-                                <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">
+                                <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                                 Period type and number of instalments in the payment lines.
 
                             </li>
                             <!--            <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">-->
-                            <!--			<img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Simply handle the add-on and its configuration from the backend menu. </li>-->
+                            <!--			<i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Simply handle the add-on and its configuration from the backend menu. </li>-->
 
                         </ul>
                     </div>
@@ -127,8 +127,7 @@
                                                      style="float: left;">
                                                     <h3 class="alert"
                                                         style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;">
-                                                        <img src="images/checked.png"
-                                                             style=" width: 22px; margin-right: 6px; " alt="check">
+                           <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                                                         Provision for instalment in the payment terms.</h3>
 
                                                     <div style=""><img class="img img-responsive center-block"
@@ -142,8 +141,7 @@
                                                      style="float: left;">
                                                     <h3 class="alert"
                                                         style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;">
-                                                        <img src="images/checked.png"
-                                                             style=" width: 22px; margin-right: 6px; " alt="check">
+                           <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                                                         Payment term form view. You can see the period and number of instalments in the payment lines.</h3>
                                                     <div style=""><img class="img img-responsive center-block"
                                                                        style="border-top-left-radius: 10px;border-top-right-radius: 10px;"
@@ -157,8 +155,7 @@
                                                      style="float: left;">
                                                     <h3 class="mb32 alert"
                                                         style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; ">
-                                                        <img src="images/checked.png"
-                                                             style=" width: 22px; margin-right: 6px; " alt="check">You
+                           <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>You
                                                         choose the created payment term while creating the invoice.</h3>
 
                                                     <div style=""><img class="img img-responsive center-block"
@@ -172,8 +169,7 @@
                                                      style="float: left;">
                                                     <h3 class="alert"
                                                         style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; ">
-                                                        <img src="images/checked.png"
-                                                             style=" width: 22px; margin-right: 6px; " alt="check">
+                           <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
                                                         Now you can check the journal entries of that particular invoice.
                                                         You can see the debit amount and the due dates.
                                                     </h3>
diff --git a/project_status_level_report/static/description/index.html b/project_status_level_report/static/description/index.html
index 8e45b84a2..df49ff611 100644
--- a/project_status_level_report/static/description/index.html
+++ b/project_status_level_report/static/description/index.html
@@ -11,9 +11,9 @@
     </div>
     <h2 style="font-weight: 600;font-size: 1.8rem;margin-top: 15px;">Key Highlights</h2>
     <ul style=" padding: 0 1px; list-style: none; ">
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Project status report for Odoo10 community edition.</li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Project Analysis </li>
-      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Various graphical representations.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Project status report for Odoo10 community edition.</li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Project Analysis </li>
+      <li style="display: flex;align-items: center;padding: 8px 0;font-size: 18px;"><i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Various graphical representations.</li>
     </ul>
     
   </div>
@@ -58,18 +58,18 @@
                   <hr style="margin-top: 0px;margin-bottom: 2%;border: 0;text-align: center;border-top: 3px solid #d21c22;width: 5%;">
                   <ul>
                      <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-                        <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Helps to analyse project from various aspects.
+                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Helps to analyse project from various aspects.
                      </li>
                      <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-                        <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">
+                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
 						 Complete project status report in XLS with budget analysis.
                      </li>
                      <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;"> 
-                        <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">
+                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
 						 Tasks, Gantt chart XLS Analysis.
                      </li>
                      <li class="mb8" style="font-family: Roboto;color: #000;list-style-type: square;font-size: 19px;line-height: 50px; background-color: #3a34380d;padding-left: 20px;border-radius: 7px;list-style: none;">
-                        <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">
+                        <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>
 						Project Breakdown Charter Analysis. 
                      </li>
                   </ul>
@@ -85,31 +85,31 @@
                               <div class="carousel-inner">
                                  <div class="carousel-item active" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check"> Menu View </h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i> Menu View </h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/project-satus-level-cybrosys-1.png"> </div>
                                     </div>
                                  </div>
                                  <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Wizard View  </h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Wizard View  </h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/project-satus-level-cybrosys-2.png"> </div>
                                     </div>
                                  </div>
                                  <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Project Graphical Overview </h3>
+                                       <h3 class="mb32 alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Project Graphical Overview </h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/project-satus-level-cybrosys-3.png"> </div>
                                     </div>
                                  </div>
                                  <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Project Information</h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; "> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Project Information</h3>
                                        <div style=""> <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/project-satus-level-cybrosys-4.png"> </div>
                                     </div>
                                  </div>
                                  <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">The pie chart of overall task status.</h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>The pie chart of overall task status.</h3>
                                        <div style="">
                                           <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/project-satus-level-cybrosys-5.png"> 
                                        </div>
@@ -117,7 +117,7 @@
                                  </div>
                                  <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">End user can easily compare the actual and planned time of the project.</h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>End user can easily compare the actual and planned time of the project.</h3>
                                        <div style="">
                                           <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/project-satus-level-cybrosys-6.png"> 
                                        </div>
@@ -125,7 +125,7 @@
                                  </div>
                                  <div class="carousel-item" style="min-height: 0px;">
                                     <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16" style="float: left;">
-                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <img src="images/checked.png" style=" width: 22px; margin-right: 6px; " alt="check">Project task information and bar chart. End user can easily analyse the tasks.</h3>
+                                       <h3 class="alert" style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0;font-size: 18px;"> <i class="fa fa-check-circle-o" style="width:40px; color:#07B700"></i>Project task information and bar chart. End user can easily analyse the tasks.</h3>
                                        <div style="">
                                           <img class="img img-responsive center-block" style="border-top-left-radius: 10px;border-top-right-radius: 10px;" src="images/project-satus-level-cybrosys-7.png"> 
                                        </div>