diff --git a/app/views/home/employer.html.erb b/app/views/home/employer.html.erb
index e99ce01..6cd5d58 100644
--- a/app/views/home/employer.html.erb
+++ b/app/views/home/employer.html.erb
@@ -1 +1,97 @@
-<h1>Employer</h1>
\ No newline at end of file
+<div class="container mt-4">
+  <h2>Participant</h2>
+    <table class="table">
+    <tbody>
+      <tr>
+        <th scope="row">Program</th>
+        <td><input type="text" class="form-control"></td>
+        <th scope="row">MCI</th>
+        <td><input type="text" class="form-control"></td>
+      </tr>
+      <tr>
+        <th scope="row">Name</th>
+        <td><input type="text" class="form-control"></td>
+        <th scope="row">DOB</th>
+        <td><input type="text" class="form-control"></td>
+      </tr>
+      <tr>
+        <th scope="row">Address</th>
+        <td><textarea class="form-control autoresize" rows="2"></textarea></td>
+        <th scope="row">SSN</th>
+        <td><input type="text" class="form-control"></td>
+      </tr>
+      <tr>
+        <th scope="row">Phone</th>
+        <td><input type="tel" class="form-control"></td>
+        <th scope="row">Gender</th>
+        <td><input type="text" class="form-control"></td>
+      </tr>
+      <tr>
+        <th scope="row">Email</th>
+        <td><input type="email" class="form-control"></td>
+      </tr>
+    </tbody>
+  </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) {
+      element.style.overflow = 'hidden';
+      element.addEventListener('input', autoResize, false);
+    });
+
+    function autoResize() {
+      this.style.height = 'auto';
+      this.style.height = (this.scrollHeight) + 'px';
+    }
+  });
+</script>
diff --git a/app/views/home/vendor.html.erb b/app/views/home/vendor.html.erb
index e7cab7e..6cd5d58 100644
--- a/app/views/home/vendor.html.erb
+++ b/app/views/home/vendor.html.erb
@@ -1 +1,97 @@
-<h1>Vendor</h1>
\ No newline at end of file
+<div class="container mt-4">
+  <h2>Participant</h2>
+    <table class="table">
+    <tbody>
+      <tr>
+        <th scope="row">Program</th>
+        <td><input type="text" class="form-control"></td>
+        <th scope="row">MCI</th>
+        <td><input type="text" class="form-control"></td>
+      </tr>
+      <tr>
+        <th scope="row">Name</th>
+        <td><input type="text" class="form-control"></td>
+        <th scope="row">DOB</th>
+        <td><input type="text" class="form-control"></td>
+      </tr>
+      <tr>
+        <th scope="row">Address</th>
+        <td><textarea class="form-control autoresize" rows="2"></textarea></td>
+        <th scope="row">SSN</th>
+        <td><input type="text" class="form-control"></td>
+      </tr>
+      <tr>
+        <th scope="row">Phone</th>
+        <td><input type="tel" class="form-control"></td>
+        <th scope="row">Gender</th>
+        <td><input type="text" class="form-control"></td>
+      </tr>
+      <tr>
+        <th scope="row">Email</th>
+        <td><input type="email" class="form-control"></td>
+      </tr>
+    </tbody>
+  </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) {
+      element.style.overflow = 'hidden';
+      element.addEventListener('input', autoResize, false);
+    });
+
+    function autoResize() {
+      this.style.height = 'auto';
+      this.style.height = (this.scrollHeight) + 'px';
+    }
+  });
+</script>
diff --git a/app/views/home/worker.html.erb b/app/views/home/worker.html.erb
index db8a079..6cd5d58 100644
--- a/app/views/home/worker.html.erb
+++ b/app/views/home/worker.html.erb
@@ -1 +1,97 @@
-<h1>Worker</h1>
\ No newline at end of file
+<div class="container mt-4">
+  <h2>Participant</h2>
+    <table class="table">
+    <tbody>
+      <tr>
+        <th scope="row">Program</th>
+        <td><input type="text" class="form-control"></td>
+        <th scope="row">MCI</th>
+        <td><input type="text" class="form-control"></td>
+      </tr>
+      <tr>
+        <th scope="row">Name</th>
+        <td><input type="text" class="form-control"></td>
+        <th scope="row">DOB</th>
+        <td><input type="text" class="form-control"></td>
+      </tr>
+      <tr>
+        <th scope="row">Address</th>
+        <td><textarea class="form-control autoresize" rows="2"></textarea></td>
+        <th scope="row">SSN</th>
+        <td><input type="text" class="form-control"></td>
+      </tr>
+      <tr>
+        <th scope="row">Phone</th>
+        <td><input type="tel" class="form-control"></td>
+        <th scope="row">Gender</th>
+        <td><input type="text" class="form-control"></td>
+      </tr>
+      <tr>
+        <th scope="row">Email</th>
+        <td><input type="email" class="form-control"></td>
+      </tr>
+    </tbody>
+  </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) {
+      element.style.overflow = 'hidden';
+      element.addEventListener('input', autoResize, false);
+    });
+
+    function autoResize() {
+      this.style.height = 'auto';
+      this.style.height = (this.scrollHeight) + 'px';
+    }
+  });
+</script>