diff --git a/__tests__/extension-requests/extension-requests.test.js b/__tests__/extension-requests/extension-requests.test.js
index 48b85a16..b8d50c5e 100644
--- a/__tests__/extension-requests/extension-requests.test.js
+++ b/__tests__/extension-requests/extension-requests.test.js
@@ -667,6 +667,58 @@ describe('Tests the Extension Requests Screen', () => {
     expect(hasSkeletonClassAfter).toBe(false);
   });
 
+  it('checks whether the shimmer effect is working for deadlineValue element under feature flag', async () => {
+    await page.goto(`${baseUrl}/?dev=true`);
+    const deadlineValueSelector = await page.$$(
+      '[data-testid="skeleton-span"]',
+    );
+    expect(deadlineValueSelector).toBeTruthy();
+    await page.waitForTimeout(5000);
+    const hasSkeletonClassAfter = await page.$eval('.tooltip-container', (el) =>
+      el.classList.contains('skeleton-span'),
+    );
+    expect(hasSkeletonClassAfter).toBe(false);
+  });
+
+  it('checks whether the shimmer effect is working for requestedValue element under feature flag', async () => {
+    await page.goto(`${baseUrl}/?dev=true`);
+    const requestedValueSelector = await page.$$(
+      '[data-testid="skeleton-text"]',
+    );
+    expect(requestedValueSelector).toBeTruthy();
+    await page.waitForTimeout(5000);
+    const hasSkeletonClassAfter = await page.$eval('.requested-day', (el) =>
+      el.classList.contains('skeleton-text'),
+    );
+    expect(hasSkeletonClassAfter).toBe(false);
+  });
+  it('checks whether the shimmer effect is working for newDeadlineValue element under feature flag', async () => {
+    await page.goto(`${baseUrl}/?dev=true`);
+    const newDeadlineValueSelector = await page.$$(
+      '[data-testid="skeleton-span"]',
+    );
+    expect(newDeadlineValueSelector).toBeTruthy();
+    await page.waitForTimeout(5000);
+    const hasSkeletonClassAfter = await page.$eval('.requested-day', (el) =>
+      el.classList.contains('skeleton-span'),
+    );
+    expect(hasSkeletonClassAfter).toBe(false);
+  });
+
+  it('checks whether the shimmer effect is working for extensionRequestNumberValue element under feature flag', async () => {
+    await page.goto(`${baseUrl}/?dev=true`);
+    const extensionRequestNumberValueSelector = await page.$$(
+      '[data-testid="skeleton-span"]',
+    );
+    expect(extensionRequestNumberValueSelector).toBeTruthy();
+    await page.waitForTimeout(5000);
+    const hasSkeletonClassAfter = await page.$eval(
+      '.extension-request-number',
+      (el) => el.classList.contains('skeleton-span'),
+    );
+    expect(hasSkeletonClassAfter).toBe(false);
+  });
+
   it('checks whether the shimmer effect is visible under dev flag only for the statusSiteLink element', async () => {
     await page.goto(`${baseUrl}/?dev=true`);
     const statusSiteLinkSelector = await page.$$(
diff --git a/extension-requests/script.js b/extension-requests/script.js
index a3ed4d41..69ab40ef 100644
--- a/extension-requests/script.js
+++ b/extension-requests/script.js
@@ -622,15 +622,27 @@ async function createExtensionCard(data, dev) {
     innerText: `Deadline${isDeadLineCrossed ? ' ' : ' in '}`,
   });
   deadlineContainer.appendChild(deadlineText);
-  const deadlineValue = createElement({
-    type: 'span',
-    innerText: `${deadlineDays}`,
-    attributes: {
-      class: `tooltip-container ${
-        isDeadLineCrossed && isStatusPending ? 'red-text' : ''
-      }`,
-    },
-  });
+
+  let deadlineValue;
+  if (dev) {
+    deadlineValue = createElement({
+      type: 'span',
+      attributes: {
+        class: 'skeleton-span',
+        'data-testid': 'skeleton-span',
+      },
+    });
+  } else {
+    deadlineValue = createElement({
+      type: 'span',
+      innerText: `${deadlineDays}`,
+      attributes: {
+        class: `tooltip-container ${
+          isDeadLineCrossed && isStatusPending ? 'red-text' : ''
+        }`,
+      },
+    });
+  }
   deadlineContainer.appendChild(deadlineValue);
   const deadlineTooltip = createElement({
     type: 'span',
@@ -649,13 +661,25 @@ async function createExtensionCard(data, dev) {
     innerText: 'Requested ',
   });
   requestedContainer.appendChild(requestedText);
-  const requestedValue = createElement({
-    type: 'span',
-    attributes: {
-      class: `requested-day tooltip-container ${requestedDaysTextColor}`,
-    },
-    innerText: ` ${requestedDaysAgo}`,
-  });
+
+  let requestedValue;
+  if (dev) {
+    requestedValue = createElement({
+      type: 'span',
+      attributes: {
+        class: 'skeleton-text',
+        'data-testid': 'skeleton-text',
+      },
+    });
+  } else {
+    requestedValue = createElement({
+      type: 'span',
+      attributes: {
+        class: `requested-day tooltip-container ${requestedDaysTextColor}`,
+      },
+      innerText: `${requestedDaysAgo}`,
+    });
+  }
   const requestedToolTip = createElement({
     type: 'span',
     attributes: { class: 'tooltip' },
@@ -719,11 +743,20 @@ async function createExtensionCard(data, dev) {
     innerText: `New deadline${isNewDeadLineCrossed ? ' ' : ' in '}`,
   });
   newDeadlineContainer.appendChild(newDeadlineText);
-  const newDeadlineValue = createElement({
-    type: 'span',
-    attributes: { class: 'requested-day tooltip-container' },
-    innerText: ` ${newDeadlineDays}`,
-  });
+
+  let newDeadlineValue;
+  if (dev) {
+    newDeadlineValue = createElement({
+      type: 'span',
+      attributes: { class: 'skeleton-span', 'data-testid': 'skeleton-span' },
+    });
+  } else {
+    newDeadlineValue = createElement({
+      type: 'span',
+      attributes: { class: 'requested-day tooltip-container' },
+      innerText: ` ${newDeadlineDays}`,
+    });
+  }
   const newDeadlineToolTip = createElement({
     type: 'span',
     attributes: { class: 'tooltip' },
@@ -743,11 +776,19 @@ async function createExtensionCard(data, dev) {
   });
   extensionForContainer.appendChild(extensionForText);
 
-  const extensionForValue = createElement({
-    type: 'span',
-    attributes: { class: 'tooltip-container' },
-    innerText: ` +${extensionDays}`,
-  });
+  let extensionForValue;
+  if (dev) {
+    extensionForValue = createElement({
+      type: 'span',
+      attributes: { class: 'skeleton-span' },
+    });
+  } else {
+    extensionForValue = createElement({
+      type: 'span',
+      attributes: { class: 'tooltip-container' },
+      innerText: ` +${extensionDays}`,
+    });
+  }
   const extensionToolTip = createElement({
     type: 'span',
     attributes: { class: 'tooltip' },
@@ -780,11 +821,19 @@ async function createExtensionCard(data, dev) {
 
   const requestNumber = data.requestNumber || 1;
 
-  const extensionRequestNumberValue = createElement({
-    type: 'span',
-    attributes: { class: 'extension-request-number' },
-    innerText: `#${requestNumber}`,
-  });
+  let extensionRequestNumberValue;
+  if (dev) {
+    extensionRequestNumberValue = createElement({
+      type: 'span',
+      attributes: { class: 'skeleton-span', 'data-testid': 'skeleton-span' },
+    });
+  } else {
+    extensionRequestNumberValue = createElement({
+      type: 'span',
+      attributes: { class: 'extension-request-number' },
+      innerText: `#${requestNumber}`,
+    });
+  }
   extensionRequestNumberContainer.appendChild(extensionRequestNumberValue);
   const cardAssigneeButtonContainer = createElement({
     type: 'div',
@@ -1281,7 +1330,44 @@ async function createExtensionCard(data, dev) {
       CommitedHoursContent.innerText = 'Missing';
       CommitedHoursContent.classList.add('label-content-missing');
     }
+    if (dev) {
+      deadlineValue.classList.remove('skeleton-span');
+      deadlineValue.innerText = `${deadlineDays}`;
+
+      deadlineValue.classList.add('tooltip-container');
+      if (isDeadLineCrossed && isStatusPending) {
+        deadlineValue.classList.add('red-text');
+      }
+    }
+
+    if (dev) {
+      requestedValue.classList.remove('skeleton-text');
+      requestedValue.innerText = `${requestedDaysAgo}`;
 
+      requestedValue.classList.add(
+        'requested-day',
+        'tooltip-container',
+        requestedDaysTextColor,
+      );
+    }
+
+    if (dev) {
+      newDeadlineValue.classList.remove('skeleton-span');
+      newDeadlineValue.innerText = ` ${newDeadlineDays}`;
+      newDeadlineValue.classList.add('requested-day', 'tooltip-container');
+    }
+
+    if (dev) {
+      extensionForValue.classList.remove('skeleton-span');
+      extensionForValue.innerText = ` +${extensionDays}`;
+      extensionForValue.classList.add('tooltip-container');
+    }
+
+    if (dev) {
+      extensionRequestNumberValue.classList.remove('skeleton-span');
+      extensionRequestNumberValue.innerText = `#${requestNumber}`;
+      extensionRequestNumberValue.add('extension-request-number');
+    }
     if (!dev) {
       removeSpinner();
       renderExtensionCreatedLog();