diff --git a/cspell-dictionaries/project.txt b/cspell-dictionaries/project.txt
index 9f1343d..720381b 100644
--- a/cspell-dictionaries/project.txt
+++ b/cspell-dictionaries/project.txt
@@ -1,3 +1,4 @@
+Descriptionless
 Pipeable
+plex
 Stephane
-Descriptionless
diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
index ce61522..62049b3 100644
--- a/src/components/footer/Footer.jsx
+++ b/src/components/footer/Footer.jsx
@@ -5,15 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { AspectRatio, Column } from '@carbon/react';
+import { AspectRatio, Column, Grid } from '@carbon/react';
 
 export const Footer = () => {
   return (
-    <Column as="footer" sm={4} md={8} lg={8} className="cs--footer">
-      <AspectRatio ratio="16x9">
-        <p>Footer</p>
-        <p>Copyright IBM 2025</p>
-      </AspectRatio>
-    </Column>
+    <Grid as="footer" className="cs--footer">
+      <Column sm={4} md={8} lg={8}>
+        <AspectRatio ratio="16x9">
+          <p>Footer</p>
+          <p>Copyright IBM 2025</p>
+        </AspectRatio>
+      </Column>
+    </Grid>
   );
 };
diff --git a/src/pages/dashboard/Dashboard.jsx b/src/pages/dashboard/Dashboard.jsx
index 2c00aba..6aa56ea 100644
--- a/src/pages/dashboard/Dashboard.jsx
+++ b/src/pages/dashboard/Dashboard.jsx
@@ -5,42 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Column, Grid, Link, Tile, Stack } from '@carbon/react';
-import { useState } from 'react';
-import { useParams, useSearchParams } from 'react-router';
-
 import { Footer } from '../../components/footer/Footer';
 import { PageLayout } from '../../layouts/page-layout';
 import { PageHeader } from '@carbon/ibm-products';
+import DashboardURLParameters from './DashboardURLParameters';
+import DashboardNumberTiles from './DashboardNumberTiles';
+import DashboardVisualizations from './DashboardVisualizations';
 
 // The styles are imported into index.scss by default.
 // Do the same unless you have a good reason not to.
 
-const NumberTile = () => {
-  const [activeUsers] = useState(() => Math.round(Math.random() * 1000));
-
-  return (
-    <Column sm={4} md={4} lg={4} xlg={4}>
-      <Tile className="cs--dashboard__tile cs--dashboard__tile--number">
-        <dl>
-          <dt>Active users</dt>
-          <dd>{activeUsers}</dd>
-        </dl>
-      </Tile>
-    </Column>
-  );
-};
-
 const Dashboard = () => {
-  // Access path parameters (e.g., /dashboard/1234 -> id = "1234")
-  const params = useParams();
-  const { id } = params;
-
-  // Access query parameters (e.g., /dashboard/1234?q=xxx&name=John -> q = "xxx", name = "John")
-  const [searchParams] = useSearchParams();
-  const queryParam = searchParams.get('q');
-  const nameParam = searchParams.get('name');
-
   return (
     <PageLayout
       className="cs--dashboard"
@@ -49,64 +24,14 @@ const Dashboard = () => {
       <PageLayout.Header>
         <PageHeader title="Dashboard" />
       </PageLayout.Header>
-      <Grid>
-        {/* Example: Display URL parameters when present */}
-        <Column sm={4} md={8} lg={16}>
-          <Tile className="cs--dashboard__tile">
-            <Stack gap={5}>
-              <strong>URL parameters example</strong>
-              {nameParam && (
-                <h2 style={{ margin: 0 }}>Hello {nameParam}! 👋</h2>
-              )}
-              <p>
-                This demonstrates how to access both path parameters and query
-                parameters from the URL. <br />
-                Try accessing:{' '}
-                <Link href="/dashboard/1234?q=xyz&name=Anne">
-                  /dashboard/1234?q=xyz&name=Anne
-                </Link>
-              </p>
-              <dl>
-                {id && (
-                  <>
-                    <dt>Path parameter detected (id):</dt>
-                    <dd>{id}</dd>
-                  </>
-                )}
-                {queryParam && (
-                  <>
-                    <dt>Query parameter detected (q):</dt>
-                    <dd>{queryParam}</dd>
-                  </>
-                )}
-                {nameParam && (
-                  <>
-                    <dt>Query parameter detected (name):</dt>
-                    <dd>{nameParam}</dd>
-                  </>
-                )}
-              </dl>
-            </Stack>
-          </Tile>
-        </Column>
 
-        <NumberTile />
-        <NumberTile />
-        <NumberTile />
-        <NumberTile />
+      <DashboardURLParameters />
+
+      <DashboardNumberTiles />
+
+      <DashboardVisualizations />
 
-        <Column sm={4} md={4} lg={8} xlg={8}>
-          <Tile className="cs--dashboard__tile cs--dashboard__tile--data">
-            <strong>Visualization</strong>
-          </Tile>
-        </Column>
-        <Column sm={4} md={4} lg={8} xlg={8}>
-          <Tile className="cs--dashboard__tile cs--dashboard__tile--data">
-            <strong>Cool table</strong>
-          </Tile>
-        </Column>
-        <Footer />
-      </Grid>
+      <Footer />
     </PageLayout>
   );
 };
diff --git a/src/pages/dashboard/DashboardNumberTiles.jsx b/src/pages/dashboard/DashboardNumberTiles.jsx
new file mode 100644
index 0000000..14496e1
--- /dev/null
+++ b/src/pages/dashboard/DashboardNumberTiles.jsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Column, Grid, Tile } from '@carbon/react';
+import { useState } from 'react';
+
+const NumberTile = () => {
+  const [activeUsers] = useState(() => Math.round(Math.random() * 1000));
+
+  return (
+    <Column sm={4} md={4} lg={4} xlg={4}>
+      <Tile className="cs--dashboard__tile cs--dashboard__tile--number">
+        <dl>
+          <dt>Active users</dt>
+          <dd>{activeUsers}</dd>
+        </dl>
+      </Tile>
+    </Column>
+  );
+};
+
+const DashboardNumberTiles = () => {
+  return (
+    <Grid>
+      <NumberTile />
+      <NumberTile />
+      <NumberTile />
+      <NumberTile />
+    </Grid>
+  );
+};
+
+export default DashboardNumberTiles;
+
+// Made with Bob
diff --git a/src/pages/dashboard/DashboardURLParameters.jsx b/src/pages/dashboard/DashboardURLParameters.jsx
new file mode 100644
index 0000000..f129246
--- /dev/null
+++ b/src/pages/dashboard/DashboardURLParameters.jsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Column, Link, Tile, Stack, Grid } from '@carbon/react';
+import { useParams, useSearchParams } from 'react-router';
+
+const DashboardURLParameters = () => {
+  // Access path parameters (e.g., /dashboard/1234 -> id = "1234")
+  const params = useParams();
+  const { id } = params;
+
+  // Access query parameters (e.g., /dashboard/1234?q=xxx&name=John -> q = "xxx", name = "John")
+  const [searchParams] = useSearchParams();
+  const queryParam = searchParams.get('q');
+  const nameParam = searchParams.get('name');
+
+  return (
+    <Grid>
+      <Column sm={4} md={8} lg={16}>
+        <Tile className="cs--dashboard__tile">
+          <Stack gap={5}>
+            <strong>URL parameters example</strong>
+            {nameParam && <h2 style={{ margin: 0 }}>Hello {nameParam}! 👋</h2>}
+            <p>
+              This demonstrates how to access both path parameters and query
+              parameters from the URL. <br />
+              Try accessing:{' '}
+              <Link href="/dashboard/1234?q=xyz&name=Anne">
+                /dashboard/1234?q=xyz&name=Anne
+              </Link>
+            </p>
+            <dl>
+              {id && (
+                <>
+                  <dt>Path parameter detected (id):</dt>
+                  <dd>{id}</dd>
+                </>
+              )}
+              {queryParam && (
+                <>
+                  <dt>Query parameter detected (q):</dt>
+                  <dd>{queryParam}</dd>
+                </>
+              )}
+              {nameParam && (
+                <>
+                  <dt>Query parameter detected (name):</dt>
+                  <dd>{nameParam}</dd>
+                </>
+              )}
+            </dl>
+          </Stack>
+        </Tile>
+      </Column>
+    </Grid>
+  );
+};
+
+export default DashboardURLParameters;
+
+// Made with Bob
diff --git a/src/pages/dashboard/DashboardVisualisations.jsx b/src/pages/dashboard/DashboardVisualisations.jsx
new file mode 100644
index 0000000..98ef779
--- /dev/null
+++ b/src/pages/dashboard/DashboardVisualisations.jsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Column, Grid, Tile } from '@carbon/react';
+
+const DashboardVisualizations = () => {
+  return (
+    <Grid>
+      <Column sm={4} md={4} lg={8} xlg={8}>
+        <Tile className="cs--dashboard__tile cs--dashboard__tile--data">
+          <strong>Visualization</strong>
+        </Tile>
+      </Column>
+      <Column sm={4} md={4} lg={8} xlg={8}>
+        <Tile className="cs--dashboard__tile cs--dashboard__tile--data">
+          <strong>Cool table</strong>
+        </Tile>
+      </Column>
+    </Grid>
+  );
+};
+
+export default DashboardVisualizations;
+
+// Made with Bob
diff --git a/src/pages/dashboard/DashboardVisualizations.jsx b/src/pages/dashboard/DashboardVisualizations.jsx
new file mode 100644
index 0000000..a040767
--- /dev/null
+++ b/src/pages/dashboard/DashboardVisualizations.jsx
@@ -0,0 +1,31 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Column, Grid, Tile } from '@carbon/react';
+
+const DataVisualization = ({ title }) => {
+  return (
+    <Column sm={4} md={4} lg={8} xlg={8}>
+      <Tile className="cs--dashboard__tile cs--dashboard__tile--data">
+        <strong>{title}</strong>
+      </Tile>
+    </Column>
+  );
+};
+
+const DashboardVisualizations = () => {
+  return (
+    <Grid>
+      <DataVisualization title="Visualization" />
+      <DataVisualization title="Cool table" />
+    </Grid>
+  );
+};
+
+export default DashboardVisualizations;
+
+// Made with Bob
diff --git a/src/pages/welcome/Welcome.jsx b/src/pages/welcome/Welcome.jsx
index 7b6d34e..06e592f 100644
--- a/src/pages/welcome/Welcome.jsx
+++ b/src/pages/welcome/Welcome.jsx
@@ -5,23 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {
-  CodeSnippet,
-  Column,
-  Grid,
-  Heading,
-  Tile,
-  UnorderedList,
-  ListItem,
-  Section,
-  Stack,
-} from '@carbon/react';
-import { Suspense } from 'react';
-
 import { Footer } from '../../components/footer/Footer';
 import { WelcomeHeader } from './WelcomeHeader.jsx';
 import { PageLayout } from '../../layouts/page-layout.jsx';
-import PostComponent from './post/PostComponent.jsx';
+import { WelcomeRunSection } from './WelcomeRunSection';
+import { WelcomeAboutSection } from './WelcomeAboutSection';
+import { WelcomeFeaturesSection } from './WelcomeFeaturesSection';
+import { WelcomeFetchingSection } from './WelcomeFetchingSection';
 
 // The styles are imported into index.scss by default.
 // Do the same unless you have a good reason not to.
@@ -35,152 +25,19 @@ const Welcome = () => {
     >
       <WelcomeHeader />
 
-      <Section as={Grid}>
-        <Column sm={4} md={4} lg={8} xlg={4}>
-          <Heading className="cs--welcome__heading">↳ Run the template</Heading>
-        </Column>
-        <Column sm={4} md={8} lg={8} xlg={8}>
-          <p>This code requires node v.20</p>
-          <CodeSnippet type="single" feedback="Copied to clipboard">
-            npm i
-          </CodeSnippet>
-          <CodeSnippet type="single" feedback="Copied to clipboard">
-            npm run dev
-          </CodeSnippet>
-        </Column>
+      <WelcomeRunSection />
+
+      <WelcomeAboutSection />
+
+      <WelcomeFeaturesSection />
 
-        <Column className="cs--welcome__about" sm={4} md={8} lg={16}>
-          <Grid>
-            <Column sm={4} md={4} lg={8} xlg={4}>
-              <Heading className="cs--welcome__heading">
-                ↳ What is this about?
-              </Heading>
-            </Column>
-            {/* While the carbon documentation states that most containers should be
-                  sized through the aspect ratios defined in the design language,
-                  the practice shows a fixed height often works better. Choose a
-                  height that is a multiple of one of the spacing tokens to keep the
-                  vertical rhythm */}
-            <Column sm={4} md={4} lg={8} xlg={4}>
-              <Tile className="cs--welcome__tile cs--welcome__tile--highlight">
-                <strong>Purpose</strong>
-                <br />
-                <br />
-                This repository provides a simple example to help you get
-                started with the Carbon Design System and React.
-                <br />
-                <br />
-                It is designed to save time by offering a pre-configured
-                foundation for your projects.
-              </Tile>
-            </Column>
-            <Column sm={4} md={4} lg={8} xlg={4}>
-              <Tile className="cs--welcome__tile cs--welcome__tile--highlight">
-                <strong>Stay consistent</strong>
-                <br />
-                <br />
-                Use this as a reference to ensure your project aligns with
-                IBM&apos;s design standards.
-                <br />
-                <br />
-                It is flexible enough to adapt to your needs while promoting a
-                consistent user experience.
-              </Tile>
-            </Column>
-            <Column sm={4} md={4} lg={8} xlg={4}>
-              <Tile className="cs--welcome__tile cs--welcome__tile--highlight">
-                <strong>Customize as needed</strong>
-                <br />
-                <br />
-                This is meant to be a starting point and a living guide, not a
-                fixed framework.
-                <br />
-                <br />
-                You can modify the repository to fit your project requirements
-                or use it as inspiration for your own approach.
-              </Tile>
-            </Column>
-          </Grid>
-        </Column>
-        <Column className="cs--welcome__features" sm={4} md={8} lg={16}>
-          <Grid>
-            <Column sm={2} md={4} lg={4}>
-              <Heading className="cs--welcome__heading">↳ Features</Heading>
-            </Column>
-            <Column className="cs--welcome__tile" sm={2} md={4} lg={4}>
-              <Tile title="Flexibility">
-                <strong>React 19</strong>
-              </Tile>
-            </Column>
-            <Column className="cs--welcome__tile" sm={2} md={4} lg={4}>
-              <Tile title="Feature 2">
-                <strong>Carbon Design v11</strong>
-              </Tile>
-            </Column>
-            <Column className="cs--welcome__tile" sm={2} md={4} lg={4}>
-              <Tile title="Feature 3">
-                <strong>Vite 6.0</strong>
-              </Tile>
-            </Column>
-          </Grid>
-        </Column>
-        <Column
-          className="cs--welcome__fetching"
-          lg={{ span: 16 }}
-          md={{ span: 8 }}
-          sm={4}
-        >
-          <Grid>
-            <Column sm={2} md={4} lg={4}>
-              <Heading className="cs--welcome__heading">
-                ↳ An example of data fetching
-              </Heading>
-            </Column>
-            <Column
-              sm={2}
-              md={4}
-              lg={12}
-              className="cs--welcome__dynamic-message"
-            >
-              <Stack gap={3}>
-                <p>
-                  Below is a dynamically fetched message from an external API
-                  endpoint. This showcases how to perform data fetching while
-                  keeping components clean and separating network logic. Here is
-                  how it works:
-                </p>
-                <UnorderedList>
-                  <ListItem>
-                    <strong>UI layer</strong> - PostComponent.jsx manages React
-                    state and renders the data using Carbon Design components
-                  </ListItem>
-                  <ListItem>
-                    <strong>API layer</strong> - Client-side functions in{' '}
-                    <code>api/message.js</code> handle HTTP requests to our
-                    Express backend
-                  </ListItem>
-                  <ListItem>
-                    <strong>Service layer</strong> - Server-side handlers in{' '}
-                    <code>service/postHandlers.js</code> proxy requests to
-                    external APIs.
-                  </ListItem>
-                </UnorderedList>
-                <p>
-                  This pattern keeps your components focused on presentation
-                  while centralizing data fetching logic for reusability and
-                  testability.
-                </p>
-              </Stack>
-              <Suspense>
-                <PostComponent postId={1} />
-              </Suspense>
-            </Column>
-          </Grid>
-        </Column>
-        <Footer />
-      </Section>
+      <WelcomeFetchingSection />
+
+      <Footer />
     </PageLayout>
   );
 };
 
 export default Welcome;
+
+// Made with Bob
diff --git a/src/pages/welcome/WelcomeAboutSection.jsx b/src/pages/welcome/WelcomeAboutSection.jsx
new file mode 100644
index 0000000..3a638fd
--- /dev/null
+++ b/src/pages/welcome/WelcomeAboutSection.jsx
@@ -0,0 +1,68 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { WelcomeCallout } from './WelcomeCallout';
+import { WelcomeHighlightTile } from './WelcomeHighlightTile';
+
+const aboutItems = [
+  {
+    title: 'Purpose',
+    content: (
+      <>
+        This repository provides a simple example to help you get started with
+        the Carbon Design System and React.
+        <br />
+        <br />
+        It is designed to save time by offering a pre-configured foundation for
+        your projects.
+      </>
+    ),
+  },
+  {
+    title: 'Stay consistent',
+    content: (
+      <>
+        Use this as a reference to ensure your project aligns with IBM's design
+        standards.
+        <br />
+        <br />
+        It is flexible enough to adapt to your needs while promoting a
+        consistent user experience.
+      </>
+    ),
+  },
+  {
+    title: 'Customize as needed',
+    content: (
+      <>
+        This is meant to be a starting point and a living guide, not a fixed
+        framework.
+        <br />
+        <br />
+        You can modify the repository to fit your project requirements or use it
+        as inspiration for your own approach.
+      </>
+    ),
+  },
+];
+
+export const WelcomeAboutSection = () => {
+  return (
+    <WelcomeCallout
+      className="cs--welcome__about"
+      heading="What is this about?"
+    >
+      {aboutItems.map((item) => (
+        <WelcomeHighlightTile key={item.title} title={item.title}>
+          {item.content}
+        </WelcomeHighlightTile>
+      ))}
+    </WelcomeCallout>
+  );
+};
+
+// Made with Bob
diff --git a/src/pages/welcome/WelcomeCallout.jsx b/src/pages/welcome/WelcomeCallout.jsx
new file mode 100644
index 0000000..993fab5
--- /dev/null
+++ b/src/pages/welcome/WelcomeCallout.jsx
@@ -0,0 +1,22 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Column, Grid, Heading, Section } from '@carbon/react';
+import classNames from 'classnames';
+
+export const WelcomeCallout = ({ children, className, heading }) => {
+  return (
+    <Section as={Grid} className={classNames('cs--welcome__run', className)}>
+      <Column sm={4} md={4} lg={8} xlg={4}>
+        <Heading className="cs--welcome__heading">↳ {heading}</Heading>
+      </Column>
+      {children}
+    </Section>
+  );
+};
+
+// Made with Bob
diff --git a/src/pages/welcome/WelcomeCommandSnippet.jsx b/src/pages/welcome/WelcomeCommandSnippet.jsx
new file mode 100644
index 0000000..3c14652
--- /dev/null
+++ b/src/pages/welcome/WelcomeCommandSnippet.jsx
@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { CodeSnippet } from '@carbon/react';
+
+export const WelcomeCommandSnippet = ({ command }) => {
+  return (
+    <CodeSnippet type="single" feedback="Copied to clipboard">
+      {command}
+    </CodeSnippet>
+  );
+};
+
+// Made with Bob
diff --git a/src/pages/welcome/WelcomeFeatureTile.jsx b/src/pages/welcome/WelcomeFeatureTile.jsx
new file mode 100644
index 0000000..fb07935
--- /dev/null
+++ b/src/pages/welcome/WelcomeFeatureTile.jsx
@@ -0,0 +1,20 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Column, Tile } from '@carbon/react';
+
+export const WelcomeFeatureTile = ({ title, feature }) => {
+  return (
+    <Column className="cs--welcome__tile" sm={2} md={4} lg={4}>
+      <Tile title={title}>
+        <strong>{feature}</strong>
+      </Tile>
+    </Column>
+  );
+};
+
+// Made with Bob
diff --git a/src/pages/welcome/WelcomeFeaturesSection.jsx b/src/pages/welcome/WelcomeFeaturesSection.jsx
new file mode 100644
index 0000000..24e0cd0
--- /dev/null
+++ b/src/pages/welcome/WelcomeFeaturesSection.jsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { WelcomeCallout } from './WelcomeCallout';
+import { WelcomeFeatureTile } from './WelcomeFeatureTile';
+
+const features = [
+  { title: 'Flexibility', feature: 'React 19' },
+  { title: 'Feature 2', feature: 'Carbon Design v11' },
+  { title: 'Feature 3', feature: 'Vite 6.0' },
+];
+
+export const WelcomeFeaturesSection = () => {
+  return (
+    <WelcomeCallout className="cs--welcome__features" heading="Features">
+      {features.map((item) => (
+        <WelcomeFeatureTile key={item.feature} {...item} />
+      ))}
+    </WelcomeCallout>
+  );
+};
+
+// Made with Bob
diff --git a/src/pages/welcome/WelcomeFetchingSection.jsx b/src/pages/welcome/WelcomeFetchingSection.jsx
new file mode 100644
index 0000000..1277bff
--- /dev/null
+++ b/src/pages/welcome/WelcomeFetchingSection.jsx
@@ -0,0 +1,55 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Column, Stack, UnorderedList, ListItem } from '@carbon/react';
+import { Suspense } from 'react';
+import { WelcomeCallout } from './WelcomeCallout';
+import PostComponent from './post/PostComponent';
+
+export const WelcomeFetchingSection = () => {
+  return (
+    <WelcomeCallout
+      className="cs--welcome__fetching"
+      heading="An example of data fetching"
+    >
+      <Column sm={2} md={4} lg={12} className="cs--welcome__dynamic-message">
+        <Stack gap={3}>
+          <p>
+            Below is a dynamically fetched message from an external API
+            endpoint. This showcases how to perform data fetching while keeping
+            components clean and separating network logic. Here is how it works:
+          </p>
+          <UnorderedList>
+            <ListItem>
+              <strong>UI layer</strong> - PostComponent.jsx manages React state
+              and renders the data using Carbon Design components
+            </ListItem>
+            <ListItem>
+              <strong>API layer</strong> - Client-side functions in{' '}
+              <code>api/message.js</code> handle HTTP requests to our Express
+              backend
+            </ListItem>
+            <ListItem>
+              <strong>Service layer</strong> - Server-side handlers in{' '}
+              <code>service/postHandlers.js</code> proxy requests to external
+              APIs.
+            </ListItem>
+          </UnorderedList>
+          <p>
+            This pattern keeps your components focused on presentation while
+            centralizing data fetching logic for reusability and testability.
+          </p>
+        </Stack>
+        <Suspense>
+          <PostComponent postId={1} />
+        </Suspense>
+      </Column>
+    </WelcomeCallout>
+  );
+};
+
+// Made with Bob
diff --git a/src/pages/welcome/WelcomeHighlightTile.jsx b/src/pages/welcome/WelcomeHighlightTile.jsx
new file mode 100644
index 0000000..96b972d
--- /dev/null
+++ b/src/pages/welcome/WelcomeHighlightTile.jsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Column, Tile } from '@carbon/react';
+
+export const WelcomeHighlightTile = ({ title, children }) => {
+  return (
+    <Column sm={4} md={4} lg={8} xlg={4}>
+      <Tile className="cs--welcome__tile cs--welcome__tile--highlight">
+        <strong>{title}</strong>
+        <br />
+        <br />
+        {children}
+      </Tile>
+    </Column>
+  );
+};
+
+// Made with Bob
diff --git a/src/pages/welcome/WelcomeRunSection.jsx b/src/pages/welcome/WelcomeRunSection.jsx
new file mode 100644
index 0000000..3b2a439
--- /dev/null
+++ b/src/pages/welcome/WelcomeRunSection.jsx
@@ -0,0 +1,24 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Column } from '@carbon/react';
+import { WelcomeCallout } from './WelcomeCallout';
+import { WelcomeCommandSnippet } from './WelcomeCommandSnippet';
+
+export const WelcomeRunSection = () => {
+  return (
+    <WelcomeCallout heading="Run the template">
+      <Column sm={4} md={8} lg={8} xlg={8}>
+        <p>This code requires node v.20</p>
+        <WelcomeCommandSnippet command="npm i" />
+        <WelcomeCommandSnippet command="npm run dev" />
+      </Column>
+    </WelcomeCallout>
+  );
+};
+
+// Made with Bob