diff --git a/src/services/buildApi.ts b/src/services/buildApi.ts
index 2cd5d597..ebd0335d 100644
--- a/src/services/buildApi.ts
+++ b/src/services/buildApi.ts
@@ -2,7 +2,7 @@ import { AxiosRequestConfig } from 'axios';
 
 import { ArtifactPage, Build, BuildPage, BuildsGraph, RunningBuildCount } from 'pnc-api-types-ts';
 
-import { mockClient } from 'services/mockClient';
+import { pncApiMocksClient } from 'services/pncApiMocksClient';
 
 import { kafkaClient } from './kafkaClient';
 import { pncClient } from './pncClient';
@@ -90,7 +90,7 @@ export const getDependencyGraph = ({ id }: IBuildApiData, requestConfig: AxiosRe
  * @param requestConfig - Axios based request config
  */
 export const getArtifactDependencyGrah = ({ id }: IBuildApiData, requestConfig: AxiosRequestConfig = {}) => {
-  return mockClient.getHttpClient().get<any>(`/builds/${id}/artifact-dependency-graph`, requestConfig);
+  return pncApiMocksClient.getHttpClient().get<any>(`/builds/${id}/artifact-dependency-graph`, requestConfig);
 };
 
 /**
@@ -99,5 +99,5 @@ export const getArtifactDependencyGrah = ({ id }: IBuildApiData, requestConfig:
  * @param requestConfig - Axios based request config
  */
 export const getArtifactDependencies = (requestConfig: AxiosRequestConfig = {}) => {
-  return mockClient.getHttpClient().get<any>(`/build-artifact-dependencies`, requestConfig);
+  return pncApiMocksClient.getHttpClient().get<any>(`/build-artifact-dependencies`, requestConfig);
 };
diff --git a/src/services/mockClient.ts b/src/services/pncApiMocksClient.ts
similarity index 67%
rename from src/services/mockClient.ts
rename to src/services/pncApiMocksClient.ts
index 1576309e..2c8746c8 100644
--- a/src/services/mockClient.ts
+++ b/src/services/pncApiMocksClient.ts
@@ -1,9 +1,11 @@
 import axios, { AxiosInstance } from 'axios';
 
+import * as webConfigService from './webConfigService';
+
 /**
  * Mocked backend client. Use for WIP features.
  */
-class MockClient {
+class PncApiMocksClient {
   private httpClient: AxiosInstance;
 
   constructor() {
@@ -17,7 +19,7 @@ class MockClient {
    */
   private createHttpClient = (): AxiosInstance =>
     axios.create({
-      baseURL: `http://localhost:8020`,
+      baseURL: process.env.REACT_APP_PNC_API_MOCKS_URL || webConfigService.getPncApiMocksUrl(),
     });
 
   // PUBLIC
@@ -28,4 +30,4 @@ class MockClient {
   public getHttpClient = (): AxiosInstance => this.httpClient;
 }
 
-export const mockClient = new MockClient();
+export const pncApiMocksClient = new PncApiMocksClient();
diff --git a/src/services/productMilestoneApi.ts b/src/services/productMilestoneApi.ts
index 0b50e0d1..73ce6217 100644
--- a/src/services/productMilestoneApi.ts
+++ b/src/services/productMilestoneApi.ts
@@ -8,7 +8,7 @@ import {
   ProductMilestoneCloseResultPage,
 } from 'pnc-api-types-ts';
 
-import { mockClient } from 'services/mockClient';
+import { pncApiMocksClient } from 'services/pncApiMocksClient';
 
 import { pncClient } from './pncClient';
 
@@ -75,7 +75,7 @@ export const getBuilds = ({ id }: IProductMilestoneApiData, requestConfig: Axios
  * @param requestConfig - Axios based request config
  */
 export const getStatistics = ({ id }: IProductMilestoneApiData, requestConfig: AxiosRequestConfig = {}) => {
-  return mockClient.getHttpClient().get<any>(`/product-milestones/${id}/statistics`, requestConfig);
+  return pncApiMocksClient.getHttpClient().get<any>(`/product-milestones/${id}/statistics`, requestConfig);
 };
 
 /**
@@ -84,7 +84,7 @@ export const getStatistics = ({ id }: IProductMilestoneApiData, requestConfig: A
  * @param requestConfig - Axios based request config
  */
 export const getInterconnectionGraph = ({ id }: IProductMilestoneApiData, requestConfig: AxiosRequestConfig = {}) => {
-  return mockClient.getHttpClient().get<any>(`/product-milestones/${id}/interconnection-graph`, requestConfig);
+  return pncApiMocksClient.getHttpClient().get<any>(`/product-milestones/${id}/interconnection-graph`, requestConfig);
 };
 
 /**
@@ -93,7 +93,7 @@ export const getInterconnectionGraph = ({ id }: IProductMilestoneApiData, reques
  * @param requestConfig - Axios based request config
  */
 export const getSharedDeliveredArtifacts = (requestConfig: AxiosRequestConfig = {}) => {
-  return mockClient.getHttpClient().get<any>(`/product-milestone-shared-delivered-artifacts`, requestConfig);
+  return pncApiMocksClient.getHttpClient().get<any>(`/product-milestone-shared-delivered-artifacts`, requestConfig);
 };
 
 /**
@@ -107,5 +107,5 @@ export const getProductMilestoneComparison = (
   { data }: { data: { productMilestones: string[] } },
   requestConfig: AxiosRequestConfig = {}
 ) => {
-  return mockClient.getHttpClient().post<any>(`/product-milestone-comparison`, data, requestConfig);
+  return pncApiMocksClient.getHttpClient().post<any>(`/product-milestone-comparison`, data, requestConfig);
 };
diff --git a/src/services/productVersionApi.ts b/src/services/productVersionApi.ts
index 9011ffcb..4ad973f9 100644
--- a/src/services/productVersionApi.ts
+++ b/src/services/productVersionApi.ts
@@ -2,7 +2,7 @@ import { AxiosRequestConfig } from 'axios';
 
 import { GroupConfigPage, ProductMilestonePage, ProductReleasePage, ProductVersion } from 'pnc-api-types-ts';
 
-import { mockClient } from 'services/mockClient';
+import { pncApiMocksClient } from 'services/pncApiMocksClient';
 
 import { pncClient } from './pncClient';
 
@@ -29,7 +29,7 @@ export const getProductVersion = ({ id }: IProductVersionApiData, requestConfig:
  * @param requestConfig - Axios based request config
  */
 export const getStatistics = ({ id }: IProductVersionApiData, requestConfig: AxiosRequestConfig = {}) => {
-  return mockClient.getHttpClient().get<any>(`/product-versions/${id}/statistics`, requestConfig);
+  return pncApiMocksClient.getHttpClient().get<any>(`/product-versions/${id}/statistics`, requestConfig);
 };
 
 /**
@@ -40,7 +40,7 @@ export const getStatistics = ({ id }: IProductVersionApiData, requestConfig: Axi
  * @param requestConfig - Axios based request config
  */
 export const getArtifactQualityStatistics = ({ id }: IProductVersionApiData, requestConfig: AxiosRequestConfig = {}) => {
-  return mockClient.getHttpClient().get<any>(`/product-versions/${id}/artifact-quality-statistics`, requestConfig);
+  return pncApiMocksClient.getHttpClient().get<any>(`/product-versions/${id}/artifact-quality-statistics`, requestConfig);
 };
 
 /**
@@ -51,7 +51,7 @@ export const getArtifactQualityStatistics = ({ id }: IProductVersionApiData, req
  * @param requestConfig - Axios based request config
  */
 export const getRepositoryTypeStatistics = ({ id }: IProductVersionApiData, requestConfig: AxiosRequestConfig = {}) => {
-  return mockClient.getHttpClient().get<any>(`/product-versions/${id}/repository-type-statistics`, requestConfig);
+  return pncApiMocksClient.getHttpClient().get<any>(`/product-versions/${id}/repository-type-statistics`, requestConfig);
 };
 
 /**
diff --git a/src/services/webConfigService.ts b/src/services/webConfigService.ts
index 707bcafd..630f56a3 100644
--- a/src/services/webConfigService.ts
+++ b/src/services/webConfigService.ts
@@ -92,6 +92,17 @@ export const getKafkaUrl = (): string => {
   return kafkaUrl;
 };
 
+export const getPncApiMocksUrl = (): string => {
+  // TODO: extract URL from config once available
+  const pncApiMocksUrl = process.env.REACT_APP_PNC_API_MOCKS_URL;
+
+  if (!pncApiMocksUrl) {
+    throw new Error(`PNC API MOCKS URL does not contain any data: #${pncApiMocksUrl}#`);
+  }
+
+  return pncApiMocksUrl;
+};
+
 export const getUILoggerUrl = (): string => {
   const uiLoggerUrl = getWebConfig().externalUiLoggerUrl;