diff --git a/public/sw.js b/public/sw.js
index b847b2ca1a2..b01a9477db3 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-syntax */
 /* eslint-disable no-useless-return */
 /* eslint-disable import/prefer-default-export */
 /* eslint-disable no-unused-vars */
@@ -10,14 +11,86 @@ const cacheName = 'simorghCache_v4';
 const pwaClients = new Map();
 let isPWADeviceOffline = false;
 
+// --- IndexedDB helpers ---
+const DB_NAME = 'simorghOfflineDB';
+const STORE_NAME = 'cachedArticles';
+const MAX_ARTICLE_AGE_MS = 72 * 60 * 60 * 1000; // 72 hours
+const REFRESH_INTERVAL_MS = 24 * 60 * 60 * 1000; // 24 hours
+
+const openDB = () =>
+  new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, 1);
+    req.onupgradeneeded = e => {
+      const db = e.target.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME, { keyPath: 'url' });
+      }
+      if (!db.objectStoreNames.contains('meta')) {
+        db.createObjectStore('meta', { keyPath: 'key' });
+      }
+    };
+    req.onsuccess = e => resolve(e.target.result);
+    req.onerror = e => reject(e.target.error);
+  });
+
+const dbGet = async (store, key) => {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(store, 'readonly');
+    const req = tx.objectStore(store).get(key);
+    req.onsuccess = e => resolve(e.target.result);
+    req.onerror = e => reject(e.target.error);
+  });
+};
+
+const dbPut = async (store, value) => {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(store, 'readwrite');
+    const req = tx.objectStore(store).put(value);
+    req.onsuccess = () => resolve();
+    req.onerror = e => reject(e.target.error);
+  });
+};
+
+const dbGetAll = async store => {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(store, 'readonly');
+    const req = tx.objectStore(store).getAll();
+    req.onsuccess = e => resolve(e.target.result);
+    req.onerror = e => reject(e.target.error);
+  });
+};
+
+const dbDelete = async (store, key) => {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(store, 'readwrite');
+    const req = tx.objectStore(store).delete(key);
+    req.onsuccess = () => resolve();
+    req.onerror = e => reject(e.target.error);
+  });
+};
+
 // --------------------
 // Helper Functions
 // --------------------
 
+const loggerEnabled = true;
+const generatedTimestamp = new Date().toISOString();
+
+const logger = (...args) => {
+  if (!loggerEnabled) return;
+  // eslint-disable-next-line no-console
+  console.log(`[SW ${version}]`, ...args);
+};
+
 const getServiceFromUrl = url => new URL(url).pathname.split('/')[1];
 const getOfflinePageUrl = service => `/${service}/offline`;
 
 const cacheResource = async (cache, url) => {
+  logger('cacheResource', { url });
   try {
     const response = await fetch(url);
     if (response.ok) await cache.put(url, response.clone());
@@ -27,16 +100,10 @@ const cacheResource = async (cache, url) => {
   }
 };
 
-const cacheOfflinePageAndResources = async service => {
-  const cache = await caches.open(cacheName);
-  const offlinePageUrl = new URL(
-    getOfflinePageUrl(service),
-    self.location.origin,
-  ).href;
-
-  if (await cache.match(offlinePageUrl)) return;
+const cachePageAndResources = async (cache, url, forceRefresh = false) => {
+  if (!forceRefresh && (await cache.match(url))) return;
 
-  const resp = await cacheResource(cache, offlinePageUrl);
+  const resp = await cacheResource(cache, url);
   if (!resp || !resp.ok) return;
 
   const html = await resp.text();
@@ -48,7 +115,104 @@ const cacheOfflinePageAndResources = async service => {
   );
 
   const resources = [...scriptSrcs, ...linkHrefs].filter(Boolean);
-  await Promise.allSettled(resources.map(url => cacheResource(cache, url)));
+  await Promise.allSettled(resources.map(r => cacheResource(cache, r)));
+};
+
+const cacheOfflinePageAndResources = async (service, forceRefresh = false) => {
+  const cache = await caches.open(cacheName);
+  const offlinePageUrl = new URL(
+    getOfflinePageUrl(service),
+    self.location.origin,
+  ).href;
+
+  await cachePageAndResources(cache, offlinePageUrl, forceRefresh);
+};
+
+const getMostReadDataFromOfflinePage = async service => {
+  const offlinePageUrl = new URL(
+    getOfflinePageUrl(service),
+    self.location.origin,
+  ).href;
+
+  const cache = await caches.open(cacheName);
+  const cachedResponse = await cache.match(offlinePageUrl);
+  if (!cachedResponse) return null;
+
+  const html = await cachedResponse.text();
+
+  const match = html.match(
+    /<script[^>]*id="most-read-data"[^>]*>(.+?)<\/script>/s,
+  );
+  if (!match) return null;
+
+  try {
+    return JSON.parse(match[1]);
+  } catch {
+    return null;
+  }
+};
+
+const cacheArticles = async service => {
+  const lastSync = await dbGet('meta', 'lastArticleSync');
+  const now = Date.now();
+  logger('📌 cacheArticles called', { lastSync });
+
+  if (lastSync && now - lastSync.value < REFRESH_INTERVAL_MS) return;
+
+  const mostRead = await getMostReadDataFromOfflinePage(service);
+
+  logger(`👀 fetched:`, { mostRead });
+
+  const mostReadArticles = mostRead?.items;
+  if (!mostReadArticles?.length) return;
+
+  const cache = await caches.open(cacheName);
+  const mostReadUrls = new Set(mostReadArticles.map(a => a.href));
+
+  // Delete stale articles not in most-read and older than 72h
+  const cachedArticleMeta = await dbGetAll(STORE_NAME);
+  const staleEntries = cachedArticleMeta.filter(entry => {
+    const isTooOld = now - entry.cachedAt > MAX_ARTICLE_AGE_MS;
+    const isNotMostRead = !mostReadUrls.has(entry.href);
+    return isTooOld && isNotMostRead;
+  });
+
+  await Promise.allSettled(
+    staleEntries.flatMap(entry => [
+      cache.delete(entry.href),
+      dbDelete(STORE_NAME, entry.href),
+    ]),
+  );
+
+  // Cache new or updated articles including their scripts and stylesheets
+  const existingMeta = await Promise.all(
+    mostReadArticles.map(article => dbGet(STORE_NAME, article.href)),
+  );
+
+  await Promise.allSettled(
+    mostReadArticles.map(async (article, i) => {
+      const existing = existingMeta[i];
+
+      const isMissing = !existing;
+      const isOutdated =
+        !!existing &&
+        article.timestamp &&
+        existing.timestamp !== article.timestamp;
+
+      if (!isMissing && !isOutdated) return;
+
+      const articleUrl = new URL(article.href, self.location.origin).href;
+      // Force refresh only when we know it's outdated, not when simply missing
+      await cachePageAndResources(cache, articleUrl, isOutdated);
+      await dbPut(STORE_NAME, {
+        url: article.href,
+        timestamp: article.timestamp,
+        cachedAt: now,
+      });
+    }),
+  );
+
+  await dbPut('meta', { key: 'lastArticleSync', value: now });
 };
 
 const CACHEABLE_FILES = [
@@ -88,13 +252,35 @@ self.addEventListener('activate', event => {
 // -------Message Event-------------
 self.addEventListener('message', async event => {
   if (event.data?.type === 'PWA_STATUS') {
-    const clientId = event.source.id;
-    const { isPWA } = event.data;
+    const { isPWA, offlineArticle } = event.data;
+    const { isEnabled: isOfflineArticleEnabled, service } =
+      offlineArticle ?? {};
+
+    logger('📌 Message', { isOfflineArticleEnabled, service });
 
     if (isPWA) {
-      pwaClients.set(clientId, true);
-      const service = getServiceFromUrl(event.source.url);
-      await cacheOfflinePageAndResources(service);
+      pwaClients.set(event.source.id, true);
+
+      await dbPut('meta', {
+        key: `offlineArticleEnabled_${service}`,
+        value: !!isOfflineArticleEnabled,
+      });
+
+      if (isOfflineArticleEnabled) {
+        const lastSync = await dbGet('meta', 'lastArticleSync');
+        const isOutdated =
+          !lastSync || Date.now() - lastSync.value >= REFRESH_INTERVAL_MS;
+
+        // Always cache offline page first — cacheArticles depends on it
+        await cacheOfflinePageAndResources(service, isOutdated);
+
+        if (isOutdated) {
+          await cacheArticles(service);
+        }
+      } else {
+        // Still cache the offline page itself regardless of article toggle
+        await cacheOfflinePageAndResources(service);
+      }
     }
   }
 });
@@ -143,6 +329,7 @@ const fetchEventHandler = async event => {
     );
   } else if (isNavigationMode) {
     const { url } = event.request;
+    logger('isNavigationMode', { url });
     event.respondWith(
       (async () => {
         const client = await self.clients.get(event.clientId);
@@ -152,20 +339,45 @@ const fetchEventHandler = async event => {
         const getOfflineFallback = async () => {
           if (isPWA) {
             const service = getServiceFromUrl(url);
+
+            const offlineArticleMeta = await dbGet(
+              'meta',
+              `offlineArticleEnabled_${service}`,
+            );
+            const isOfflineArticleEnabled = offlineArticleMeta?.value ?? false;
+
+            if (isOfflineArticleEnabled) {
+              const cachedArticle = await cache.match(url);
+
+              if (cachedArticle) {
+                // Check article is not outdated before serving
+                const articleMeta = await dbGet(STORE_NAME, url);
+                const isOutdated =
+                  !articleMeta ||
+                  Date.now() - articleMeta.cachedAt > MAX_ARTICLE_AGE_MS;
+
+                if (!isOutdated) {
+                  logger('🎉 cachedArticle', { url });
+                  isPWADeviceOffline = true;
+                  return cachedArticle;
+                }
+
+                logger('⚠️ cachedArticle is outdated, skipping', { url });
+              }
+            }
+
+            // Offline page fallback is always available regardless of toggle
             const offlineUrl = new URL(
               getOfflinePageUrl(service),
               self.location.origin,
             ).href;
-
             const cachedOffline = await cache.match(offlineUrl);
-
             if (cachedOffline) {
               isPWADeviceOffline = true;
               return cachedOffline;
             }
           }
-
-          // Fallback to browser default behavior
+          // If offline page/article not available, return error response
           return Response.error();
         };
 
diff --git a/src/app/components/Image/index.tsx b/src/app/components/Image/index.tsx
index 8c7d0d0a32b..7b029cfa476 100644
--- a/src/app/components/Image/index.tsx
+++ b/src/app/components/Image/index.tsx
@@ -55,11 +55,11 @@ const Image = ({
   hasCaption,
   isPortraitOrientation,
 }: PropsWithChildren<ImageProps>) => {
-  const { pageType, isLite, isAmp } = use(RequestContext);
+  const { pageType, isLite, isAmp, isOfflineMode } = use(RequestContext);
   const [isLoaded, setIsLoaded] = useState(false);
   if (isLite) return null;
 
-  const showPlaceholder = placeholder && !isLoaded;
+  const showPlaceholder = placeholder && (!isLoaded || isOfflineMode);
   const hasDimensions = width && height;
   const hasFixedAspectRatio = !!aspectRatio || !!hasDimensions;
   const [aspectRatioX, aspectRatioY] = aspectRatio ||
@@ -88,6 +88,37 @@ const Image = ({
   };
   const imgSrcSet = getImgSrcSet();
   const imgSizes = getImgSizes();
+
+  // TODO: TBC how the images should be shown
+  if (isOfflineMode) {
+    return (
+      <div
+        className={className}
+        css={theme => [
+          styles.wrapper,
+          hasFixedAspectRatio
+            ? styles.wrapperFixedAspectRatio
+            : styles.wrapperResponsiveRatio,
+          isPortraitOrientation && styles.portraitOrientation,
+          placeholder && [
+            styles.placeholder,
+            {
+              backgroundColor: darkPlaceholder
+                ? theme.palette.SHADOW
+                : theme.palette.LUNAR,
+            },
+          ],
+        ]}
+        style={{
+          paddingBottom: hasFixedAspectRatio ? legacyBrowserAspectRatio : 0,
+          ...(!hasCaption && { overflow: 'hidden' }),
+        }}
+      >
+        {children}
+      </div>
+    );
+  }
+
   return (
     <>
       {preload && (
diff --git a/src/app/components/MostRead/types.ts b/src/app/components/MostRead/types.ts
index 25d244e0567..10abeb7b681 100644
--- a/src/app/components/MostRead/types.ts
+++ b/src/app/components/MostRead/types.ts
@@ -76,25 +76,27 @@ export interface OptimoMostReadRecord {
   };
 }
 
+export type MostReadDataItem = {
+  id: string;
+  rank: number;
+  href: string;
+  title: string;
+  timestamp: number | string;
+  images?: {
+    defaultPromoImage: OptimoBlock[];
+  };
+  indexImage?: {
+    width: number;
+    height: number;
+    altText: string;
+    originCode: string;
+    locator: string;
+  };
+};
+
 export interface MostReadData {
   generated?: string;
   lastRecordTimeStamp: string;
   firstRecordTimeStamp?: string;
-  items: {
-    id: string;
-    rank: number;
-    href: string;
-    title: string;
-    timestamp: number | string;
-    images?: {
-      defaultPromoImage: OptimoBlock[];
-    };
-    indexImage?: {
-      width: number;
-      height: number;
-      altText: string;
-      originCode: string;
-      locator: string;
-    };
-  }[];
+  items: MostReadDataItem[];
 }
diff --git a/src/app/components/PageLayoutWrapper/index.tsx b/src/app/components/PageLayoutWrapper/index.tsx
index c40384d7f81..d3b69ac15ea 100644
--- a/src/app/components/PageLayoutWrapper/index.tsx
+++ b/src/app/components/PageLayoutWrapper/index.tsx
@@ -50,12 +50,13 @@ const PageLayoutWrapper = ({
   navItems,
 }: PropsWithChildren<Props>) => {
   const { service } = use(ServiceContext);
-  const { isLite, isAmp, nonce, cspHeader } = use(RequestContext);
+  const { isLite, isAmp, nonce, cspHeader, isOfflineMode } =
+    use(RequestContext);
 
   const isErrorPage = ![200].includes(status) || !status;
   const pageType = pageData?.metadata?.type;
   const reportingPageType = pageType?.replace(/ /g, '');
-  const isOfflinePage = pageType === OFFLINE_PAGE;
+  const isOfflinePage = pageType === OFFLINE_PAGE || isOfflineMode;
   let wordCount: wordCountType = 0;
 
   if (pageType === 'article') {
diff --git a/src/app/contexts/RequestContext/index.tsx b/src/app/contexts/RequestContext/index.tsx
index b40d1908c49..29abb701681 100644
--- a/src/app/contexts/RequestContext/index.tsx
+++ b/src/app/contexts/RequestContext/index.tsx
@@ -42,6 +42,7 @@ export type RequestContextProps = {
   country?: string | null;
   nonce?: string | null;
   cspHeader: string | null;
+  isOfflineMode?: boolean;
 };
 
 export const RequestContext = createContext<RequestContextProps>(
@@ -69,6 +70,7 @@ type RequestProviderProps = {
   country?: string | null;
   nonce?: string | null;
   cspHeader?: string | null;
+  isOfflineMode?: boolean;
 };
 
 export const RequestContextProvider = ({
@@ -93,6 +95,7 @@ export const RequestContextProvider = ({
   timeOnServer = null,
   variant = null,
   isUK = null,
+  isOfflineMode = false,
 }: PropsWithChildren<RequestProviderProps>) => {
   let { origin } = getOriginContext(bbcOrigin);
   const env: Environments = getEnv(origin);
@@ -146,6 +149,7 @@ export const RequestContextProvider = ({
       country,
       nonce,
       cspHeader,
+      isOfflineMode,
     }),
     [
       derivedPageType,
@@ -171,6 +175,7 @@ export const RequestContextProvider = ({
       country,
       cspHeader,
       nonce,
+      isOfflineMode,
     ],
   );
 
diff --git a/src/app/hooks/useSendPWAStatus/index.tsx b/src/app/hooks/useSendPWAStatus/index.tsx
index 540d889ed25..6c512f85325 100644
--- a/src/app/hooks/useSendPWAStatus/index.tsx
+++ b/src/app/hooks/useSendPWAStatus/index.tsx
@@ -1,8 +1,18 @@
-import { useEffect } from 'react';
+import { use, useEffect } from 'react';
+import useToggle from '#app/hooks/useToggle';
+import isLocal from '#app/lib/utilities/isLocal';
+import { ServiceContext } from '#contexts/ServiceContext';
 
 const useSendPWAStatus = (isPWA: boolean) => {
+  const { service } = use(ServiceContext);
+  const { enabled, value } = useToggle('offlineArticle');
+
+  const isOfflineArticleEnabled =
+    enabled &&
+    (isLocal() ? value?.toString().split('|').includes(service) : true);
+
   useEffect(() => {
-    // Service workers not available - exit .
+    // Service workers not available - exit.
     if (typeof window === 'undefined' || !navigator.serviceWorker) {
       return;
     }
@@ -14,13 +24,16 @@ const useSendPWAStatus = (isPWA: boolean) => {
         sw.controller.postMessage({
           type: 'PWA_STATUS',
           isPWA,
+          offlineArticle: {
+            isEnabled: isOfflineArticleEnabled,
+            service,
+          },
         });
       }
     };
 
     const sw = navigator.serviceWorker;
 
-    // if SW ready
     if (sw.ready && typeof sw.ready.then === 'function') {
       sw.ready.then(sendPWAStatus);
     }
@@ -32,7 +45,7 @@ const useSendPWAStatus = (isPWA: boolean) => {
     return () => {
       sw.removeEventListener('controllerchange', sendPWAStatus);
     };
-  }, [isPWA]);
+  }, [isPWA, isOfflineArticleEnabled, service]);
 };
 
 export default useSendPWAStatus;
diff --git a/src/app/lib/config/toggles/localConfig.js b/src/app/lib/config/toggles/localConfig.js
index 28dc12f62e4..c56bea6161e 100644
--- a/src/app/lib/config/toggles/localConfig.js
+++ b/src/app/lib/config/toggles/localConfig.js
@@ -50,6 +50,10 @@ export default {
   nielsenAnalytics: {
     enabled: true,
   },
+  offlineArticle: {
+    enabled: true,
+    value: 'mundo|hindi|arabic',
+  },
   onDemandRadioSchedule: {
     enabled: true,
   },
diff --git a/src/app/lib/utilities/getMostReadOfflineData/index.tsx b/src/app/lib/utilities/getMostReadOfflineData/index.tsx
new file mode 100644
index 00000000000..add17fd94ab
--- /dev/null
+++ b/src/app/lib/utilities/getMostReadOfflineData/index.tsx
@@ -0,0 +1,41 @@
+import { MostReadData } from '#app/components/MostRead/types';
+import getOriginContext from '#app/contexts/RequestContext/getOriginContext';
+import isLive from '../isLive';
+
+type MostReadDataItem = MostReadData['items'][number];
+
+type MostReadOfflineData = Pick<
+  MostReadData,
+  'generated' | 'lastRecordTimeStamp' | 'firstRecordTimeStamp'
+> & {
+  items: Pick<MostReadDataItem, 'href' | 'title' | 'timestamp'>[];
+};
+
+const buildArticleUrl = (href: string): string => {
+  const { origin } = getOriginContext(null);
+  const url = new URL(href);
+
+  // TODO: To be confirmed the exact query params
+  url.searchParams.set('mode', 'offline');
+
+  if (!isLive()) {
+    url.host = new URL(origin).host;
+    url.protocol = new URL(origin).protocol;
+    url.searchParams.set('renderer_env', 'live');
+  }
+
+  return url.toString();
+};
+
+const getMostReadOfflineData = (data: MostReadData): MostReadOfflineData => ({
+  generated: data.generated,
+  lastRecordTimeStamp: data.lastRecordTimeStamp,
+  firstRecordTimeStamp: data.firstRecordTimeStamp,
+  items: data.items.map(({ href, title, timestamp }) => ({
+    href: buildArticleUrl(href),
+    title,
+    timestamp,
+  })),
+});
+
+export default getMostReadOfflineData;
diff --git a/src/app/lib/utilities/isOfflineMode/index.tsx b/src/app/lib/utilities/isOfflineMode/index.tsx
new file mode 100644
index 00000000000..3ea939ea00c
--- /dev/null
+++ b/src/app/lib/utilities/isOfflineMode/index.tsx
@@ -0,0 +1,14 @@
+import getOriginContext from '#app/contexts/RequestContext/getOriginContext';
+
+const isOfflineMode = (url: string): boolean => {
+  const { origin } = getOriginContext(null);
+
+  try {
+    const mode = new URL(url, origin).searchParams.get('mode');
+    return mode === 'offline';
+  } catch {
+    return false;
+  }
+};
+
+export default isOfflineMode;
diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx
index bad4efe99cb..b6f36a6bd1a 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -55,6 +55,7 @@ import Curation from '#app/components/Curation';
 import Recommendations from '#app/components/Recommendations';
 import ReadTimeArticle from '#app/components/ReadTime';
 import PWAPromotionalBanner from '#app/components/PWAPromotionalBanner';
+import Heading from '#app/components/Heading';
 import ElectionBanner from './ElectionBanner';
 import ImageWithCaption from '../../components/ImageWithCaption';
 import AdContainer from '../../components/Ad';
@@ -195,7 +196,7 @@ const getContinueReadingButton =
 
 const ArticlePage = ({ pageData }: { pageData: Article }) => {
   const [showAllContent, setShowAllContent] = useState(false);
-  const { isApp, isAmp, isLite } = use(RequestContext);
+  const { isApp, isAmp, isLite, isOfflineMode } = use(RequestContext);
 
   const {
     articleAuthor,
@@ -326,6 +327,7 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
     !isAmp &&
       !isLite &&
       !isApp &&
+      !isOfflineMode &&
       hasContinueReadingBlock &&
       continueReadingButtonToggle,
   );
@@ -410,64 +412,78 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
   const shouldRenderPWAPromotionalBanner =
     !isTopBarOJsEnabled || !pageData?.secondaryColumn?.topStories?.length;
 
+  // eslint-disable-next-line no-console
+  console.log(`📌 ArticlePage`, { isOfflineMode });
+
   return (
     <div css={styles.pageWrapper}>
-      {/* EXPERIMENT: PWA Promotional Banner */}
-      {shouldRenderPWAPromotionalBanner && <PWAPromotionalBanner />}
-      <ATIAnalytics atiData={atiData} />
-      <ChartbeatAnalytics
-        sectionName={pageData?.relatedContent?.section?.name}
-        title={headline}
-        authors={authors}
-      />
-      <ComscoreAnalytics />
-      <NielsenAnalytics />
-      <ArticleMetadata
-        articleId={getArticleId(pageData)}
-        title={headline}
-        author={articleAuthor}
-        twitterHandle={articleAuthorTwitterHandle}
-        firstPublished={firstPublished}
-        lastPublished={lastPublished}
-        section={getArticleSection(pageData)}
-        aboutTags={aboutTags}
-        mentionsTags={getMentions(pageData)}
-        lang={getLang(pageData)}
-        description={description}
-        imageLocator={promoImage}
-        imageAltText={promoImageAltText}
-        hasAmpPage={!isTC2Asset}
-      />
-      <LinkedData
-        showAuthor
-        bylineLinkedData={bylineLinkedData}
-        type={
-          !isPGL
-            ? categoryName(isTrustProjectParticipant, taggings, formats)
-            : 'Article'
-        }
-        seoTitle={headline}
-        headline={headline}
-        description={description}
-        datePublished={firstPublished}
-        dateModified={lastPublished}
-        aboutTags={aboutTags}
-        imageLocator={promoImage}
-      />
-      {allowAdvertising && (
-        <AdContainer slotType="leaderboard" adcampaign={adcampaign} />
+      {!isOfflineMode && (
+        <>
+          {/* EXPERIMENT: PWA Promotional Banner */}
+          {shouldRenderPWAPromotionalBanner && <PWAPromotionalBanner />}
+          <ATIAnalytics atiData={atiData} />
+          <ChartbeatAnalytics
+            sectionName={pageData?.relatedContent?.section?.name}
+            title={headline}
+            authors={authors}
+          />
+          <ComscoreAnalytics />
+          <NielsenAnalytics />
+          <ArticleMetadata
+            articleId={getArticleId(pageData)}
+            title={headline}
+            author={articleAuthor}
+            twitterHandle={articleAuthorTwitterHandle}
+            firstPublished={firstPublished}
+            lastPublished={lastPublished}
+            section={getArticleSection(pageData)}
+            aboutTags={aboutTags}
+            mentionsTags={getMentions(pageData)}
+            lang={getLang(pageData)}
+            description={description}
+            imageLocator={promoImage}
+            imageAltText={promoImageAltText}
+            hasAmpPage={!isTC2Asset}
+          />
+          <LinkedData
+            showAuthor
+            bylineLinkedData={bylineLinkedData}
+            type={
+              !isPGL
+                ? categoryName(isTrustProjectParticipant, taggings, formats)
+                : 'Article'
+            }
+            seoTitle={headline}
+            headline={headline}
+            description={description}
+            datePublished={firstPublished}
+            dateModified={lastPublished}
+            aboutTags={aboutTags}
+            imageLocator={promoImage}
+          />
+          {allowAdvertising && (
+            <AdContainer slotType="leaderboard" adcampaign={adcampaign} />
+          )}
+          <ElectionBanner aboutTags={aboutTags} taggings={taggings} />
+        </>
       )}
-      <ElectionBanner aboutTags={aboutTags} taggings={taggings} />
       <div css={styles.grid}>
         <div css={!isPGL ? styles.primaryColumn : styles.pglColumn}>
           <main css={styles.mainContent} role="main">
+            {isOfflineMode && (
+              <Heading level={4} style={{ margin: '1rem 0' }}>
+                ⚠️ This is the offline mode.⚠️
+              </Heading>
+            )}
             <Blocks
               blocks={articleBlocks}
               componentsToRender={componentsToRender}
             />
-            <OptimizelyPageMetrics trackPageComplete />
+            {!isOfflineMode && <OptimizelyPageMetrics trackPageComplete />}
           </main>
-          <OptimizelyPageMetrics trackPageView trackPageDepth trackVisit />
+          {!isOfflineMode && (
+            <OptimizelyPageMetrics trackPageView trackPageDepth trackVisit />
+          )}
           {showTopics && (
             <RelatedTopics
               css={[
diff --git a/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx b/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx
index b87e4062f1b..403acac2ada 100644
--- a/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx
+++ b/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx
@@ -3,11 +3,24 @@ import Helmet from 'react-helmet';
 import { ServiceContext } from '#contexts/ServiceContext';
 import ErrorMain from '#app/legacy/components/ErrorMain';
 import { useOfflinePageFlag } from '#app/hooks/useOfflinePageFlag';
+import MostRead from '#app/components/MostRead/Canonical';
+import { MostReadData } from '#app/components/MostRead/types';
+import Heading from '#app/components/Heading';
+import Paragraph from '#app/components/Paragraph';
+import serialiseForScript from '#app/lib/utilities/serialiseForScript';
+import getMostReadOfflineData from '#app/lib/utilities/getMostReadOfflineData';
 
-const OfflinePage = () => {
+interface PageData {
+  mostReadData?: MostReadData | null;
+}
+
+interface OfflinePageProps {
+  pageData?: PageData | null;
+}
+
+const OfflinePage = ({ pageData }: OfflinePageProps) => {
   const { service, dir, script } = use(ServiceContext);
 
-  // Track offline page visit (sets flag in localStorage, PWA only)
   useOfflinePageFlag();
 
   const title = 'You are offline';
@@ -18,22 +31,52 @@ const OfflinePage = () => {
     'Refresh the page when your connection is restored',
   ];
 
+  const mostReadData = pageData?.mostReadData;
+  const mostReadOfflineData = mostReadData
+    ? getMostReadOfflineData(mostReadData)
+    : null;
+
   return (
     <>
       <Helmet htmlAttributes={{ dir, lang: service }}>
         <title>{title}</title>
         <meta name="robots" content="noindex,nofollow" />
+        {mostReadData && (
+          <script id="most-read-data" type="application/json">
+            {serialiseForScript(mostReadOfflineData)}
+          </script>
+        )}
       </Helmet>
-      <ErrorMain
-        statusCode={null}
-        title={title}
-        message={message}
-        solutions={solutions}
-        callToActionLinkText=""
-        callToActionLinkUrl=""
-        script={script}
-        service={service}
-      />
+
+      {mostReadOfflineData?.items?.length ? (
+        <main style={{ margin: '0 auto', maxWidth: '63rem', padding: '1rem' }}>
+          <Heading level={1} style={{ margin: '1rem 0' }}>
+            {title}
+          </Heading>
+          <Paragraph size="bodyCopy" style={{ margin: '1rem 0' }}>
+            {message}
+          </Paragraph>
+          <Heading level={3} style={{ margin: '1rem 0 1.5rem' }}>
+            Most read articles
+          </Heading>
+          <MostRead
+            data={mostReadOfflineData as MostReadData} // TODO - fix TS
+            columnLayout="twoColumn"
+            size="default"
+          />
+        </main>
+      ) : (
+        <ErrorMain
+          statusCode={null}
+          title={title}
+          message={message}
+          solutions={solutions}
+          callToActionLinkText=""
+          callToActionLinkUrl=""
+          script={script}
+          service={service}
+        />
+      )}
     </>
   );
 };
diff --git a/ws-nextjs-app/pages/[service]/offline/index.page.tsx b/ws-nextjs-app/pages/[service]/offline/index.page.tsx
index 8df456fa8fb..4ad6b050ad5 100644
--- a/ws-nextjs-app/pages/[service]/offline/index.page.tsx
+++ b/ws-nextjs-app/pages/[service]/offline/index.page.tsx
@@ -1,15 +1,20 @@
 import dynamic from 'next/dynamic';
 import { GetServerSideProps } from 'next';
-import { OFFLINE_PAGE } from '#app/routes/utils/pageTypes';
+import { OFFLINE_PAGE, MOST_READ_PAGE } from '#app/routes/utils/pageTypes';
 import PageDataParams from '#app/models/types/pageDataParams';
 import deriveVariant from '#nextjs/utilities/deriveVariant';
-import extractHeaders from '#server/utilities/extractHeaders';
 import logResponseTime from '#server/utilities/logResponseTime';
+import getPageData from '#nextjs/utilities/pageRequests/getPageData';
+import extractHeaders from '#src/server/utilities/extractHeaders';
 
 const OfflinePage = dynamic(() => import('./OfflinePage'));
 
 export const getServerSideProps: GetServerSideProps = async context => {
-  const { service, variant: variantFromUrl } = context.query as PageDataParams;
+  const {
+    service,
+    variant: variantFromUrl,
+    renderer_env: rendererEnv,
+  } = context.query as PageDataParams;
   const variant = deriveVariant(variantFromUrl);
 
   logResponseTime({ path: context.resolvedUrl }, context.res, () => null);
@@ -19,16 +24,35 @@ export const getServerSideProps: GetServerSideProps = async context => {
     'public, max-age=300, stale-while-revalidate=600, stale-if-error=3600',
   );
 
+  let mostReadData = null;
+
+  try {
+    const { data } = await getPageData({
+      pageType: MOST_READ_PAGE,
+      id: `/${service}/popular/read`,
+      resolvedUrl: `/${service}/popular/read`,
+      service,
+      variant: variant || undefined,
+      rendererEnv: rendererEnv || 'live',
+    });
+
+    mostReadData = data?.pageData ?? null;
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to fetch most read data:', err);
+  }
+
   return {
     props: {
-      service,
-      variant,
       pageType: OFFLINE_PAGE,
+      service,
       status: 200,
+      variant: variant || null,
       timeOnServer: Date.now(),
       pathname: `/${service}/offline`,
       ...extractHeaders(context.req.headers),
       pageData: {
+        mostReadData,
         metadata: {
           type: OFFLINE_PAGE,
         },
diff --git a/ws-nextjs-app/pages/_app.page.tsx b/ws-nextjs-app/pages/_app.page.tsx
index a9d32bfb211..1cb596a8ba7 100644
--- a/ws-nextjs-app/pages/_app.page.tsx
+++ b/ws-nextjs-app/pages/_app.page.tsx
@@ -31,6 +31,7 @@ import { AccountProvider } from '#app/contexts/AccountContext';
 import getIdctaConfig from '#app/lib/idcta/getIdctaConfig';
 import { IdctaConfig } from '#app/models/types/account';
 import fetchConfig from '#app/lib/utilities/fetchConfig';
+import isOffline from '#app/lib/utilities/isOfflineMode';
 
 interface Props {
   pageProps: {
@@ -62,6 +63,7 @@ interface Props {
     isUK?: boolean;
     country?: string | null;
     idctaConfig: IdctaConfig | null;
+    isOfflineMode: boolean;
   };
 }
 
@@ -72,6 +74,7 @@ export default class CustomApp extends App<Props> {
     const { asPath = '' } = ctx;
 
     const { isApp, isAmp, isLite } = getPathExtension(asPath);
+    const isOfflineMode = isOffline(asPath);
 
     const { service, variant } = parseRoute(asPath) as {
       service: Services;
@@ -119,6 +122,7 @@ export default class CustomApp extends App<Props> {
         isApp,
         isAmp,
         isLite,
+        isOfflineMode,
         isNextJs: true,
         serverSideExperiments,
         toggles,
@@ -155,6 +159,7 @@ export default class CustomApp extends App<Props> {
       country,
       idctaConfig = null,
       navItems,
+      isOfflineMode,
     } = pageProps;
 
     const { metadata: { atiAnalytics = undefined } = {} } = pageData ?? {};
@@ -179,6 +184,7 @@ export default class CustomApp extends App<Props> {
             isAmp={isAmp}
             isApp={isApp}
             isLite={isLite}
+            isOfflineMode={isOfflineMode}
             pageType={pageType}
             service={service}
             statusCode={status}