diff --git a/packages/article-skeleton/src/article-body/article-body.js b/packages/article-skeleton/src/article-body/article-body.js
index 7797c18a5e7..7cb849ab2ab 100644
--- a/packages/article-skeleton/src/article-body/article-body.js
+++ b/packages/article-skeleton/src/article-body/article-body.js
@@ -61,7 +61,22 @@ import {
   InlineAdTitle
 } from "../styles/article-body/responsive";
 
-const deckApiUrl = "https://gobble.timesdev.tools/deck/api/deck-post-action/";
+let deckApiUrl;
+if (typeof window !== "undefined") {
+  const environmentName =
+    window.__TIMES_CONFIG__ && window.__TIMES_CONFIG__.environmentName;
+
+  if (environmentName === "prod") {
+    deckApiUrl =
+      "https://editorial-tm.newsapis.co.uk/prod/deck-component-data-api";
+  } else {
+    deckApiUrl =
+      "https://editorial-tm.staging.newsapis.co.uk/staging/deck-component-data-api";
+  }
+} else {
+  deckApiUrl =
+    "https://editorial-tm.staging.newsapis.co.uk/staging/deck-component-data-api";
+}
 
 const disabledAds = ["c8bf6998-d498-11ed-b5c3-54651fc826e9"];
 const hasDisabledAds = id => disabledAds.includes(id);
diff --git a/packages/ts-components/src/components/in-article-big-numbers/BigNumbers.stories.tsx b/packages/ts-components/src/components/in-article-big-numbers/BigNumbers.stories.tsx
index f2538871083..eb7c8fab3b3 100644
--- a/packages/ts-components/src/components/in-article-big-numbers/BigNumbers.stories.tsx
+++ b/packages/ts-components/src/components/in-article-big-numbers/BigNumbers.stories.tsx
@@ -5,6 +5,9 @@ import { FetchProvider } from '../../helpers/fetch/FetchProvider';
 import { BigNumbers } from './BigNumbers';
 import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
 import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
+import { getDeckApiUrl } from '../../utils/getDeckApiUrl';
+
+const deckApiUrl = getDeckApiUrl();
 
 storiesOf('Typescript Component/In Article/Big Numbers', module)
   .add('Standard without a headline', () => (
@@ -19,7 +22,7 @@ storiesOf('Typescript Component/In Article/Big Numbers', module)
       analyticsStream={analyticsStream}
     >
       <ArticleHarness>
-        <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/44335">
+        <FetchProvider url={deckApiUrl + '?id=44335'}>
           <BigNumbers sectionColour="#636C17" />
         </FetchProvider>
       </ArticleHarness>
@@ -37,7 +40,7 @@ storiesOf('Typescript Component/In Article/Big Numbers', module)
       analyticsStream={analyticsStream}
     >
       <ArticleHarness>
-        <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/44336">
+        <FetchProvider url={deckApiUrl + '?id=44336'}>
           <BigNumbers sectionColour="#636C17" />
         </FetchProvider>
       </ArticleHarness>
@@ -55,7 +58,7 @@ storiesOf('Typescript Component/In Article/Big Numbers', module)
       analyticsStream={analyticsStream}
     >
       <ArticleHarness>
-        <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/44334">
+        <FetchProvider url={deckApiUrl + '?id=44334'}>
           <BigNumbers sectionColour="#636C17" />
         </FetchProvider>
       </ArticleHarness>
diff --git a/packages/ts-components/src/components/in-article-info-card-bulletpoints/InfoCardBulletPoints.stories.tsx b/packages/ts-components/src/components/in-article-info-card-bulletpoints/InfoCardBulletPoints.stories.tsx
index 0eac1fe516c..e3725f922b2 100644
--- a/packages/ts-components/src/components/in-article-info-card-bulletpoints/InfoCardBulletPoints.stories.tsx
+++ b/packages/ts-components/src/components/in-article-info-card-bulletpoints/InfoCardBulletPoints.stories.tsx
@@ -5,6 +5,9 @@ import { FetchProvider } from '../../helpers/fetch/FetchProvider';
 import { InfoCardBulletPoints } from './InfoCardBulletPoints';
 import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
 import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
+import { getDeckApiUrl } from '../../utils/getDeckApiUrl';
+
+const deckApiUrl: string = getDeckApiUrl();
 
 storiesOf('Typescript Component/In Article/Info Card', module).add(
   'Bullet Points',
@@ -20,7 +23,7 @@ storiesOf('Typescript Component/In Article/Info Card', module).add(
       analyticsStream={analyticsStream}
     >
       <ArticleHarness>
-        <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/43978">
+        <FetchProvider url={deckApiUrl + '?id=43978'}>
           <InfoCardBulletPoints sectionColour="#636C17" />
         </FetchProvider>
       </ArticleHarness>
diff --git a/packages/ts-components/src/components/in-article-timelines/Timelines.stories.tsx b/packages/ts-components/src/components/in-article-timelines/Timelines.stories.tsx
index af6a5ca7eaf..67a4e6253ed 100644
--- a/packages/ts-components/src/components/in-article-timelines/Timelines.stories.tsx
+++ b/packages/ts-components/src/components/in-article-timelines/Timelines.stories.tsx
@@ -5,6 +5,9 @@ import { FetchProvider } from '../../helpers/fetch/FetchProvider';
 import { Timelines } from './Timelines';
 import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
 import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
+import { getDeckApiUrl } from '../../utils/getDeckApiUrl';
+
+const deckApiUrl = getDeckApiUrl();
 
 storiesOf('Typescript Component/In Article/Timelines', module)
   .add('Timelines with Bullet Point', () => (
@@ -19,7 +22,7 @@ storiesOf('Typescript Component/In Article/Timelines', module)
       analyticsStream={analyticsStream}
     >
       <ArticleHarness>
-        <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/45060">
+        <FetchProvider url={deckApiUrl + '?id=45060'}>
           <Timelines sectionColour="#008347" />
         </FetchProvider>
       </ArticleHarness>
@@ -37,7 +40,7 @@ storiesOf('Typescript Component/In Article/Timelines', module)
       analyticsStream={analyticsStream}
     >
       <ArticleHarness>
-        <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/45061">
+        <FetchProvider url={deckApiUrl + '?id=45061'}>
           <Timelines sectionColour="#008347" />
         </FetchProvider>
       </ArticleHarness>
diff --git a/packages/ts-components/src/utils/__tests__/getDeckApiUrl.test.ts b/packages/ts-components/src/utils/__tests__/getDeckApiUrl.test.ts
new file mode 100644
index 00000000000..2925036a6a2
--- /dev/null
+++ b/packages/ts-components/src/utils/__tests__/getDeckApiUrl.test.ts
@@ -0,0 +1,44 @@
+// getDeckApiUrl.test.ts
+import { getDeckApiUrl } from '../getDeckApiUrl';
+
+describe('getDeckApiUrl', () => {
+  beforeEach(() => {
+    (global as any).window = {};
+  });
+
+  afterEach(() => {
+    delete (global as any).window;
+  });
+
+  it('should return the production URL when environmentName is prod', () => {
+    (global as any).window.__TIMES_CONFIG__ = {
+      environmentName: 'prod'
+    };
+    expect(getDeckApiUrl()).toBe(
+      'https://editorial-tm.newsapis.co.uk/prod/deck-component-data-api'
+    );
+  });
+
+  it('should return the staging URL when environmentName is not prod', () => {
+    (global as any).window.__TIMES_CONFIG__ = {
+      environmentName: 'staging'
+    };
+    expect(getDeckApiUrl()).toBe(
+      'https://editorial-tm.staging.newsapis.co.uk/staging/deck-component-data-api'
+    );
+  });
+
+  it('should return the staging URL when window is undefined', () => {
+    delete (global as any).window;
+    expect(getDeckApiUrl()).toBe(
+      'https://editorial-tm.staging.newsapis.co.uk/staging/deck-component-data-api'
+    );
+  });
+
+  it('should return the staging URL when __TIMES_CONFIG__ is undefined', () => {
+    (global as any).window = {};
+    expect(getDeckApiUrl()).toBe(
+      'https://editorial-tm.staging.newsapis.co.uk/staging/deck-component-data-api'
+    );
+  });
+});
diff --git a/packages/ts-components/src/utils/getDeckApiUrl.ts b/packages/ts-components/src/utils/getDeckApiUrl.ts
new file mode 100644
index 00000000000..a88dfa65c82
--- /dev/null
+++ b/packages/ts-components/src/utils/getDeckApiUrl.ts
@@ -0,0 +1,14 @@
+export const getDeckApiUrl = (): string => {
+  if (typeof window !== 'undefined') {
+    const environmentName =
+      window.__TIMES_CONFIG__ && window.__TIMES_CONFIG__.environmentName;
+
+    if (environmentName === 'prod') {
+      return 'https://editorial-tm.newsapis.co.uk/prod/deck-component-data-api';
+    } else {
+      return 'https://editorial-tm.staging.newsapis.co.uk/staging/deck-component-data-api';
+    }
+  } else {
+    return 'https://editorial-tm.staging.newsapis.co.uk/staging/deck-component-data-api';
+  }
+};