diff --git a/app/css/custom.css b/app/css/custom.css
index cff2bda..070e14d 100644
--- a/app/css/custom.css
+++ b/app/css/custom.css
@@ -155,4 +155,137 @@ font-size: 10px !important;
 /*.new-input-label{
 	margin-bottom: 0;
 	line-height: 34px;
-}*/
\ No newline at end of file
+}*/
+
+
+
+
+
+/*  new custom css for accrodian tabs */
+
+.customAccordianHeader{
+	width: 100%;
+	height: auto;
+	background-color: #F3F3F3;
+	border: 1px solid #ddd;
+    color: #333;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
+    border-radius: 3px 3px 3px 3px;
+    padding: 10px 15px;
+    margin-top: 10px;
+}
+
+.customAccordianHeader.customActive{
+	background-image: -webkit-gradient(linear, left 0%, left 100%, from(#555555), to(#3b3b3b));
+	background-image: linear-gradient(to bottom, #555555 0%, #3b3b3b 100%);
+	background-repeat: repeat-x;
+	border: 1px solid #222222;
+    color: #FFF;
+    border-radius: 3px 3px 0 0;
+}
+.customAccordianHeader > span{
+	font-size: 15px;
+	margin-right: 20px;
+	line-height: 22px;
+	float: left;
+}
+.customAccordianHeader .btn{
+	padding: 2px 12px;
+}
+.customAccordianHeader > .form-control{
+	outline: none;
+	box-shadow: none;
+}
+.customAccordianHeader > select.form-control{
+	width: 150px;
+	height: 26px;
+	padding: 0 6px;
+	margin-right: 20px;
+	float: left;
+}
+.customAccordianHeader > select.form-control[disabled]{
+	border: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	background-color: transparent;
+	color: #f90;
+	width: auto;
+}
+.customAccordianHeader > input.form-control{
+	width: 80px;
+	height: 26px;
+	padding: 0 6px;
+	float: left;
+}
+.customAccordianHeader > input.form-control[disabled]{
+	border: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	background-color: transparent;
+	color: #333;
+}
+.customAccordianTabBody{
+	width: 100%;
+	height: auto;
+	padding: 15px;
+	border: 1px solid #ddd;
+	border-top: 0;
+	border-radius: 0 0 3px 3px;
+}
+.customTableWithFilter{
+	width: auto;
+	height: auto;
+}
+.customTableWithFilter th{
+	padding: 5px;
+	background-color: #f3f3f3;
+	border: 1px solid #ddd;
+}
+.customTableWithFilter th i{
+	margin-top: 3px;
+}
+.customTableWithFilter th span{
+	font-size: 11px;
+	color: #222;
+}
+.customTableWithFilter th input{
+	width: 50px;
+}
+.customTableWithFilter td{
+	padding: 5px;
+	border: 1px solid #ddd;
+}
+.customTableWithFilter td span{
+	font-size: 11px;
+}
+.customTableWithFilter td span:first-child{
+	color: #449d44;
+	font-weight: bold;
+}
+.customTableWithFilter td span:last-child{
+	color: #c9302c;
+	font-style: italic;
+	font-weight: bold;
+}
+.customTableWithFilter td .tierTextBox{
+	width: 70px;
+}
+.customTableWithFilter .addTierButton{
+	color: #fff;
+	background-color: #2196f3;
+	border: none;
+	padding: 3px 5px;
+}
+.customTableWithFilter td .fa-trash-o{
+	color: #fff;
+	background-color: #c9302c;
+	padding: 5px;
+	border-radius: 3px;
+	cursor: pointer;
+}
+.resizeTextarea{
+	resize: vertical;
+	margin-top: 20px;
+}
\ No newline at end of file
diff --git a/app/partials/fuelManager/fuelManager.controller.js b/app/partials/fuelManager/fuelManager.controller.js
index dc7d568..dce5c85 100644
--- a/app/partials/fuelManager/fuelManager.controller.js
+++ b/app/partials/fuelManager/fuelManager.controller.js
@@ -8,57 +8,129 @@
 
       $scope.test = "Testing...";
 
-    }]);
-
-         $(document).ready(function(){
-         	$('#jaTab1').click(function(){
-         		$('#ja1').removeAttr("disabled");
-           $('#ja1').removeClass('disableSelect');
-           $('#ja2').removeAttr("disabled");
-           $('#ja2').removeClass('disableInput');
-           //$('#ja11').prop("disabled", true);
-           $('#ja11').attr('disabled', 'disabled');
-           $('#ja11').addClass('disableSelect');
-           $('#ja22').attr('disabled', 'disabled');
-           $('#ja22').addClass('disableInput');
-         
-           $('#ja111').attr('disabled', 'disabled');
-           $('#ja111').addClass('disableSelect');
-           $('#ja222').attr('disabled', 'disabled');
-           $('#ja222').addClass('disableInput');
-         	})
-         
-         $('#jaTab2').click(function(){
-           $('#ja11').removeAttr("disabled");
-           $('#ja11').removeClass('disableSelect');
-           $('#ja22').removeAttr("disabled");
-           $('#ja22').removeClass('disableInput');
-         
-           $('#ja1').attr('disabled', 'disabled');
-           $('#ja1').addClass('disableSelect');
-           $('#ja2').attr('disabled', 'disabled');
-           $('#ja2').addClass('disableInput');
-         
-           $('#ja111').attr('disabled', 'disabled');
-           $('#ja111').addClass('disableSelect');
-           $('#ja222').attr('disabled', 'disabled');
-           $('#ja222').addClass('disableInput');
-         })
-         
-         $('#jaTab3').click(function(){
-           $('#ja111').removeAttr("disabled");
-           $('#ja111').removeClass('disableSelect');
-           $('#ja222').removeAttr("disabled");
-           $('#ja222').removeClass('disableInput');
-         
-           $('#ja11').attr('disabled', 'disabled');
-           $('#ja11').addClass('disableSelect');
-           $('#ja22').attr('disabled', 'disabled');
-           $('#ja22').addClass('disableInput');
-         
-           $('#ja1').attr('disabled', 'disabled');
-           $('#ja1').addClass('disableSelect');
-           $('#ja2').attr('disabled', 'disabled');
-           $('#ja2').addClass('disableInput');
-         })
-         })
+      $(document).ready(function(){
+      
+        $('#customTabToggle1').click(function(){
+          console.log('tab 1');
+          $('#customTabsBody1').slideDown();
+          $('#customTabsBody2').slideUp();
+          $('#customTabsBody3').slideUp();
+          $('#customTabsBody4').slideUp();
+          $('#customTabs1').addClass('customActive');
+          $('#customTabs2').removeClass('customActive');
+          $('#customTabs3').removeClass('customActive');
+          $('#customTabs4').removeClass('customActive');
+          $('.customAccordianHeader > select, .customAccordianHeader > input').prop("disabled", true);
+          $('.customAccordianHeader.customActive > select, .customAccordianHeader.customActive > input').prop("disabled", false);
+
+          $('#customTabs1 > .pull-right > .btn-default').css('display', 'none');
+          $('#customTabs1 > .pull-right > .btn-success').css('display', 'inline-block');
+          $('#customTabs1 > .pull-right > .btn-danger').css('display', 'inline-block');
+
+          $('#customTabs2 > .pull-right > .btn-default').css('display', 'inline-block');
+          $('#customTabs2 > .pull-right > .btn-success').css('display', 'none');
+          $('#customTabs2 > .pull-right > .btn-danger').css('display', 'none');
+
+          $('#customTabs3 > .pull-right > .btn-default').css('display', 'inline-block');
+          $('#customTabs3 > .pull-right > .btn-success').css('display', 'none');
+          $('#customTabs3 > .pull-right > .btn-danger').css('display', 'none');
+
+          $('#customTabs4 > .pull-right > .btn-default').css('display', 'inline-block');
+          $('#customTabs4 > .pull-right > .btn-success').css('display', 'none');
+          $('#customTabs4 > .pull-right > .btn-danger').css('display', 'none');
+
+        })
+        $('#customTabToggle2').click(function(){
+          console.log('tab 2');
+          $('#customTabsBody1').slideUp();
+          $('#customTabsBody2').slideDown();
+          $('#customTabsBody3').slideUp();
+          $('#customTabsBody4').slideUp();
+          $('#customTabs1').removeClass('customActive');
+          $('#customTabs2').addClass('customActive');
+          $('#customTabs3').removeClass('customActive');
+          $('#customTabs4').removeClass('customActive');
+          $('.customAccordianHeader > select, .customAccordianHeader > input').prop("disabled", true);
+          $('.customAccordianHeader.customActive > select, .customAccordianHeader.customActive > input').prop("disabled", false);
+
+          $('#customTabs1 > .pull-right > .btn-default').css('display', 'inline-block');
+          $('#customTabs1 > .pull-right > .btn-success').css('display', 'none');
+          $('#customTabs1 > .pull-right > .btn-danger').css('display', 'none');
+
+          $('#customTabs2 > .pull-right > .btn-default').css('display', 'none');
+          $('#customTabs2 > .pull-right > .btn-success').css('display', 'inline-block');
+          $('#customTabs2 > .pull-right > .btn-danger').css('display', 'inline-block');
+
+          $('#customTabs3 > .pull-right > .btn-default').css('display', 'inline-block');
+          $('#customTabs3 > .pull-right > .btn-success').css('display', 'none');
+          $('#customTabs3 > .pull-right > .btn-danger').css('display', 'none');
+
+          $('#customTabs4 > .pull-right > .btn-default').css('display', 'inline-block');
+          $('#customTabs4 > .pull-right > .btn-success').css('display', 'none');
+          $('#customTabs4 > .pull-right > .btn-danger').css('display', 'none');
+
+        })
+        $('#customTabToggle3').click(function(){
+          console.log('tab 3');
+          $('#customTabsBody1').slideUp();
+          $('#customTabsBody2').slideUp();
+          $('#customTabsBody3').slideDown();
+          $('#customTabsBody4').slideUp();
+          $('#customTabs1').removeClass('customActive');
+          $('#customTabs2').removeClass('customActive');
+          $('#customTabs3').addClass('customActive');
+          $('#customTabs4').removeClass('customActive');
+          $('.customAccordianHeader > select, .customAccordianHeader > input').prop("disabled", true);
+          $('.customAccordianHeader.customActive > select, .customAccordianHeader.customActive > input').prop("disabled", false);
+
+          $('#customTabs1 > .pull-right > .btn-default').css('display', 'inline-block');
+          $('#customTabs1 > .pull-right > .btn-success').css('display', 'none');
+          $('#customTabs1 > .pull-right > .btn-danger').css('display', 'none');
+
+          $('#customTabs2 > .pull-right > .btn-default').css('display', 'inline-block');
+          $('#customTabs2 > .pull-right > .btn-success').css('display', 'none');
+          $('#customTabs2 > .pull-right > .btn-danger').css('display', 'none');
+
+          $('#customTabs3 > .pull-right > .btn-default').css('display', 'none');
+          $('#customTabs3 > .pull-right > .btn-success').css('display', 'inline-block');
+          $('#customTabs3 > .pull-right > .btn-danger').css('display', 'inline-block');
+
+          $('#customTabs4 > .pull-right > .btn-default').css('display', 'inline-block');
+          $('#customTabs4 > .pull-right > .btn-success').css('display', 'none');
+          $('#customTabs4 > .pull-right > .btn-danger').css('display', 'none');
+
+        })
+        $('#customTabToggle4').click(function(){
+          console.log('tab 4');
+          $('#customTabsBody1').slideUp();
+          $('#customTabsBody2').slideUp();
+          $('#customTabsBody3').slideUp();
+          $('#customTabsBody4').slideDown();
+          $('#customTabs1').removeClass('customActive');
+          $('#customTabs2').removeClass('customActive');
+          $('#customTabs3').removeClass('customActive');
+          $('#customTabs4').addClass('customActive');
+          $('.customAccordianHeader > select, .customAccordianHeader > input').prop("disabled", true);
+          $('.customAccordianHeader.customActive > select, .customAccordianHeader.customActive > input').prop("disabled", false);
+
+          $('#customTabs1 > .pull-right > .btn-default').css('display', 'inline-block');
+          $('#customTabs1 > .pull-right > .btn-success').css('display', 'none');
+          $('#customTabs1 > .pull-right > .btn-danger').css('display', 'none');
+
+          $('#customTabs2 > .pull-right > .btn-default').css('display', 'inline-block');
+          $('#customTabs2 > .pull-right > .btn-success').css('display', 'none');
+          $('#customTabs2 > .pull-right > .btn-danger').css('display', 'none');
+
+          $('#customTabs3 > .pull-right > .btn-default').css('display', 'inline-block');
+          $('#customTabs3 > .pull-right > .btn-success').css('display', 'none');
+          $('#customTabs3 > .pull-right > .btn-danger').css('display', 'none');
+
+          $('#customTabs4 > .pull-right > .btn-default').css('display', 'none');
+          $('#customTabs4 > .pull-right > .btn-success').css('display', 'inline-block');
+          $('#customTabs4 > .pull-right > .btn-danger').css('display', 'inline-block');
+
+        })
+
+      })
+
+  }]);
diff --git a/app/partials/fuelManager/fuelManager.html b/app/partials/fuelManager/fuelManager.html
index dd9ebd6..6f987c9 100644
--- a/app/partials/fuelManager/fuelManager.html
+++ b/app/partials/fuelManager/fuelManager.html
@@ -21,7 +21,7 @@
             <div class="widget-content">
                <h3>Ramp Fees & Avoidance</h3>
                <section id="accordions">
-                  <div class="panel-group accordion">
+                  <!-- <div class="panel-group accordion">
                      <div class="panel panel-default open">
                         <div class="panel-heading">
                            <h4 class="panel-title">
@@ -179,6 +179,256 @@
                            </div>
                         </div>
                      </div>
+                  </div> -->
+                  <div class="newCustomAccordian">
+                     <!-- tab 1 -->
+                     <div class="customAccordianHeader customActive" id="customTabs1">
+                        <span>Jet Aircraft</span>
+                        <select class="form-control">
+                           <option>Pricing Structure</option>
+                           <option>Retail-(minus)</option>
+                           <option>Cost+(plus)</option>
+                           <option>Direct=(equals)</option>
+                        </select>
+                        <input type="text" name="" class="form-control" value="$1.7500">
+                        <div class="pull-right">
+                           <button class="btn btn-success">Save</button>
+                           <button class="btn btn-danger">Delete</button>
+                           <button class="btn btn-default" id="customTabToggle1" style="display: none;">Edit</button>
+                        </div>
+                        <div class="clearfix"></div>
+                     </div>
+                     <div class="customAccordianTabBody" id="customTabsBody1">
+                        <table class="customTableWithFilter">
+                           <thead>
+                              <tr>
+                                 <th>
+                                    <span class="pull-left">1-250 gal.</span>
+                                    <i class="fa fa-pencil-square-o pull-right" aria-hidden="true"></i>
+                                 </th>
+                                 <th>
+                                    <span class="pull-left">1-250 gal.</span>
+                                    <i class="fa fa-pencil-square-o pull-right" aria-hidden="true"></i>
+                                 </th>
+                                 <th>
+                                    <input type="text" placeholder="min" name=""> - 
+                                    <input type="text" placeholder="max" name="">
+                                    <span>gal.</span>
+                                 </th>
+                                 <th> &nbsp; </th>
+                              </tr>
+                           </thead>
+                           <tbody>
+                              <tr>
+                                 <td>
+                                    <span class="pull-left">-$0.0000</span> &nbsp; 
+                                    <span class="pull-right">($1.7500)</span>
+                                 </td>
+                                 <td>
+                                    <span class="pull-left">-$0.0000</span> &nbsp; 
+                                    <span class="pull-right">($1.7500)</span>
+                                 </td>
+                                 <td>
+                                    <span>$</span>
+                                    <input type="text" placeholder="margin" class="tierTextBox" name="">
+                                    <button class="addTierButton">Add Tier</button>
+                                 </td>
+                                 <td>
+                                    <i class="fa fa-trash-o" aria-hidden="true"></i>
+                                 </td>
+                              </tr>
+                           </tbody>
+                        </table>
+                        <textarea class="form-control resizeTextarea" placeholder="Message..."></textarea>
+                     </div>
+
+                     <!--  tab 2  -->
+
+                     <div class="customAccordianHeader" id="customTabs2">
+                        <span>Jet Aircraft</span>
+                        <select class="form-control" disabled="true">
+                           <option>Pricing Structure</option>
+                           <option>Retail-(minus)</option>
+                           <option>Cost+(plus)</option>
+                           <option>Direct=(equals)</option>
+                        </select>
+                        <input type="text" name="" disabled="true" class="form-control" value="$1.7500">
+                        <div class="pull-right">
+                           <button class="btn btn-success" style="display: none;">Save</button>
+                           <button class="btn btn-danger" style="display: none;">Delete</button>
+                           <button class="btn btn-default" id="customTabToggle2">Edit</button>
+                        </div>
+                        <div class="clearfix"></div>
+                     </div>
+                     <div class="customAccordianTabBody" id="customTabsBody2" style="display: none;">
+                        <table class="customTableWithFilter">
+                           <thead>
+                              <tr>
+                                 <th>
+                                    <span class="pull-left">1-250 gal.</span>
+                                    <i class="fa fa-pencil-square-o pull-right" aria-hidden="true"></i>
+                                 </th>
+                                 <th>
+                                    <span class="pull-left">1-250 gal.</span>
+                                    <i class="fa fa-pencil-square-o pull-right" aria-hidden="true"></i>
+                                 </th>
+                                 <th>
+                                    <input type="text" placeholder="min" name=""> - 
+                                    <input type="text" placeholder="max" name="">
+                                    <span>gal.</span>
+                                 </th>
+                                 <th> &nbsp; </th>
+                              </tr>
+                           </thead>
+                           <tbody>
+                              <tr>
+                                 <td>
+                                    <span class="pull-left">-$0.0000</span> &nbsp; 
+                                    <span class="pull-right">($1.7500)</span>
+                                 </td>
+                                 <td>
+                                    <span class="pull-left">-$0.0000</span> &nbsp; 
+                                    <span class="pull-right">($1.7500)</span>
+                                 </td>
+                                 <td>
+                                    <span>$</span>
+                                    <input type="text" placeholder="margin" class="tierTextBox" name="">
+                                    <button class="addTierButton">Add Tier</button>
+                                 </td>
+                                 <td>
+                                    <i class="fa fa-trash-o" aria-hidden="true"></i>
+                                 </td>
+                              </tr>
+                           </tbody>
+                        </table>
+                        <textarea class="form-control resizeTextarea" placeholder="Message..."></textarea>
+                     </div>
+
+                     <!--  tab 3  -->
+
+                     <div class="customAccordianHeader" id="customTabs3">
+                        <span>Jet Aircraft</span>
+                        <select class="form-control" disabled="true">
+                           <option>Pricing Structure</option>
+                           <option>Retail-(minus)</option>
+                           <option>Cost+(plus)</option>
+                           <option>Direct=(equals)</option>
+                        </select>
+                        <input type="text" name="" disabled="true" class="form-control" value="$1.7500">
+                        <div class="pull-right">
+                           <button class="btn btn-success" style="display: none;">Save</button>
+                           <button class="btn btn-danger" style="display: none;">Delete</button>
+                           <button class="btn btn-default" id="customTabToggle3">Edit</button>
+                        </div>
+                        <div class="clearfix"></div>
+                     </div>
+                     <div class="customAccordianTabBody" id="customTabsBody3" style="display: none;">
+                        <table class="customTableWithFilter">
+                           <thead>
+                              <tr>
+                                 <th>
+                                    <span class="pull-left">1-250 gal.</span>
+                                    <i class="fa fa-pencil-square-o pull-right" aria-hidden="true"></i>
+                                 </th>
+                                 <th>
+                                    <span class="pull-left">1-250 gal.</span>
+                                    <i class="fa fa-pencil-square-o pull-right" aria-hidden="true"></i>
+                                 </th>
+                                 <th>
+                                    <input type="text" placeholder="min" name=""> - 
+                                    <input type="text" placeholder="max" name="">
+                                    <span>gal.</span>
+                                 </th>
+                                 <th> &nbsp; </th>
+                              </tr>
+                           </thead>
+                           <tbody>
+                              <tr>
+                                 <td>
+                                    <span class="pull-left">-$0.0000</span> &nbsp; 
+                                    <span class="pull-right">($1.7500)</span>
+                                 </td>
+                                 <td>
+                                    <span class="pull-left">-$0.0000</span> &nbsp; 
+                                    <span class="pull-right">($1.7500)</span>
+                                 </td>
+                                 <td>
+                                    <span>$</span>
+                                    <input type="text" placeholder="margin" class="tierTextBox" name="">
+                                    <button class="addTierButton">Add Tier</button>
+                                 </td>
+                                 <td>
+                                    <i class="fa fa-trash-o" aria-hidden="true"></i>
+                                 </td>
+                              </tr>
+                           </tbody>
+                        </table>
+                        <textarea class="form-control resizeTextarea" placeholder="Message..."></textarea>
+                     </div>
+
+                     <!--  tab 4  -->
+
+                     <div class="customAccordianHeader" id="customTabs4">
+                        <span>Jet Aircraft</span>
+                        <select class="form-control" disabled="true">
+                           <option>Pricing Structure</option>
+                           <option>Retail-(minus)</option>
+                           <option>Cost+(plus)</option>
+                           <option>Direct=(equals)</option>
+                        </select>
+                        <input type="text" name="" disabled="true" class="form-control" value="$1.7500">
+                        <div class="pull-right">
+                           <button class="btn btn-success" style="display: none;">Save</button>
+                           <button class="btn btn-danger" style="display: none;">Delete</button>
+                           <button class="btn btn-default" id="customTabToggle4">Edit</button>
+                        </div>
+                        <div class="clearfix"></div>
+                     </div>
+                     <div class="customAccordianTabBody" id="customTabsBody4" style="display: none;">
+                        <table class="customTableWithFilter">
+                           <thead>
+                              <tr>
+                                 <th>
+                                    <span class="pull-left">1-250 gal.</span>
+                                    <i class="fa fa-pencil-square-o pull-right" aria-hidden="true"></i>
+                                 </th>
+                                 <th>
+                                    <span class="pull-left">1-250 gal.</span>
+                                    <i class="fa fa-pencil-square-o pull-right" aria-hidden="true"></i>
+                                 </th>
+                                 <th>
+                                    <input type="text" placeholder="min" name=""> - 
+                                    <input type="text" placeholder="max" name="">
+                                    <span>gal.</span>
+                                 </th>
+                                 <th> &nbsp; </th>
+                              </tr>
+                           </thead>
+                           <tbody>
+                              <tr>
+                                 <td>
+                                    <span class="pull-left">-$0.0000</span> &nbsp; 
+                                    <span class="pull-right">($1.7500)</span>
+                                 </td>
+                                 <td>
+                                    <span class="pull-left">-$0.0000</span> &nbsp; 
+                                    <span class="pull-right">($1.7500)</span>
+                                 </td>
+                                 <td>
+                                    <span>$</span>
+                                    <input type="text" placeholder="margin" class="tierTextBox" name="">
+                                    <button class="addTierButton">Add Tier</button>
+                                 </td>
+                                 <td>
+                                    <i class="fa fa-trash-o" aria-hidden="true"></i>
+                                 </td>
+                              </tr>
+                           </tbody>
+                        </table>
+                        <textarea class="form-control resizeTextarea" placeholder="Message..."></textarea>
+                     </div>
+
+
                   </div>
                </section>
                <div class="row">&nbsp;</div>