diff --git a/navigation/index.js b/navigation/index.js
index 106b839..383a3e0 100644
--- a/navigation/index.js
+++ b/navigation/index.js
@@ -39,6 +39,18 @@ export default [
           },
         ],
       },
+      {
+        title: "FOR-03",
+        icon: "ph:number-circle-two-fill",
+        child: [
+          {
+            title: "e-library",
+            path: "/e-library",
+            child: [],
+            meta: {},
+          },
+        ],
+      },
     ],
   },
   {
diff --git a/pages/e-library/index.vue b/pages/e-library/index.vue
new file mode 100644
index 0000000..c434a2f
--- /dev/null
+++ b/pages/e-library/index.vue
@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <div class="flex justify-between items-center">
+      <h1>E-Library</h1>
+    </div>
+
+    <div class="mt-4">
+      <rs-card class="py-1">
+        <rs-table
+          :data="tableData"
+          :options="{
+            variant: 'default',
+            striped: true,
+            borderless: true,
+          }"
+          :options-advanced="{
+            sortable: true,
+            filterable: false,
+          }"
+          advanced
+        >
+          <template v-slot:aksi="data">
+            <div class="flex gap-2">
+              <rs-button
+                @click="viewItem(data.value.noSiri)"
+                variant="info"
+                size="sm"
+                class="p-1"
+                title="Lihat"
+              >
+                <Icon name="ic:outline-visibility" size="1.2rem" />
+              </rs-button>
+            </div>
+          </template>
+        </rs-table>
+      </rs-card>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+
+const tableData = ref([]);
+
+const generateData = () => {
+  const data = [];
+  for (let i = 1; i <= 10; i++) {
+    data.push({
+      noSiri: `NS${String(i).padStart(3, "0")}`,
+      pengguna: `Pengguna ${i}`,
+      subjek: `Subjek ${i}`,
+      tarikh: new Date(2023, 0, i).toLocaleDateString("ms-MY"),
+      aksi: { noSiri: `NS${String(i).padStart(3, "0")}` },
+    });
+  }
+  return data;
+};
+
+const viewItem = (noSiri) => {
+  console.log(`View item with noSiri: ${noSiri}`);
+  // Implement view functionality
+
+  navigateTo(`/e-library/maklumat/${noSiri}`);
+};
+
+const editItem = (noSiri) => {
+  console.log(`Edit item with noSiri: ${noSiri}`);
+  // Implement edit functionality
+};
+
+onMounted(() => {
+  tableData.value = generateData();
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/pages/e-library/maklumat/[noSiri]/index.vue b/pages/e-library/maklumat/[noSiri]/index.vue
new file mode 100644
index 0000000..3c646e0
--- /dev/null
+++ b/pages/e-library/maklumat/[noSiri]/index.vue
@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <h1 class="text-2xl font-bold mb-4">Maklumat E-Library</h1>
+    <rs-card class="mt-4 p-4">
+      <div v-if="loading">Loading...</div>
+      <div v-else-if="error">{{ error }}</div>
+      <div v-else>
+        <h2 class="text-xl font-semibold mb-2">No. Siri: {{ noSiri }}</h2>
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <p><strong>Nama Pemohon:</strong> {{ permohonanData.namaPemohon }}</p>
+            <p><strong>Pangkat Pemohon:</strong> {{ permohonanData.pangkatPemohon }}</p>
+            <p>
+              <strong>No. Pegawai Pemohon:</strong> {{ permohonanData.noPegawaiPemohon }}
+            </p>
+          </div>
+          <div>
+            <p><strong>Nama Penghantar:</strong> {{ permohonanData.namaPenghantar }}</p>
+            <p>
+              <strong>Pangkat Penghantar:</strong> {{ permohonanData.pangkatPenghantar }}
+            </p>
+            <p>
+              <strong>No. Pegawai Penghantar:</strong>
+              {{ permohonanData.noPegawaiPenghantar }}
+            </p>
+          </div>
+        </div>
+        <div class="mt-4">
+          <p>
+            <strong>Ringkasan Kenyataan Kes:</strong>
+            {{ permohonanData.ringkasanKenyataanKes }}
+          </p>
+          <p>
+            <strong>No. Kertas Siasatan:</strong> {{ permohonanData.noKertasSiasatan }}
+          </p>
+          <p><strong>No. Laporan Polis:</strong> {{ permohonanData.noLaporanPolis }}</p>
+          <p><strong>Tarikh Temujanji:</strong> {{ permohonanData.tarikhTemujanji }}</p>
+          <p><strong>Slot Masa:</strong> {{ permohonanData.slotMasa }}</p>
+        </div>
+        <div class="mt-4">
+          <h3 class="text-lg font-semibold mb-2">Senarai Barang</h3>
+          <ul>
+            <li v-for="(barang, index) in permohonanData.barangList" :key="index">
+              {{ barang.jenisBarangDetailLabel }} - {{ barang.jenisBarangSiber }}
+            </li>
+          </ul>
+        </div>
+      </div>
+    </rs-card>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute();
+const noSiri = ref(route.params.noSiri);
+const permohonanData = ref({});
+const loading = ref(true);
+const error = ref(null);
+
+const fetchPermohonanData = async () => {
+  try {
+    const response = await $fetch(`/api/permohonan/${noSiri.value}`);
+    if (response.statusCode === 200) {
+      permohonanData.value = response.data;
+    } else {
+      throw new Error(response.message);
+    }
+  } catch (err) {
+    error.value = "Failed to fetch permohonan data. Please try again.";
+    console.error(err);
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  fetchPermohonanData();
+});
+</script>
+
+<style scoped>
+/* Add any scoped styles here if needed */
+</style>
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 8aed110..0560b9e 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -35,6 +35,7 @@ model document {
   temujanji_temujanji_gambarSubjekTodocument  temujanji[]                    @relation("temujanji_gambarSubjekTodocument")
   temujanji_temujanji_gambarCapJariTodocument temujanji[]                    @relation("temujanji_gambarCapJariTodocument")
   temujanji_detail                            temujanji_detail[]
+  temujanji_log                               temujanji_log[]
 
   @@index([userID], map: "userID")
 }
@@ -312,6 +313,7 @@ model report_doc_support {
 
 model temujanji {
   temujanjiID                                Int               @id @default(autoincrement())
+  noSiri                                     String            @db.VarChar(255)
   temujanjiDetailID                          Int?
   pemohonID                                  Int
   jenisSemakan                               String            @db.VarChar(255)
@@ -326,6 +328,7 @@ model temujanji {
   document_temujanji_gambarCapJariTodocument document?         @relation("temujanji_gambarCapJariTodocument", fields: [gambarCapJari], references: [documentID], onDelete: NoAction, onUpdate: NoAction, map: "fk_gambarCapJari")
   pemohon                                    pemohon           @relation(fields: [pemohonID], references: [id], onDelete: NoAction, onUpdate: NoAction, map: "temujanji_ibfk_1")
   temujanji_detail                           temujanji_detail? @relation(fields: [temujanjiDetailID], references: [temujanjiDetailID], onDelete: NoAction, onUpdate: NoAction, map: "temujanji_ibfk_4")
+  temujanji_log                              temujanji_log[]
 
   @@index([gambarCapJari], map: "idx_gambarCapJari")
   @@index([gambarSubjek], map: "idx_gambarSubjek")
@@ -367,3 +370,49 @@ model temujanji_detail {
 
   @@index([laporanSystemTdb], map: "idx_laporanSystemTdb")
 }
+
+model temujanji_log {
+  temujanjiLogID       Int       @id @default(autoincrement())
+  temujanjiID          Int
+  pemohonID            Int?
+  jenisSemakan         String?   @db.VarChar(255)
+  tarikh               DateTime? @db.Date
+  masa                 DateTime? @db.Time(0)
+  gambarSubjek         Int?
+  gambarCapJari        Int?
+  negara               String?   @db.VarChar(255)
+  namaPemilik          String?   @db.VarChar(255)
+  noDokumen            String?   @db.VarChar(255)
+  kewarganegaraan      String?   @db.VarChar(255)
+  tarikhLahir          DateTime? @db.Date
+  jantina              String?   @db.VarChar(255)
+  tarikhLuputDokumen   DateTime? @db.Date
+  skorPersamaanMuka    Decimal?  @db.Decimal(10, 2)
+  skorPersamaanCapJari Decimal?  @db.Decimal(10, 2)
+  umur                 Int?
+  tinggi               Decimal?  @db.Decimal(10, 2)
+  warnaRambut          String?   @db.VarChar(255)
+  bangsa               String?   @db.VarChar(255)
+  etnik                String?   @db.VarChar(255)
+  bentukKepala         String?   @db.VarChar(255)
+  mata                 String?   @db.VarChar(255)
+  telinga              String?   @db.VarChar(255)
+  hidung               String?   @db.VarChar(255)
+  mulut                String?   @db.VarChar(255)
+  parut                String?   @db.VarChar(255)
+  sejarahPerjalanan    String?   @db.VarChar(255)
+  persamaanTandaTangan String?   @db.VarChar(255)
+  pemeriksaanLain      String?   @db.VarChar(255)
+  dapatan              String?   @db.VarChar(255)
+  laporanSystemTdb     Int?
+  create_at            DateTime? @db.DateTime(0)
+  modified_at          DateTime? @db.DateTime(0)
+  document             document? @relation(fields: [laporanSystemTdb], references: [documentID], onDelete: NoAction, onUpdate: NoAction, map: "temujanji_log_ibfk_1")
+  temujanji            temujanji @relation(fields: [temujanjiID], references: [temujanjiID], onDelete: NoAction, onUpdate: NoAction, map: "temujanji_log_ibfk_2")
+
+  @@index([gambarCapJari], map: "gambarCapJari")
+  @@index([gambarSubjek], map: "gambarSubjek")
+  @@index([laporanSystemTdb], map: "laporanSystemTdb")
+  @@index([pemohonID], map: "pemohonID")
+  @@index([temujanjiID], map: "temujanjiID")
+}
diff --git a/server/api/elibrary/index.get.js b/server/api/elibrary/index.get.js
new file mode 100644
index 0000000..e915136
--- /dev/null
+++ b/server/api/elibrary/index.get.js
@@ -0,0 +1,91 @@
+export default defineEventHandler(async (event) => {
+    // Get the `noSiri` from the request parameters
+    const { noSiri } = event.context.params;
+  
+    try {
+      // Fetch the permohonan by `no_siri` from the Prisma database
+      const permohonan = await prisma.permohonan.findUnique({
+        where: {
+          no_siri: noSiri, // Unique identifier for permohonan
+        },
+        include: {
+          // Include related fields if necessary
+          pemohon: {
+            select: {
+              user: {
+                select: {
+                  userFullName: true,
+                },
+              },
+              pangkat_pemohon: true,
+              no_pegawai_pemohon: true,
+            },
+          },
+          penghantar: true,
+          report: {
+            select: {
+              jenis_barang: true,
+              lookup_report_jenis_barangTolookup: {
+                select: {
+                  lookupID: true,
+                  lookupValue: true,
+                },
+              },
+              tanda_barang: true,
+              keadaan_barang: true,
+              kuantiti_barang: true,
+            },
+          },
+        },
+      });
+  
+      // If no permohonan found, return a 404 response
+      if (!permohonan) {
+        return {
+          statusCode: 404,
+          message: `Permohonan with noSiri ${noSiri} not found`,
+        };
+      }
+      // Map and return the data as expected by the frontend
+      return {
+        statusCode: 200,
+        data: {
+          namaPemohon: permohonan.pemohon?.user?.userFullName || "", // Get namaPemohon from userID
+          pangkatPemohon: permohonan.pemohon?.pangkat_pemohon || "",
+          noPegawaiPemohon: permohonan.pemohon?.no_pegawai_pemohon || "",
+          namaPenghantar: permohonan.penghantar?.nama_penghantar || "",
+          pangkatPenghantar: permohonan.penghantar?.pangkat_penghantar || "",
+          noPegawaiPenghantar: permohonan.penghantar?.no_pegawai_penghantar || "",
+          ringkasanKenyataanKes: permohonan.ringkasan_kenyataan_kes || "",
+          bilangan: permohonan.bilangan || 0,
+          barangList: permohonan.report.map((barang) => ({
+            jenisBarangDetail:
+              barang.lookup_report_jenis_barangTolookup.lookupID || "",
+            jenisBarangDetailLabel:
+              barang.lookup_report_jenis_barangTolookup.lookupValue || "",
+            tandaBarang: barang.tanda_barang || "",
+            keadaanBarang: barang.keadaan_barang || "",
+            kuantitiBarang: barang.kuantiti_barang || 0,
+          })),
+          noKertasSiasatan: permohonan.no_kertas_siasatan || "",
+          noLaporanPolis: permohonan.no_laporan_polis || "",
+          tarikhTemujanji:
+            permohonan.tarikh_temujanji?.toISOString().split("T")[0] || "",
+          slotMasa: permohonan.slot_masa
+            ? new Date(permohonan.slot_masa).toLocaleTimeString("en-US", {
+                hour: "2-digit",
+                minute: "2-digit",
+                hour12: false,
+              })
+            : "",
+          isPenghantarSameAsPemohon: !permohonan.penghantar,
+        },
+      };
+    } catch (error) {
+      console.error("Error fetching permohonan:", error);
+      return {
+        statusCode: 500,
+        message: "An error occurred while fetching the permohonan data.",
+      };
+    }
+});
\ No newline at end of file
diff --git a/server/api/temujanji/[temujanjiID].put.js b/server/api/temujanji/[temujanjiID].put.js
index 069937a..9781ac6 100644
--- a/server/api/temujanji/[temujanjiID].put.js
+++ b/server/api/temujanji/[temujanjiID].put.js
@@ -7,7 +7,13 @@ export default defineEventHandler(async (event) => {
     const temujanjiDetailsID = await prisma.temujanji.findFirst({
       where: { temujanjiID: parseInt(temujanjiID) },
       select: {
+        temujanjiID: true,
         temujanjiDetailID: true,
+        noSiri: true,
+        jenisSemakan: true,
+        tarikh: true,
+        masa: true,
+        status: true,
       },
     });
 
@@ -47,6 +53,40 @@ export default defineEventHandler(async (event) => {
       },
     });
 
+    // insert temujanji_log
+    await prisma.temujanji_log.create({
+      data: {
+        temujanjiID: parseInt(temujanjiID),
+        jenisSemakan: temujanjiDetailsID.jenisSemakan,
+        tarikh: temujanjiDetailsID.tarikh,
+        masa: temujanjiDetailsID.masa,
+        negara: body.negara,
+        namaPemilik: body.namaPemilik,
+        noDokumen: body.noDokumen,
+        kewarganegaraan: body.kewarganegaraan,
+        tarikhLahir: new Date(body.tarikhLahir),
+        jantina: body.jantina,
+        tarikhLuputDokumen: new Date(body.tarikhLuputDokumen),
+        skorPersamaanMuka: parseFloat(body.skorPersamaanMuka),
+        skorPersamaanCapJari: parseFloat(body.skorPersamaanCapJari),
+        umur: body.umur ? parseInt(body.umur) : null,
+        tinggi: body.tinggi ? parseFloat(body.tinggi) : null,
+        warnaRambut: body.warnaRambut || null,
+        bangsa: body.bangsa || null,
+        etnik: body.etnik || null,
+        bentukKepala: body.bentukKepala || null,
+        mata: body.mata || null,
+        telinga: body.telinga || null,
+        hidung: body.hidung || null,
+        mulut: body.mulut || null,
+        parut: body.parut || null,
+        sejarahPerjalanan: body.sejarahPerjalanan || null,
+        persamaanTandaTangan: body.persamaanTandaTangan || null,
+        pemeriksaanLain: body.pemeriksaanLain || null,
+        dapatan: body.dapatan,
+      },
+    });
+
     return {
       statusCode: 200,
       message: "Temujanji berjaya dikemaskini.",