diff --git a/public/css/customportal.css b/public/css/customportal.css
new file mode 100644
index 0000000..c58c9e5
--- /dev/null
+++ b/public/css/customportal.css
@@ -0,0 +1,45 @@
+.show-xs{
+  /*display: block;
+   position:initial; */
+  visibility:hidden;
+}
+ 
+
+@media (max-width: 768px) {
+
+    .container,
+    .container-sm,
+    .container-md,
+    .container-lg {
+      max-width: 768px;
+      font-size:small;
+    }
+
+    .show-xs{
+      /* display: block;
+      position:initial; */
+      visibility:visible;
+    }
+
+    .hide-xs{
+      position:absolute;
+      visibility:hidden;
+    }
+
+    .table{
+      display:table;
+      width:50%;
+      table-layout:fixed;
+      border-collapse:collapse;
+    }
+
+    .table .row{
+      display:table-row;
+    }
+
+    .table .row > div{
+      display:table-cell;
+      vertical-align:middle;
+    }
+    
+  }
\ No newline at end of file
diff --git a/resources/views/includes/home.blade.php b/resources/views/includes/home.blade.php
index fb410a4..2126953 100644
--- a/resources/views/includes/home.blade.php
+++ b/resources/views/includes/home.blade.php
@@ -215,17 +215,17 @@
                     )
                 </script>
             @endif
-
+            <!-- wide screen -->
             <div class="table-responsive table-bordered table-hover">
                 <table class="table align-items-center table-flush border" id="selepas_tawarruq" style="text-align: center; width: 100%">
                     <thead class="thead-light bg-dark text-white text-center">
                         <tr>
                             <th>#</th>
                             <th>No Rujukan</th>
-                            <th>Tempoh</th>
+                            <th class="hide-xs">Tempoh</th>
                             <th>T Akhir</th>
                             <th>Keuntungan</th>                  
-                            <th>Cawangan</th>
+                            <th class="hide-xs">Cawangan</th>
                             {{-- <th>Status</th> --}}
                         </tr>
                     </thead>
@@ -233,17 +233,46 @@
                         <tr>
                             <td>1</td>
                             <td>1</td>
+                            <td class="hide-xs">1</td>
                             <td>1</td>
                             <td>1</td>
-                            <td>1</td>
-                            <td>1</td>
+                            <td class="hide-xs">1</td>
                             {{-- <td>1</td> --}}
 
                         </tr>
                     </tbody>
                 </table>
-                <i class="text-success" style="font-size:12px;">"Swipe" ke kiri</i>
+                <i class="hide-xs text-success" style="font-size:12px;">"Swipe" ke kiri</i>
             </div>
+            <!-- end of wide screen-->
+            <!--//if small screen -->
+            <!-- <div class="show-xs table-responsive table-bordered table-hover">
+                <table class="table" id="selepas_tawarruq" style="text-align: center">
+                    <thead class="thead-light bg-dark text-white text-center">
+                        <tr>
+                            <div>#</div>
+                            <div>No Rujukan</div>
+                            <div>Tempoh</div>
+                            <div>T Akhir</div>
+                            <div>Keuntungan</div>                  
+                            
+                        </tr>
+                    </thead>
+                    <tbody class="list">
+                        <tr>
+                            <div>1</div>
+                            <div>1</div>
+                            <div>1</div>
+                            <div>1</div>
+                            <div>1</div>
+                            
+
+                        </tr>
+                    </tbody>
+                </table>
+                
+            </div> -->
+            <!-- end for small screen -->
             <br>
         </div>
     </div>
@@ -256,6 +285,43 @@
 
 
 <script>
+
+var body = document.getElementsByTagName("HTML")[0];
+    var width = body.offsetWidth;
+    
+    if (window.addEventListener) {  // all browsers except IE before version 9
+      window.addEventListener ("resize", onResizeEvent, true);
+    } else {
+      if (window.attachEvent) {   // IE before version 9
+        window.attachEvent("onresize", onResizeEvent);
+      }
+    }
+    
+    function onResizeEvent() {
+    //   bodyElement = document.getElementsByTagName("HTML")[0];
+    //   newWidth = bodyElement.offsetWidth;
+    //   if(newWidth != width){
+    //     width = newWidth;
+    //     console.log(width);
+    // console.log("t3");
+        var t1 = document.getElementsByClassName('hide-xs');
+        var style = getComputedStyle(t1[0]);
+        var visibility = style.getPropertyValue('visibility');
+        // document.getElementsByClassName('hide-xs')[5];
+        if(visibility != 'visible')
+        {
+            selepastawarruqtable.column(2).visible(false);
+            selepastawarruqtable.column(5).visible(false);
+
+        } else {
+            selepastawarruqtable.column(2).visible(true);
+            selepastawarruqtable.column(5).visible(true);
+        }
+        //console.log(visibility);
+    //   }
+    }
+
+
     var api_url = "{{  $api_url }}";
 
     const formatter = new Intl.NumberFormat('en-US', {
@@ -290,12 +356,14 @@ var hargaemastable = $('#harga_emas').DataTable({
         },
         "pageLength": 10,
         "scrollX": true
+        
     });
 
     $( document ).ready(function() {
         filterpembiayaanaktif();
     });
 
+
     function linktargetfunc(e){
         var arraymarhun = $(e).data('marhun');
         var norujukan = $(e).data('norujukan');
@@ -390,11 +458,12 @@ var hargaemastable = $('#harga_emas').DataTable({
     }
 
     async function filterpembiayaanaktif(){
-
+        
         $('#loadertable').removeClass('d-none');
         $('#formtable').addClass('d-none');
         document.getElementById('gadai').style.display = "block";
         document.getElementById('lelong').style.display = "none";
+        
         $('#totalsag').text(0);
 
         var empat = selepastawarruqtable.columns(3).header();
@@ -408,6 +477,7 @@ var hargaemastable = $('#harga_emas').DataTable({
 
         selepastawarruqtable.column( 4 ).visible( true );
         selepastawarruqtable.column( 5 ).visible( true );
+        
         // selepastawarruqtable.column( 6 ).visible( true );
 
         let datapembaktif = [];
@@ -427,8 +497,6 @@ var hargaemastable = $('#harga_emas').DataTable({
         });
 
 
-
-
         selepastawarruqtable.clear().draw();
         var counter = 1;
         $.each(datapembaktif,function(index,ps){
@@ -529,7 +597,7 @@ var hargaemastable = $('#harga_emas').DataTable({
 
             selepastawarruqtable.row.add([
                 `<input type="checkbox" onclick="tickfunc(this)" name="chkboxsag[]" value="${ps.norujukan}" id="sag-${counter}" data-norujukan="${ps.norujukan}" ${should_block} />`,
-                `<a href="#" onclick="linktargetfunc(this)" class="linktarget" data-toggle="modal" data-nm="${ps.nilaimarhun}" data-berat="${ps.berat}" data-upah12="${ps.bakiupah}" data-pjmnum="${ps.pinjaman}" data-bakipjm="${ps.bakipjm}" data-lelong="${ps.taglel}" data-marhun='${marh}' data-pinjaman="${ps.pinjaman}" data-norujukan="${ps.norujukan}" data-hargajualan="${ps.hargajualan}" data-kodcaw="${ps.kodcaw}" data-target="#marhunModal" style="color:#3490dc"><span class="name mb-0 text-sm">${ps.norujukan}</span></a>`,
+                `<a href="#" onclick="linktargetfunc(this)" class="linktarget" data-toggle="modal" data-nm="${ps.nilaimarhun}" data-berat="${ps.berat}" data-upah12="${ps.bakiupah}" data-pjmnum="${ps.pinjaman}" data-bakipjm="${ps.bakipjm}" data-lelong="${ps.taglel}" data-marhun='${marh}' data-pinjaman="${ps.pinjaman}" data-norujukan="${ps.norujukan}" data-hargajualan="${ps.hargajualan}" data-kodcaw="${ps.kodcaw}" data-tempoh="${ps.tempoh}" data-namacaw="${namacawangan}" data-target="#marhunModal" style="color:#3490dc"><span class="name mb-0 text-sm">${ps.norujukan}</span></a>`,
                 ps.tempoh,
                 t_matang,
                 formatter.format(ps.keuntungan),
@@ -539,6 +607,9 @@ var hargaemastable = $('#harga_emas').DataTable({
 
             counter = counter + 1;
         });
+
+        onResizeEvent();
+        
     }
 
     function filterpembiayaan6bulan(){
@@ -691,7 +762,7 @@ var hargaemastable = $('#harga_emas').DataTable({
 
             selepastawarruqtable.row.add([
                 `<input type="checkbox" onclick="tickfunc(this)" name="chkboxsag[]" value="${ps.norujukan}" id="sag-${counter}" data-norujukan="${ps.norujukan}"  ${should_block} />`,
-                `<a href="#" onclick="linktargetfunc(this)" class="linktarget" data-toggle="modal" data-nm="${ps.nilaimarhun}" data-berat="${ps.berat}" data-upah12="${ps.bakiupah}" data-pjmnum="${ps.pinjaman}" data-bakipjm="${ps.bakipjm}" data-lelong="${ps.taglel}" data-marhun='${marh}' data-pinjaman="${ps.pinjaman}" data-norujukan="${ps.norujukan}" data-hargajualan="${ps.hargajualan}" data-kodcaw="${ps.kodcaw}" data-target="#marhunModal" style="color:#3490dc"><span class="name mb-0 text-sm">${ps.norujukan}</span></a>`,
+                `<a href="#" onclick="linktargetfunc(this)" class="linktarget" data-toggle="modal" data-nm="${ps.nilaimarhun}" data-berat="${ps.berat}" data-upah12="${ps.bakiupah}" data-pjmnum="${ps.pinjaman}" data-bakipjm="${ps.bakipjm}" data-lelong="${ps.taglel}" data-marhun='${marh}' data-pinjaman="${ps.pinjaman}" data-norujukan="${ps.norujukan}" data-hargajualan="${ps.hargajualan}" data-kodcaw="${ps.kodcaw}" data-tempoh="${ps.tempoh}" data-namacaw="${namacawangan}" data-target="#marhunModal" style="color:#3490dc"><span class="name mb-0 text-sm">${ps.norujukan}</span></a>`,
                 ps.tempoh,
                 t_matang,
                 formatter.format(ps.keuntungan),
@@ -701,6 +772,8 @@ var hargaemastable = $('#harga_emas').DataTable({
 
             counter = counter + 1;
         });
+
+        onResizeEvent();
     }
 
     function lelongan(e){
@@ -818,7 +891,7 @@ var hargaemastable = $('#harga_emas').DataTable({
 
             selepastawarruqtable.row.add([
                 `<input type="checkbox" onclick="tickfunc(this)" name="chkboxsag[]" value="${lelong.norujukan}" data-fasa="${lelong.fasa}" id="sag-${counter}" data-norujukan="${lelong.norujukan}" ${should_block} />`,
-                `<a href="#" onclick="linktargetfunc(this)" class="linktarget" data-toggle="modal" data-nm="${lelong.nilaimarhun}" data-berat="${lelong.berat}" data-upah12="${lelong.bakiupah}" data-pjmnum="${lelong.pinjaman}" data-bakipjm="${lelong.bakipjm}" data-lelong="${lelong.taglel}" data-marhun='${marh}' data-pinjaman="${lelong.pinjaman}" data-norujukan="${lelong.norujukan}" data-hargajualan="${lelong.hargajualan}" data-kodcaw="${lelong.kodcaw}" data-target="#marhunModal" style="color:#3490dc"><span class="name mb-0 text-sm">${lelong.norujukan}</span></a>`,
+                `<a href="#" onclick="linktargetfunc(this)" class="linktarget" data-toggle="modal" data-nm="${lelong.nilaimarhun}" data-berat="${lelong.berat}" data-upah12="${lelong.bakiupah}" data-pjmnum="${lelong.pinjaman}" data-bakipjm="${lelong.bakipjm}" data-lelong="${lelong.taglel}" data-marhun='${marh}' data-pinjaman="${lelong.pinjaman}" data-norujukan="${lelong.norujukan}" data-hargajualan="${lelong.hargajualan}" data-kodcaw="${lelong.kodcaw}" data-namacaw="${namacawangan}" data-target="#marhunModal" style="color:#3490dc"><span class="name mb-0 text-sm">${lelong.norujukan}</span></a>`,
                 tarikhlelong  = new Date(lelong.t_lelong).toLocaleDateString("en-GB"),
                 namacawangan,                  
                 '',
@@ -840,12 +913,17 @@ var hargaemastable = $('#harga_emas').DataTable({
         let bakipjm = $(e).data('bakipjm');
         let berat = $(e).data('berat');
         let nm = $(e).data('nm');
+        let tempoh = $(e).data('tempoh');
+        let namacaw = $(e).data('namacaw');
 
         $('#pembiayaan').text('RM' + formatter.format(pinjaman));
         $('#bpembiayaan').text('RM' + formatter.format(bakipjm));
         $('#nm').text('RM' + formatter.format(nm));
         $('#berat').text(berat + 'g');
         $('#koskeun').text('RM' + formatter.format(upah12));
+        $('#norujukan').text(norujukan);
+        $('#tempoh').text(tempoh);
+        $('#namacaw').text(namacaw);
 
         $.ajax({
             method: 'get',
diff --git a/resources/views/includes/login/index.blade.php b/resources/views/includes/login/index.blade.php
index 6a5eb82..0edb723 100644
--- a/resources/views/includes/login/index.blade.php
+++ b/resources/views/includes/login/index.blade.php
@@ -32,6 +32,7 @@
     <!-- CSS Files -->
     <link href="{{ asset('css/material-kit-login.css') }}" rel="stylesheet">
     <script src="{{ asset('argon') }}/vendor/jquery/dist/jquery.min.js"></script>
+    <link href="{{ asset('css/customportal.css') }}" rel="stylesheet">
 
 
 </head>
diff --git a/resources/views/modal/marhun.blade.php b/resources/views/modal/marhun.blade.php
index 99d2159..da821f9 100644
--- a/resources/views/modal/marhun.blade.php
+++ b/resources/views/modal/marhun.blade.php
@@ -1,3 +1,5 @@
+<link href="{{ asset('css/customportal.css') }}" rel="stylesheet">
+
 <div class="modal animate__animated animate__bounceInDown" id="marhunModal">
     <div class="modal-dialog modal-lg modal-dialog-centered">
         <div class="modal-content">
@@ -12,6 +14,9 @@
                     <li class="nav-item">
                       <a class="nav-link" data-toggle="pill" href="#rekod" role="tab" aria-controls="pills-rekod" aria-selected="false">Rekod Bayaran</a>
                     </li>
+                    <li class="show-xs nav-item test">
+                      <a class="show-xs nav-link" data-toggle="pill" href="#detail" role="tab" aria-controls="pills-detail" aria-selected="false">Detail SAG</a>
+                    </li>
                   </ul>
                 <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
             </div>
@@ -113,6 +118,25 @@
                           <!-- <p style="font-size: 12px;"><i>*Dengan bayaran serendah jumlah keuntungan <span class="text-danger font-weight-bold">6 bulan</span>, anda layak mendapat lanjutan tempoh selama <span class="text-danger font-weight-bold">6 bulan</span> lagi.</i></p> -->
 
                     </div>
+
+                    <div class="show-xs tab-pane fade " id="detail" role="tabpanel" aria-labelledby="detail-tab">
+
+                          <div class="row show-xs">
+                            <div class="col-6">
+                              <div class="show-xs p-2 rounded bg-warning text-center text-dark mb-2"><div class="inner"><b>No Rujukan: <span id="norujukan"></span></b></div></div>
+                            </div>
+                
+                            <div class="col-6">
+                              <div class="show-xs p-2 rounded bg-warning text-center text-dark mb-2"><div class="inner"><b>Tempoh: <span id="tempoh"></span></b></div></div>
+                            </div>
+                
+                            <div class="col-6">
+                              <div class="show-xs p-2 rounded bg-warning text-center text-dark mb-2"><div class="inner"><b>Cawangan: <span id="namacaw"></span></b></div></div>
+                            </div>
+                          </div>
+                
+                    </div>
+
                 </div>
             </div>