diff --git a/.eleventy.js b/.eleventy.js
index c90b03b02..a148a5c8b 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -15,6 +15,7 @@ const markdownAnchor = require('./utils/anchor');
 const slugify = require('./utils/slugify');
 const { encode } = require('html-entities');
 
+const { downloadTemplates } = require('./scripts/templates');
 const { execSync } = require('child_process');
 
 module.exports = function (eleventyConfig) {
@@ -316,6 +317,11 @@ module.exports = function (eleventyConfig) {
     });
   });
 
+  // Pull templates from github into partials
+  eleventyConfig.on('eleventy.before', async () => {
+    await downloadTemplates();
+  });
+
   eleventyConfig.on('eleventy.after', () => {
     execSync(
       `npx pagefind --site _site --exclude-selectors "gcds-side-nav, gcds-top-nav, gcds-breadcrumbs, .github-link, .figma-link, h1 > code, .component-preview" --glob \"**/*.html\"`,
diff --git a/package.json b/package.json
index aa2b1e5d1..7ce8e41ca 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "@quasibit/eleventy-plugin-sitemap": "^2.1.4",
     "chroma-js": "^2.4.2",
     "eleventy-plugin-svg-contents": "^0.7.0",
+    "node-fetch": "^3.3.2",
     "pagefind": "^1.0.4",
     "prettier": "3.3.3",
     "prompt-sync": "^4.2.0",
diff --git a/scripts/templates.js b/scripts/templates.js
new file mode 100644
index 000000000..601b56f34
--- /dev/null
+++ b/scripts/templates.js
@@ -0,0 +1,62 @@
+const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));
+const fs = require('fs');
+const path = require('path');
+const pjson = require('../package.json');
+
+async function downloadFile(url, outputDir, outputFileName) {
+    try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch ${url}: ${response.statusText}`);
+        }
+        // Get initial file contents
+        const fileContent = await response.text();
+
+        // Add code formatting for code files
+        const codeContent = `{% highlight html %}\n${fileContent}\n{% endhighlight %}`;
+
+        // Replace version numbers in preview files
+        let previewContent = fileContent.replace(/gcds-utility\@<version-number>/g, "gcds-utility@" + pjson.devDependencies['@cdssnc/gcds-utility'].replace(/^\^/, ''));
+        previewContent = previewContent.replace(/gcds-components\@<version-number>/g, "gcds-components@" + pjson.devDependencies['@cdssnc/gcds-components'].replace(/^\^/, ''));
+
+        fs.mkdirSync(outputDir, {recursive: true});
+        const previewOutputPath = path.join(outputDir, outputFileName);
+        const codeOutputPath = path.join(outputDir, 'code-' + outputFileName);
+
+        fs.writeFileSync(previewOutputPath, previewContent, 'utf8');
+        fs.writeFileSync(codeOutputPath, codeContent, 'utf8');
+        console.log(`File saved to ${previewOutputPath} and ${codeOutputPath}`);
+    } catch (error) {
+        console.error(`Error: ${error.message}`);
+    }
+}
+async function downloadTemplates() {
+    const enTemplateFiles = [
+        {
+            url: 'https://raw.githubusercontent.com/cds-snc/gcds-examples/refs/heads/feat/add-basic-page-templates/templates/english/basic-page-template.html',
+            outputFileName: 'basic-page-template.njk'
+        }]
+
+    const frTemplateFiles = [
+
+        {
+            url: 'https://raw.githubusercontent.com/cds-snc/gcds-examples/refs/heads/feat/add-basic-page-templates/templates/french/basic-page-template.html',
+            outputFileName: 'basic-page-template.njk'
+        }
+    ]
+    const outputDirectory = './src/_includes/partials/templates';
+    const outputDirEn = outputDirectory + '/en';
+    const outputDirFr = outputDirectory + '/fr';
+
+    enTemplateFiles.forEach(file => {
+        console.log('downloading english file', file.url, outputDirEn, file.outputFileName);
+        downloadFile(file.url, outputDirEn, file.outputFileName);
+    });
+
+    frTemplateFiles.forEach(file => {
+        console.log('downloading french file', file.url, outputDirFr, file.outputFileName);
+        downloadFile(file.url, outputDirFr, file.outputFileName);
+    });
+}
+
+exports.downloadTemplates = downloadTemplates;
\ No newline at end of file
diff --git a/src/_includes/layouts/page-templates-overview.njk b/src/_includes/layouts/page-templates-overview.njk
index 9ed6e0fb4..b69467cd9 100644
--- a/src/_includes/layouts/page-templates-overview.njk
+++ b/src/_includes/layouts/page-templates-overview.njk
@@ -2,8 +2,4 @@
 layout: "layouts/base.njk"
 ---
 
-{{ content | safe }}
-
-{% include "partials/template-list.njk" %}
-
-{% include "partials/reportanissue.njk" %}
\ No newline at end of file
+{{ content | safe }}
\ No newline at end of file
diff --git a/src/_includes/layouts/page-templates-preview.njk b/src/_includes/layouts/page-templates-preview.njk
new file mode 100644
index 000000000..f056933b1
--- /dev/null
+++ b/src/_includes/layouts/page-templates-preview.njk
@@ -0,0 +1,2 @@
+<gcds-text>This is a preview</gcds-text>
+{% include 'partials/templates/' + locale + '/basic-page-template.njk' %}
diff --git a/src/_includes/partials/template-list.njk b/src/_includes/partials/template-list.njk
index 717b13cde..d5fe66d4a 100644
--- a/src/_includes/partials/template-list.njk
+++ b/src/_includes/partials/template-list.njk
@@ -1,11 +1,11 @@
 {% set templates = [cardlist.type, locale | upper] | join %}
-
 {% set templateCards = collections.all | eleventyNavigation(templates) %}
 
-{% if cardlist.type === 'pageTemplates' %}
+{% if cardlist.type === 'pageTemplates' and cardlist.state === 'published' %}
   <div class="my-500">
     <gcds-grid tag="ul" columns="1fr" columns-tablet="1fr 1fr" columns-desktop="1fr 1fr 1fr" gap="400">
-    {%- for entry in templateCards %}
+    {%- for entry in templateCards -%}
+      {% if entry.state == cardlist.state %}
         <gcds-card
           card-title="{{ entry.title }}"
           href="{% if entry.state == "published" %}{{entry.url}}{% else %}#{% endif %}"
@@ -20,6 +20,7 @@
             </gcds-text>
           {% endif %}
         </gcds-card>
+      {% endif %}
     {%- endfor -%}
     </gcds-grid>
   </div>
diff --git a/src/_includes/partials/templates/en/basic-page-template.njk b/src/_includes/partials/templates/en/basic-page-template.njk
new file mode 100644
index 000000000..49373bf93
--- /dev/null
+++ b/src/_includes/partials/templates/en/basic-page-template.njk
@@ -0,0 +1,115 @@
+<!-- TODO: Remove all comments before deploying your code to production. -->
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- TODO: Add a description of the page for better SEO and sharing previews. -->
+    <meta
+      name="description"
+      content="Add a description to provide a brief summary of the content."
+    />
+
+    <!-- TODO: Insert a concise, descriptive title that summarizes your page's content. -->
+    <title>Basic Page Template (EN)</title>
+
+    <!---------- GC Design System Utility ---------->
+    <!-- TODO: Replace <version-number> with the latest version number to receive corresponding updates of the GC Design System utility framework. All notable changes will be documented in the changelog: https://github.com/cds-snc/gcds-utility/blob/main/CHANGELOG.md -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-utility@1.4.0/dist/gcds-utility.min.css"
+    />
+
+    <!---------- GC Design System Components ---------->
+    <!-- TODO: Replace <version-number> with the latest version number to receive corresponding updates of GC Design System Components. All notable changes will be documented in the changelog: https://github.com/cds-snc/gcds-components/blob/main/CHANGELOG.md -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@0.26.2/dist/gcds/gcds.css"
+    />
+    <script
+      type="module"
+      src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@0.26.2/dist/gcds/gcds.esm.js"
+    ></script>
+    <script
+      nomodule
+      src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@0.26.2/dist/gcds/gcds.js"
+    ></script>
+
+    <!-- Custom styles -->
+    <!-- TODO: If needed, uncomment and link your custom CSS file here. -->
+    <!-- <link rel="stylesheet" href="path/to/custom.css" /> -->
+  </head>
+
+  <body>
+    <!---------- Header ---------->
+    <!-- TODO: Modify the lang-href to set the language toggle's URL. -->
+    <!-- TODO: Update the skip-to-href with the main content container's id. -->
+    <gcds-header lang-href="#" skip-to-href="#main-content">
+      <!-- The slot="search" attribute adds the search component to the header. -->
+      <gcds-search slot="search"></gcds-search>
+
+      <!-- The slot="breadcrumb" attribute adds the breadcrumbs component to the header. -->
+      <gcds-breadcrumbs slot="breadcrumb">
+        <!-- TODO: Adjust the breadcrumb links with the correct ones for your site. -->
+        <gcds-breadcrumbs-item href="#">Link</gcds-breadcrumbs-item>
+        <gcds-breadcrumbs-item href="#">Link</gcds-breadcrumbs-item>
+      </gcds-breadcrumbs>
+    </gcds-header>
+
+    <!---------- Main content ---------->
+    <!-- TODO: Confirm the id matches the "skip-to-href" id in the header. -->
+    <gcds-container
+      id="main-content"
+      main-container
+      size="xl"
+      centered
+      tag="main"
+    >
+      <!-- TODO: Update the heading and text content. -->
+      <section>
+        <gcds-heading tag="h1">Basic page</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+      </section>
+
+      <section>
+        <gcds-heading tag="h2">Section heading</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+
+        <gcds-heading tag="h3">Sub-section heading</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+
+        <gcds-heading tag="h3">Sub-section heading</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+      </section>
+
+      <!-- TODO: Update the date to reflect the page's most recent change. -->
+      <gcds-date-modified>2024-08-22</gcds-date-modified>
+    </gcds-container>
+
+    <!---------- Footer ---------->
+    <!-- TODO: Update or remove the contextual footer heading and links as needed. -->
+    <gcds-footer
+      display="full"
+      contextual-heading="Canadian Digital Service"
+      contextual-links='{ "Why GC Notify": "#","Features": "#", "Activity on GC Notify": "#"}'
+    >
+    </gcds-footer>
+  </body>
+</html>
diff --git a/src/_includes/partials/templates/en/code-basic-page-template.njk b/src/_includes/partials/templates/en/code-basic-page-template.njk
new file mode 100644
index 000000000..376d6b411
--- /dev/null
+++ b/src/_includes/partials/templates/en/code-basic-page-template.njk
@@ -0,0 +1,118 @@
+{% highlight html %}
+<!-- TODO: Remove all comments before deploying your code to production. -->
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- TODO: Add a description of the page for better SEO and sharing previews. -->
+    <meta
+      name="description"
+      content="Add a description to provide a brief summary of the content."
+    />
+
+    <!-- TODO: Insert a concise, descriptive title that summarizes your page's content. -->
+    <title>Basic Page Template (EN)</title>
+
+    <!---------- GC Design System Utility ---------->
+    <!-- TODO: Replace <version-number> with the latest version number to receive corresponding updates of the GC Design System utility framework. All notable changes will be documented in the changelog: https://github.com/cds-snc/gcds-utility/blob/main/CHANGELOG.md -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-utility@<version-number>/dist/gcds-utility.min.css"
+    />
+
+    <!---------- GC Design System Components ---------->
+    <!-- TODO: Replace <version-number> with the latest version number to receive corresponding updates of GC Design System Components. All notable changes will be documented in the changelog: https://github.com/cds-snc/gcds-components/blob/main/CHANGELOG.md -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@<version-number>/dist/gcds/gcds.css"
+    />
+    <script
+      type="module"
+      src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@<version-number>/dist/gcds/gcds.esm.js"
+    ></script>
+    <script
+      nomodule
+      src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@<version-number>/dist/gcds/gcds.js"
+    ></script>
+
+    <!-- Custom styles -->
+    <!-- TODO: If needed, uncomment and link your custom CSS file here. -->
+    <!-- <link rel="stylesheet" href="path/to/custom.css" /> -->
+  </head>
+
+  <body>
+    <!---------- Header ---------->
+    <!-- TODO: Modify the lang-href to set the language toggle's URL. -->
+    <!-- TODO: Update the skip-to-href with the main content container's id. -->
+    <gcds-header lang-href="#" skip-to-href="#main-content">
+      <!-- The slot="search" attribute adds the search component to the header. -->
+      <gcds-search slot="search"></gcds-search>
+
+      <!-- The slot="breadcrumb" attribute adds the breadcrumbs component to the header. -->
+      <gcds-breadcrumbs slot="breadcrumb">
+        <!-- TODO: Adjust the breadcrumb links with the correct ones for your site. -->
+        <gcds-breadcrumbs-item href="#">Link</gcds-breadcrumbs-item>
+        <gcds-breadcrumbs-item href="#">Link</gcds-breadcrumbs-item>
+      </gcds-breadcrumbs>
+    </gcds-header>
+
+    <!---------- Main content ---------->
+    <!-- TODO: Confirm the id matches the "skip-to-href" id in the header. -->
+    <gcds-container
+      id="main-content"
+      main-container
+      size="xl"
+      centered
+      tag="main"
+    >
+      <!-- TODO: Update the heading and text content. -->
+      <section>
+        <gcds-heading tag="h1">Basic page</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+      </section>
+
+      <section>
+        <gcds-heading tag="h2">Section heading</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+
+        <gcds-heading tag="h3">Sub-section heading</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+
+        <gcds-heading tag="h3">Sub-section heading</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+      </section>
+
+      <!-- TODO: Update the date to reflect the page's most recent change. -->
+      <gcds-date-modified>2024-08-22</gcds-date-modified>
+    </gcds-container>
+
+    <!---------- Footer ---------->
+    <!-- TODO: Update or remove the contextual footer heading and links as needed. -->
+    <gcds-footer
+      display="full"
+      contextual-heading="Canadian Digital Service"
+      contextual-links='{ "Why GC Notify": "#","Features": "#", "Activity on GC Notify": "#"}'
+    >
+    </gcds-footer>
+  </body>
+</html>
+
+{% endhighlight %}
\ No newline at end of file
diff --git a/src/_includes/partials/templates/fr/basic-page-template.html b/src/_includes/partials/templates/fr/basic-page-template.html
new file mode 100644
index 000000000..b55214b42
--- /dev/null
+++ b/src/_includes/partials/templates/fr/basic-page-template.html
@@ -0,0 +1,115 @@
+<!--TODO : Enlever les commentaires avant de déployer votre code en production. -->
+<!DOCTYPE html>
+<html dir="ltr" lang="fr">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!--TODO: Ajouter une description de la page pour améliorer le référencement naturel/SEO ainsi que les aperçus de partage. -->
+    <meta
+      name="description"
+      content="Ajouter une description qui résume brièvement le contenu."
+    />
+
+    <!--TODO : Insérer un titre concis et descriptif qui résume le contenu de votre page. -->
+    <title>Modèle de page de base (FR)</title>
+
+    <!---------- GC Design System Utility ---------->
+    <!-- TODO : Remplacez <version-number> par le numéro de version le plus récent pour recevoir les mises à jour correspondantes du cadre utilitaire de Système de design GC. Tout changement important sera consigné dans le journal des modifications: https://github.com/cds-snc/gcds-utility/blob/main/CHANGELOG.md -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-utility@<version-number>/dist/gcds-utility.min.css"
+    />
+
+    <!---------- GC Design System Components ---------->
+    <!-- TODO : Remplacez <version-number> par le numéro de version le plus récent pour recevoir les mises à jour correspondantes des composants de Système de design GC. Tout changement important sera consigné dans le journal des modifications https://github.com/cds-snc/gcds-components/blob/main/CHANGELOG.md -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@<version-number>/dist/gcds/gcds.css"
+    />
+    <script
+      type="module"
+      src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@<version-number>/dist/gcds/gcds.esm.js"
+    ></script>
+    <script
+      nomodule
+      src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@<version-number>/dist/gcds/gcds.js"
+    ></script>
+
+    <!-- Styles personnalisés -->
+    <!--TODO : Au besoin, décommenter et lier votre fichier CSS personnalisé ici. -->
+    <!-- <link rel="stylesheet" href="path/to/custom.css" /> -->
+  </head>
+
+  <body>
+    <!---------- Header ---------->
+    <!--TODO : Modifier le lang-href pour définir l'URL de la bascule de langue. -->
+    <!--TODO : Mettre à jour le skip-to-href avec l'attribut <id> du conteneur du contenu principal. -->
+    <gcds-header lang-href="#" skip-to-href="#main-content">
+      <!-- L'attribut slot="search" ajoute le composant recherche à l'en-tête. -->
+      <gcds-search slot="search"></gcds-search>
+
+      <!-- L'attribut slot="breadcrumb" ajoute le composant chemin de navigation à l'en-tête. -->
+      <gcds-breadcrumbs slot="breadcrumb">
+        <!--À faire : Remplacer les liens du chemin de navigation avec les liens valides pour votre site. -->
+        <gcds-breadcrumbs-item href="#">Lien</gcds-breadcrumbs-item>
+        <gcds-breadcrumbs-item href="#">Lien</gcds-breadcrumbs-item>
+      </gcds-breadcrumbs>
+    </gcds-header>
+
+    <!---------- Main content ---------->
+    <!--TODO : Confirmez que l'attribut id correspond à l'attribut id de skip-to-href dans l'en-tête. -->
+    <gcds-container
+      id="main-content"
+      main-container
+      size="xl"
+      centered
+      tag="main"
+    >
+      <!--TODO : Mettre à jour le contenu du titre et du texte. -->
+      <section>
+        <gcds-heading tag="h1">Page de base</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+      </section>
+
+      <section>
+        <gcds-heading tag="h2">Titre de la section</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+
+        <gcds-heading tag="h3">Titre de la sous-section</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+
+        <gcds-heading tag="h3">Titre de la sous-section</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+      </section>
+
+      <!--TODO : Mettre à jour la date pour qu'elle reflète le changement le plus récent de la page. -->
+      <gcds-date-modified>22-08-2024</gcds-date-modified>
+    </gcds-container>
+
+    <!---------- Footer ---------->
+    <!--TODO : Au besoin, mettre à jour ou enlever le titre et les liens de la bande contextuelle du pied de page. -->
+    <gcds-footer
+      display="full"
+      contextual-heading="Service numérique canadien"
+      contextual-links='{ "Pourquoi Notification GC": "#","Fonctionnalités": "#", "Activité sur Notification GC": "#"}'
+    >
+    </gcds-footer>
+  </body>
+</html>
diff --git a/src/_includes/partials/templates/fr/basic-page-template.njk b/src/_includes/partials/templates/fr/basic-page-template.njk
new file mode 100644
index 000000000..ada50f9f3
--- /dev/null
+++ b/src/_includes/partials/templates/fr/basic-page-template.njk
@@ -0,0 +1,115 @@
+<!--TODO : Enlever les commentaires avant de déployer votre code en production. -->
+<!DOCTYPE html>
+<html dir="ltr" lang="fr">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!--TODO: Ajouter une description de la page pour améliorer le référencement naturel/SEO ainsi que les aperçus de partage. -->
+    <meta
+      name="description"
+      content="Ajouter une description qui résume brièvement le contenu."
+    />
+
+    <!--TODO : Insérer un titre concis et descriptif qui résume le contenu de votre page. -->
+    <title>Modèle de page de base (FR)</title>
+
+    <!---------- GC Design System Utility ---------->
+    <!-- TODO : Remplacez <version-number> par le numéro de version le plus récent pour recevoir les mises à jour correspondantes du cadre utilitaire de Système de design GC. Tout changement important sera consigné dans le journal des modifications: https://github.com/cds-snc/gcds-utility/blob/main/CHANGELOG.md -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-utility@1.4.0/dist/gcds-utility.min.css"
+    />
+
+    <!---------- GC Design System Components ---------->
+    <!-- TODO : Remplacez <version-number> par le numéro de version le plus récent pour recevoir les mises à jour correspondantes des composants de Système de design GC. Tout changement important sera consigné dans le journal des modifications https://github.com/cds-snc/gcds-components/blob/main/CHANGELOG.md -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@0.26.2/dist/gcds/gcds.css"
+    />
+    <script
+      type="module"
+      src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@0.26.2/dist/gcds/gcds.esm.js"
+    ></script>
+    <script
+      nomodule
+      src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@0.26.2/dist/gcds/gcds.js"
+    ></script>
+
+    <!-- Styles personnalisés -->
+    <!--TODO : Au besoin, décommenter et lier votre fichier CSS personnalisé ici. -->
+    <!-- <link rel="stylesheet" href="path/to/custom.css" /> -->
+  </head>
+
+  <body>
+    <!---------- Header ---------->
+    <!--TODO : Modifier le lang-href pour définir l'URL de la bascule de langue. -->
+    <!--TODO : Mettre à jour le skip-to-href avec l'attribut <id> du conteneur du contenu principal. -->
+    <gcds-header lang-href="#" skip-to-href="#main-content">
+      <!-- L'attribut slot="search" ajoute le composant recherche à l'en-tête. -->
+      <gcds-search slot="search"></gcds-search>
+
+      <!-- L'attribut slot="breadcrumb" ajoute le composant chemin de navigation à l'en-tête. -->
+      <gcds-breadcrumbs slot="breadcrumb">
+        <!--À faire : Remplacer les liens du chemin de navigation avec les liens valides pour votre site. -->
+        <gcds-breadcrumbs-item href="#">Lien</gcds-breadcrumbs-item>
+        <gcds-breadcrumbs-item href="#">Lien</gcds-breadcrumbs-item>
+      </gcds-breadcrumbs>
+    </gcds-header>
+
+    <!---------- Main content ---------->
+    <!--TODO : Confirmez que l'attribut id correspond à l'attribut id de skip-to-href dans l'en-tête. -->
+    <gcds-container
+      id="main-content"
+      main-container
+      size="xl"
+      centered
+      tag="main"
+    >
+      <!--TODO : Mettre à jour le contenu du titre et du texte. -->
+      <section>
+        <gcds-heading tag="h1">Page de base</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+      </section>
+
+      <section>
+        <gcds-heading tag="h2">Titre de la section</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+
+        <gcds-heading tag="h3">Titre de la sous-section</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+
+        <gcds-heading tag="h3">Titre de la sous-section</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+      </section>
+
+      <!--TODO : Mettre à jour la date pour qu'elle reflète le changement le plus récent de la page. -->
+      <gcds-date-modified>22-08-2024</gcds-date-modified>
+    </gcds-container>
+
+    <!---------- Footer ---------->
+    <!--TODO : Au besoin, mettre à jour ou enlever le titre et les liens de la bande contextuelle du pied de page. -->
+    <gcds-footer
+      display="full"
+      contextual-heading="Service numérique canadien"
+      contextual-links='{ "Pourquoi Notification GC": "#","Fonctionnalités": "#", "Activité sur Notification GC": "#"}'
+    >
+    </gcds-footer>
+  </body>
+</html>
diff --git a/src/_includes/partials/templates/fr/code-basic-page-template.njk b/src/_includes/partials/templates/fr/code-basic-page-template.njk
new file mode 100644
index 000000000..9721d2679
--- /dev/null
+++ b/src/_includes/partials/templates/fr/code-basic-page-template.njk
@@ -0,0 +1,118 @@
+{% highlight html %}
+<!--TODO : Enlever les commentaires avant de déployer votre code en production. -->
+<!DOCTYPE html>
+<html dir="ltr" lang="fr">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!--TODO: Ajouter une description de la page pour améliorer le référencement naturel/SEO ainsi que les aperçus de partage. -->
+    <meta
+      name="description"
+      content="Ajouter une description qui résume brièvement le contenu."
+    />
+
+    <!--TODO : Insérer un titre concis et descriptif qui résume le contenu de votre page. -->
+    <title>Modèle de page de base (FR)</title>
+
+    <!---------- GC Design System Utility ---------->
+    <!-- TODO : Remplacez <version-number> par le numéro de version le plus récent pour recevoir les mises à jour correspondantes du cadre utilitaire de Système de design GC. Tout changement important sera consigné dans le journal des modifications: https://github.com/cds-snc/gcds-utility/blob/main/CHANGELOG.md -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-utility@<version-number>/dist/gcds-utility.min.css"
+    />
+
+    <!---------- GC Design System Components ---------->
+    <!-- TODO : Remplacez <version-number> par le numéro de version le plus récent pour recevoir les mises à jour correspondantes des composants de Système de design GC. Tout changement important sera consigné dans le journal des modifications https://github.com/cds-snc/gcds-components/blob/main/CHANGELOG.md -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@<version-number>/dist/gcds/gcds.css"
+    />
+    <script
+      type="module"
+      src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@<version-number>/dist/gcds/gcds.esm.js"
+    ></script>
+    <script
+      nomodule
+      src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@<version-number>/dist/gcds/gcds.js"
+    ></script>
+
+    <!-- Styles personnalisés -->
+    <!--TODO : Au besoin, décommenter et lier votre fichier CSS personnalisé ici. -->
+    <!-- <link rel="stylesheet" href="path/to/custom.css" /> -->
+  </head>
+
+  <body>
+    <!---------- Header ---------->
+    <!--TODO : Modifier le lang-href pour définir l'URL de la bascule de langue. -->
+    <!--TODO : Mettre à jour le skip-to-href avec l'attribut <id> du conteneur du contenu principal. -->
+    <gcds-header lang-href="#" skip-to-href="#main-content">
+      <!-- L'attribut slot="search" ajoute le composant recherche à l'en-tête. -->
+      <gcds-search slot="search"></gcds-search>
+
+      <!-- L'attribut slot="breadcrumb" ajoute le composant chemin de navigation à l'en-tête. -->
+      <gcds-breadcrumbs slot="breadcrumb">
+        <!--À faire : Remplacer les liens du chemin de navigation avec les liens valides pour votre site. -->
+        <gcds-breadcrumbs-item href="#">Lien</gcds-breadcrumbs-item>
+        <gcds-breadcrumbs-item href="#">Lien</gcds-breadcrumbs-item>
+      </gcds-breadcrumbs>
+    </gcds-header>
+
+    <!---------- Main content ---------->
+    <!--TODO : Confirmez que l'attribut id correspond à l'attribut id de skip-to-href dans l'en-tête. -->
+    <gcds-container
+      id="main-content"
+      main-container
+      size="xl"
+      centered
+      tag="main"
+    >
+      <!--TODO : Mettre à jour le contenu du titre et du texte. -->
+      <section>
+        <gcds-heading tag="h1">Page de base</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+      </section>
+
+      <section>
+        <gcds-heading tag="h2">Titre de la section</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+
+        <gcds-heading tag="h3">Titre de la sous-section</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+
+        <gcds-heading tag="h3">Titre de la sous-section</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+      </section>
+
+      <!--TODO : Mettre à jour la date pour qu'elle reflète le changement le plus récent de la page. -->
+      <gcds-date-modified>22-08-2024</gcds-date-modified>
+    </gcds-container>
+
+    <!---------- Footer ---------->
+    <!--TODO : Au besoin, mettre à jour ou enlever le titre et les liens de la bande contextuelle du pied de page. -->
+    <gcds-footer
+      display="full"
+      contextual-heading="Service numérique canadien"
+      contextual-links='{ "Pourquoi Notification GC": "#","Fonctionnalités": "#", "Activité sur Notification GC": "#"}'
+    >
+    </gcds-footer>
+  </body>
+</html>
+
+{% endhighlight %}
\ No newline at end of file
diff --git a/src/en/page-templates/basic.md b/src/en/page-templates/basic.md
deleted file mode 100644
index 68990931c..000000000
--- a/src/en/page-templates/basic.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: Basic Page Template
-layout: 'layouts/page-templates-overview.njk'
-eleventyNavigation:
-  key: basicPageTemplateEN
-  title: Basic
-  locale: en
-  parent: pageTemplatesEN
-  description: Starting point for any web page. 
-  descriptionSecondaryText: Offers a basic, accessible page structure and hierarchy and includes the elements required for most GC pages.
-  state: published
-#  tag: Canada.ca required
-  order: 1
-translationKey: 'heading'
-tags: ["templates"]
-date: "git Last Modified"
-github: https://github.com/cds-snc/gcds-examples/blob/feat/add-basic-page-templates/templates/english/basic-page-template.html
-figma: https://figma.com
----
-
-# Basic Page Template
-
-{% docLinks locale stage figma github %}
-{% enddocLinks %}
\ No newline at end of file
diff --git a/src/en/page-templates/basic/basic.md b/src/en/page-templates/basic/basic.md
new file mode 100644
index 000000000..8362332df
--- /dev/null
+++ b/src/en/page-templates/basic/basic.md
@@ -0,0 +1,70 @@
+---
+title: Basic Page Template
+layout: 'layouts/page-templates-overview.njk'
+eleventyNavigation:
+  key: basicPageTemplateEN
+  title: Basic
+  locale: en
+  parent: pageTemplatesEN
+  description: Starting point for any web page. 
+  descriptionSecondaryText: Offers a basic, accessible page structure and hierarchy and includes the elements required for most GC pages.
+  state: published
+#  tag: Canada.ca required
+  order: 1
+translationKey: 'heading'
+tags: ["templates"]
+date: "git Last Modified"
+github: https://github.com/cds-snc/gcds-examples/blob/feat/add-basic-page-templates/templates/english/basic-page-template.html
+figma: https://figma.com
+---
+
+# Basic Page Template
+The Basic Page template provides accessibility essentials for page structure and heading hierarchy. Brand elements, like the header and footer, make it recognizable as a Government of Canada page.
+
+## When to use
+For use on Canada.ca and other GC sites.
+The basic page template is for non-specialized pages across Canada.ca and is an optional template. It has the starting elements needed for a simple page and those required for most GC pages. You can use it as a canvas to add or combine components from the GC Design System.
+
+## Preview
+Open this example in a new tab
+
+
+Code 
+```js
+https://raw.githubusercontent.com/cds-snc/gcds-examples/refs/heads/feat/add-basic-page-templates/templates/english/basic-page-template.html
+```
+
+## How to implement
+To implement page templates into your project or to prototype in HTML, download the specific template you need in GitHub:
+- Basic page template
+- Basic page table of contents template
+
+To prototype in Figma, find the Basic Page Template (link) in the GC Design System library.
+
+## Design considerations
+
+### Improve navigation on longer pages
+Include an "On this page" section with bulleted anchor links for pages with four or more sections. Anchor links  to improve navigation and help people find relevant content.
+
+Preview “On this page” 
+
+### Maintain a logical heading structure
+- Follow the hierarchy logic within the page template to structure your content for everyone, including people using assistive technology.
+- Use appropriate heading levels (H1-H6) to reflect the structure of your content.
+- Write clear and consistent headings, and maintain default character limits for each heading line for a comfortable reading length.
+- For consistency and accessibility, use GC Design System components like Heading, Text, and Screenreader-only.
+- For any custom-built elements, follow the Government of Canada’s Standard on Web Accessibility.
+
+## Accessibility highlights
+The Basic Page template is built using the following components that meet WCAG 2.1 AA accessibility standards:
+- Container
+- Date modified
+- Footer
+- Header (includes search and breadcrumbs)
+- Heading
+- Link
+- Text
+
+The Basic Page template includes:
+- A clear heading hierarchy you can use to structure your content logically for everyone, including people using assistive technologies, by following Heading guidance.  
+- GC Design System **tokens** meet level AA of the Web Content Accessibility Guidelines (WCAG 2.1) colour contrast standards for text and interactive elements and level AAA for both tap targets and visual presentation.
\ No newline at end of file
diff --git a/src/en/page-templates/basic/code.md b/src/en/page-templates/basic/code.md
new file mode 100644
index 000000000..5ac50f7d5
--- /dev/null
+++ b/src/en/page-templates/basic/code.md
@@ -0,0 +1,9 @@
+---
+title: Basic Page Template Code
+layout: 'layouts/page-templates-overview.njk'
+translationKey: 'heading'
+date: "git Last Modified"
+---
+# Copy this code (english content)
+
+{% include 'partials/templates/en/code-basic-page-template.njk' %}
diff --git a/src/en/page-templates/basic/preview.md b/src/en/page-templates/basic/preview.md
new file mode 100644
index 000000000..b148d6ff8
--- /dev/null
+++ b/src/en/page-templates/basic/preview.md
@@ -0,0 +1,6 @@
+---
+title: Basic Page Template Preview
+layout: 'layouts/page-templates-preview.njk'
+translationKey: 'heading'
+date: "git Last Modified"
+---
\ No newline at end of file
diff --git a/src/en/page-templates/page-templates.md b/src/en/page-templates/page-templates.md
index 6ce324f35..02028ce15 100644
--- a/src/en/page-templates/page-templates.md
+++ b/src/en/page-templates/page-templates.md
@@ -12,7 +12,8 @@ github: https://github.com/cds-snc/gcds-examples/tree/main/templates
 figma: https://www.figma.com/
 cardlist:
   type: pageTemplates
-#  state: published
+  state: published
+templateEngineOverride: njk,md
 ---
 
 # Page templates
@@ -21,13 +22,23 @@ Page templates are pre-built pages that combine GC Design System components for
 
 ## Start your project with pre-built pages
 
-Page templates can be a starting point for you to use GC Design System to prototype or code. Already familiar? They’ll help you create pages faster and then add components to meet user needs.    
+Page templates can be a starting point for you to use GC Design System to prototype or code. Already familiar? They’ll help you create pages faster and then add components to meet user needs.
 
 Unless specified, use them for Canada.ca pages as well as other GC websites.
 
 ## Browse templates
 
-We’re sharing page templates as we build them. 
+We're sharing page templates as we build them.
 
-{% docLinks locale stage figma github %}
+{% docLinks locale, stage, figma, github %}
 {% enddocLinks %}
+
+{% include "partials/template-list.njk" %}
+
+## Coming soon
+We're working on the following page templates that will soon be ready for you to try.
+
+- **Topic page**: A page that presents a series of options for popular tasks and services on an important topic.
+- **Ministerial profile page**: For landing pages with biographical details and roles and responsibilities of ministers, parliamentary secretaries, and heads of quasi-judicial organizations.
+
+{% include "partials/reportanissue.njk" %}
diff --git a/src/fr/modeles-de-page/modeles-de-page.md b/src/fr/modeles-de-page/modeles-de-page.md
index 300731a15..53aff9796 100644
--- a/src/fr/modeles-de-page/modeles-de-page.md
+++ b/src/fr/modeles-de-page/modeles-de-page.md
@@ -13,6 +13,7 @@ figma: https://www.figma.com/
 cardlist:
   type: pageTemplates
   state: published
+templateEngineOverride: njk,md
 ---
 
 # Modèles de page
@@ -29,5 +30,15 @@ Sauf indication contraire, utilisez-les pour les pages de Canada.ca et pour les
 
 Nous mettons les modèles de page à votre disposition au fur et à mesure que nous les créons.
 
-{% docLinks locale stage figma github %}
+{% docLinks locale, stage, figma, github %}
 {% enddocLinks %}
+
+{% include "partials/template-list.njk" %}
+
+## À venir
+Nous sommes en train de bâtir les modèles de page suivants. Ils seront bientôt disponibles pour que vous puissiez les essayer.
+
+- **Page de sujet** : Page présentant une série d’options de tâches et de services fréquents en lien avec un sujet important.
+- **Page de profil de ministre** : Page d’accueil comprenant un aperçu de la biographie, des rôles et des responsabilités d’un·e ministre, d’un·e secrétaire parlementaire ou d’un·e chef d’institution quasi judiciaire."
+
+{% include "partials/reportanissue.njk" %}
\ No newline at end of file