diff --git a/Areas/MMS/Controllers/MarineController.cs b/Areas/MMS/Controllers/MarineController.cs
index 07e5b87..e857dd3 100644
--- a/Areas/MMS/Controllers/MarineController.cs
+++ b/Areas/MMS/Controllers/MarineController.cs
@@ -8,6 +8,8 @@ namespace PSTW_CentralSystem.Areas.MMS.Controllers
 {
     [Area("MMS")]
 
+    //testing from main laptop
+
     //[Authorize(Policy = "RoleModulePolicy")]
     public class MarineController : Controller
     {
@@ -19,21 +21,21 @@ namespace PSTW_CentralSystem.Areas.MMS.Controllers
         {
             return View();
         }
-        // Generates and returns a Tar Ball Sampling Report PDF
+
         public IActionResult GenerateReport()
         {
             try
             {
-                var document = new TarBallPDF();
+                // Retrieve specific data based on the id, if required
+                var document = new TarBallPDF(); // Use id to customize the report if needed
                 var pdf = document.GeneratePdf();
                 var fileName = $"TarBallReport_{DateTime.Now:yyyyMMdd_HHmmss}.pdf";
                 return File(pdf, "application/pdf", fileName);
             }
             catch (Exception ex)
             {
-                // Log the error (use a logger if configured)
                 Console.WriteLine(ex.Message);
-                return StatusCode(StatusCodes.Status500InternalServerError, "An error occurred while generating the PDF. "+ex.Message);
+                return StatusCode(StatusCodes.Status500InternalServerError, "An error occurred while generating the PDF. " + ex.Message);
             }
         }
 
@@ -41,20 +43,17 @@ namespace PSTW_CentralSystem.Areas.MMS.Controllers
         {
             try
             {
-                // Generate the PDF document
-                var document = new TarBallPDF();
+                // Retrieve specific data based on the id, if required
+                var document = new TarBallPDF(); // Use id to customize the PDF if needed
                 var pdf = document.GeneratePdf();
-
-                // Return the PDF for inline viewing
                 return File(pdf, "application/pdf");
             }
             catch (Exception ex)
             {
-                // Log the error (use a logger if configured)
                 Console.WriteLine(ex.Message);
                 return StatusCode(StatusCodes.Status500InternalServerError, "An error occurred while viewing the PDF. " + ex.Message);
             }
         }
-        //ahbsf
+
     }
 }
diff --git a/Areas/MMS/Views/Marine/TarBallForm.cshtml b/Areas/MMS/Views/Marine/TarBallForm.cshtml
index 21f9e30..f8cd8b6 100644
--- a/Areas/MMS/Views/Marine/TarBallForm.cshtml
+++ b/Areas/MMS/Views/Marine/TarBallForm.cshtml
@@ -7,9 +7,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>
-        <h3>Tarball Report</h3>
-    </title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+    <title>Tarball Report</title>
     <style>
         .container {
             width: 1200px; /* Approximate width for A4 aspect ratio */
@@ -31,106 +30,111 @@
         }
 
         table {
-            width:100%;
-        }
-
-        datatable {
             width: 100%;
             border-collapse: collapse;
-            border: 1px solid #ccc;
         }
 
-        tr {
+        th, td {
             border: 1px solid #ccc;
-            padding:10px;
+            padding: 10px;
         }
 
-        th{
-            border: 1px solid #ccc;
-            padding:10px;
-        }
-
-        tbhead {
-            text-align:center;
+        .tbhead {
+            text-align: center;
         }
     </style>
 </head>
-
-<!--to be updated later for user input,db connection, etc-->
 <body>
-    <div class="container">
+    <div id="app" class="container">
         <div>
             <h4>Month</h4>
-            <select name="month" id="month" style="width: 100%; padding: 5px;">
+            <select v-model="selectedMonth" style="width: 100%; padding: 5px;">
                 <option value="default" selected disabled>Filter by Month</option>
-                <option value="january">January</option>
-                <option value="february">February</option>
-                <option value="march">March</option>
-                <option value="april">April</option>
-                <option value="may">May</option>
-                <option value="june">June</option>
-                <option value="july">July</option>
-                <option value="august">August</option>
-                <option value="september">September</option>
-                <option value="october">October</option>
-                <option value="november">November</option>
-                <option value="december">December</option>
+                <option v-for="month in months" :value="month">{{ month }}</option>
             </select>
 
             <h4>Year</h4>
-            <select name="year" id="year" style="width: 100%; padding: 5px;">
+            <select v-model="selectedYear" style="width: 100%; padding: 5px;">
                 <option value="default" selected disabled>Filter by Year</option>
-                <option value="January">January</option>
-                <!--based on database?-->
+                <option v-for="year in years" :value="year">{{ year }}</option>
             </select>
         </div>
 
         <div class="datatable">
             <table>
-                <tr class="tbhead">
-                    <th>???</th>
-                    <th>Date</th>
-                    <th>Station</th>
-                    <th>Approval Status</th>
-                    <th>PDF</th>
-                </tr>
-                <tr>
-                    <th></th>
-                    <th></th>
-                    <th></th>
-                    <th>
-                        <button class="btn btn-success">Approve</button>
-                        <button class="btn btn-danger">Reject</button>
-                    </th>
-                    <th>
-                        <a href="/MMS/Marine/ViewPDF" class="btn btn-primary" target="_blank">View PDF</a>
-                        <a href="/MMS/Marine/GenerateReport" class="btn btn-primary">Download PDF</a>
-                    </th>
-                </tr>
+                <thead>
+                    <tr>
+                        <th>No.</th>
+                        <th>Date</th>
+                        <th>Station</th>
+                        <th>Approval Status</th>
+                        <th>PDF</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="data in numberedData" :key="data.no">
+                        <td>{{ data.no }}</td>
+                        <td>{{ data.date }}</td>
+                        <td>{{ data.station }}</td>
+
+                        <td>
+                            <button class="btn btn-success">Approve</button>
+                            <button class="btn btn-danger">Reject</button>
+                        </td>
+                        <td>
+                            <a href="/MMS/Marine/ViewPDF" class="btn btn-primary" target="_blank">View PDF</a>
+                            <a href="/MMS/Marine/GenerateReport" class="btn btn-primary">Download PDF</a>
+                        </td>
+                    </tr>
+                </tbody>
             </table>
         </div>
-    </div> <!--CONTAINER END-->
+    </div>
 </body>
-<!--TESTING-->
 </html>
 
-@section Scripts {
+@section Scripts{
+
     <script>
-        document.addEventListener("DOMContentLoaded", function () {
-            const monthDropdown = document.getElementById("month");
-            const yearDropdown = document.getElementById("year");
+        new Vue({
+            el: '#app',
+            data: {
+                selectedMonth: '',
+                selectedYear: '',
+                months: [
+                    'January', 'February', 'March', 'April', 'May',
+                    'June', 'July', 'August', 'September',
+                    'October', 'November', 'December'
+                ],
+                mockData: [
+                    { date: '2023-01-15', station: 'Station A' },
+                    { date: '2024-02-20', station: 'Station B' },
+                    { date: '2023-03-10', station: 'Station C' },
+                    { date: '2025-04-05', station: 'Station A' },
+                    { date: '2023-05-18', station: 'Station B' },
+                    { date: '2024-06-11', station: 'Station C' },
+                    { date: '2025-07-23', station: 'Station A' },
+                    { date: '2023-08-09', station: 'Station B' },
+                    { date: '2024-09-25', station: 'Station C' },
+                    { date: '2025-10-14', station: 'Station A' }
+                ]
+            },
+                computed: {
+                    years() {
+                        const allYears = this.mockData.map(data => new Date(data.date).getFullYear());
+                        const minYear = Math.min(...allYears);
+                        const maxYear = Math.max(...allYears);
+                        return Array.from({ length: maxYear - minYear + 1 }, (_, i) => (minYear + i).toString());
+                    },
 
-            monthDropdown.addEventListener("change", filterData);
-            yearDropdown.addEventListener("change", filterData);
-
-            function filterData() {
-                const selectedMonth = monthDropdown.value;
-                const selectedYear = yearDropdown.value;
-
-                console.log("Selected Month:", selectedMonth);
-                console.log("Selected Year:", selectedYear);
-                // Logic for updating or sorting data goes here
-            }
+                    //increment for 'no.' column
+                    numberedData() {
+                        return this.mockData.map((data, index) => ({
+                            no: index + 1,
+                            ...data
+                        }));
+                    }
+                }
         });
     </script>
 }
\ No newline at end of file
diff --git a/Views/Shared/_Layout.cshtml b/Views/Shared/_Layout.cshtml
index c028ddf..b3bebc1 100644
--- a/Views/Shared/_Layout.cshtml
+++ b/Views/Shared/_Layout.cshtml
@@ -497,6 +497,7 @@
                                         <i class="mdi mdi-view-dashboard"></i><span class="hide-menu">Inventory Report</span>
                                     </a>
                                 </li>
+                                <!--MMS-->
                                 <li class="sidebar-item">
                                     <a class="sidebar-link has-arrow waves-effect waves-dark"
                                        href="javascript:void(0)" aria-expanded="false">

???	Date	Station	Approval Status	PDF
			- - -	- View PDF - Download PDF -
No.	Date	Station	Approval Status	PDF
{{ data.no }}	{{ data.date }}	{{ data.station }}	+ + +	+ View PDF + Download PDF +