From 0029551ee1e021bf78c9486edf1935ec275ef889 Mon Sep 17 00:00:00 2001
From: anuj chhikara <anujchhikara777@gmail.com>
Date: Tue, 24 Feb 2026 01:15:05 +0530
Subject: [PATCH 1/6] feat: add Request Changes functionality for application
 feedback

- Introduced a new button for requesting changes in application details.
- Updated the application feedback submission logic to handle 'changes_requested' status.
- Enhanced tests to cover new functionality, including success and error toast messages.
- Adjusted styles for the new button to ensure consistent UI.
---
 __tests__/applications/applications.test.js | 94 ++++++++++++++++++++-
 applications/index.html                     |  6 ++
 applications/script.js                      | 54 +++++++-----
 applications/style.css                      | 40 ++++++++-
 applications/utils.js                       | 29 ++++---
 5 files changed, 184 insertions(+), 39 deletions(-)

diff --git a/__tests__/applications/applications.test.js b/__tests__/applications/applications.test.js
index b214a112..6396757f 100644
--- a/__tests__/applications/applications.test.js
+++ b/__tests__/applications/applications.test.js
@@ -74,12 +74,34 @@ describe('Applications page', () => {
         });
       } else if (
         url === `${STAGING_API_URL}/applications/lavEduxsb2C5Bl4s289P`
+      ) {
+        const method = interceptedRequest.method();
+        const body =
+          method === 'GET'
+            ? JSON.stringify({ application: pendingApplications[0] })
+            : JSON.stringify({
+                message: 'Application feedback submitted successfully',
+              });
+        interceptedRequest.respond({
+          status: 200,
+          contentType: 'application/json',
+          body,
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+          },
+        });
+      } else if (
+        interceptedRequest.method() === 'PATCH' &&
+        url.includes('/applications/') &&
+        url.endsWith('/feedback')
       ) {
         interceptedRequest.respond({
           status: 200,
           contentType: 'application/json',
           body: JSON.stringify({
-            message: 'application updated successfully!',
+            message: 'Application feedback submitted successfully',
           }),
           headers: {
             'Access-Control-Allow-Origin': '*',
@@ -210,7 +232,10 @@ describe('Applications page', () => {
         element.scrollIntoView({ behavior: 'auto' });
       }
     });
-    await page.waitForNetworkIdle();
+    await page.waitForFunction(
+      () => document.querySelectorAll('.application-card').length >= 12,
+      { timeout: 10000 },
+    );
     applicationCards = await page.$$('.application-card');
     expect(applicationCards.length).toBe(12);
   });
@@ -355,7 +380,7 @@ describe('Applications page', () => {
     ).toBe(false);
     const toastMessage = await page.$('[data-testid="toast-message"]');
     expect(await toastMessage.evaluate((el) => el.textContent)).toBe(
-      'application updated successfully!',
+      'Application feedback submitted successfully',
     );
   });
 
@@ -371,4 +396,67 @@ describe('Applications page', () => {
     const applicationCardElements = await page.$$('.application-card');
     expect(applicationCardElements.length).toBe(acceptedApplications.length);
   });
+
+  it('should show Request changes button when application details modal is open for a pending application', async () => {
+    await page.goto(
+      `${LOCAL_TEST_PAGE_URL}/applications?dev=true&status=pending`,
+    );
+    await page.waitForSelector('.application-card');
+    await page.click('.application-card');
+    await page.waitForSelector('.application-details:not(.hidden)');
+    const requestChangesButton = await page.$(
+      '.application-details-request-changes',
+    );
+    expect(requestChangesButton).toBeTruthy();
+    const isHidden = await requestChangesButton.evaluate((el) =>
+      el.classList.contains('hidden'),
+    );
+    expect(isHidden).toBe(false);
+  });
+
+  it('should show error toast when clicking Request changes without feedback text', async () => {
+    await page.goto(
+      `${LOCAL_TEST_PAGE_URL}/applications?dev=true&status=pending`,
+    );
+    await page.waitForSelector('.application-card');
+    await page.click('.application-card');
+    await page.waitForSelector('.application-details:not(.hidden)');
+    await page.click('.application-details-request-changes');
+    await page.waitForSelector('[data-testid="toast-component"].show');
+    const toastComponent = await page.$('[data-testid="toast-component"]');
+    expect(
+      await toastComponent.evaluate((el) =>
+        el.classList.contains('error__toast'),
+      ),
+    ).toBe(true);
+    const toastMessage = await page.$('[data-testid="toast-message"]');
+    expect(await toastMessage.evaluate((el) => el.textContent)).toBe(
+      'Feedback is required when requesting changes.',
+    );
+  });
+
+  it('should show success toast when submitting Request changes with feedback text', async () => {
+    await page.goto(
+      `${LOCAL_TEST_PAGE_URL}/applications?dev=true&status=pending`,
+    );
+    await page.waitForSelector('.application-card');
+    await page.click('.application-card');
+    await page.waitForSelector('.application-details:not(.hidden)');
+    await page.type(
+      '.application-textarea',
+      'Please add more details on skills',
+    );
+    await page.click('.application-details-request-changes');
+    await page.waitForSelector('[data-testid="toast-component"].show');
+    const toastComponent = await page.$('[data-testid="toast-component"]');
+    expect(
+      await toastComponent.evaluate((el) =>
+        el.classList.contains('success__toast'),
+      ),
+    ).toBe(true);
+    const toastMessage = await page.$('[data-testid="toast-message"]');
+    expect(await toastMessage.evaluate((el) => el.textContent)).toBe(
+      'Application feedback submitted successfully',
+    );
+  });
 });
diff --git a/applications/index.html b/applications/index.html
index af5e1c02..0bfe3804 100644
--- a/applications/index.html
+++ b/applications/index.html
@@ -132,6 +132,12 @@ <h2>Status</h2>
           >
             Accept
           </button>
+          <button
+            class="application-details-request-changes"
+            aria-label="Request changes"
+          >
+            Request changes
+          </button>
           <button
             class="application-details-reject"
             aria-label="Reject Application"
diff --git a/applications/script.js b/applications/script.js
index 03b0e7c8..743f4ce9 100644
--- a/applications/script.js
+++ b/applications/script.js
@@ -3,7 +3,7 @@ import {
   getApplications,
   getIsSuperUser,
   showToast,
-  updateApplication,
+  submitApplicationFeedback,
   getApplicationById,
 } from './utils.js';
 let nextLink;
@@ -32,6 +32,9 @@ const applicationAcceptButton = document.querySelector(
 const applicationRejectButton = document.querySelector(
   '.application-details-reject',
 );
+const applicationRequestChangesButton = document.querySelector(
+  '.application-details-request-changes',
+);
 const applyFilterButton = document.getElementById('apply-filter-button');
 const applicationContainer = document.querySelector('.application-container');
 const clearButton = document.getElementById('clear-button');
@@ -81,27 +84,26 @@ let currentApplicationId;
 
 let status = 'all';
 
-function updateUserApplication({ isAccepted }) {
+function updateUserApplication({ status: actionStatus }) {
   const applicationTextarea = document.querySelector('.application-textarea');
-  let status;
-  const payload = {};
-
-  if (isAccepted) status = 'accepted';
-  else status = 'rejected';
-
-  payload['status'] = status;
-
-  if (applicationTextarea.value) {
-    payload.feedback = applicationTextarea.value;
+  const feedbackText = (applicationTextarea?.value ?? '').trim();
+
+  if (actionStatus === 'changes_requested' && !feedbackText) {
+    showToastMessage({
+      isDev,
+      oldToastFunction: showToast,
+      type: 'error',
+      message: 'Feedback is required when requesting changes.',
+    });
+    return;
   }
 
-  updateApplication({
+  submitApplicationFeedback({
     applicationId: currentApplicationId,
-    applicationPayload: payload,
+    status: actionStatus,
+    feedback: feedbackText || undefined,
   })
     .then((res) => {
-      const updatedFeedback = payload.feedback || '';
-      applicationTextarea.value = updatedFeedback;
       showToastMessage({
         isDev,
         oldToastFunction: showToast,
@@ -115,7 +117,7 @@ function updateUserApplication({ isAccepted }) {
         isDev,
         oldToastFunction: showToast,
         type: 'error',
-        message: error.message,
+        message: error.message || 'Failed to submit feedback.',
       });
     });
 }
@@ -246,9 +248,9 @@ function openApplicationDetails(application) {
     type: 'textarea',
     attributes: {
       class: 'application-textarea',
-      placeHolder: 'Add Feedback here',
+      placeHolder: 'Add Feedback here (required for Request changes)',
     },
-    innerText: application.feedback || '',
+    innerText: '',
   });
 
   applicationSection.appendChild(applicationSectionTitle);
@@ -257,6 +259,7 @@ function openApplicationDetails(application) {
 
   if (application.status === 'rejected') {
     applicationAcceptButton.classList.add('hidden');
+    applicationRequestChangesButton.classList.add('hidden');
     applicationRejectButton.classList.add('hidden');
     const applicationDetailsRejectedMsg = createElement({
       type: 'p',
@@ -268,6 +271,7 @@ function openApplicationDetails(application) {
     applicationDetailsActionsContainer.append(applicationDetailsRejectedMsg);
   } else if (application.status === 'accepted') {
     applicationAcceptButton.classList.add('hidden');
+    applicationRequestChangesButton.classList.add('hidden');
     applicationRejectButton.classList.add('hidden');
     const applicationDetailsAcceptedMsg = createElement({
       type: 'p',
@@ -282,7 +286,10 @@ function openApplicationDetails(application) {
     applicationRejectButton.style.cursor = 'pointer';
     applicationRejectButton.classList.remove('disable-button');
     applicationRejectButton.classList.remove('hidden');
-
+    applicationRequestChangesButton.disabled = false;
+    applicationRequestChangesButton.style.cursor = 'pointer';
+    applicationRequestChangesButton.classList.remove('disable-button');
+    applicationRequestChangesButton.classList.remove('hidden');
     applicationAcceptButton.classList.remove('hidden');
     applicationAcceptButton.disabled = false;
     applicationAcceptButton.style.cursor = 'pointer';
@@ -635,8 +642,11 @@ closeDropdownBtn.addEventListener('click', () => {
 });
 
 applicationAcceptButton.addEventListener('click', () =>
-  updateUserApplication({ isAccepted: true }),
+  updateUserApplication({ status: 'accepted' }),
+);
+applicationRequestChangesButton.addEventListener('click', () =>
+  updateUserApplication({ status: 'changes_requested' }),
 );
 applicationRejectButton.addEventListener('click', () =>
-  updateUserApplication({ isAccepted: false }),
+  updateUserApplication({ status: 'rejected' }),
 );
diff --git a/applications/style.css b/applications/style.css
index 3b8fe894..1315ff8f 100644
--- a/applications/style.css
+++ b/applications/style.css
@@ -480,7 +480,10 @@ body {
 }
 
 .application-details .application-details-actions .application-details-reject,
-.application-details .application-details-actions .application-details-accept {
+.application-details .application-details-actions .application-details-accept,
+.application-details
+  .application-details-actions
+  .application-details-request-changes {
   cursor: pointer;
   border: none;
   height: 95%;
@@ -495,7 +498,7 @@ body {
   color: var(--red-color);
   background-color: white;
   margin: 0 auto;
-  width: 40%;
+  width: 30%;
   border: 2px solid var(--red-color);
 }
 
@@ -523,7 +526,38 @@ body {
 .application-details .application-details-actions .application-details-accept {
   background: var(--color-primary);
   margin: 0 auto;
-  width: 40%;
+  width: 30%;
+}
+
+.application-details
+  .application-details-actions
+  .application-details-request-changes {
+  background: white;
+  color: var(--color-primary);
+  border: 2px solid var(--color-primary);
+  margin: 0 auto;
+  width: 30%;
+}
+
+.application-details
+  .application-details-actions
+  .application-details-request-changes:is(:hover, :active, :focus-visible) {
+  background: var(--color-primary);
+  color: var(--white);
+  transition: transform 0.2s ease;
+  will-change: transform;
+}
+
+.application-details
+  .application-details-actions
+  .application-details-request-changes:hover {
+  transform: scale(1.05);
+}
+
+.application-details
+  .application-details-actions
+  .application-details-request-changes:active {
+  animation: bounceBackAnimation 0.4s ease forwards;
 }
 
 .application-details
diff --git a/applications/utils.js b/applications/utils.js
index aaa72ab0..75ff7e66 100644
--- a/applications/utils.js
+++ b/applications/utils.js
@@ -94,20 +94,27 @@ async function getIsSuperUser(isDev) {
   }
 }
 
-async function updateApplication({ applicationPayload, applicationId }) {
+async function submitApplicationFeedback({ applicationId, status, feedback }) {
   try {
-    const res = await fetch(`${BASE_URL}/applications/${applicationId}`, {
-      method: 'PATCH',
-      credentials: 'include',
-      body: JSON.stringify(applicationPayload),
-      headers: {
-        'Content-type': 'application/json',
+    const body = { status };
+    if (feedback !== undefined && feedback !== '') {
+      body.feedback = feedback;
+    }
+    const res = await fetch(
+      `${BASE_URL}/applications/${applicationId}/feedback`,
+      {
+        method: 'PATCH',
+        credentials: 'include',
+        body: JSON.stringify(body),
+        headers: {
+          'Content-type': 'application/json',
+        },
       },
-    });
+    );
 
     if (!res.ok) {
-      const error = await res.json();
-      throw error;
+      const err = await res.json().catch(() => ({}));
+      throw new Error(err.message || `Request failed (${res.status})`);
     }
 
     const data = await res.json();
@@ -141,7 +148,7 @@ export {
   createElement,
   getApplications,
   getApplicationById,
-  updateApplication,
+  submitApplicationFeedback,
   getIsSuperUser,
   showToast,
 };

From 5199e9baae5d0b0612f8fcdea44db964efd10b00 Mon Sep 17 00:00:00 2001
From: Mayank Bansal <mayankbansal125@gmail.com>
Date: Wed, 25 Feb 2026 20:42:26 +0530
Subject: [PATCH 2/6] fix: status badge and feedback, action buttons

---
 applications/script.js | 52 +++++++++++++++++++++++++++++++++++-------
 applications/style.css | 36 ++++++++++++++++++++++++++++-
 2 files changed, 79 insertions(+), 9 deletions(-)

diff --git a/applications/script.js b/applications/script.js
index 743f4ce9..d78df216 100644
--- a/applications/script.js
+++ b/applications/script.js
@@ -146,12 +146,18 @@ function closeApplicationDetails() {
   const applicationRejectedMsg = document.querySelector(
     '.application-details-rejected-msg',
   );
+  const applicationChangesMsg = document.querySelector(
+    '.application-details-changes-msg',
+  );
   if (applicationAcceptedMsg) {
     applicationAcceptedMsg.remove();
   }
   if (applicationRejectedMsg) {
     applicationRejectedMsg.remove();
   }
+  if (applicationChangesMsg) {
+    applicationChangesMsg.remove();
+  }
   removeQueryParamInUrl('id');
 }
 
@@ -222,11 +228,27 @@ function openApplicationDetails(application) {
       attributes: { class: 'section-title' },
       innerText: application.title,
     });
-    const applicationSectionDescription = createElement({
-      type: 'p',
-      attributes: { class: 'description' },
-      innerText: application.description,
-    });
+
+    let applicationSectionDescription;
+    if (application.title === 'Status') {
+      const statusLabel = application.description
+        .split('_')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+      applicationSectionDescription = createElement({
+        type: 'span',
+        attributes: {
+          class: `status-badge status-badge--${application.description}`,
+        },
+        innerText: statusLabel,
+      });
+    } else {
+      applicationSectionDescription = createElement({
+        type: 'p',
+        attributes: { class: 'description' },
+        innerText: application.description,
+      });
+    }
 
     applicationSection.appendChild(applicationSectionTitle);
     applicationSection.appendChild(applicationSectionDescription);
@@ -253,9 +275,11 @@ function openApplicationDetails(application) {
     innerText: '',
   });
 
-  applicationSection.appendChild(applicationSectionTitle);
-  applicationSection.appendChild(applicationTextArea);
-  applicationDetailsMain.appendChild(applicationSection);
+  if (application.status === 'pending') {
+    applicationSection.appendChild(applicationSectionTitle);
+    applicationSection.appendChild(applicationTextArea);
+    applicationDetailsMain.appendChild(applicationSection);
+  }
 
   if (application.status === 'rejected') {
     applicationAcceptButton.classList.add('hidden');
@@ -281,6 +305,18 @@ function openApplicationDetails(application) {
       innerText: 'Application was already accepted',
     });
     applicationDetailsActionsContainer.append(applicationDetailsAcceptedMsg);
+  } else if (application.status === 'changes_requested') {
+    applicationAcceptButton.classList.add('hidden');
+    applicationRequestChangesButton.classList.add('hidden');
+    applicationRejectButton.classList.add('hidden');
+    const applicationDetailsChangesMsg = createElement({
+      type: 'p',
+      attributes: {
+        class: 'application-details-changes-msg',
+      },
+      innerText: 'Changes have been requested for this application',
+    });
+    applicationDetailsActionsContainer.append(applicationDetailsChangesMsg);
   } else {
     applicationRejectButton.disabled = false;
     applicationRejectButton.style.cursor = 'pointer';
diff --git a/applications/style.css b/applications/style.css
index 1315ff8f..b78f0fc0 100644
--- a/applications/style.css
+++ b/applications/style.css
@@ -455,6 +455,35 @@ body {
   margin: 0;
 }
 
+.status-badge {
+  display: inline-block;
+  align-self: flex-start;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.status-badge--accepted {
+  background-color: #d1fae5;
+  color: #065f46;
+}
+
+.status-badge--rejected {
+  background-color: #fee2e2;
+  color: #991b1b;
+}
+
+.status-badge--changes_requested {
+  background-color: #ffedd5;
+  color: #9a3412;
+}
+
+.status-badge--pending {
+  background-color: #f3f4f6;
+  color: #374151;
+}
+
 .application-details
   .application-details-main
   .application-section
@@ -585,7 +614,8 @@ body {
 }
 
 .application-details-accepted-msg,
-.application-details-rejected-msg {
+.application-details-rejected-msg,
+.application-details-changes-msg {
   font-weight: bold;
   font-size: 18px;
   width: 100%;
@@ -600,6 +630,10 @@ body {
   color: var(--red-color);
 }
 
+.application-details-changes-msg {
+  color: #9a3412;
+}
+
 .unauthorized-text {
   text-align: center;
 }

From b44bf3c6bf9384e66f9284eab149030d7e851772 Mon Sep 17 00:00:00 2001
From: Mayank Bansal <mayankbansal125@gmail.com>
Date: Wed, 25 Feb 2026 20:53:32 +0530
Subject: [PATCH 3/6] add score and nudge coount in application detail

---
 applications/script.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/applications/script.js b/applications/script.js
index d78df216..f84f1da4 100644
--- a/applications/script.js
+++ b/applications/script.js
@@ -175,6 +175,14 @@ function openApplicationDetails(application) {
         title: 'Status',
         description: application.status,
       },
+      {
+        title: 'Score',
+        description: application.score,
+      },
+      {
+        title: 'Nudge Count',
+        description: application.nudgeCount,
+      },
       {
         title: 'Introduction',
         description: application.intro.introduction,

From e606ca0cac1b184490e5290feead7b21414ed3d0 Mon Sep 17 00:00:00 2001
From: Mayank Bansal <mayankbansal125@gmail.com>
Date: Wed, 25 Feb 2026 21:07:14 +0530
Subject: [PATCH 4/6] fix: toast message and styling for request changes button

---
 applications/style.css | 8 ++++----
 applications/utils.js  | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/applications/style.css b/applications/style.css
index b78f0fc0..edd23c45 100644
--- a/applications/style.css
+++ b/applications/style.css
@@ -561,9 +561,9 @@ body {
 .application-details
   .application-details-actions
   .application-details-request-changes {
-  background: white;
-  color: var(--color-primary);
-  border: 2px solid var(--color-primary);
+  background: #ffedd5;
+  color: #9a3412;
+  border: 2px solid #9a3412;
   margin: 0 auto;
   width: 30%;
 }
@@ -571,7 +571,7 @@ body {
 .application-details
   .application-details-actions
   .application-details-request-changes:is(:hover, :active, :focus-visible) {
-  background: var(--color-primary);
+  background: #9a3412;
   color: var(--white);
   transition: transform 0.2s ease;
   will-change: transform;
diff --git a/applications/utils.js b/applications/utils.js
index 75ff7e66..86416fac 100644
--- a/applications/utils.js
+++ b/applications/utils.js
@@ -124,7 +124,7 @@ async function submitApplicationFeedback({ applicationId, status, feedback }) {
   }
 }
 
-function showToast({ message, type }) {
+function showToast(type, message) {
   toast.innerText = message;
 
   if (type === 'success') {

From 7c8f537d87b51498bd783d22e7ef6e4092c69a25 Mon Sep 17 00:00:00 2001
From: Mayank Bansal <mayankbansal125@gmail.com>
Date: Wed, 25 Feb 2026 22:40:21 +0530
Subject: [PATCH 5/6] refactor: aria label and fallback for score, nudgeCount

---
 __tests__/applications/applications.test.js | 9 +--------
 applications/index.html                     | 2 +-
 applications/script.js                      | 6 +++---
 3 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/__tests__/applications/applications.test.js b/__tests__/applications/applications.test.js
index 6396757f..ffb7c9e2 100644
--- a/__tests__/applications/applications.test.js
+++ b/__tests__/applications/applications.test.js
@@ -75,17 +75,10 @@ describe('Applications page', () => {
       } else if (
         url === `${STAGING_API_URL}/applications/lavEduxsb2C5Bl4s289P`
       ) {
-        const method = interceptedRequest.method();
-        const body =
-          method === 'GET'
-            ? JSON.stringify({ application: pendingApplications[0] })
-            : JSON.stringify({
-                message: 'Application feedback submitted successfully',
-              });
         interceptedRequest.respond({
           status: 200,
           contentType: 'application/json',
-          body,
+          body: JSON.stringify({ application: pendingApplications[0] }),
           headers: {
             'Access-Control-Allow-Origin': '*',
             'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
diff --git a/applications/index.html b/applications/index.html
index 0bfe3804..38fe698d 100644
--- a/applications/index.html
+++ b/applications/index.html
@@ -134,7 +134,7 @@ <h2>Status</h2>
           </button>
           <button
             class="application-details-request-changes"
-            aria-label="Request changes"
+            aria-label="Request Application Changes"
           >
             Request changes
           </button>
diff --git a/applications/script.js b/applications/script.js
index f84f1da4..b1209772 100644
--- a/applications/script.js
+++ b/applications/script.js
@@ -177,11 +177,11 @@ function openApplicationDetails(application) {
       },
       {
         title: 'Score',
-        description: application.score,
+        description: application.score ?? 'N/A',
       },
       {
         title: 'Nudge Count',
-        description: application.nudgeCount,
+        description: application.nudgeCount ?? 'N/A',
       },
       {
         title: 'Introduction',
@@ -278,7 +278,7 @@ function openApplicationDetails(application) {
     type: 'textarea',
     attributes: {
       class: 'application-textarea',
-      placeHolder: 'Add Feedback here (required for Request changes)',
+      placeholder: 'Add Feedback here (required for Request changes)',
     },
     innerText: '',
   });

From 4b421cc301e27750d95bd39d7d4aeddbace3e7b7 Mon Sep 17 00:00:00 2001
From: Mayank Bansal <mayankbansal125@gmail.com>
Date: Thu, 26 Feb 2026 00:20:59 +0530
Subject: [PATCH 6/6] fix: use test id, replace hardcoded colors

---
 __tests__/applications/applications.test.js |  4 +--
 applications/index.html                     |  1 +
 applications/script.js                      |  4 +--
 applications/style.css                      | 34 +++++++++++++--------
 applications/utils.js                       |  2 +-
 5 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/__tests__/applications/applications.test.js b/__tests__/applications/applications.test.js
index ffb7c9e2..fb09b818 100644
--- a/__tests__/applications/applications.test.js
+++ b/__tests__/applications/applications.test.js
@@ -87,8 +87,7 @@ describe('Applications page', () => {
         });
       } else if (
         interceptedRequest.method() === 'PATCH' &&
-        url.includes('/applications/') &&
-        url.endsWith('/feedback')
+        url === `${STAGING_API_URL}/applications/lavEduxsb2C5Bl4s289P/feedback`
       ) {
         interceptedRequest.respond({
           status: 200,
@@ -227,7 +226,6 @@ describe('Applications page', () => {
     });
     await page.waitForFunction(
       () => document.querySelectorAll('.application-card').length >= 12,
-      { timeout: 10000 },
     );
     applicationCards = await page.$$('.application-card');
     expect(applicationCards.length).toBe(12);
diff --git a/applications/index.html b/applications/index.html
index 38fe698d..ce1f79da 100644
--- a/applications/index.html
+++ b/applications/index.html
@@ -133,6 +133,7 @@ <h2>Status</h2>
             Accept
           </button>
           <button
+            id="application-details-request-changes"
             class="application-details-request-changes"
             aria-label="Request Application Changes"
           >
diff --git a/applications/script.js b/applications/script.js
index b1209772..0731e4f9 100644
--- a/applications/script.js
+++ b/applications/script.js
@@ -32,8 +32,8 @@ const applicationAcceptButton = document.querySelector(
 const applicationRejectButton = document.querySelector(
   '.application-details-reject',
 );
-const applicationRequestChangesButton = document.querySelector(
-  '.application-details-request-changes',
+const applicationRequestChangesButton = document.getElementById(
+  'application-details-request-changes',
 );
 const applyFilterButton = document.getElementById('apply-filter-button');
 const applicationContainer = document.querySelector('.application-container');
diff --git a/applications/style.css b/applications/style.css
index edd23c45..4c23bc99 100644
--- a/applications/style.css
+++ b/applications/style.css
@@ -15,6 +15,14 @@
     0px 4px 8px 3px rgba(0, 0, 0, 0.15);
   --color-green: green;
   --color-red-variant1: #f43030;
+  --color-changes-bg: #ffedd5;
+  --color-changes-text: #9a3412;
+  --color-accepted-bg: #d1fae5;
+  --color-accepted-text: #065f46;
+  --color-rejected-bg: #fee2e2;
+  --color-rejected-text: #991b1b;
+  --color-pending-bg: #f3f4f6;
+  --color-pending-text: #374151;
 }
 
 .user-text-index {
@@ -465,23 +473,23 @@ body {
 }
 
 .status-badge--accepted {
-  background-color: #d1fae5;
-  color: #065f46;
+  background-color: var(--color-accepted-bg);
+  color: var(--color-accepted-text);
 }
 
 .status-badge--rejected {
-  background-color: #fee2e2;
-  color: #991b1b;
+  background-color: var(--color-rejected-bg);
+  color: var(--color-rejected-text);
 }
 
 .status-badge--changes_requested {
-  background-color: #ffedd5;
-  color: #9a3412;
+  background-color: var(--color-changes-bg);
+  color: var(--color-changes-text);
 }
 
 .status-badge--pending {
-  background-color: #f3f4f6;
-  color: #374151;
+  background-color: var(--color-pending-bg);
+  color: var(--color-pending-text);
 }
 
 .application-details
@@ -561,9 +569,9 @@ body {
 .application-details
   .application-details-actions
   .application-details-request-changes {
-  background: #ffedd5;
-  color: #9a3412;
-  border: 2px solid #9a3412;
+  background: var(--color-changes-bg);
+  color: var(--color-changes-text);
+  border: 2px solid var(--color-changes-text);
   margin: 0 auto;
   width: 30%;
 }
@@ -571,7 +579,7 @@ body {
 .application-details
   .application-details-actions
   .application-details-request-changes:is(:hover, :active, :focus-visible) {
-  background: #9a3412;
+  background: var(--color-changes-text);
   color: var(--white);
   transition: transform 0.2s ease;
   will-change: transform;
@@ -631,7 +639,7 @@ body {
 }
 
 .application-details-changes-msg {
-  color: #9a3412;
+  color: var(--color-changes-text);
 }
 
 .unauthorized-text {
diff --git a/applications/utils.js b/applications/utils.js
index 86416fac..1d3da353 100644
--- a/applications/utils.js
+++ b/applications/utils.js
@@ -97,7 +97,7 @@ async function getIsSuperUser(isDev) {
 async function submitApplicationFeedback({ applicationId, status, feedback }) {
   try {
     const body = { status };
-    if (feedback !== undefined && feedback !== '') {
+    if (feedback) {
       body.feedback = feedback;
     }
     const res = await fetch(