diff --git a/app/views/home/participant.html.erb b/app/views/home/participant.html.erb
index d3f4193..30428a1 100644
--- a/app/views/home/participant.html.erb
+++ b/app/views/home/participant.html.erb
@@ -1,7 +1,6 @@
-<h1>Participant</h1>
-
 <div class="container mt-4">
-  <table class="table">
+  <h2>Participant</h2>
+    <table class="table">
     <tbody>
       <tr>
         <th scope="row">Program</th>
@@ -35,6 +34,54 @@
   </table>
 </div>
 
+
+<div class="container mt-4">
+  <h2>Workers</h2>
+  <table class="table">
+    <thead>
+      <tr>
+        <th scope="col">Name</th>
+        <th scope="col">Start Date</th>
+        <th scope="col">End Date</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><input type="text" class="form-control" ></td>
+        <td><input type="date" class="form-control" placeholder="Start Date"></td>
+        <td><input type="date" class="form-control" placeholder="End Date"></td>
+      </tr>
+      <!-- Additional rows as needed -->
+    </tbody>
+  </table>
+</div>
+
+<div class="container mt-4">
+  <h2>Vendors</h2>
+  <table class="table">
+    <thead>
+      <tr>
+        <th scope="col">Name</th>
+        <th scope="col">Start Date</th>
+        <th scope="col">End Date</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><input type="text" class="form-control" ></td>
+        <td><input type="date" class="form-control" placeholder="Start Date"></td>
+        <td><input type="date" class="form-control" placeholder="End Date"></td>
+      </tr>
+      <!-- Additional rows as needed -->
+    </tbody>
+  </table>
+    
+        <button type="button" class="btn btn-outline-primary">Add New</button>
+    
+</div>
+
+
+
 <script>
   document.addEventListener('DOMContentLoaded', function () {
     document.querySelectorAll('.autoresize').forEach(function (element) {