diff --git a/resources/assets/js/components/demo/voter/home/penyata.vue b/resources/assets/js/components/demo/voter/home/penyata.vue
index 0ddae10..d67fd4c 100644
--- a/resources/assets/js/components/demo/voter/home/penyata.vue
+++ b/resources/assets/js/components/demo/voter/home/penyata.vue
@@ -9,64 +9,64 @@
           <img src="/images/logo-kopkb.jpeg" alt="KoPKB Logo" class="kopkb-logo" />
           <div>
             <div style="text-align: left;">
-    <h4 class="fw-bold mb-1">
-        <strong>Koperasi Permodalan Kelantan Berhad (KoPKB)</strong>
-    </h4>
-             <p style="font-size: 13px; line-height: 1.3; margin: 0;">
-        Lot PT 448, Tingkat 1, Jalan Kuala Krai, Batu 3,
-        Wakaf Che Yeh, 15150 Kota Bharu, Kelantan<br />
-        Tel: 09-7414339 | Website: www.koppkb.com
-    </p>
+              <h4 class="fw-bold mb-1">
+                <strong>Koperasi Permodalan Kelantan Berhad (KoPKB)</strong>
+              </h4>
+              <p style="font-size: 13px; line-height: 1.3; margin: 0;">
+                Lot PT 448, Tingkat 1, Jalan Kuala Krai, Batu 3,
+                Wakaf Che Yeh, 15150 Kota Bharu, Kelantan<br />
+                Tel: 09-7414339 | Website: www.koppkb.com
+              </p>
+            </div>
           </div>
         </div>
-      </div>
       </div>
 
-       <div class="header-right">
-    <!-- ✅ Boxed Title -->
-    <div class="title-box">
-      <h4>PENYATA AHLI</h4>
+      <div class="header-right">
+        <!-- ✅ Boxed Title -->
+        <div class="title-box">
+          <h5>PENYATA AHLI</h5>
+        </div>
+        <h4 class="text-muted mt-2" text-center> {{ new Date().getFullYear() }}</h4>
+      </div>
     </div>
-    <h4 class="text-muted mt-2" text-center> {{ new Date().getFullYear() }}</h4>
-  </div>
-</div>
 
     <hr class="mt-3" />
 
     <!-- ✅ MEMBER INFO SECTION (2 Columns) -->
-    <div class="form-section two-column">
+    <div class="form-section two-column ">
       <div class="form-group">
-        <label class="form-label fw-semibold">Tarikh Daftar:</label>
+        <label class="form-label fw-semibold">Tarikh :</label>
         <input type="date" class="form-control form-control-sm" v-model="tarikh" />
       </div>
 
       <div class="form-group">
-        <label class="form-label fw-semibold">No. Ahli:</label>
-        <input type="text" class="form-control form-control-sm" v-model="noAhli" readonly />
+        <label class="form-label fw-semibold">No. Anggota:</label>
+        {{ data.user.no_anggota }}
       </div>
 
       <div class="form-group">
         <label class="form-label fw-semibold">Nama:</label>
-        <input type="text" class="form-control form-control-sm" v-model="nama" readonly />
+        {{ data.user.name }}
       </div>
 
       <div class="form-group">
         <label class="form-label fw-semibold">Pejabat / Syarikat:</label>
-        <input type="text" class="form-control form-control-sm" v-model="syarikat" readonly />
+        {{ data.user.unit }}
       </div>
     </div>
 
     <!-- ✅ MAIN CONTENT -->
     <h5 class="mt-4"><strong>PENGESAHAN PENYATA BAKI AKAUN AHLI</strong></h5>
     <p>
-      Adalah dimaklumkan kedudukan baki akaun tuan/puan pada
-      <strong>{{ tarikh }}</strong> dengan Koperasi Permodalan Kelantan Berhad adalah seperti berikut:
+      Adalah dimaklumkan kedudukan baki akaun tuan/puan pada <strong>{{ tarikh }}</strong> dengan Koperasi Permodalan
+      Kelantan Berhad adalah seperti berikut:
     </p>
 
     <p style="text-align: justify;">
       Sukacita dapat tuan/puan mengesahkan baki tersebut dan menandatangani salinan penyata akaun berkembar
-      untuk tujuan audit dan kembalikan salinan tersebut kepada koperasi sebelum
-      <strong>{{ tarikh }}</strong>.
+      untuk tujuan audit dan kembalikan salinan tersebut kepada koperasi sebelum <input type="date"
+        class="form-control form-control-sm" v-model="tarikh" />
     </p>
 
     <!-- ✅ 2-COLUMN TABLE -->
@@ -74,168 +74,213 @@
       <tbody>
         <tr>
           <td>Saham</td>
-          <td><input type="number" class="form-control-sm" v-model="penyata.saham" /></td>
-          <td>Pinjaman AQH</td>
-          <td><input type="number" class="form-control-sm" v-model="penyata.pinjamanAQH" /></td>
-        </tr>
-        <tr>
+          <td>{{ data.user.saham }}</td>
           <td>Yuran</td>
-          <td><input type="number" class="form-control-sm" v-model="penyata.yuran" /></td>
-          <td>Pinjaman BBA</td>
-          <td><input type="number" class="form-control-sm" v-model="penyata.pinjamanBBA" /></td>
-        </tr>
+         <td>{{ data.user.yuran}}</td>
         <tr>
           <td>Pelaburan T1</td>
-          <td><input type="number" class="form-control-sm" v-model="penyata.pelaburanT1" /></td>
+          <td>{{ penyata.pelaburan_t1 }}</td>
           <td>Pinjaman BAI</td>
-          <td><input type="number" class="form-control-sm" v-model="penyata.pinjamanBAI" /></td>
+          <td>{{ penyata.pinjaman_bai }}</td>
         </tr>
         <tr>
           <td>Pelaburan T2</td>
-          <td><input type="number" class="form-control-sm" v-model="penyata.pelaburanT2" /></td>
+          <td>{{ penyata.pelaburan_t2 }}</td>
           <td>Pinjaman BYS</td>
-          <td><input type="number" class="form-control-sm" v-model="penyata.pinjamanBYS" /></td>
+          <td>{{ penyata.pinjaman_bys}}</td>
         </tr>
         <tr>
-          <td>&nbsp;</td>
-          <td>&nbsp;</td>
+          <td>Pelaburan AQH</td>
+          <td>{{ penyata.pelaburan_aqh }}</td>
           <td>Insurans / Cukai Jalan</td>
-          <td><input type="number" class="form-control-sm" v-model="penyata.insurans" /></td>
+          <td>{{penyata.insurans_cukai}}</td>
         </tr>
         <tr>
-          <td>&nbsp;</td>
-          <td>&nbsp;</td>
+          <td>Pelaburan BBA </td>
+          <td>{{ penyata.pelaburan_bba }}</td>
           <td>Pinjaman Pelbagai</td>
-          <td><input type="number" class="form-control-sm" v-model="penyata.pinjamanPelbagai" /></td>
+          <td>{{ penyata.pinj_pelbagai }}</td>
         </tr>
       </tbody>
     </table>
 
     <!-- ✅ FOOTER SECTION -->
-    <p class="mt-4">
-      Dimaklumkan juga bahawa sekiranya kami tidak menerima pengesahan tuan/puan ke atas penyata ini dalam tempoh
-      <strong>14 hari</strong> daripada tarikh surat ini, maka ia dianggap tuan/puan bersetuju dan memperakui ia adalah benar.
+    <p class="mt-4"><em>
+        Dimaklumkan juga bahawa sekiranya kami tidak menerima pengesahan tuan/puan ke atas penyata ini dalam tempoh
+        <strong>14 hari</strong> daripada tarikh surat ini, maka ia dianggap tuan/puan bersetuju dan memperakui ia
+        adalah
+        benar.</em>
     </p>
 
     <p>Sekian, dimaklumkan.</p><br>
-    <h6><strong><i>Surat ini dikeluarkan oleh komputer, tidak perlu ditandatangani.</i></strong></h6>
+    <p class="italic-note">Surat ini dikeluarkan oleh komputer, tidak perlu ditandatangani.</p>
 
     <hr />
 
-  <p style="text-align: center;"><h5><strong>PERSETUJUAN AHLI </strong></h5></p> <br>
-  <p style="text-align: justify;"><h5>Saya ,   <input
-  type="text"
-  class="keyin-line"
-  v-model="penyata.nama"
-  placeholder=""
-/>, No Ahli:  <input
-    type="text"
-    class="keyin-line"
-    placeholder=""
-    v-model="noAhliPersetujuan"
-  /> <strong>Bersetuju/Tidak Bersetuju </strong> dengan yang tercatit  dalam penyata baki seperti di atas.</p> </h5>
-    <p style="text-align: justify;"></p>Jika Tidak Bersetuju, Sila kemukakan yang sepatutnya seperti : 
-  <br>
-     <!-- ✅ 2-COLUMN TABLE -->
-  <table class="table table-sm no-lines text-center align-middle">
+    <p style="text-align: center;">
+    <h5><strong>PERSETUJUAN AHLI </strong></h5>
+    </p> <br>
+    <p style="text-align: justify;">
+    <h5>
+      Saya, <strong>{{ data.user.name }}</strong>,
+      No Anggota: <strong>{{ data.user.no_anggota }}</strong> ,
+
+      <strong>
+
+        <label class="ms-2">
+          <input type="radio" value="Bersetuju" v-model="persetujuan" />
+          Bersetuju
+        </label>
+
+        <label class="ms-3">
+          <input type="radio" value="Tidak Bersetuju" v-model="persetujuan" />
+          Tidak Bersetuju
+        </label></strong>
+
+      . Anda <strong>{{ persetujuan || 'belum membuat pilihan' }}</strong>
+      dengan yang tercatit dalam penyata baki seperti di atas. <br>
+    </h5>
+
+    <p style="text-align: justify;"></p>Jika Tidak Bersetuju, Sila kemukakan yang sepatutnya seperti :
+    <br>
+    <!-- ✅ 2-COLUMN TABLE -->
+    <table class="table table-sm no-lines text-center align-middle">
       <tbody>
+
         <tr>
           <td>Saham</td>
-         <input
-    type="number" class="keyin-input" v-model="penyata.saham" placeholder=""
-  />
+          <td><input type="number" class="form-control-sm keyin-input" v-model="penyata.saham" /></td>
+
           <td>Pinjaman AQH</td>
-          <td><input type="number" class="form-control-sm" v-model="penyata.pinjamanAQH" /></td>
+          <td><input type="number" class="form-control-sm keyin-input" v-model="pinjamanAQH" /></td>
         </tr>
+
         <tr>
           <td>Yuran</td>
-          <td><input type="number" class="form-control-sm" v-model="penyata.yuran" /></td>
+          <td><input type="number" class="form-control-sm keyin-input" v-model="yuran" /></td>
+
           <td>Pinjaman BBA</td>
-          <td><input type="number" class="form-control-sm" v-model="penyata.pinjamanBBA" /></td>
+          <td><input type="number" class="form-control-sm keyin-input" v-model="penyata.pinjaman_bba" /></td>
         </tr>
+
         <tr>
           <td>Pelaburan T1</td>
-          <td><input type="number" class="form-control-sm" v-model="penyata.pelaburanT1" /></td>
+          <td><input type="number" class="form-control-sm keyin-input" v-model="penyata.pelaburan_t1" /></td>
+
           <td>Pinjaman BAI</td>
-          <td><input type="number" class="form-control-sm" v-model="penyata.pinjamanBAI" /></td>
+          <td><input type="number" class="form-control-sm keyin-input" v-model="penyata.pinjaman_bai" /></td>
         </tr>
+
         <tr>
           <td>Pelaburan T2</td>
-          <td><input type="number" class="form-control-sm" v-model="penyata.pelaburanT2" /></td>
+          <td><input type="number" class="form-control-sm keyin-input" v-model="penyata.pelaburan_t2" /></td>
+
           <td>Pinjaman BYS</td>
-          <td><input type="number" class="form-control-sm" v-model="penyata.pinjamanBYS" /></td>
+          <td><input type="number" class="form-control-sm keyin-input" v-model="penyata.pinjaman_bys" /></td>
         </tr>
+
         <tr>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
+
           <td>Insurans / Cukai Jalan</td>
-          <td><input type="number" class="form-control-sm" v-model="penyata.insurans" /></td>
+          <td><input type="number" class="form-control-sm keyin-input" v-model="penyata.insurans_cukai" /></td>
         </tr>
+
         <tr>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
+
           <td>Pinjaman Pelbagai</td>
-          <td><input type="text" class="form-control-sm keyin-input" v-model="penyata.pinjamanPelbagai" placeholder=""
-/></td>
+          <td><input type="text" class="form-control-sm keyin-input" v-model="penyata.pinj_Pelbagai" /></td>
         </tr>
+
       </tbody>
     </table>
 
 
-   <!-- ✅ Tandatangan & Tarikh Section -->
-<div class="signature-section">
-  <div class="sig-column">
-    <label class="form-label">Tandatangan:</label>
-    <!-- <input type="text" class="keyin-line" placeholder="" /> -->
-  </div>
 
-  <div class="sig-column">
-    <label class="form-label">Tarikh:</label>
-    <!-- <input type="text" class="keyin-line" placeholder="" /> -->
-  </div>
-</div>
-<br><br>
-          <!-- ✅ Cetak Button -->
-<div class="text-right mb-3 no-print">
-  <button type="button" class="btn btn-success" style="width: 160px;" @click="cetakPenyata">
-    Cetak Penyata
-  </button>
-</div>
+    <!-- ✅ Sah Button -->
+    <div class="text-right mb-3 no-print">
+      <button type="button" class="btn btn-primary btn-effect" style="width: 100px;" @click="SahkanPenyata">
+        Sahkan
+      </button>
+    </div>
+
+    <!-- ✅ Tandatangan & Tarikh Section -->
+    <div class="signature-section">
+      <div class="sign-column">
+        <label class="form-label">Tandatangan:</label>
+        <input type="sign" class="keyin-line" v-model="sign" />
+      </div>
+
+      <div class="sig-column">
+        <label class="form-label">Tarikh:</label>
+        <input type="date" class="keyin-line" v-model="tarikh" />
+      </div>
+    </div>
+    <br><br>
+
   </div>
 </template>
 
 <script>
+import axios from 'axios'; // <-- this is required
+
 export default {
   name: "PenyataView",
+
   data() {
     return {
       tarikh: new Date().toISOString().substring(0, 10),
-      noAhli: "12345",
-      nama: "Ahmad bin Ali",
-      syarikat: "KPKB HQ",
+      noAhli: "",
+      nama: "",
+      unit: "",
+      noAhliPersetujuan: "",
+      persetujuan: "",
       penyata: {
-        saham: 1000,
-        yuran: 50,
-        pelaburanT1: 2000,
-        pelaburanT2: 1500,
-        pinjamanAQH: 500,
-        pinjamanBBA: 1200,
-        pinjamanBAI: 700,
-        pinjamanBYS: 400,
-        insurans: 300,
-        pinjamanPelbagai: 800
+        saham: "",
+        yuran: "",
+        pelaburanT1: "",
+        pelaburanT2: "",
+        pinjamanAQH: "",
+        pinjamanBBA: "",
+        pinjamanBAI: "",
+        pinjamanBYS: "",
+        insuransCukai: "",
+        pinjamanPelbagai: ""
       }
     };
   },
 
- methods: {
-    cetakPenyata() {
-      window.print();
+  mounted() {
+    const id = this.$route.params.id; 
+    this.noAhli = id;
+    this.noAhliPersetujuan = id;
+    this.getPenyata(id);
+  },
+
+  methods: {
+    async getPenyata(id) {
+      try {
+        const res = await axios.get(`/api/penyata/${id}`);
+        this.penyata = res.data;
+      } catch (error) {
+        console.error("Failed to fetch penyata:", error.response?.data || error);
+      }
+    },
+
+    SahkanPenyata() {
+      if (confirm("Adakah anda pasti untuk mengesahkan penyata ini?")) {
+        this.cetakPenyata();
+        alert("Penyata berjaya disahkan.");
+      }
     }
   }
 };
 </script>
 
+
 <style scoped>
 .penyata-wrapper {
   max-width: 800px;
@@ -250,29 +295,48 @@ export default {
   align-items: center;
   gap: 20px;
 }
+
 .logo-wrapper {
   display: flex;
   align-items: flex-start;
   gap: 15px;
 }
+
 .kopkb-logo {
   width: 80px;
   height: auto;
 }
+
 .header-right {
   text-align: right;
 }
 
 /* ✅ Member Info (2 columns) */
-.two-column {
+/* Member Info - 2 columns */
+.form-section.two-column {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 15px 30px;
+  /* width: 100%; */
+  max-width: 780px;     /* ⭐ SAME WIDTH AS TABLES */
+  margin: 0 auto;       /* ⭐ center align same as tables */
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 30px;
+  row-gap: 15px;
+  margin-bottom: 20px;
 }
-.form-group {
-  display: flex;
-  flex-direction: column;
+
+
+.form-section.two-column .form-group {
+  min-width: 0;            /* ⭐ prevents content from stretching columns */
 }
+
+.form-section.two-column input,
+.form-section.two-column span {
+  width: 100%;             /* keep content inside column */
+  display: block;
+  word-break: break-word;  /* wrap long text */
+}
+
+
 .form-control-sm {
   border: none;
   border-bottom: 1px solid #666;
@@ -283,11 +347,13 @@ export default {
 }
 
 /* ✅ Table */
+.table,
 table.boxed-table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 4px;
 }
+
 table.boxed-table td {
   border: 1px inset #000;
   padding: 6px 8px;
@@ -302,21 +368,24 @@ table.boxed-table td {
     grid-template-columns: 1fr;
     text-align: center;
   }
+
   .header-right {
     text-align: center;
     margin-top: 10px;
   }
+
   .logo-wrapper {
     justify-content: center;
   }
-  .two-column {
-    grid-template-columns: 1fr;
-  }
+
+ 
 }
 
 .title-box {
-  background-color: #000; /* black background */
-  color: #fff; /* white text */
+  background-color: #000;
+  /* black background */
+  color: #fff;
+  /* white text */
   padding: 8px 15px;
   display: inline-block;
   border-radius: 4px;
@@ -335,12 +404,14 @@ table.boxed-table td {
 /* Remove all inner lines */
 .no-lines {
   border-collapse: separate;
-  border-spacing: 0 4px; /* small space between rows */
+  border-spacing: 0 4px;
+  /* small space between rows */
   width: 100%;
 }
 
 .no-lines td {
-  border: none !important; /* no borders inside */
+  border: none !important;
+  /* no borders inside */
   padding: 4px 6px;
   font-size: 13px;
   vertical-align: middle;
@@ -349,7 +420,7 @@ table.boxed-table td {
 
 /* Key-in style input fields */
 .keyin-input {
-  width: 80%;
+  width: 90%;
   border: none;
   border-bottom: 1px solid #000;
   outline: none;
@@ -365,19 +436,29 @@ table.boxed-table td {
 
 .signature-section {
   display: grid;
-  grid-template-columns: 1fr 1fr; /* two equal columns */
-  gap: 30px;
-  margin-top: 20px;
+  grid-template-columns: 1fr 1fr;   /* equal 50/50 width */
+  column-gap: 40px;
+  row-gap: 15px;
+
+  width: 100%;
+  max-width: 780px;                 /* ⭐ same width as tables */
+  margin: 20px auto 0 auto;         /* ⭐ center align */
 }
 
-.sig-column {
-  display: flex;
-  flex-direction: column;
+.signature-section .sign-column,
+.signature-section .sig-column {
+  min-width: 0;                     /* allows equal split */
 }
 
+.signature-section input {
+  width: 90%;                      /* align input edges */
+}
+
+
 .keyin-line {
   border: none;
-  border-bottom: 1px solid #000; /* underline style */
+  border-bottom: 1px solid #000;
+  /* underline style */
   background: transparent;
   outline: none;
   padding: 2px 0;
@@ -390,22 +471,24 @@ table.boxed-table td {
 
 @media (max-width: 768px) {
   .signature-section {
-    grid-template-columns: 1fr; /* stack on small screens */
+    grid-template-columns: 1fr;
+    /* stack on small screens */
   }
 }
 
 /* ✅ PRINT SETTINGS */
 @media print {
   body {
-  /* Chrome/Safari */
+    /* Chrome/Safari */
     /* Firefox */
-     background: #f0f0f0 !important; 
+    background: #f0f0f0 !important;
   }
 
   /* A4 page size and margin */
   @page {
     size: A4 portrait;
-    margin: 10mm; /* Reduce margin to fit more content */
+    margin: 10mm;
+    /* Reduce margin to fit more content */
   }
 
   body {
@@ -416,14 +499,17 @@ table.boxed-table td {
   }
 
   /* Fit all content to one page */
-  html, body {
+  html,
+  body {
     height: 100%;
     overflow: hidden;
-    zoom: 0.8; /* Shrinks entire page content to fit */
+    zoom: 0.8;
+    /* Shrinks entire page content to fit */
   }
 
-   .penyata-wrapper {
-    background-color: #f5f5f5 !important; /* Your desired background */
+  .penyata-wrapper {
+    background-color: #f5f5f5 !important;
+    /* Your desired background */
     /* -webkit-print-color-adjust: exact;
     print-color-adjust: exact; */
     padding: 20px;
@@ -436,55 +522,48 @@ table.boxed-table td {
 
 
   /* Prevent page breaks */
-  .penyata-wrapper, .container, table {
+  .penyata-wrapper,
+  .container,
+  table {
     page-break-inside: avoid;
   }
+
   @media print {
     #penyata {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        text-align: right !important;
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      text-align: right !important;
     }
-}
+  }
 
   /* Keep spacing compact */
-  p, label, input, td {
+  p,
+  label,
+  input,
+  td {
     margin: 0;
     padding: 2px 4px;
   }
 }
 
-.btn-cetak {
-  background-color: #f8f5f5;        /* black background */
-  color: #fff;                   /* white text */
+.italic-note {
+  font-style: italic;
+}
+
+.keyin-line {
   border: none;
-  padding: 8px 18px;
-  border-radius: 8px;
-  font-size: 14px;
-  cursor: pointer;
-  font-weight: 500;
-  letter-spacing: 0.5px;
-  transition: all 0.3s ease;
+  border-bottom: 1px dashed black;
+  width: 140px;
+  padding: 2px 4px;
 }
 
-.btn-cetak:hover {
-  background-color: #287906;
-  transform: scale(1.03);
+.btn-effect {
+  transition: 0.3s ease;
 }
 
-.btn-cetak:active {
-  background-color: #060882;
-  transform: scale(1);
+.btn-effect:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 10px rgba(8, 8, 8, 0.818);
 }
-
-@media print {
-  .btn-cetak {
-    display: none; /* hide button when printing */
-  }
-}
-
-
-
-
 </style>
diff --git a/resources/assets/js/components/demo/voter/index.vue b/resources/assets/js/components/demo/voter/index.vue
index 447cd5a..59c0490 100644
--- a/resources/assets/js/components/demo/voter/index.vue
+++ b/resources/assets/js/components/demo/voter/index.vue
@@ -35,9 +35,9 @@
 							<a href="#"><b>PAUTAN MESYUARAT</b></a>
 						</router-link>
 
-						<router-link :to="{name: 'Penyata'}"  tag="li" exact>
+						<!-- <router-link :to="{name: 'Penyata'}"  tag="li" exact>
 							<a href="#"><b>PENYATA AHLI</b></a>
-						</router-link>		
+						</router-link>		 -->
 
 					</ul>
 					<ul class="nav navbar-right navbar-nav">