diff --git a/app/assets/stylesheets/_dashboard.scss b/app/assets/stylesheets/_dashboard.scss
index 4db48535..1f67302a 100644
--- a/app/assets/stylesheets/_dashboard.scss
+++ b/app/assets/stylesheets/_dashboard.scss
@@ -37,73 +37,96 @@
 }
 
 #projects-listing,  #projects-listing-pending, #projects-listing-approved {
-    table-layout: fixed;
-    border: 1px solid $gray-20;
-    border-radius: 3px;
-    padding: 5px 0px;
-    align-items: center;
-    gap: 16px;
-    color: $gray-60;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 18px;
-    width: 100%;
-    a {
-        text-decoration: none !important;
+
+  table-layout: fixed;
+  border: 1px solid $gray-20;
+  border-radius: 3px;
+  padding: 5px 0px;
+  align-items: center;
+  gap: 16px;
+  color: $gray-60;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  width: 100%;
+
+  .projects {
+
+    &-caption {
+      caption-side: top;
+    }
+
+    &-tabs {
+      align-content: center;
+    }
+
+    &-filter {
+      text-align: center;
+
+      &-btn {
+        height: 100%;
+      }
     }
 
-    thead .project th, tbody .project td {
+  }
+
+  a {
+    text-decoration: none !important;
+  }
+
+  thead .project th, tbody .project td {
+    border: none;
+  }
+
+  .project {
+    display: flex;
+    flex-wrap: wrap;
+    font-family: $libre-franklin;
+    border-bottom: 1px solid $gray-20;
+    background: $white;
+    padding: 12px;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+
+    td:first-child {
+        width: 100%;
+    } 
+
+    td: {
         border: none;
     }
-    
-    .project {
-        display: flex;
-        flex-wrap: wrap;       
-        font-family: $libre-franklin;
-        border-bottom: 1px solid $gray-20;
-        background: $white;
-        padding: 12px;
-        align-items: center;
-        gap: 8px;
-        align-self: stretch;
-
-        td:first-child {
-            width: 100%;
-        } 
-
-        td: {
-            border: none;
-        }
-
-        h2 {
-          display: block;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          color: $black;
-          font-family: $libre-franklin;
-          font-size: 16px !important;
-          font-style: normal;
-          font-weight: 600;
-          line-height: 24px;
-          text-decoration: none;
-        }
-        .details {
-            display: flex;
-            padding: 5px 0px;
-            align-items: center;
-            gap: 16px;
-            color: $gray-60;
-            font-size: 12px;
-            font-style: normal;
-            font-weight: 400;
-            line-height: 18px;
-            li {
-                float: left;
-                list-style: none;
-                padding: 0em .2em 0em 2em;
-            }
-        }
+
+    h2 {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: $black;
+      font-family: $libre-franklin;
+      font-size: 16px !important;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 24px;
+      text-decoration: none;
+    }
+
+    .details {
+      display: flex;
+      padding: 5px 0px;
+      align-items: center;
+      gap: 16px;
+      color: $gray-60;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 18px;
+
+      li {
+        float: left;
+        list-style: none;
+        padding: 0em .2em 0em 2em;
+      }
     }
 
     .last {
@@ -181,11 +204,11 @@
         height: 20px;
         vertical-align: top;
     }
-
+  }
 }
 
 #admin-listing {
     .section {
         margin-top: 2em;
     }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/_projects.scss b/app/assets/stylesheets/_projects.scss
index d394efec..c5b6476c 100644
--- a/app/assets/stylesheets/_projects.scss
+++ b/app/assets/stylesheets/_projects.scss
@@ -51,7 +51,7 @@
         padding-left: 20px;
         color: $red-darker;
     }
-    
+
     #project-description {
         color: $black;
         font-family: "Libre Franklin";
diff --git a/app/javascript/entrypoints/pulDataTables.js b/app/javascript/entrypoints/pulDataTables.js
index 759e47d8..47b7a117 100644
--- a/app/javascript/entrypoints/pulDataTables.js
+++ b/app/javascript/entrypoints/pulDataTables.js
@@ -19,7 +19,9 @@ export function setupTable(tableId) {
 
   // If we have a table initialize it with DataTables
   if (table) {
-    table.dataTable(datasetOptions);
+    if (table.dataTable) {
+      table.dataTable(datasetOptions);
+    }
   }
 }
 
diff --git a/app/views/welcome/_projects_listing.html.erb b/app/views/welcome/_projects_listing.html.erb
index 84b0458d..e601419d 100644
--- a/app/views/welcome/_projects_listing.html.erb
+++ b/app/views/welcome/_projects_listing.html.erb
@@ -1,18 +1,70 @@
 <div class="table">
-   <table id="<%= table_id %>" >
-   <thead>
-      <tr class="project heading">
-         <th>title</th>
-         <th>status</th>
-         <th>type</td>
-         <th>role</th>
-         <th>download</th>
-         <th>activity</th>
-         <th>quota_usage</th>
-      </tr>
-   </thead>
-   <tbody>
-      <%= render :partial => "project_list_view", :collection => projects, :as => :project %>
-   </tbody>
-   </table>
-</div>
\ No newline at end of file
+  <table id="<%= table_id %>">
+  <caption class="projects-caption">
+
+    <div class="container-fluid">
+      <div class="row">
+
+        <div class="col-12 col-lg-3 projects-tabs">
+          <ul class="nav nav-pills nav-fill">
+            <li class="nav-item">
+              <a class="nav-link active" aria-current="page">All</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="<%= root_path %>">Active</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="<%= root_path %>">Pending</a>
+            </li>
+          </ul>
+        </div>
+
+        <div class="col-12 col-lg-9 projects-filter">
+          <form class="container-fluid" role="search">
+            <div class="row">
+              <div class="col-12 col-lg-9 my-2">
+
+                <div class="input-group">
+                  <div class="form-floating">
+                    <input type="text" class="form-control" id="filter-input-text" placeholder="Search by project titles, roles, project types">
+                    <label for="filter-input-text">Search by project titles, roles, project types</label>
+                  </div>
+                  <span class="input-group-text">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>
+                  </span>
+                </div>
+              </div>
+
+              <div class="col-12 col-lg-2 my-2">
+                <button class="btn btn-primary projects-filter-btn" type="submit">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-up" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5m-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5"/></svg>
+                Sort</button>
+              </div>
+
+              <div class="col-12 col-lg-1 my-2 ">
+                <div class="container-fluid" style="height:100%; align-content: center;">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1"/></svg>
+                </div>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </caption>
+  <thead>
+    <tr class="project heading">
+        <th>title</th>
+        <th>status</th>
+        <th>type</td>
+        <th>role</th>
+        <th>download</th>
+        <th>activity</th>
+        <th>quota_usage</th>
+    </tr>
+  </thead>
+  <tbody>
+    <%= render :partial => "project_list_view", :collection => projects, :as => :project %>
+  </tbody>
+  </table>
+</div>