diff --git a/Areas/MMS/Controllers/MarineController.cs b/Areas/MMS/Controllers/MarineController.cs
index 1a18fdc..a325004 100644
--- a/Areas/MMS/Controllers/MarineController.cs
+++ b/Areas/MMS/Controllers/MarineController.cs
@@ -55,16 +55,17 @@ namespace PSTW_CentralSystem.Areas.MMS.Controllers
             return View();
         }
 
-        public IActionResult TarBallForm()//Queries the database and returns a view with tarball data
+        public IActionResult TarBallForm()
         {
             try
             {
-                var marineTarballs = _context.MarineTarballs //ERRORRRRRRR======================================
+                var marineTarballs = _context.MarineTarballs
                     .Select(t => new
                     {
-                        t.Id,
-                        Date = t.DateSample.ToString("yyyy/MM/dd"),
-                        Station = t.StationID
+                        id = t.Id,
+                        date = t.DateSample.ToString("yyyy/MM/dd"),
+                        station = t.StationID,
+                        time = t.TimeSample.ToString("hh\\:mm\\:ss")
                     })
                     .ToList();
 
@@ -73,10 +74,8 @@ namespace PSTW_CentralSystem.Areas.MMS.Controllers
             }
             catch (Exception ex)
             {
-                // Show the real error in the browser (for debugging only)
                 return Content($"Error: {ex.Message}<br/>{ex.StackTrace}", "text/html");
             }
-
         }
 
         [HttpGet] // Explicitly mark as a GET endpoint
diff --git a/Areas/MMS/Models/PDFGenerator/TarBallPDF.cs b/Areas/MMS/Models/PDFGenerator/TarBallPDF.cs
index 379f31c..7fe9c82 100644
--- a/Areas/MMS/Models/PDFGenerator/TarBallPDF.cs
+++ b/Areas/MMS/Models/PDFGenerator/TarBallPDF.cs
@@ -308,11 +308,11 @@ namespace PSTW_CentralSystem.Areas.MMS.Models.PDFGenerator
 
                         // Row 2: Captions
                         table.Cell().Element(CellStyle)
-                            .Text(string.IsNullOrEmpty(_photoPath5) ? "" : $"Figure 5: {_optionalName1}")
+                            .Text($"Figure 5: {(_optionalName1 ?? "")}")
                             .FontSize(12).AlignLeft();
 
                         table.Cell().Element(CellStyle)
-                            .Text(string.IsNullOrEmpty(_photoPath6) ? "" : $"Figure 6: {_optionalName2}")
+                            .Text($"Figure 6: {(_optionalName2 ?? "")}")
                             .FontSize(12).AlignLeft();
 
                         // Row 3: Optional images 7 & 8
@@ -321,11 +321,11 @@ namespace PSTW_CentralSystem.Areas.MMS.Models.PDFGenerator
 
                         // Row 4: Captions
                         table.Cell().Element(CellStyle)
-                            .Text(string.IsNullOrEmpty(_photoPath7) ? "" : $"Figure 7: {_optionalName3}")
+                            .Text($"Figure 7: {(_optionalName3 ?? "")}")
                             .FontSize(12).AlignLeft();
 
                         table.Cell().Element(CellStyle)
-                            .Text(string.IsNullOrEmpty(_photoPath8) ? "" : $"Figure 8: {_optionalName4}")
+                            .Text($"Figure 8: {(_optionalName4 ?? "")}")
                             .FontSize(12).AlignLeft();
                     });
 
@@ -360,7 +360,7 @@ namespace PSTW_CentralSystem.Areas.MMS.Models.PDFGenerator
                         table.Cell().Element(CellStyle).Text("Signature").FontSize(12);
                         table.Cell().Element(CellStyle).Text("");
                         table.Cell().Element(CellStyle).Text("Date").FontSize(12);
-                        table.Cell().Element(CellStyle).Text($"{_dateSample:yyyyMMdd}").FontSize(12);
+                        table.Cell().Element(CellStyle).Text($"{_dateSample:dd/MM/yyyy}").FontSize(12);
 
                         table.Cell().Element(CellStyle).Text("Designation").FontSize(12);
                         table.Cell().ColumnSpan(3).Element(CellStyle).Text(_levelName).FontSize(12);
diff --git a/Areas/MMS/Views/Marine/TarBallForm.cshtml b/Areas/MMS/Views/Marine/TarBallForm.cshtml
index 2ee56d5..add8d50 100644
--- a/Areas/MMS/Views/Marine/TarBallForm.cshtml
+++ b/Areas/MMS/Views/Marine/TarBallForm.cshtml
@@ -69,6 +69,7 @@
                         <th>No.</th>
                         <th>Date</th>
                         <th>Station</th>
+                        <th>Time</th>
                         <th>Status</th>
                         <th>PDF</th>
                     </tr>
@@ -86,16 +87,26 @@
     <script>
         new Vue({
             el: '#app',
-            data: {
-                selectedMonth: '',
-                selectedYear: '',
-                months: [
-                    'January', 'February', 'March', 'April', 'May',
-                    'June', 'July', 'August', 'September',
-                    'October', 'November', 'December'
-                ],
-                dataFromServer: @Html.Raw(Json.Serialize(Model ?? new List<object>()))
-            },
+        data: {
+            selectedMonth: '',
+            selectedYear: '',
+            months: [
+                'January', 'February', 'March', 'April', 'May',
+                'June', 'July', 'August', 'September',
+                'October', 'November', 'December'
+            ],
+            dataFromServer: @Json.Serialize(Model ?? new List<object>()),
+            dataTable: null
+        },
+        mounted() {
+            if (this.dataFromServer && this.dataFromServer.length > 0) {
+                this.$nextTick(() => {
+                    this.initializeDataTable();
+                });
+            } else {
+                console.log("No data received from server");
+            }
+        },
             computed: {
                 years() {
                     if (!this.dataFromServer || this.dataFromServer.length === 0) {
@@ -138,31 +149,27 @@
                 clearFilters() {
                     this.selectedMonth = '';
                     this.selectedYear = '';
-                }
-            },
-            mounted() {
-                // Initialize DataTables after Vue has rendered the table
-                this.$nextTick(() => {
-                    const table = $('#tarballTable').DataTable({
+                },
+                initializeDataTable() {
+                    // Initialize DataTables
+                    const self = this; // Store the Vue instance context
+                    this.dataTable = $('#tarballTable').DataTable({
                         "pageLength": 10,
                         "lengthMenu": [5, 10, 15, 20],
                         "responsive": true,
                         "order": [[1, "desc"]], // Default sorting by Date column (descending)
                         "orderMulti": false, // Disable multi-column sorting
                         "columns": [
-                            {
-                                "data": null,
-                                "render": (data, type, row, meta) => meta.row + 1 // Dynamically generate "No."
-                            },
+                            { "data": null,"render": (data, type, row, meta) => meta.row + 1},
                             { "data": "date", "render": (data) => new Date(data).toLocaleDateString('en-GB') },
                             { "data": "station" },
-
+                            { "data": "time" }, // Removed the incorrect toLocaleDateString()
                             {
                                 "data": null,
                                 "render": () => `
-                                    <button class="btn btn-success">Approve</button>
-                                    <button class="btn btn-danger">Reject</button>
-                                `
+                                    <button class="btn btn-success" disabled>Approve</button>
+                                    <button class="btn btn-danger" disabled>Reject</button>
+                                    `
                             },
                             {
                                 "data": null,
@@ -174,22 +181,41 @@
                         ],
                         "rowCallback": function(row, data, index) {
                             // Update the "No." column to start from 1 for the current page
-                            const pageInfo = table.page.info();
+                            const pageInfo = this.api().page.info();
                             $('td:first', row).html(pageInfo.start + index + 1);
                         }
                     });
 
-                    // Populate the table with all data on initial load
-                    table.rows.add(this.dataFromServer).draw();
+                    // Populate the table with initial data
+                    this.updateDataTable(this.sortedFilteredData);
+
+                    //auto-filtering
+                    $('#tarballTable_filter input').on('keyup', function () {
+                        self.dataTable.search(this.value).draw();
+                    });
+                },
+                updateDataTable(data) {
+                    if (this.dataTable) {
+                        this.dataTable.clear();
+                        this.dataTable.rows.add(data);
+                        this.dataTable.draw();
+                    }
+                }
+            },
+            mounted() {
+                // Initialize DataTables after Vue has rendered the table
+                this.$nextTick(() => {
+                    this.initializeDataTable();
                 });
             },
             watch: {
-                sortedFilteredData() {
+                sortedFilteredData(newData) {
                     // Automatically update DataTables whenever the filtered data changes
-                    const table = $('#tarballTable').DataTable();
-                    table.clear();
-                    table.rows.add(this.sortedFilteredData);
-                    table.draw();
+                    this.updateDataTable(newData);
+                    //trigger search function after updating data(?)
+                    if(this.dataTable) {
+                        this.dataTable.search('').draw();//clear existing search
+                    }
                 }
             }
         });