diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts
index f2e2587e7..2865f1756 100644
--- a/packages/common/src/index.ts
+++ b/packages/common/src/index.ts
@@ -20,6 +20,7 @@ export { default as filterCookiesByFrame } from './utils/filterCookiesByFrame';
 export { default as prepareCookiesCount } from './utils/prepareCookiesCount';
 export { default as prepareCookieStatsComponents } from './utils/prepareCookieStatsComponents';
 export { default as getCookieKey } from './utils/getCookieKey';
+export { default as fetchLocalData } from './utils/fetchLocalData';
 export { default as noop } from './utils/noop';
 export * from './cookies.types';
 export const UNKNOWN_FRAME_KEY = 'Unknown frame(s)';
diff --git a/packages/extension/src/utils/fetchLocalData.ts b/packages/common/src/utils/fetchLocalData.ts
similarity index 100%
rename from packages/extension/src/utils/fetchLocalData.ts
rename to packages/common/src/utils/fetchLocalData.ts
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
index 414e0a028..ad5cef50c 100644
--- a/packages/design-system/src/components/index.ts
+++ b/packages/design-system/src/components/index.ts
@@ -30,6 +30,8 @@ export { default as CookieDetails } from './cookieDetails';
 export { default as Details } from './cookieDetails/details';
 export { default as CookieTable } from './cookieTable';
 export { default as LandingPage } from './landingPage';
+export { default as InfoCard } from './landingPage/infoCard';
+export * from './landingPage/infoCard/fetchPSInfo';
 export { default as ErrorFallback } from './errorFallback';
 export { default as ExtensionReloadNotification } from './errorFallback/extensionReloadNotification';
 export * from './table';
diff --git a/packages/design-system/src/components/landingPage/index.tsx b/packages/design-system/src/components/landingPage/index.tsx
index 4efd906f3..82404f8de 100644
--- a/packages/design-system/src/components/landingPage/index.tsx
+++ b/packages/design-system/src/components/landingPage/index.tsx
@@ -17,116 +17,99 @@
 /**
  * External dependencies.
  */
-import React, { ReactNode, useEffect, useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import classNames from 'classnames';
-import { XMLParser } from 'fast-xml-parser';
 
 /**
  * Internal dependencies.
  */
-import { ArrowUp, ChevronRight } from '../../icons';
+import { ArrowUp } from '../../icons';
 import ProgressBar from '../progressBar';
-import BulletList from '../bulletList';
-import { QUICK_LINKS } from './constants';
+import QuickLinksList from './quickLinksList';
+import { PSInfoKeyType } from './infoCard/fetchPSInfo';
+import InfoCard from './infoCard';
 
 interface LandingPageProps {
   title?: string;
   children?: ReactNode;
-  isLoading?: boolean;
+  psInfoKey?: PSInfoKeyType;
+  iframeSrc?: string;
+  iframeBorderClass?: string;
+  extraClasses?: string;
 }
 
-const LandingPage = ({ title, children, isLoading }: LandingPageProps) => {
+const LandingPage = ({
+  title,
+  psInfoKey,
+  iframeSrc,
+  iframeBorderClass,
+  children,
+  extraClasses,
+}: LandingPageProps) => {
+  const [loading, setLoading] = useState(iframeSrc ? true : false);
   const [open, setOpen] = useState(true);
-  const [news, setNews] = useState<BulletListItem[]>([]);
-
-  const fetchLatestNews = async () => {
-    try {
-      const response = await fetch('https://privacysandbox.com/rss/');
-      const xmlResponse = await response.text();
-
-      const parser = new XMLParser();
-      const parsedFeed = parser.parse(xmlResponse);
-
-      const items = parsedFeed?.rss?.channel?.item;
-
-      if (items) {
-        const newsArray = items
-          .map((item: BulletListItem) => ({
-            title: item.title,
-            link: item.link,
-            date: item.pubDate ? new Date(item.pubDate).toISOString() : '',
-          })) // @ts-ignore
-          .sort((a, b) => b.date.localeCompare(a.date));
-
-        setNews(newsArray);
-      }
-    } catch (error) {
-      // Currently logging, but ideally inform user through UI.
-      console.warn('Error fetching latest news', error);
-    }
-  };
-
-  useEffect(() => {
-    fetchLatestNews();
-  }, []);
 
   return (
     <>
-      {isLoading && <ProgressBar additionalStyles="w-1/3 mx-auto h-full" />}
-      <div className={classNames(isLoading && 'hidden')}>
-        <div className="flex flex-col">
-          <div className="p-4 border-b border-hex-gray dark:border-quartz">
-            <button
-              className="flex gap-2 text-2xl font-bold items-baseline dark:text-bright-gray cursor-pointer"
-              onClick={() => setOpen((prevOpen) => !prevOpen)}
-            >
-              {title && <h1 className="text-left">{title}</h1>}
-              <div>
-                <ArrowUp
-                  className={classNames(open && 'rotate-180 -translate-y-1')}
-                />
-              </div>
-            </button>
-          </div>
-
-          {/* Section Content */}
+      {loading && <ProgressBar additionalStyles="w-1/3 mx-auto h-full" />}
+      <div
+        className={classNames(
+          { hidden: loading },
+          'divide-y divide-hex-gray dark:divide-quartz'
+        )}
+      >
+        <div className="p-4">
+          <button
+            className="flex gap-2 text-2xl font-bold items-baseline dark:text-bright-gray cursor-pointer"
+            onClick={() => setOpen((prevOpen) => !prevOpen)}
+          >
+            {title && <h1 className="text-left">{title}</h1>}
+            <div>
+              <ArrowUp
+                className={classNames(open && 'rotate-180 -translate-y-1')}
+              />
+            </div>
+          </button>
+        </div>
+        <div className={classNames({ hidden: !open && !children })}>
           <div
+            id="#__psat-collapsible-content"
             className={classNames(
-              !open && 'hidden',
-              'border-b border-hex-gray dark:border-quartz h-full'
+              { hidden: !open },
+              extraClasses,
+              'flex flex-col gap-6 divide-y divide-american-silver dark:divide-quartz px-4 py-6',
+              { 'border-b border-american-silver dark:border-quartz': children }
             )}
           >
-            {children}
-          </div>
-        </div>
-
-        <div className="flex flex-col md:flex-row px-4 pt-6 pb-24 gap-10">
-          {/* Quick Links */}
-          <div className="md:w-[35%] flex flex-col gap-4">
-            <BulletList rows={QUICK_LINKS} heading="Quick Links" />
+            {iframeSrc && (
+              <iframe
+                src={iframeSrc}
+                height="100%"
+                onLoad={() => {
+                  setLoading(false);
+                }}
+                className={classNames(
+                  'w-full md:w-[70%] md:m-auto rounded-xl',
+                  iframeBorderClass
+                )}
+              />
+            )}
+            {psInfoKey && <InfoCard infoKey={psInfoKey} />}
           </div>
-          {/* Latest News */}
-          <div className="md:w-[65%] flex flex-col gap-4">
-            <h2 className="text-xs font-bold uppercase text-darkest-gray dark:text-bright-gray">
-              Latest News
-            </h2>
-            <hr className="border-0 border-b border-hex-gray dark:border-quartz" />
-            <div className="space-y-4">
-              <BulletList rows={news} />
 
-              <div className="ml-6">
-                <a
-                  href="https://privacysandbox.com/news/"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="leading-6 text-sm text-analytics dark:text-medium-persian-blue font-semibold px-3 border border-american-silver dark:border-quartz rounded inline-flex gap-2 items-center"
-                >
-                  View More <ChevronRight />
-                </a>
-              </div>
+          {children && (
+            <div
+              id="#__psat-main-content"
+              className={classNames(
+                'flex flex-col gap-6 divide-y divide-american-silver dark:divide-quartz px-4 py-6',
+                extraClasses
+              )}
+            >
+              {children}
             </div>
-          </div>
+          )}
         </div>
+        <QuickLinksList />
       </div>
     </>
   );
diff --git a/packages/extension/src/utils/fetchPSInfo.ts b/packages/design-system/src/components/landingPage/infoCard/fetchPSInfo.ts
similarity index 94%
rename from packages/extension/src/utils/fetchPSInfo.ts
rename to packages/design-system/src/components/landingPage/infoCard/fetchPSInfo.ts
index 6b52a1374..b80a09770 100644
--- a/packages/extension/src/utils/fetchPSInfo.ts
+++ b/packages/design-system/src/components/landingPage/infoCard/fetchPSInfo.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 /**
- * Internal dependencies.
+ * External dependencies.
  */
-import fetchLocalData from './fetchLocalData';
+import { fetchLocalData } from '@ps-analysis-tool/common';
 
 export enum PSInfoKey {
   'Topics' = 'topics',
diff --git a/packages/extension/src/view/design-system/components/infoCard/index.tsx b/packages/design-system/src/components/landingPage/infoCard/index.tsx
similarity index 83%
rename from packages/extension/src/view/design-system/components/infoCard/index.tsx
rename to packages/design-system/src/components/landingPage/infoCard/index.tsx
index e45eb5136..1bb7c0194 100644
--- a/packages/extension/src/view/design-system/components/infoCard/index.tsx
+++ b/packages/design-system/src/components/landingPage/infoCard/index.tsx
@@ -27,16 +27,14 @@ import {
   fetchPSInfo,
   type PSInfo as PSInfoType,
   type PSInfoKeyType,
-} from '../../../../utils/fetchPSInfo';
-import classNames from 'classnames';
+} from './fetchPSInfo';
 
 interface InfoCardProps {
   infoKey: PSInfoKeyType;
-  setTitle?: React.Dispatch<React.SetStateAction<string>>;
   className?: string;
 }
 
-const InfoCard = ({ infoKey, setTitle, className }: InfoCardProps) => {
+const InfoCard = ({ infoKey, className }: InfoCardProps) => {
   const [PSInfo, setPSInfo] = useState({} as PSInfoType);
 
   useEffect(() => {
@@ -44,14 +42,13 @@ const InfoCard = ({ infoKey, setTitle, className }: InfoCardProps) => {
       const info = await fetchPSInfo(infoKey);
 
       setPSInfo(info);
-      setTitle?.(info.name);
     })();
-  }, [infoKey, setTitle]);
+  }, [infoKey]);
 
   return (
     <>
       {Object.keys(PSInfo).length ? (
-        <div className={classNames('py-6 ', className)}>
+        <div className={className}>
           <p
             className="mb-3 text-gray-700 dark:text-bright-gray text-sm"
             dangerouslySetInnerHTML={{ __html: PSInfo.description }}
diff --git a/packages/extension/src/view/design-system/components/infoCard/learnMoreDropdown.tsx b/packages/design-system/src/components/landingPage/infoCard/learnMoreDropdown.tsx
similarity index 96%
rename from packages/extension/src/view/design-system/components/infoCard/learnMoreDropdown.tsx
rename to packages/design-system/src/components/landingPage/infoCard/learnMoreDropdown.tsx
index 47efaa8ad..04a19b941 100644
--- a/packages/extension/src/view/design-system/components/infoCard/learnMoreDropdown.tsx
+++ b/packages/design-system/src/components/landingPage/infoCard/learnMoreDropdown.tsx
@@ -22,7 +22,7 @@ import React from 'react';
 /**
  * Internal dependencies.
  */
-import type { PSInfo as PSInfoType } from '../../../../utils/fetchPSInfo';
+import type { PSInfo as PSInfoType } from './fetchPSInfo';
 import RenderLink from './renderLink';
 
 /**
diff --git a/packages/extension/src/view/design-system/components/infoCard/renderLink.tsx b/packages/design-system/src/components/landingPage/infoCard/renderLink.tsx
similarity index 100%
rename from packages/extension/src/view/design-system/components/infoCard/renderLink.tsx
rename to packages/design-system/src/components/landingPage/infoCard/renderLink.tsx
diff --git a/packages/extension/src/view/design-system/components/infoCard/tests/infoCard.test.tsx b/packages/design-system/src/components/landingPage/infoCard/tests/infoCard.test.tsx
similarity index 97%
rename from packages/extension/src/view/design-system/components/infoCard/tests/infoCard.test.tsx
rename to packages/design-system/src/components/landingPage/infoCard/tests/infoCard.test.tsx
index 10eaa6ce4..ea8af230a 100644
--- a/packages/extension/src/view/design-system/components/infoCard/tests/infoCard.test.tsx
+++ b/packages/design-system/src/components/landingPage/infoCard/tests/infoCard.test.tsx
@@ -26,7 +26,7 @@ import { render, screen } from '@testing-library/react';
  * Internal dependencies.
  */
 import InfoCard from '..';
-import { PSInfoKey } from '../../../../../utils/fetchPSInfo';
+import { PSInfoKey } from '../fetchPSInfo';
 //@ts-ignore
 // eslint-disable-next-line import/no-unresolved
 import PSInfo from 'ps-analysis-tool/data/PSInfo.json';
diff --git a/packages/design-system/src/components/landingPage/quickLinksList.tsx b/packages/design-system/src/components/landingPage/quickLinksList.tsx
new file mode 100644
index 000000000..599643c21
--- /dev/null
+++ b/packages/design-system/src/components/landingPage/quickLinksList.tsx
@@ -0,0 +1,94 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies.
+ */
+import React, { useEffect, useState } from 'react';
+import { XMLParser } from 'fast-xml-parser';
+
+/**
+ * Internal dependencies.
+ */
+import BulletList from '../bulletList';
+import { QUICK_LINKS } from './constants';
+import { ChevronRight } from '../../icons';
+
+/**
+ * Internal dependencies.
+ */
+
+const QuickLinksList = () => {
+  const [news, setNews] = useState<BulletListItem[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const response = await fetch('https://privacysandbox.com/rss/');
+        const xmlResponse = await response.text();
+
+        const parser = new XMLParser();
+        const parsedFeed = parser.parse(xmlResponse);
+
+        const items = parsedFeed?.rss?.channel?.item;
+
+        if (items) {
+          const newsArray = items
+            .map((item: BulletListItem) => ({
+              title: item.title,
+              link: item.link,
+              date: item.pubDate ? new Date(item.pubDate).toISOString() : '',
+            })) // @ts-ignore
+            .sort((a, b) => b.date.localeCompare(a.date));
+
+          setNews(newsArray);
+        }
+      } catch (error) {
+        console.warn('Error fetching latest news', error);
+      }
+    })();
+  }, []);
+
+  return (
+    <div className="flex flex-col md:flex-row px-4 pt-6 pb-24 gap-10">
+      <div className="md:w-[35%] flex flex-col gap-4">
+        <BulletList rows={QUICK_LINKS} heading="Quick Links" />
+      </div>
+      <div className="md:w-[65%] flex flex-col gap-4">
+        <h2 className="text-xs font-bold uppercase text-darkest-gray dark:text-bright-gray">
+          Latest News
+        </h2>
+        <hr className="border-0 border-b border-hex-gray dark:border-quartz" />
+        <div className="space-y-4">
+          <BulletList rows={news} />
+
+          <div className="ml-6">
+            <a
+              href="https://privacysandbox.com/news/"
+              target="_blank"
+              rel="noreferrer"
+              className="leading-6 text-sm text-analytics dark:text-medium-persian-blue font-semibold px-3 border border-american-silver dark:border-quartz rounded inline-flex gap-2 items-center"
+            >
+              View More <ChevronRight />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default QuickLinksList;
diff --git a/packages/extension/src/utils/fetchTopicsTaxonomy.ts b/packages/extension/src/utils/fetchTopicsTaxonomy.ts
index 50372600a..af0288279 100644
--- a/packages/extension/src/utils/fetchTopicsTaxonomy.ts
+++ b/packages/extension/src/utils/fetchTopicsTaxonomy.ts
@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 /**
- * Internal dependencies.
+ * External dependencies.
  */
-import fetchLocalData from './fetchLocalData';
+
+import { fetchLocalData } from '@ps-analysis-tool/common';
 
 const fetchTopicsTaxonomy = async () => {
   const data = await fetchLocalData('data/topics-taxonomy-v1.json');
diff --git a/packages/extension/src/view/devtools/components/antiCovertTracking/antiCovertTracking.tsx b/packages/extension/src/view/devtools/components/antiCovertTracking/antiCovertTracking.tsx
index 9d0678dc7..6799cbea5 100644
--- a/packages/extension/src/view/devtools/components/antiCovertTracking/antiCovertTracking.tsx
+++ b/packages/extension/src/view/devtools/components/antiCovertTracking/antiCovertTracking.tsx
@@ -17,7 +17,7 @@
 /**
  * External Dependencies
  */
-import React, { useState } from 'react';
+import React from 'react';
 
 /**
  * Internal Dependencies
@@ -25,23 +25,12 @@ import React, { useState } from 'react';
 import { LandingPage } from '@ps-analysis-tool/design-system';
 
 const AntiCovertTracking = () => {
-  const [loading, setLoading] = useState(true);
-
   return (
-    <>
-      <LandingPage title="Tracking Protection" isLoading={loading}>
-        <div className="px-4 pt-6 pb-4 h-[78vh] w-full">
-          <iframe
-            src="https://privacysandbox.info/en/privacy-sandbox/prevent-covert-tracking"
-            height="100%"
-            onLoad={() => {
-              setLoading(false);
-            }}
-            className="w-full md:m-auto md:w-[70%]"
-          />
-        </div>
-      </LandingPage>
-    </>
+    <LandingPage
+      title="Tracking Protection"
+      iframeSrc="https://privacysandbox.info/en/privacy-sandbox/prevent-covert-tracking"
+      extraClasses="h-[78vh] w-full"
+    />
   );
 };
 
diff --git a/packages/extension/src/view/devtools/components/antiCovertTracking/bounceTracking/index.tsx b/packages/extension/src/view/devtools/components/antiCovertTracking/bounceTracking/index.tsx
index 45415697c..b8a0a9f14 100644
--- a/packages/extension/src/view/devtools/components/antiCovertTracking/bounceTracking/index.tsx
+++ b/packages/extension/src/view/devtools/components/antiCovertTracking/bounceTracking/index.tsx
@@ -16,27 +16,18 @@
 /**
  * External dependencies.
  */
-import React, { useState } from 'react';
-import { LandingPage } from '@ps-analysis-tool/design-system';
-
-/**
- * Internal dependencies.
- */
-import InfoCard from '../../../../design-system/components/infoCard';
-import { PSInfoKey } from '../../../../../utils/fetchPSInfo';
+import React from 'react';
+import { LandingPage, PSInfoKey } from '@ps-analysis-tool/design-system';
 
 const BounceTracking = () => {
-  const [pageTitle, setPageTitle] = useState('');
-
   return (
-    <LandingPage title={pageTitle} isLoading={!pageTitle}>
-      <div
-        className="px-4 max-w-2xl h-fit overflow-auto"
-        data-testid="bounce-tracking-content"
-      >
-        <InfoCard infoKey={PSInfoKey.BounceTracking} setTitle={setPageTitle} />
-      </div>
-    </LandingPage>
+    <div data-testid="bounce-tracking-content" className="h-full w-full">
+      <LandingPage
+        title="Bounce Tracking Mitigation"
+        psInfoKey={PSInfoKey.BounceTracking}
+        extraClasses="max-w-2xl h-fit"
+      />
+    </div>
   );
 };
 
diff --git a/packages/extension/src/view/devtools/components/antiCovertTracking/fingerprinting/index.tsx b/packages/extension/src/view/devtools/components/antiCovertTracking/fingerprinting/index.tsx
index 8387e9ff4..6124271b6 100644
--- a/packages/extension/src/view/devtools/components/antiCovertTracking/fingerprinting/index.tsx
+++ b/packages/extension/src/view/devtools/components/antiCovertTracking/fingerprinting/index.tsx
@@ -16,30 +16,18 @@
 /**
  * External dependencies.
  */
-import React, { useState } from 'react';
-import { LandingPage } from '@ps-analysis-tool/design-system';
-
-/**
- * Internal dependencies.
- */
-import InfoCard from '../../../../design-system/components/infoCard';
-import { PSInfoKey } from '../../../../../utils/fetchPSInfo';
+import React from 'react';
+import { LandingPage, PSInfoKey } from '@ps-analysis-tool/design-system';
 
 const Fingerprinting = () => {
-  const [pageTitle, setPageTitle] = useState('');
-
   return (
-    <LandingPage title={pageTitle} isLoading={!pageTitle}>
-      <div
-        className="px-4 max-w-2xl h-fit overflow-auto"
-        data-testid="fingerprinting-content"
-      >
-        <InfoCard
-          infoKey={PSInfoKey.UserAgentReduction}
-          setTitle={setPageTitle}
-        />
-      </div>
-    </LandingPage>
+    <div data-testid="fingerprinting-content" className="h-full w-full">
+      <LandingPage
+        title="User Agent Reduction"
+        psInfoKey={PSInfoKey.UserAgentReduction}
+        extraClasses="max-w-2xl h-fit"
+      />
+    </div>
   );
 };
 
diff --git a/packages/extension/src/view/devtools/components/privacySandbox/index.tsx b/packages/extension/src/view/devtools/components/privacySandbox/index.tsx
index e2129a9e3..da7ae40a0 100644
--- a/packages/extension/src/view/devtools/components/privacySandbox/index.tsx
+++ b/packages/extension/src/view/devtools/components/privacySandbox/index.tsx
@@ -16,29 +16,18 @@
 /**
  * External dependencies.
  */
-import React, { useState } from 'react';
+import React from 'react';
 import { LandingPage } from '@ps-analysis-tool/design-system';
 
-const PrivacySandbox = () => {
-  const [loading, setLoading] = useState(true);
-
-  return (
-    <>
-      <LandingPage title="Privacy Sandbox" isLoading={loading}>
-        <div className="px-4 pt-6 pb-4 h-[78vh] w-full">
-          <iframe
-            src="https://privacysandbox.com"
-            data-testid="privacy-sandbox-content"
-            height="100%"
-            onLoad={() => {
-              setLoading(false);
-            }}
-            className="w-full md:w-[70%] md:m-auto border rounded-xl border-hex-gray dark:border-quartz"
-          />
-        </div>
-      </LandingPage>
-    </>
-  );
-};
+const PrivacySandbox = () => (
+  <div data-testid="privacy-sandbox-content" className="h-full w-full">
+    <LandingPage
+      title="Privacy Sandbox"
+      extraClasses="h-[78vh] w-full"
+      iframeSrc="https://privacysandbox.com"
+      iframeBorderClass="border border-hex-gray dark:border-quartz"
+    />
+  </div>
+);
 
 export default PrivacySandbox;
diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/attribution/index.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/attribution/index.tsx
index 410400dfc..0f5aa5b4b 100644
--- a/packages/extension/src/view/devtools/components/privateAdvertising/attribution/index.tsx
+++ b/packages/extension/src/view/devtools/components/privateAdvertising/attribution/index.tsx
@@ -16,30 +16,18 @@
 /**
  * External dependencies.
  */
-import React, { useState } from 'react';
-
-/**
- * Internal dependencies.
- */
-import InfoCard from '../../../../design-system/components/infoCard';
-import { PSInfoKey } from '../../../../../utils/fetchPSInfo';
-import { LandingPage } from '@ps-analysis-tool/design-system';
+import React from 'react';
+import { LandingPage, PSInfoKey } from '@ps-analysis-tool/design-system';
 
 const Attribution = () => {
-  const [pageTitle, setPageTitle] = useState('');
-
   return (
-    <LandingPage title={pageTitle} isLoading={!pageTitle}>
-      <div
-        className="px-4 max-w-2xl h-fit overflow-auto"
-        data-testid="attribution-content"
-      >
-        <InfoCard
-          infoKey={PSInfoKey.AttributionReporting}
-          setTitle={setPageTitle}
-        />
-      </div>
-    </LandingPage>
+    <div data-testid="attribution-content" className="h-full w-full">
+      <LandingPage
+        title="Attribution Reporting"
+        psInfoKey={PSInfoKey.AttributionReporting}
+        extraClasses="max-w-2xl h-fit"
+      />
+    </div>
   );
 };
 
diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/privateAdvertising.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/privateAdvertising.tsx
index 904ab2c1b..1acf38e09 100644
--- a/packages/extension/src/view/devtools/components/privateAdvertising/privateAdvertising.tsx
+++ b/packages/extension/src/view/devtools/components/privateAdvertising/privateAdvertising.tsx
@@ -17,7 +17,7 @@
 /**
  * External Dependencies
  */
-import React, { useState } from 'react';
+import React from 'react';
 
 /**
  * Internal Dependencies
@@ -25,23 +25,12 @@ import React, { useState } from 'react';
 import { LandingPage } from '@ps-analysis-tool/design-system';
 
 const PrivateAdvertising = () => {
-  const [loading, setLoading] = useState(true);
-
   return (
-    <>
-      <LandingPage title="Private Advertising" isLoading={loading}>
-        <div className="px-4 pt-6 pb-4 h-[78vh] w-full">
-          <iframe
-            src="https://privacysandbox.info/en/privacy-sandbox/measure-digital-ads"
-            height="100%"
-            onLoad={() => {
-              setLoading(false);
-            }}
-            className="w-full md:m-auto md:w-[70%] bg-red-500"
-          />
-        </div>
-      </LandingPage>
-    </>
+    <LandingPage
+      title="Private Advertising"
+      iframeSrc="https://privacysandbox.info/en/privacy-sandbox/measure-digital-ads"
+      extraClasses="h-[78vh] w-full"
+    />
   );
 };
 
diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/topics/index.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/topics/index.tsx
index d1813a167..9ae3470bb 100644
--- a/packages/extension/src/view/devtools/components/privateAdvertising/topics/index.tsx
+++ b/packages/extension/src/view/devtools/components/privateAdvertising/topics/index.tsx
@@ -16,29 +16,25 @@
 /**
  * External dependencies.
  */
-import React, { useState } from 'react';
-import { LandingPage } from '@ps-analysis-tool/design-system';
+import React from 'react';
+import { LandingPage, PSInfoKey } from '@ps-analysis-tool/design-system';
 
 /**
  * Internal dependencies.
  */
-import InfoCard from '../../../../design-system/components/infoCard';
-import { PSInfoKey } from '../../../../../utils/fetchPSInfo';
 import TopicsList from './topicsList';
 
 const Topics = () => {
-  const [pageTitle, setPageTitle] = useState('');
-
   return (
-    <LandingPage title={pageTitle} isLoading={!pageTitle}>
-      <div
-        className="px-4 max-w-2xl h-fit overflow-auto"
-        data-testid="topics-content"
+    <div data-testid="topics-content" className="h-full w-full">
+      <LandingPage
+        title="Topics"
+        psInfoKey={PSInfoKey.Topics}
+        extraClasses="max-w-2xl h-fit"
       >
-        <InfoCard infoKey={PSInfoKey.Topics} setTitle={setPageTitle} />
-      </div>
-      <TopicsList />
-    </LandingPage>
+        <TopicsList />
+      </LandingPage>
+    </div>
   );
 };
 
diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/topics/topicsList.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/topics/topicsList.tsx
index c697fccda..956b78f69 100644
--- a/packages/extension/src/view/devtools/components/privateAdvertising/topics/topicsList.tsx
+++ b/packages/extension/src/view/devtools/components/privateAdvertising/topics/topicsList.tsx
@@ -40,23 +40,21 @@ const TopicsList = () => {
   }, []);
 
   return (
-    <div className="max-w-2xl m-3 border-t border-american-silver dark:border-quartz">
-      <div className="p-6 pl-0">
-        <h5 className="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-bright-gray">
-          Topics List
-        </h5>
-        {topics.length > 0 ? (
-          <ul className="ml-3 list-disc text-gray-700 dark:text-bright-gray">
-            {topics.map((topic: string) => (
-              <li key={topic}>{topic}</li>
-            ))}
-          </ul>
-        ) : (
-          <p className="text-gray-700 dark:text-bright-gray">
-            No topics found on this page.
-          </p>
-        )}
-      </div>
+    <div>
+      <h5 className="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-bright-gray">
+        Topics List
+      </h5>
+      {topics.length > 0 ? (
+        <ul className="ml-3 list-disc text-gray-700 dark:text-bright-gray">
+          {topics.map((topic: string) => (
+            <li key={topic}>{topic}</li>
+          ))}
+        </ul>
+      ) : (
+        <p className="text-gray-700 dark:text-bright-gray">
+          No topics found on this page.
+        </p>
+      )}
     </div>
   );
 };
diff --git a/packages/extension/src/view/devtools/components/siteBoundaries/chips/index.tsx b/packages/extension/src/view/devtools/components/siteBoundaries/chips/index.tsx
index 755e85812..ffb7f3b49 100644
--- a/packages/extension/src/view/devtools/components/siteBoundaries/chips/index.tsx
+++ b/packages/extension/src/view/devtools/components/siteBoundaries/chips/index.tsx
@@ -16,27 +16,18 @@
 /**
  * External dependencies.
  */
-import React, { useState } from 'react';
-
-/**
- * Internal dependencies.
- */
-import InfoCard from '../../../../design-system/components/infoCard';
-import { PSInfoKey } from '../../../../../utils/fetchPSInfo';
-import { LandingPage } from '@ps-analysis-tool/design-system';
+import React from 'react';
+import { LandingPage, PSInfoKey } from '@ps-analysis-tool/design-system';
 
 const Chips = () => {
-  const [pageTitle, setPageTitle] = useState('');
-
   return (
-    <LandingPage title={pageTitle} isLoading={!pageTitle}>
-      <div
-        className="px-4 max-w-2xl h-fit overflow-auto"
-        data-testid="chips-content"
-      >
-        <InfoCard infoKey={PSInfoKey.Chips} setTitle={setPageTitle} />
-      </div>
-    </LandingPage>
+    <div data-testid="chips-content" className="h-full w-full">
+      <LandingPage
+        title={'Cookies Having Independent Partitioned State (CHIPS)'}
+        psInfoKey={PSInfoKey.Chips}
+        extraClasses="max-w-2xl h-fit"
+      />
+    </div>
   );
 };
 
diff --git a/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/index.tsx b/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/index.tsx
index 7572c1ecf..2e10c10fc 100644
--- a/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/index.tsx
+++ b/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/index.tsx
@@ -16,34 +16,27 @@
 /**
  * External dependencies.
  */
-import React, { useState } from 'react';
-import { LandingPage } from '@ps-analysis-tool/design-system';
+import React from 'react';
+import { LandingPage, PSInfoKey } from '@ps-analysis-tool/design-system';
 
 /**
  * Internal dependencies.
  */
-import InfoCard from '../../../../design-system/components/infoCard';
-import { PSInfoKey } from '../../../../../utils/fetchPSInfo';
 import RWSJsonGenerator from './jsonGenerator';
 import Insights from './insights';
 
 const RelatedWebsiteSets = () => {
-  const [pageTitle, setPageTitle] = useState('');
-
   return (
-    <LandingPage title={pageTitle} isLoading={!pageTitle}>
-      <div
-        className="max-w-2xl h-fit px-4 overflow-auto divide-y divide-american-silver dark:divide-quartz"
-        data-testid="related-website-sets-content"
+    <div data-testid="related-website-sets-content" className="h-full w-full">
+      <LandingPage
+        title="Related Website Sets"
+        psInfoKey={PSInfoKey.RelatedWebsiteSets}
+        extraClasses="max-w-2xl h-fit"
       >
-        <InfoCard
-          infoKey={PSInfoKey.RelatedWebsiteSets}
-          setTitle={setPageTitle}
-        />
         <Insights />
         <RWSJsonGenerator />
-      </div>
-    </LandingPage>
+      </LandingPage>
+    </div>
   );
 };
 
diff --git a/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/insights/index.tsx b/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/insights/index.tsx
index fa08aa7ee..64ecd82ce 100644
--- a/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/insights/index.tsx
+++ b/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/insights/index.tsx
@@ -79,7 +79,7 @@ const Insights = () => {
   );
 
   return (
-    <div className="py-6 text-raisin-black dark:text-bright-gray">
+    <div className="text-raisin-black dark:text-bright-gray">
       {loading ? (
         <div className="flex gap-2 items-center justify-start">
           <p className="text-sm">Loading...</p>
diff --git a/packages/extension/src/view/devtools/components/siteBoundaries/siteBoundaries.tsx b/packages/extension/src/view/devtools/components/siteBoundaries/siteBoundaries.tsx
index bd9d0f603..7fa521915 100644
--- a/packages/extension/src/view/devtools/components/siteBoundaries/siteBoundaries.tsx
+++ b/packages/extension/src/view/devtools/components/siteBoundaries/siteBoundaries.tsx
@@ -16,27 +16,16 @@
 /**
  * External Dependencies
  */
-import React, { useState } from 'react';
+import React from 'react';
 import { LandingPage } from '@ps-analysis-tool/design-system';
 
 const SiteBoundaries = () => {
-  const [loading, setLoading] = useState(true);
-
   return (
-    <>
-      <LandingPage title="Site Boundaries" isLoading={loading}>
-        <div className="px-4 pt-6 pb-4 h-[78vh] w-full">
-          <iframe
-            src="https://privacysandbox.info/en/privacy-sandbox/strengthen-privacy-boundaries"
-            height="100%"
-            onLoad={() => {
-              setLoading(false);
-            }}
-            className="w-full md:m-auto md:w-[70%]"
-          />
-        </div>
-      </LandingPage>
-    </>
+    <LandingPage
+      title="Site Boundaries"
+      iframeSrc="https://privacysandbox.info/en/privacy-sandbox/strengthen-privacy-boundaries"
+      extraClasses="h-[78vh] w-full"
+    />
   );
 };