diff --git a/app/assets/stylesheets/_dashboard.scss b/app/assets/stylesheets/_dashboard.scss
index 022be1ca..98082d98 100644
--- a/app/assets/stylesheets/_dashboard.scss
+++ b/app/assets/stylesheets/_dashboard.scss
@@ -1,357 +1,392 @@
-
 @import "variables";
 @import "typography";
 @import "bootstrap";
 
 .fixed-table {
-    width: 100%;
-    table-layout: fixed;
+  width: 100%;
+  table-layout: fixed;
 }
 
 .fixed-table td {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 // hide pagination menu
 .dataTables_length {
-    display: none;
+  display: none;
 }
 
 // put pages and totals on the same line
 .dataTables_info {
-     float: left;
+  float: left;
 }
 
 // Put pagination on the far right
 .dataTables_paginate {
-    float: right;
-    .paginate_button {
-        padding: 0.25em;
-        color: $gray-60;
-    }
-    .paginate_button.current, .paginate_button.disabled {
-        text-decoration: none;
+  float: right;
+  .paginate_button {
+    padding: 0.25em;
+    color: $gray-60;
+  }
+  .paginate_button.current,
+  .paginate_button.disabled {
+    text-decoration: none;
+  }
+}
+
+.projects {
+  &-tabs {
+    align-content: center;
+  }
+
+  &-filter {
+    text-align: center;
+
+    &-btn {
+      height: 100%;
     }
+  }
 }
 
-#projects-listing,  #projects-listing-pending, #projects-listing-approved {
-    table-layout: fixed;
-    border: 1px solid $gray-20;
-    border-radius: 3px;
-    padding: 5px 0px;
+#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;
+  }
+
+  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: 16px;
-    color: $gray-60;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 18px;
-    width: 100%;
-    a {
-        text-decoration: none !important;
+    gap: 8px;
+    align-self: stretch;
+
+    td:first-child {
+      width: 100%;
     }
 
-    thead .project th, tbody .project td {
-        border: none;
+    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%;
-        }
+      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;
+    }
 
-        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;
-            }
-        }
+    .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 0.2em 0em 2em;
+      }
     }
 
     .last {
-        border-bottom: none;
+      border-bottom: none;
     }
 
     .status {
-        text-transform: capitalize;
+      text-transform: capitalize;
     }
 
     .status::before {
-        content: "";
-        display: inline-flex;
-        width: 20px;
-        height: 20px;
-        vertical-align: top;
+      content: "";
+      display: inline-flex;
+      width: 20px;
+      height: 20px;
+      vertical-align: top;
     }
 
     .active {
-        background: url("status_active.svg") no-repeat;
+      background: url("status_active.svg") no-repeat;
     }
 
     .pending {
-        background: url("status_pending.svg") no-repeat;
+      background: url("status_pending.svg") no-repeat;
     }
 
     .approved {
-        background: url("status_approved.svg") no-repeat;
+      background: url("status_approved.svg") no-repeat;
     }
 
     .rejected {
-        background: url("status_rejected.svg") no-repeat;
+      background: url("status_rejected.svg") no-repeat;
     }
 
     .project-type {
-        text-transform: capitalize;
+      text-transform: capitalize;
     }
 
     .project-type::before {
-        content: "";
-        display: inline-flex;
-        background: url("project_type.svg") no-repeat;
-        width: 20px;
-        height: 20px;
-        vertical-align: top;
+      content: "";
+      display: inline-flex;
+      background: url("project_type.svg") no-repeat;
+      width: 20px;
+      height: 20px;
+      vertical-align: top;
     }
 
     .user-role {
-        text-transform: capitalize;
+      text-transform: capitalize;
     }
 
     .user-role::before {
-        content: "";
-        display: inline-flex;
-        background: url("user_role.svg") no-repeat;
-        width: 20px;
-        height: 20px;
-        vertical-align: top;
+      content: "";
+      display: inline-flex;
+      background: url("user_role.svg") no-repeat;
+      width: 20px;
+      height: 20px;
+      vertical-align: top;
     }
 
     .last-download::before {
-        content: "";
-        display: inline-flex;
-        background: url("last_download.svg") no-repeat;
-        width: 20px;
-        height: 20px;
-        vertical-align: top;
+      content: "";
+      display: inline-flex;
+      background: url("last_download.svg") no-repeat;
+      width: 20px;
+      height: 20px;
+      vertical-align: top;
     }
 
     .last-activity::before {
-        content: "";
-        display: inline-flex;
-        background: url("last_activity.svg") no-repeat;
-        width: 20px;
-        height: 20px;
-        vertical-align: top;
+      content: "";
+      display: inline-flex;
+      background: url("last_activity.svg") no-repeat;
+      width: 20px;
+      height: 20px;
+      vertical-align: top;
     }
-
+  }
 }
 
 #admin-listing {
-    .section {
-        margin-top: 2em;
-    }
+  .section {
+    margin-top: 2em;
+  }
 }
 
 .welcome-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3.75rem;
+  align-self: stretch;
+
+  .welcome-pane {
     display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 3.75rem;
+    justify-content: space-between;
+    align-items: center;
     align-self: stretch;
+  }
 
-    .welcome-pane {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        align-self: stretch;
+  .detail-pane {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    align-self: stretch;
+
+    .main {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 1.25rem;
     }
 
-    .detail-pane {
+    .sidebar {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1.25rem;
+      align-self: stretch;
+
+      .downloads {
         display: flex;
+        width: 17.8125rem;
+        flex-direction: column;
         align-items: center;
-        gap: 1.25rem;
-        align-self: stretch;
 
-        .main {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            gap: 1.25rem;
+        border-radius: 0.75rem;
+        background: $gray-10;
+
+        .header {
+          display: flex;
+          padding: 0.75rem 0.75rem 0rem 0.75rem;
+          justify-content: space-between;
+          align-items: center;
+          align-self: stretch;
         }
+        .details {
+          display: flex;
+          align-items: center;
+          align-self: stretch;
 
-        .sidebar {
+          .content {
             display: flex;
+            padding: 0.5rem 0rem 0.5rem 0.5rem;
             flex-direction: column;
-            align-items: center;
-            gap: 1.25rem;
-            align-self: stretch;
-
-            .downloads {
+            align-items: flex-start;
+            flex: 1 0 0;
+            overflow: hidden;
+
+            .container1 {
+              display: flex;
+              padding: 0.5rem 0.5rem 0.5rem 0.5rem;
+              flex-direction: column;
+              align-self: stretch;
+              align-items: flex-start;
+              flex: 1 0 0;
+
+              .container2 {
                 display: flex;
-                width: 17.8125rem;
                 flex-direction: column;
-                align-items: center;
+                align-items: flex-start;
+                align-self: stretch;
+                border-radius: 0.5rem;
 
-                border-radius: 0.75rem;
-                background: $gray-10;
+                .container3 {
+                  display: flex;
+                  flex-direction: column;
+                  align-items: flex-start;
+                  align-self: stretch;
 
-                .header {
+                  .download-item {
                     display: flex;
-                    padding: 0.75rem 0.75rem 0rem 0.75rem;
-                    justify-content: space-between;
-                    align-items: center;
+                    padding: 0.75rem;
+                    flex-direction: column;
+                    align-items: flex-start;
+                    gap: 0.125rem;
                     align-self: stretch;
-                }
-                .details {
-                    display: flex;
-                    align-items: center;
-                    align-self: stretch;
-
-                    .content {
-                        display: flex;
-                        padding: 0.5rem 0rem 0.5rem 0.5rem;
-                        flex-direction: column;
-                        align-items: flex-start;
-                        flex: 1 0 0;
-                        overflow: hidden;
-
-                        .container1 {
-                            display: flex;
-                            padding: 0.5rem 0.5rem 0.5rem 0.5rem;
-                            flex-direction: column;
-                            align-self: stretch;
-                            align-items: flex-start;
-                            flex: 1 0 0;
-
-                            .container2 {
-                                display: flex;
-                                flex-direction: column;
-                                align-items: flex-start;
-                                align-self: stretch;
-                                border-radius: 0.5rem;
-
-                                .container3 {
-                                    display: flex;
-                                    flex-direction: column;
-                                    align-items: flex-start;
-                                    align-self: stretch;
-
-                                    .download-item {
-                                        display: flex;
-                                        padding: 0.75rem;
-                                        flex-direction: column;
-                                        align-items: flex-start;
-                                        gap: 0.125rem;
-                                        align-self: stretch;
-                                        border-bottom: 1px solid $gray-10;
-                                        background: $white;
-
-                                        .title {
-                                            height: 1.3125rem;
-                                            align-self: stretch;
-                                            overflow: hidden;
-                                            color: $black;
-                                            text-overflow: ellipsis;
-                                            white-space: nowrap;
-                                            /* Body XXS Bold */
-                                            font-family: "Libre Franklin";
-                                            font-size: 0.75rem;
-                                            font-style: normal;
-                                            font-weight: 600;
-                                            line-height: 1.125rem; /* 150% */
-
-                                            a {
-                                                text-decoration: none;
-                                                color: $black;
-                                            }
-                                        }
-
-                                        .details {
-                                            display: flex;
-                                            justify-content: space-between;
-                                            align-items: center;
-                                            align-self: stretch;
-
-                                            .expiration {
-                                                color: $gray-60;
-                                                /* Body XXS */
-                                                font-family: "Libre Franklin";
-                                                font-size: 0.75rem;
-                                                font-style: normal;
-                                                font-weight: 400;
-                                                line-height: 1.125rem; /* 150% */
-                                            }
-
-                                            .size {
-                                                color: $gray-60;
-                                                /* Body XXS */
-                                                font-family: "Libre Franklin";
-                                                font-size: 0.75rem;
-                                                font-style: normal;
-                                                font-weight: 400;
-                                                line-height: 1.125rem; /* 150% */
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
+                    border-bottom: 1px solid $gray-10;
+                    background: $white;
+
+                    .title {
+                      height: 1.3125rem;
+                      align-self: stretch;
+                      overflow: hidden;
+                      color: $black;
+                      text-overflow: ellipsis;
+                      white-space: nowrap;
+                      /* Body XXS Bold */
+                      font-family: "Libre Franklin";
+                      font-size: 0.75rem;
+                      font-style: normal;
+                      font-weight: 600;
+                      line-height: 1.125rem; /* 150% */
+
+                      a {
+                        text-decoration: none;
+                        color: $black;
+                      }
                     }
 
-                    .scrollbar {
-                        display: flex;
-                        padding: 1rem 0.125rem 0.25rem 0.125rem;
-                        flex-direction: column;
-                        align-items: center;
-                        align-self: stretch;
-
-                        .indicator {
-                            width: 0.25rem;
-                            height: 3.125rem;
-                            border-radius: 0.5rem;
-                            background: $gray-10;
-                        }
+                    .details {
+                      display: flex;
+                      justify-content: space-between;
+                      align-items: center;
+                      align-self: stretch;
+
+                      .expiration {
+                        color: $gray-60;
+                        /* Body XXS */
+                        font-family: "Libre Franklin";
+                        font-size: 0.75rem;
+                        font-style: normal;
+                        font-weight: 400;
+                        line-height: 1.125rem; /* 150% */
+                      }
+
+                      .size {
+                        color: $gray-60;
+                        /* Body XXS */
+                        font-family: "Libre Franklin";
+                        font-size: 0.75rem;
+                        font-style: normal;
+                        font-weight: 400;
+                        line-height: 1.125rem; /* 150% */
+                      }
                     }
+                  }
                 }
+              }
+            }
+          }
+
+          .scrollbar {
+            display: flex;
+            padding: 1rem 0.125rem 0.25rem 0.125rem;
+            flex-direction: column;
+            align-items: center;
+            align-self: stretch;
+
+            .indicator {
+              width: 0.25rem;
+              height: 3.125rem;
+              border-radius: 0.5rem;
+              background: $gray-10;
             }
+          }
         }
+      }
     }
+  }
 }
diff --git a/app/assets/stylesheets/_projects.scss b/app/assets/stylesheets/_projects.scss
index cfca9070..ca52e632 100644
--- a/app/assets/stylesheets/_projects.scss
+++ b/app/assets/stylesheets/_projects.scss
@@ -3,97 +3,95 @@
 @import "bootstrap";
 
 #project-details-heading {
-    margin-bottom: 1.5em;
+  margin-bottom: 1.5em;
 
-    .status {
-        float: right;
-        border-radius: 0.5em;
-        padding: 0.5em 0.75em 0.5em 0.5em;
-        text-transform: capitalize;
-        font-weight: bold;
-    }
+  .status {
+    float: right;
+    border-radius: 0.5em;
+    padding: 0.5em 0.75em 0.5em 0.5em;
+    text-transform: capitalize;
+    font-weight: bold;
+  }
 
-    .status::before {
-        content: "";
-        width: 20px;
-        height: 20px;
-    }
+  .status::before {
+    content: "";
+    width: 20px;
+    height: 20px;
+  }
 
-    .active { 
-        background: url("status_active.svg") no-repeat;
-        background-color: $status-info;
-        background-position: left;
-        padding-left: 20px;
-        color: $blue-dark;
-    }
+  .active {
+    background: url("status_active.svg") no-repeat;
+    background-color: $status-info;
+    background-position: left;
+    padding-left: 20px;
+    color: $blue-dark;
+  }
 
-    .pending { 
-        background: url("status_pending.svg") no-repeat;
-        background-color: $status-warning;
-        background-position: left;
-        padding-left: 20px;
-        color: $yellow-dark;
+  .pending {
+    background: url("status_pending.svg") no-repeat;
+    background-color: $status-warning;
+    background-position: left;
+    padding-left: 20px;
+    color: $yellow-dark;
+  }
 
-    }
+  .approved {
+    background: url("status_approved.svg") no-repeat;
+    background-color: $status-success;
+    background-position: left;
+    padding-left: 20px;
+    color: $green-dark;
+  }
 
-    .approved {
-        background: url("status_approved.svg") no-repeat;
-        background-color: $status-success;
-        background-position: left;
-        padding-left: 20px;
-        color: $green-dark;
-    }
+  .rejected {
+    background: url("status_rejected.svg") no-repeat;
+    background-color: $status-error;
+    background-position: left;
+    padding-left: 20px;
+    color: $red-darker;
+  }
 
-    .rejected {
-        background: url("status_rejected.svg") no-repeat;
-        background-color: $status-error;
-        background-position: left;
-        padding-left: 20px;
-        color: $red-darker;
-    }
-    
-    #project-description {
-        color: $black;
-        font-family: "Libre Franklin";
-        font-size: 1em;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 1.5em;
-    }
+  #project-description {
+    color: $black;
+    font-family: "Libre Franklin";
+    font-size: 1em;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.5em;
+  }
 
-    .truncate {
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2; 
-    }
+  .truncate {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
 
-    a#show-more-less-link {
-        color: $gray-60;
-    }
+  a#show-more-less-link {
+    color: $gray-60;
+  }
 
-    .label {
-      font-weight: bold;
-    } 
-    
-    .date-and-data-info ul {
-        padding: 0;
-    }
-    
-    .date-and-data-info li {
-        float: left;
-        list-style-type: none;
-        line-height: 1em;
-    }
+  .label {
+    font-weight: bold;
+  }
 
-    .date-and-data-info li:first-child:after { 
-        content: "|"; 
-        padding: 0 .5em; 
-    }
+  .date-and-data-info ul {
+    padding: 0;
+  }
 
+  .date-and-data-info li {
+    float: left;
+    list-style-type: none;
+    line-height: 1em;
+  }
+
+  .date-and-data-info li:first-child:after {
+    content: "|";
+    padding: 0 0.5em;
+  }
 }
 
 .latest-download-link {
-    margin: 1em 0em 1em 0em;
-    display: block;
+  margin: 1em 0em 1em 0em;
+  display: block;
 }
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 53b765f3..5b90e68a 100644
--- a/app/views/welcome/_projects_listing.html.erb
+++ b/app/views/welcome/_projects_listing.html.erb
@@ -1,18 +1,73 @@
 <div class="table">
-   <table id="<%= table_id %>" >
-   <thead>
+
+  <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">
+          <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>
+
+  <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>
+          <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>
+    </thead>
+
+    <tbody>
       <%= render :partial => "project_list_view", :collection => projects, :as => :project %>
-   </tbody>
+    </tbody>
    </table>
 </div>
diff --git a/package.json b/package.json
index ac89936d..ab958486 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.27.5",
     "jsdom": "^21.1.0",
+    "prettier": "3.4.2",
     "rollup": "^4.24.0",
     "vite": "^5.4.8",
     "vite-plugin-ruby": "^5.0.0",
diff --git a/yarn.lock b/yarn.lock
index 3afdb47a..3a4b19c3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3506,6 +3506,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier@npm:3.4.2":
+  version: 3.4.2
+  resolution: "prettier@npm:3.4.2"
+  bin:
+    prettier: bin/prettier.cjs
+  checksum: 10c0/99e076a26ed0aba4ebc043880d0f08bbb8c59a4c6641cdee6cdadf2205bdd87aa1d7823f50c3aea41e015e99878d37c58d7b5f0e663bba0ef047f94e36b96446
+  languageName: node
+  linkType: hard
+
 "pretty-format@npm:^27.5.1":
   version: 27.5.1
   resolution: "pretty-format@npm:27.5.1"
@@ -4152,6 +4161,7 @@ __metadata:
     eslint-plugin-import: "npm:^2.27.5"
     jquery: "npm:^3.6.3"
     jsdom: "npm:^21.1.0"
+    prettier: "npm:3.4.2"
     rollup: "npm:^4.24.0"
     vite: "npm:^5.4.8"
     vite-plugin-rails: "npm:^0.5.0"