diff --git a/.eleventy.js b/.eleventy.js
new file mode 100644
index 0000000..b803899
--- /dev/null
+++ b/.eleventy.js
@@ -0,0 +1,21 @@
+module.exports = function (eleventyConfig) {
+  // Passthrough copy for static assets
+  eleventyConfig.addPassthroughCopy("src/images");
+  eleventyConfig.addPassthroughCopy("src/css");
+  eleventyConfig.addPassthroughCopy({
+    "src/root": "."
+  });
+  eleventyConfig.addPassthroughCopy({
+    "src/docs": "."
+  });
+  // Add more passthroughs if needed (e.g., fonts, js)
+  return {
+    dir: {
+      input: "src",
+      includes: "_includes",
+      output: "_site"
+    },
+    htmlTemplateEngine: "njk",
+    templateFormats: ["html", "njk"]
+  };
+};
diff --git a/.gitignore b/.gitignore
index e43b0f9..b8218e1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,4 @@
 .DS_Store
+
+/_site
+/node_modules
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..ca35be0
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+_site
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..075bc35
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "arrowParens": "avoid",
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "bracketSameLine": true,
+  "singleAttributePerLine": false,
+  "embeddedLanguageFormatting": "off",
+  "overrides": [
+    {
+      "files": "web.config",
+      "options": {
+        "parser": "html",
+        "printWidth": 120
+      }
+    },
+    {
+      "files": ["*.svg", "*.xml"],
+      "options": {
+        "parser": "html",
+        "printWidth": 9999
+      }
+    }
+  ]
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..bef7f00
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "tombonnike.vscode-status-bar-format-toggle",
+    "ambooth.git-rename"
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6f3a291..f655add 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,17 @@
 {
-    "liveServer.settings.port": 5501
-}
\ No newline at end of file
+  "terminal.integrated.defaultProfile.windows": "Git Bash",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.tabSize": 2,
+  "editor.detectIndentation": false,
+  "formattingToggle.affects": ["editor.formatOnSave"],
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "prettier.documentSelectors": ["**/web.config", "**/*.svg", "**/*.xml"]
+}
diff --git a/azure-dev-build-pipelines.yml b/azure-dev-build-pipelines.yml
deleted file mode 100644
index a60b897..0000000
--- a/azure-dev-build-pipelines.yml
+++ /dev/null
@@ -1,18 +0,0 @@
-# HTML
-# Archive your static HTML project and save it with the build record.
-# Add steps that build, run tests, deploy, and more:
-# https://aka.ms/yaml
-
-trigger:
-- development
-pr: none
-
-pool:
-  vmImage: 'ubuntu-latest'
-
-steps:
-- task: ArchiveFiles@2
-  inputs:
-    rootFolderOrFile: '$(build.sourcesDirectory)'
-    includeRootFolder: false
-- task: PublishBuildArtifacts@1
diff --git a/azure-development-build-pipeline.yml b/azure-development-build-pipeline.yml
new file mode 100644
index 0000000..190419f
--- /dev/null
+++ b/azure-development-build-pipeline.yml
@@ -0,0 +1,46 @@
+
+# Node.js
+# Build a general Node.js project with npm.
+# Add steps that analyze code, save build artifacts, deploy, and more:
+# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
+
+trigger:
+  - development
+pr: none
+
+pool:
+  vmImage: "ubuntu-latest"
+
+steps:
+  - script: |
+      echo "##vso[build.addbuildtag]trigger-$(Build.Reason)"
+    displayName: "Tag build with trigger reason"
+
+  - task: NodeTool@0
+    inputs:
+      versionSpec: "18.x"
+    displayName: "Install Node.js"
+
+  - task: Npm@1
+    inputs:
+      command: "install"
+    displayName: "npm install"
+
+  - script: npm run build
+    displayName: "npm build"
+
+  - task: CopyFiles@2
+    inputs:
+      Contents: "_site/**" # Pull the build directory
+      TargetFolder: "$(Build.ArtifactStagingDirectory)"
+  - task: PublishBuildArtifacts@1
+    inputs:
+      PathtoPublish: "$(Build.ArtifactStagingDirectory)/_site" # build files
+      ArtifactName: "drop" # output artifact named drop
+  - task: ArchiveFiles@2
+    inputs:
+      rootFolderOrFile: "$(Build.ArtifactStagingDirectory)"
+      includeRootFolder: true
+      archiveType: "zip"
+      archiveFile: "$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip"
+      replaceExistingArchive: true
diff --git a/azure-main-build-pipeline.yml b/azure-main-build-pipeline.yml
new file mode 100644
index 0000000..c5e17ea
--- /dev/null
+++ b/azure-main-build-pipeline.yml
@@ -0,0 +1,46 @@
+
+# Node.js
+# Build a general Node.js project with npm.
+# Add steps that analyze code, save build artifacts, deploy, and more:
+# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
+
+trigger:
+  - main
+pr: none
+
+pool:
+  vmImage: "ubuntu-latest"
+
+steps:
+  - script: |
+      echo "##vso[build.addbuildtag]trigger-$(Build.Reason)"
+    displayName: "Tag build with trigger reason"
+
+  - task: NodeTool@0
+    inputs:
+      versionSpec: "18.x"
+    displayName: "Install Node.js"
+
+  - task: Npm@1
+    inputs:
+      command: "install"
+    displayName: "npm install"
+
+  - script: npm run build
+    displayName: "npm build"
+
+  - task: CopyFiles@2
+    inputs:
+      Contents: "_site/**" # Pull the build directory
+      TargetFolder: "$(Build.ArtifactStagingDirectory)"
+  - task: PublishBuildArtifacts@1
+    inputs:
+      PathtoPublish: "$(Build.ArtifactStagingDirectory)/_site" # build files
+      ArtifactName: "drop" # output artifact named drop
+  - task: ArchiveFiles@2
+    inputs:
+      rootFolderOrFile: "$(Build.ArtifactStagingDirectory)"
+      includeRootFolder: true
+      archiveType: "zip"
+      archiveFile: "$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip"
+      replaceExistingArchive: true
diff --git a/azure-pipelines.yml b/azure-pipelines.yml
deleted file mode 100644
index 20c931d..0000000
--- a/azure-pipelines.yml
+++ /dev/null
@@ -1,18 +0,0 @@
-# HTML
-# Archive your static HTML project and save it with the build record.
-# Add steps that build, run tests, deploy, and more:
-# https://aka.ms/yaml
-
-trigger:
-- main
-pr: none
-
-pool:
-  vmImage: 'ubuntu-latest'
-
-steps:
-- task: ArchiveFiles@2
-  inputs:
-    rootFolderOrFile: '$(build.sourcesDirectory)'
-    includeRootFolder: false
-- task: PublishBuildArtifacts@1
diff --git a/azure-test-build-pipeline.yml b/azure-test-build-pipeline.yml
new file mode 100644
index 0000000..9f7136b
--- /dev/null
+++ b/azure-test-build-pipeline.yml
@@ -0,0 +1,46 @@
+
+# Node.js
+# Build a general Node.js project with npm.
+# Add steps that analyze code, save build artifacts, deploy, and more:
+# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
+
+trigger:
+  - test
+pr: none
+
+pool:
+  vmImage: "ubuntu-latest"
+
+steps:
+  - script: |
+      echo "##vso[build.addbuildtag]trigger-$(Build.Reason)"
+    displayName: "Tag build with trigger reason"
+
+  - task: NodeTool@0
+    inputs:
+      versionSpec: "18.x"
+    displayName: "Install Node.js"
+
+  - task: Npm@1
+    inputs:
+      command: "install"
+    displayName: "npm install"
+
+  - script: npm run build
+    displayName: "npm build"
+
+  - task: CopyFiles@2
+    inputs:
+      Contents: "_site/**" # Pull the build directory
+      TargetFolder: "$(Build.ArtifactStagingDirectory)"
+  - task: PublishBuildArtifacts@1
+    inputs:
+      PathtoPublish: "$(Build.ArtifactStagingDirectory)/_site" # build files
+      ArtifactName: "drop" # output artifact named drop
+  - task: ArchiveFiles@2
+    inputs:
+      rootFolderOrFile: "$(Build.ArtifactStagingDirectory)"
+      includeRootFolder: true
+      archiveType: "zip"
+      archiveFile: "$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip"
+      replaceExistingArchive: true
diff --git a/es/website-accessibility-certification-es.html b/es/website-accessibility-certification-es.html
deleted file mode 100644
index aa80b92..0000000
--- a/es/website-accessibility-certification-es.html
+++ /dev/null
@@ -1,493 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <meta charset="utf-8" />
-    <title>California State Digital ID Strategy - Web accessibility certification</title>
-    <meta name="Author" content="State of California" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="HandheldFriendly" content="True" />
-    <meta name="MobileOptimized" content="320" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <link
-      rel="alternate"
-      hreflang="es"
-      href="https://digitalidstrategy.cdt.ca.gov/es/website-accessibility-certification-es.html"
-    />
-
-    <!-- Title Tags -->
-    <meta name="title" content="California State Digital ID Strategy" />
-    <meta property="og:title" content="California State Digital ID Strategy" />
-    <meta
-      property="twitter:title"
-      content="California State Digital ID Strategy"
-    />
-
-    <!-- Description Tags -->
-    <meta
-      name="description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
-    <meta
-      property="og:description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
-    <meta
-      property="twitter:description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
-
-    <!-- Canonical link, improves SEO -->
-    <link
-      href="https://digitalidstrategy.cdt.ca.gov/es/website-accessibility-certification-es.html"
-      rel="canonical"
-    />
-    <meta
-      property="og:url"
-      content="https://digitalidstrategy.cdt.ca.gov/es/website-accessibility-certification-es.html"
-    />
-    <meta
-      property="twitter:url"
-      content="https://digitalidstrategy.cdt.ca.gov/es/website-accessibility-certification-es.html"
-    />
-    <!-- END Canonical link -->
-
-    <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="website" />
-    <meta
-      property="og:image"
-      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png"
-    />
-
-    <!-- Twitter -->
-    <meta property="twitter:card" content="summary_large_image" />
-    <meta
-      property="twitter:image"
-      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png"
-    />
-
-    <!-- State Template CDN CSS -->
-    <link
-      href="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/css/cagov.core.min.css"
-      rel="stylesheet"
-      integrity="sha256-f2k3x0x/l4G+mg5fxnV+Q37/8RoMOoMOWphHJ4vWn6g="
-      crossorigin="anonymous"
-    />
-    <!-- State Template JavaScript CDN -->
-    <script
-      src="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/js/cagov.core.min.js"
-      integrity="sha256-MRHAOqwc4jjHeTGa/9mcdxAv3aVG+lQ7eJ9DPa+Gr/k="
-      defer
-      crossorigin="anonymous"
-    ></script>
-    <link rel="stylesheet" href="css/custom.css" />
-    <!-- END STATE_TEMPLATE -->
-
-    <link
-      rel="apple-touch-icon-precomposed"
-      sizes="100x100"
-      href="images/apple-touch-icon-precomposed.png"
-    />
-    <link
-      rel="icon"
-      sizes="192x192"
-      href="images/apple-touch-icon-192x192.png"
-    />
-    <link
-      rel="apple-touch-icon-precomposed"
-      sizes="180x180"
-      href="images/apple-touch-icon-180x180.png"
-    />
-    <link
-      rel="apple-touch-icon-precomposed"
-      sizes="152x152"
-      href="images/apple-touch-icon-152x152.png"
-    />
-    <link
-      rel="apple-touch-icon-precomposed"
-      sizes="144x144"
-      href="images/apple-touch-icon-144x144.png"
-    />
-    <link
-      rel="apple-touch-icon-precomposed"
-      sizes="120x120"
-      href="images/apple-touch-icon-120x120.png"
-    />
-    <link
-      rel="apple-touch-icon-precomposed"
-      sizes="114x114"
-      href="images/apple-touch-icon-114x114.png"
-    />
-    <link
-      rel="apple-touch-icon-precomposed"
-      sizes="72x72"
-      href="images/apple-touch-icon-72x72.png"
-    />
-    <link
-      rel="apple-touch-icon-precomposed"
-      href="images/apple-touch-icon-57x57.png"
-    />
-    <link rel="shortcut icon" href="images/apple-touch-icon-57x57.png" />
-    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
-    <link
-      rel="shortcut icon"
-      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png"
-    />
-    <!-- Statewide Alerts Server -->
-    <script defer src="https://alert.cdt.ca.gov"></script>
-    <!-- BEGIN Google Tag Manager -->
-    <link rel="preconnect" href="https://www.googletagmanager.com" />
-    <link rel="preconnect" href="https://www.google-analytics.com" />
-    <script>
-      //*** BEGIN STATE TEMPLATE CHANGE REQUESTED
-      //Your GA4 Measurement ID that this website should use for website analytics
-      var yourGA4MeasurementId = "G-CLMC17ZTJT";
-      //*** END STATE TEMPLATE CHANGE REQUESTED
-
-      //Support code to make this work, just leave this as is
-      var stateGTMAccount = "GTM-NJ6Q4MV"; //GTM-NJ6Q4MV - all ca.gov
-      (function (w, d, s, l, i) {
-        w[l] = w[l] || [];
-        w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
-        var f = d.getElementsByTagName(s)[0],
-          j = d.createElement(s),
-          dl = l != "dataLayer" ? "&l=" + l : "";
-        j.async = true;
-        j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
-        f.parentNode.insertBefore(j, f);
-        (function () {
-          dataLayer.push(arguments);
-        })("config", yourGA4MeasurementId, {
-          cookie_flags: "secure;samesite=lax;domain=",
-        });
-      })(window, document, "script", "dataLayer", stateGTMAccount);
-    </script>
-    <!-- END Google Tag Manager -->
-
-    <script type="text/javascript">
-      let languageFlag = sessionStorage.getItem("isBrowserSpanish");
-      let lang = window.navigator.languages
-        ? window.navigator.languages[0]
-        : null;
-      lang =
-        lang ||
-        window.navigator.language ||
-        window.navigator.browserLanguage ||
-        window.navigator.userLanguage;
-
-      let shortLang = lang;
-      if (shortLang.indexOf("-") !== -1) shortLang = shortLang.split("-")[0];
-
-      if (shortLang.indexOf("_") !== -1) shortLang = shortLang.split("_")[0];
-
-      if (shortLang === "es" && !languageFlag) {
-        window.location.replace("./" + shortLang + "/website-accessibility-certification-es.html");
-        sessionStorage.setItem("isBrowserSpanish", "true");
-      }
-    </script>
-  </head>
-
-  <body class="primary">
-    <header role="banner" id="header" class="global-header fixed">
-      <div id="skip-to-content">
-        <a href="#main-content">Skip to Main Content</a>
-      </div>
-      <div class="utility-header">
-        <div class="container">
-          <div class="flex-row">
-            <div class="social-media-links">
-              <div class="header-cagov-logo">
-                <a href="https://ca.gov">
-                  <span class="sr-only">CA.gov</span>
-                  <span class="ca-gov-logo-svg"></span>
-                </a>
-              </div>
-              <p class="official-tag">
-                <span class="desktop-only">Official website of the</span>
-                State of California
-              </p>
-            </div>
-            <div class="translation-link">
-              <a
-                href="/website-accessibility-certification-es.html"
-                hreflang="es"
-                rel="alternate"
-                lang="es"
-                >Español</a
-              >
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- header branding with light gray background -->
-      <div class="section-default">
-        <div class="branding">
-          <div class="header-organization-banner">
-            <a href="index.html">
-              <div class="logo-assets">
-                <img
-                  src="images/blue-gold-fingerprint.png"
-                  alt="Fingerprint icon"
-                  width="67px"
-                />
-                <div class="logo-text">
-                  <span class="logo-state">California State</span>
-                  <span class="logo-dept">Digital ID Framework</span>
-                </div>
-              </div>
-            </a>
-          </div>
-        </div>
-      </div>
-      <!-- mobile navigation controls -->
-      <div class="mobile-controls">
-        <span class="mobile-control-group mobile-header-icons">
-          <!-- Add more mobile controls here. These will be on the right side of the mobile page header section -->
-        </span>
-        <div class="mobile-control-group main-nav-icons">
-          <button
-            id="nav-icon3"
-            class="mobile-control toggle-menu"
-            aria-expanded="false"
-            aria-controls="navigation"
-          >
-            <span></span>
-            <span></span>
-            <span></span>
-            <span></span>
-            <span class="sr-only">Menu</span>
-          </button>
-        </div>
-      </div>
-      <div class="navigation-search full-width-nav container">
-        <div id="head-search" class="search-container featured-search hidden">
-          <div class="container">
-            <form id="Search" class="pos-rel" action="serp.html">
-              <span class="sr-only" id="SearchInput">Custom Google Search</span>
-              <input
-                type="search"
-                name="q"
-                aria-labelledby="SearchInput"
-                placeholder="Search"
-                class="search-textfield"
-              />
-              <button type="submit" class="gsc-search-button">
-                <span class="ca-gov-icon-search" aria-hidden="true"></span>
-                <span class="sr-only">Submit</span>
-              </button>
-              <div class="close-search-btn">
-                <button
-                  class="close-search gsc-clear-button border-0 bg-transparent pos-rel"
-                  type="reset"
-                >
-                  <span class="sr-only">Close</span>
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-        <!-- navigation types -->
-        <nav
-          id="navigation"
-          class="main-navigation dropdown"
-          aria-label="Main navigation"
-        >
-          <ul id="nav_list" class="top-level-nav">
-            <li class="nav-item">
-              <a class="first-level-link" href="primary-elements.html"
-                >Primary elements</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="accomplishments.html" class="first-level-link"
-                >Accomplishments</a
-              >
-            </li>
-            <li class="nav-item">
-              <a class="first-level-link" href="projects.html"
-                >Projects and synergy efforts</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="/website-accessibility-certification-es.html" class="first-level-link">Accessibility</a>
-            </li>
-          </ul>
-        </nav>
-      </div>
-    </header>
-    <div id="main-content" class="main-content">
-      <main class="main-primary" id="main">
-        <div class="focus-area-header">
-          <h1 class="container m-t-0 p-b-lg p-t-lg">Certificación de Accesibilidad de Sitios Web</h1>
-        </div>
-        <div class="container">
-
-          <div class="row">
-            <div class="col-md-10 p-b-lg">
-          
-          
-              <h2>Certificación 2025</h2>
-          
-              <p>
-                <div class="m-b-lg">
-                  <h3 class="m-b-0">Agencia:</h3>
-                  Departamento de Tecnología de California
-                </div>
-                <div class="m-b-lg">
-                  <h3 class="m-b-0">Fecha de certificación:</h3>
-                  10 de junio de 2025
-                </div>
-                <div class="m-b-lg">
-                  <h3 class="m-b-0">Contacto:</h3>
-                  <a href="mailto:example@state.ca.gov"> ServiceDesk@state.ca.gov </a>
-                </div>
-              </p>
-          
-              <p class="lh-lg">
-                Los abajo firmantes certifican que, a partir del <strong>10 de junio de 2025</strong>, el sitio web del <strong>Estrategia de identificación digital del estado de California</strong> está diseñado, desarrollado y mantenido para ser accesible. Esto indica el cumplimiento de lo siguiente:
-              </p>
-          
-              <ul class="m-b-lg">
-              <li>Secciones <a href="https://leginfo.legislature.ca.gov/faces/codes_displaySection.xhtml?sectionNum=7405&lawCode=GOV">7405 del Código de Gobierno de California</a>, <a href="https://leginfo.legislature.ca.gov/faces/codes_displaySection.xhtml?sectionNum=11135&lawCode=GOV">11135</a>, y <a href="vhttps://leginfo.legislature.ca.gov/faces/codes_displaySection.xhtml?sectionNum=11546.7&lawCode=GOV">11546.7</a></li>
-              <li><a href="https://www.w3.org/TR/WCAG21?portal-california">Pautas de accesibilidad al contenido web 2.1</a> publicado por la Iniciativa de Accesibilidad Web del Consorcio World Wide Web</li>
-              <li>Criterios de éxito de nivel AA como mínimo</li>
-              </ul>
-          
-              <div class="row">
-                <div class="lh-lg">
-                  <strong>Quentin Wright</strong>
-                  <p>
-                  Director de Información<br />
-                  (Firma en archivo) 10 de junio de 2025
-                  </p>
-                </div>
-                <div class="lh-lg">
-                  <strong>Liana Bailey-Crimmins</strong>
-                  <p>
-                    Director<br />
-                    (Firma en archivo) 10 de junio de 2025
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="bottom-section p-b-sm"
-          style="background: var(--v-6-gray-100, #ededef)"
-        >
-          <div class="container">
-            <div class="row">
-              <div class="col-md-6">
-                <h2 class="h4">About</h2>
-                <ul class="list-unstyled">
-                  <li>
-                    <a
-                      class="no-underline color-black"
-                      href="https://cdt.ca.gov/digitalID/"
-                      >Digital ID Project</a
-                    >
-                  </li>
-                  <!-- <li><a class="no-underline color-black" href="">Contact us</a></li> -->
-                </ul>
-                <div>
-                  <a href="https://cdt.ca.gov/" class="no-underline color-black"
-                    >California Department of Technology</a
-                  >
-                </div>
-              </div>
-              <div class="col-md-6">
-                <h2 class="h4">State Strategic plans</h2>
-                <ul class="list-unstyled">
-                  <li>
-                    <a
-                      class="no-underline color-black"
-                      href="https://digitalstrategy.cdt.ca.gov/index.html"
-                      >Digital Strategy</a
-                    >
-                  </li>
-                  <li>
-                    <a
-                      class="no-underline color-black"
-                      href="https://cdt.ca.gov/wp-content/uploads/2023/08/Bridge-to-the-Future.pdf"
-                      >Bridge to the Future</a
-                    >
-                  </li>
-                  <li>
-                    <a
-                      class="no-underline color-black"
-                      href="https://cdt.ca.gov/wp-content/uploads/2021/10/Cybersecurity_Strategy_Plan_FINAL.pdf"
-                      >Information Security Roadmap — Cal-Secure</a
-                    >
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-    <!-- Global Footer -->
-    <footer id="footer" class="global-footer">
-      <div class="container">
-        <div class="d-flex">
-          <a href="https://ca.gov" class="cagov-logo">
-            <span class="sr-only">CA.gov</span>
-            <span class="ca-gov-logo-svg"></span>
-          </a>
-          <ul class="footer-links">
-            <li>
-              <a href="https://cdt.ca.gov/conditions-of-use/"
-                >Conditions of use</a
-              >
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/privacy-policy/">Privacy policy</a>
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/accessibility/"> Accessibility </a>
-            </li>
-              <li>
-                <a href="/es/website-accessibility-certification-es.html">Website
-                  Accessibility Certification</a>
-              </li>
-            <li>
-              <a href="sitemap.html">Sitemap</a>
-            </li>
-          </ul>
-          <ul class="socialsharer-container">
-            <li>
-              <a
-                href="https://github.com/Office-of-Digital-Innovation/California-State-Web-Template"
-              >
-                <span class="ca-gov-icon-github" aria-hidden="true"></span>
-                <span class="sr-only">GitHub</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <!-- Copyright Statement -->
-      <div class="copyright">
-        <div class="container text-right">
-          Copyright &copy;
-          <span id="thisyear">
-            <script>
-              document
-                .getElementById("thisyear")
-                .appendChild(document.createTextNode(new Date().getFullYear()));
-            </script>
-          </span>
-          State of California
-        </div>
-      </div>
-      <button class="return-top">
-        <span class="sr-only">Back to top</span>
-      </button>
-    </footer>
-    <!-- Extra Decorative Content -->
-    <div class="decoration-last">&nbsp;</div>
-  </body>
-</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..f55d1c1
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1718 @@
+{
+  "name": "cdt-digital-id-strategy",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "cdt-digital-id-strategy",
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "@11ty/eleventy": "^3.1.2",
+        "nunjucks": "^3.2.4",
+        "prettier": "^3.6.2"
+      }
+    },
+    "node_modules/@11ty/dependency-tree": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@11ty/dependency-tree/-/dependency-tree-4.0.0.tgz",
+      "integrity": "sha512-PTOnwM8Xt+GdJmwRKg4pZ8EKAgGoK7pedZBfNSOChXu8MYk2FdEsxdJYecX4t62owpGw3xK60q9TQv/5JI59jw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-utils": "^2.0.1"
+      }
+    },
+    "node_modules/@11ty/dependency-tree-esm": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@11ty/dependency-tree-esm/-/dependency-tree-esm-2.0.2.tgz",
+      "integrity": "sha512-kSTmXneksQLBhwsfqjxiSi9ecRKENXmRtT5RG95rFoWSI8kkwLcGlYpoXsPkCD9uQwSU1rmDzXBDnqUJlWaIyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-utils": "^2.0.7",
+        "acorn": "^8.15.0",
+        "dependency-graph": "^1.0.0",
+        "normalize-path": "^3.0.0"
+      }
+    },
+    "node_modules/@11ty/eleventy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-3.1.2.tgz",
+      "integrity": "sha512-IcsDlbXnBf8cHzbM1YBv3JcTyLB35EK88QexmVyFdVJVgUU6bh9g687rpxryJirHzo06PuwnYaEEdVZQfIgRGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/dependency-tree": "^4.0.0",
+        "@11ty/dependency-tree-esm": "^2.0.0",
+        "@11ty/eleventy-dev-server": "^2.0.8",
+        "@11ty/eleventy-plugin-bundle": "^3.0.6",
+        "@11ty/eleventy-utils": "^2.0.7",
+        "@11ty/lodash-custom": "^4.17.21",
+        "@11ty/posthtml-urls": "^1.0.1",
+        "@11ty/recursive-copy": "^4.0.2",
+        "@sindresorhus/slugify": "^2.2.1",
+        "bcp-47-normalize": "^2.3.0",
+        "chokidar": "^3.6.0",
+        "debug": "^4.4.1",
+        "dependency-graph": "^1.0.0",
+        "entities": "^6.0.1",
+        "filesize": "^10.1.6",
+        "gray-matter": "^4.0.3",
+        "iso-639-1": "^3.1.5",
+        "js-yaml": "^4.1.0",
+        "kleur": "^4.1.5",
+        "liquidjs": "^10.21.1",
+        "luxon": "^3.6.1",
+        "markdown-it": "^14.1.0",
+        "minimist": "^1.2.8",
+        "moo": "^0.5.2",
+        "node-retrieve-globals": "^6.0.1",
+        "nunjucks": "^3.2.4",
+        "picomatch": "^4.0.2",
+        "please-upgrade-node": "^3.2.0",
+        "posthtml": "^0.16.6",
+        "posthtml-match-helper": "^2.0.3",
+        "semver": "^7.7.2",
+        "slugify": "^1.6.6",
+        "tinyglobby": "^0.2.14"
+      },
+      "bin": {
+        "eleventy": "cmd.cjs"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@11ty/eleventy-dev-server": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-dev-server/-/eleventy-dev-server-2.0.8.tgz",
+      "integrity": "sha512-15oC5M1DQlCaOMUq4limKRYmWiGecDaGwryr7fTE/oM9Ix8siqMvWi+I8VjsfrGr+iViDvWcH/TVI6D12d93mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-utils": "^2.0.1",
+        "chokidar": "^3.6.0",
+        "debug": "^4.4.0",
+        "finalhandler": "^1.3.1",
+        "mime": "^3.0.0",
+        "minimist": "^1.2.8",
+        "morphdom": "^2.7.4",
+        "please-upgrade-node": "^3.2.0",
+        "send": "^1.1.0",
+        "ssri": "^11.0.0",
+        "urlpattern-polyfill": "^10.0.0",
+        "ws": "^8.18.1"
+      },
+      "bin": {
+        "eleventy-dev-server": "cmd.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@11ty/eleventy-plugin-bundle": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-bundle/-/eleventy-plugin-bundle-3.0.7.tgz",
+      "integrity": "sha512-QK1tRFBhQdZASnYU8GMzpTdsMMFLVAkuU0gVVILqNyp09xJJZb81kAS3AFrNrwBCsgLxTdWHJ8N64+OTTsoKkA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-utils": "^2.0.2",
+        "debug": "^4.4.0",
+        "posthtml-match-helper": "^2.0.3"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@11ty/eleventy-utils": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-2.0.7.tgz",
+      "integrity": "sha512-6QE+duqSQ0GY9rENXYb4iPR4AYGdrFpqnmi59tFp9VrleOl0QSh8VlBr2yd6dlhkdtj7904poZW5PvGr9cMiJQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@11ty/lodash-custom": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/@11ty/lodash-custom/-/lodash-custom-4.17.21.tgz",
+      "integrity": "sha512-Mqt6im1xpb1Ykn3nbcCovWXK3ggywRJa+IXIdoz4wIIK+cvozADH63lexcuPpGS/gJ6/m2JxyyXDyupkMr5DHw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@11ty/posthtml-urls": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@11ty/posthtml-urls/-/posthtml-urls-1.0.1.tgz",
+      "integrity": "sha512-6EFN/yYSxC/OzYXpq4gXDyDMlX/W+2MgCvvoxf11X1z76bqkqFJ8eep5RiBWfGT5j0323a1pwpelcJJdR46MCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "evaluate-value": "^2.0.0",
+        "http-equiv-refresh": "^2.0.1",
+        "list-to-array": "^1.1.0",
+        "parse-srcset": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@11ty/recursive-copy": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@11ty/recursive-copy/-/recursive-copy-4.0.2.tgz",
+      "integrity": "sha512-174nFXxL/6KcYbLYpra+q3nDbfKxLxRTNVY1atq2M1pYYiPfHse++3IFNl8mjPFsd7y2qQjxLORzIjHMjL3NDQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "errno": "^1.0.0",
+        "junk": "^3.1.0",
+        "maximatch": "^0.1.0",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sindresorhus/slugify": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-2.2.1.tgz",
+      "integrity": "sha512-MkngSCRZ8JdSOCHRaYd+D01XhvU3Hjy6MGl06zhOk614hp9EOAp5gIkBeQg7wtmxpitU6eAL4kdiRMcJa2dlrw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@sindresorhus/transliterate": "^1.0.0",
+        "escape-string-regexp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@sindresorhus/transliterate": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/transliterate/-/transliterate-1.6.0.tgz",
+      "integrity": "sha512-doH1gimEu3A46VX6aVxpHTeHrytJAG6HgdxntYnCFiIFHEM/ZGpG8KiZGBChchjQmG0XFIBL552kBTjVcMZXwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/a-sync-waterfall": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
+      "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/acorn": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-walk": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
+      "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.11.0"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/anymatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/array-differ": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
+      "integrity": "sha512-LeZY+DZDRnvP7eMuQ6LHfCzUGxAAIViUBliK24P3hWXL6y4SortgR6Nim6xrkfSLlmH0+k+9NYNwVC2s53ZrYQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/array-union": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/arrify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+      "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/bcp-47": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bcp-47/-/bcp-47-2.1.0.tgz",
+      "integrity": "sha512-9IIS3UPrvIa1Ej+lVDdDwO7zLehjqsaByECw0bu2RRGP73jALm6FYbzI5gWbgHLvNdkvfXB5YrSbocZdOS0c0w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/bcp-47-match": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-2.0.3.tgz",
+      "integrity": "sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/bcp-47-normalize": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/bcp-47-normalize/-/bcp-47-normalize-2.3.0.tgz",
+      "integrity": "sha512-8I/wfzqQvttUFz7HVJgIZ7+dj3vUaIyIxYXaTRP1YWoSDfzt6TUmxaKZeuXR62qBmYr+nvuWINFRl6pZ5DlN4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bcp-47": "^2.0.0",
+        "bcp-47-match": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/dependency-graph": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-1.0.0.tgz",
+      "integrity": "sha512-cW3gggJ28HZ/LExwxP2B++aiKxhJXMSIt9K48FOXQkm+vuG5gyatXnLsONRJdzO/7VfjDIiaOOa/bs4l464Lwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/errno": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-1.0.0.tgz",
+      "integrity": "sha512-3zV5mFS1E8/1bPxt/B0xxzI1snsg3uSCIh6Zo1qKg6iMw93hzPANk9oBFzSFBFrwuVoQuE3rLoouAUfwOAj1wQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/esm-import-transformer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/esm-import-transformer/-/esm-import-transformer-3.0.5.tgz",
+      "integrity": "sha512-1GKLvfuMnnpI75l8c6sHoz0L3Z872xL5akGuBudgqTDPv4Vy6f2Ec7jEMKTxlqWl/3kSvNbHELeimJtnqgYniw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.15.0"
+      }
+    },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/evaluate-value": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/evaluate-value/-/evaluate-value-2.0.0.tgz",
+      "integrity": "sha512-VonfiuDJc0z4sOO7W0Pd130VLsXN6vmBWZlrog1mCb/o7o/Nl5Lr25+Kj/nkCCAhG+zqeeGjxhkK9oHpkgTHhQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/filesize": {
+      "version": "10.1.6",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-10.1.6.tgz",
+      "integrity": "sha512-sJslQKU2uM33qH5nqewAwVB2QgR6w1aMNsYUp3aN5rMRyXEwJGmZvaWzeJFNTOXWlHQyBFCWrdj3fV/fsTOX8w==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 10.4.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "2.0.1",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/finalhandler/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/finalhandler/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/gray-matter": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
+      "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-yaml": "^3.13.1",
+        "kind-of": "^6.0.2",
+        "section-matter": "^1.0.0",
+        "strip-bom-string": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/gray-matter/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/gray-matter/node_modules/js-yaml": {
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz",
+      "integrity": "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
+      "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==",
+      "dev": true,
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.2",
+        "domutils": "^2.8.0",
+        "entities": "^3.0.1"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/entities": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/http-equiv-refresh": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-equiv-refresh/-/http-equiv-refresh-2.0.1.tgz",
+      "integrity": "sha512-XJpDL/MLkV3dKwLzHwr2dY05dYNfBNlyPu4STQ8WvKCFdc6vC5tPXuq28of663+gHVg03C+16pHHs/+FmmDjcw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-json": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-json/-/is-json-2.0.1.tgz",
+      "integrity": "sha512-6BEnpVn1rcf3ngfmViLM6vjUjGErbdrL4rwlv+u1NO1XO8kqT4YGL8+19Q+Z/bas8tY90BTWMk2+fW1g6hQjbA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/iso-639-1": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/iso-639-1/-/iso-639-1-3.1.5.tgz",
+      "integrity": "sha512-gXkz5+KN7HrG0Q5UGqSMO2qB9AsbEeyLP54kF1YrMsIxmu+g4BdB7rflReZTSTZGpfj8wywu6pfPBCylPIzGQA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/junk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/junk/-/junk-3.1.0.tgz",
+      "integrity": "sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
+    "node_modules/liquidjs": {
+      "version": "10.24.0",
+      "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.24.0.tgz",
+      "integrity": "sha512-TAUNAdgwaAXjjcUFuYVJm9kOVH7zc0mTKxsG9t9Lu4qdWjB2BEblyVIYpjWcmJLMGgiYqnGNJjpNMHx0gp/46A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^10.0.0"
+      },
+      "bin": {
+        "liquid": "bin/liquid.js",
+        "liquidjs": "bin/liquid.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/liquidjs"
+      }
+    },
+    "node_modules/list-to-array": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/list-to-array/-/list-to-array-1.1.0.tgz",
+      "integrity": "sha512-+dAZZ2mM+/m+vY9ezfoueVvrgnHIGi5FvgSymbIgJOFwiznWyA59mav95L+Mc6xPtL3s9gm5eNTlNtxJLbNM1g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/luxon": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.7.2.tgz",
+      "integrity": "sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/markdown-it/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/maximatch": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz",
+      "integrity": "sha512-9ORVtDUFk4u/NFfo0vG/ND/z7UQCVZBL539YW0+U1I7H1BkZwizcPx5foFv7LCPcBnm2U6RjFnQOsIvN4/Vm2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-differ": "^1.0.0",
+        "array-union": "^1.0.1",
+        "arrify": "^1.0.0",
+        "minimatch": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mime": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
+      "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.1.tgz",
+      "integrity": "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/moo": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
+      "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/morphdom": {
+      "version": "2.7.7",
+      "resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.7.tgz",
+      "integrity": "sha512-04GmsiBcalrSCNmzfo+UjU8tt3PhZJKzcOy+r1FlGA7/zri8wre3I1WkYN9PT3sIeIKfW9bpyElA+VzOg2E24g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/node-retrieve-globals": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/node-retrieve-globals/-/node-retrieve-globals-6.0.1.tgz",
+      "integrity": "sha512-j0DeFuZ/Wg3VlklfbxUgZF/mdHMTEiEipBb3q0SpMMbHaV3AVfoUQF8UGxh1s/yjqO0TgRZd4Pi/x2yRqoQ4Eg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.1",
+        "acorn-walk": "^8.3.4",
+        "esm-import-transformer": "^3.0.3"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nunjucks": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.4.tgz",
+      "integrity": "sha512-26XRV6BhkgK0VOxfbU5cQI+ICFUtMLixv1noZn1tGU38kQH5A5nmmbk/O45xdyBhD1esk47nKrY0mvQpZIhRjQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "a-sync-waterfall": "^1.0.0",
+        "asap": "^2.0.3",
+        "commander": "^5.1.0"
+      },
+      "bin": {
+        "nunjucks-precompile": "bin/precompile"
+      },
+      "engines": {
+        "node": ">= 6.9.0"
+      },
+      "peerDependencies": {
+        "chokidar": "^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "chokidar": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/nunjucks/node_modules/commander": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/parse-srcset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/please-upgrade-node": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
+      "integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver-compare": "^1.0.0"
+      }
+    },
+    "node_modules/posthtml": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.7.tgz",
+      "integrity": "sha512-7Hc+IvlQ7hlaIfQFZnxlRl0jnpWq2qwibORBhQYIb0QbNtuicc5ZxvKkVT71HJ4Py1wSZ/3VR1r8LfkCtoCzhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "posthtml-parser": "^0.11.0",
+        "posthtml-render": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/posthtml-match-helper": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/posthtml-match-helper/-/posthtml-match-helper-2.0.3.tgz",
+      "integrity": "sha512-p9oJgTdMF2dyd7WE54QI1LvpBIkNkbSiiECKezNnDVYhGhD1AaOnAkw0Uh0y5TW+OHO8iBdSqnd8Wkpb6iUqmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "posthtml": "^0.16.6"
+      }
+    },
+    "node_modules/posthtml-parser": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.11.0.tgz",
+      "integrity": "sha512-QecJtfLekJbWVo/dMAA+OSwY79wpRmbqS5TeXvXSX+f0c6pW4/SE6inzZ2qkU7oAMCPqIDkZDvd/bQsSFUnKyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "htmlparser2": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/posthtml-render": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/posthtml-render/-/posthtml-render-3.0.0.tgz",
+      "integrity": "sha512-z+16RoxK3fUPgwaIgH9NGnK1HKY9XIDpydky5eQGgAFVXTCSezalv9U2jQuNV+Z9qV1fDWNzldcw4eK0SSbqKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-json": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/readdirp/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/section-matter": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
+      "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+      "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/send": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-1.2.0.tgz",
+      "integrity": "sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.5",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.0",
+        "mime-types": "^3.0.1",
+        "ms": "^2.1.3",
+        "on-finished": "^2.4.1",
+        "range-parser": "^1.2.1",
+        "statuses": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/slugify": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz",
+      "integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/ssri": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-11.0.0.tgz",
+      "integrity": "sha512-aZpUoMN/Jj2MqA4vMCeiKGnc/8SuSyHbGSBdgFbZxP8OJGF/lFkIuElzPxsN0q8TQQ+prw3P4EDfB3TBHHgfXw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/strip-bom-string": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
+      "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/urlpattern-polyfill": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.1.0.tgz",
+      "integrity": "sha512-IGjKp/o0NL3Bso1PymYURCJxMPNAf/ILOpendP9f5B6e1rTJgdgiOvgfoT8VxCAdY+Wisb9uhGaJJf3yZ2V9nw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
index e277629..6fc3df1 100644
--- a/package.json
+++ b/package.json
@@ -3,13 +3,15 @@
   "version": "1.0.0",
   "description": "Digital ID Strategy",
   "scripts": {
-    "start": "watch-http-server"
+    "build": "eleventy",
+    "start": "eleventy --serve"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-  },
-  "dependencies": {
+    "@11ty/eleventy": "^3.1.2",
+    "nunjucks": "^3.2.4",
+    "prettier": "^3.6.2"
   }
 }
diff --git a/src/_includes/bottom-section-es.njk b/src/_includes/bottom-section-es.njk
new file mode 100644
index 0000000..0031971
--- /dev/null
+++ b/src/_includes/bottom-section-es.njk
@@ -0,0 +1,33 @@
+<div class="bottom-section p-b-sm" style="background: var(--v-6-gray-100, #ededef)">
+    <div class="container row">
+        <div class="col-md-6">
+            <h2 class="h4">Sobre Marco de Identidad Digital</h2>
+            <ul class="list-unstyled">
+                <li>
+                    <a class="no-underline color-black" href="https://cdt.ca.gov/digitalID/">Proyecto de Identidad Digital</a>
+                </li>
+                <div>
+                    <a href="https://cdt.ca.gov/" hreflang="en" class="no-underline color-black">Departamento de Tecnología de California</a>
+                </div>
+            </ul>
+        </div>
+        <div class="col-md-6">
+            <h2 class="h4">Planes estratégicos estatales</h2>
+            <ul class="list-unstyled">
+                <li>
+                    <a class="no-underline color-black" href="https://digitalstrategy.cdt.ca.gov/index.html">Estrategia digital</a>
+                </li>
+                <li>
+                    <a class="no-underline color-black" href="https://cdt.ca.gov/wp-content/uploads/2023/08/Bridge-to-the-Future.pdf">Puente
+                        al futuro</a>
+                </li>
+                <li>
+                    <a
+                        class="no-underline color-black"
+                        href="https://cdt.ca.gov/wp-content/uploads/2021/10/Cybersecurity_Strategy_Plan_FINAL.pdf">Hoja de ruta para la seguridad
+                        de la información - Cal-Secure</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/_includes/bottom-section.njk b/src/_includes/bottom-section.njk
new file mode 100644
index 0000000..d6eb8a7
--- /dev/null
+++ b/src/_includes/bottom-section.njk
@@ -0,0 +1,35 @@
+<div class="bottom-section p-b-sm" style="background: var(--v-6-gray-100, #ededef)">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-6">
+                <h2 class="h4">About</h2>
+                <ul class="list-unstyled">
+                    <li>
+                        <a class="no-underline color-black" href="https://cdt.ca.gov/digitalID/">Digital ID Project</a>
+                    </li>
+                    <!-- <li><a class="no-underline color-black" href="">Contact us</a></li> -->
+                </ul>
+                <div>
+                    <a href="https://cdt.ca.gov/" class="no-underline color-black">California Department of Technology</a>
+                </div>
+            </div>
+            <div class="col-md-6">
+                <h2 class="h4">State Strategic plans</h2>
+                <ul class="list-unstyled">
+                    <li>
+                        <a class="no-underline color-black" href="https://digitalstrategy.cdt.ca.gov/index.html">Digital Strategy</a>
+                    </li>
+                    <li>
+                        <a class="no-underline color-black" href="https://cdt.ca.gov/wp-content/uploads/2023/08/Bridge-to-the-Future.pdf">Bridge
+                            to the Future</a>
+                    </li>
+                    <li>
+                        <a
+                            class="no-underline color-black"
+                            href="https://cdt.ca.gov/wp-content/uploads/2021/10/Cybersecurity_Strategy_Plan_FINAL.pdf">Information Security Roadmap —
+                            Cal-Secure</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
\ No newline at end of file
diff --git a/src/_includes/footer-es.njk b/src/_includes/footer-es.njk
new file mode 100644
index 0000000..5be101c
--- /dev/null
+++ b/src/_includes/footer-es.njk
@@ -0,0 +1,52 @@
+<!-- Pie de página global -->
+<footer id="footer" class="global-footer">
+    <div class="container">
+        <div class="d-flex">
+            <a href="https://ca.gov" class="cagov-logo">
+                <span class="sr-only">CA.gov</span>
+                <span class="ca-gov-logo-svg"></span>
+            </a>
+            <ul class="footer-links">
+                <li>
+                    <a href="https://cdt.ca.gov/conditions-of-use/">Condiciones de Uso</a>
+                </li>
+                <li>
+                    <a href="https://cdt.ca.gov/privacy-policy/">Política de privacidad
+                    </a>
+                </li>
+                <li>
+                    <a href="https://cdt.ca.gov/accessibility/">Accesibilidad</a>
+                </li>
+                <li>
+                    <a href="/es/website-accessibility-certification-es.html">Certificación de accesibilidad del sitio web</a>
+                </li>
+                <li>
+                    <a href="sitemap-es.html">Mapa del sitio</a>
+                </li>
+            </ul>
+            <ul class="socialsharer-container">
+                <li>
+                    <a href="https://github.com/Office-of-Digital-Innovation/California-State-Web-Template">
+                        <span class="ca-gov-icon-github" aria-hidden="true"></span>
+                        <span class="sr-only">GitHub</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <!-- Declaración de derechos de autor -->
+    <div class="copyright">
+        <div class="container text-right">
+            Copyright &copy;
+            <span id="thisyear">
+                <script>
+                    document.getElementById("thisyear").appendChild(document.createTextNode(new Date().getFullYear()));
+                </script>
+            </span>
+            Estado de California
+        </div>
+    </div>
+    <button class="return-top">
+        <span class="sr-only">Volver arriba</span>
+    </button>
+</footer>
\ No newline at end of file
diff --git a/src/_includes/footer.njk b/src/_includes/footer.njk
new file mode 100644
index 0000000..01aa4bf
--- /dev/null
+++ b/src/_includes/footer.njk
@@ -0,0 +1,53 @@
+<!-- Global Footer -->
+<footer id="footer" class="global-footer">
+    <div class="container">
+        <div class="d-flex">
+            <a href="https://ca.gov" class="cagov-logo">
+                <span class="sr-only">CA.gov</span>
+                <span class="ca-gov-logo-svg"></span>
+            </a>
+            <ul class="footer-links">
+                <li>
+                    <a href="https://cdt.ca.gov/conditions-of-use/">Conditions of use</a>
+                </li>
+                <li>
+                    <a href="https://cdt.ca.gov/privacy-policy/">Privacy policy</a>
+                </li>
+                <li>
+                    <a href="https://cdt.ca.gov/accessibility/">
+                        Accessibility
+                    </a>
+                </li>
+                <li>
+                    <a href="/website-accessibility-certification.html">Website Accessibility Certification</a>
+                </li>
+                <li>
+                    <a href="sitemap.html">Sitemap</a>
+                </li>
+            </ul>
+            <ul class="socialsharer-container">
+                <li>
+                    <a href="https://github.com/Office-of-Digital-Innovation/California-State-Web-Template">
+                        <span class="ca-gov-icon-github" aria-hidden="true"></span>
+                        <span class="sr-only">GitHub</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <!-- Copyright Statement -->
+    <div class="copyright">
+        <div class="container text-right">
+            Copyright &copy;
+            <span id="thisyear">
+                <script>
+                    document.getElementById("thisyear").appendChild(document.createTextNode(new Date().getFullYear()));
+                </script>
+            </span>
+            State of California
+        </div>
+    </div>
+    <button class="return-top">
+        <span class="sr-only">Back to top</span>
+    </button>
+</footer>
\ No newline at end of file
diff --git a/src/_includes/nav-es.njk b/src/_includes/nav-es.njk
new file mode 100644
index 0000000..8eb3ecb
--- /dev/null
+++ b/src/_includes/nav-es.njk
@@ -0,0 +1,16 @@
+<nav id="navigation" class="main-navigation dropdown" aria-label="Main navigation">
+    <ul id="nav_list" class="top-level-nav">
+        <li class="nav-item">
+            <a class="first-level-link" href="/es/primary-elements-es.html">Elementos primarios</a>
+        </li>
+        <li class="nav-item">
+            <a href="/es/accomplishments-es.html" class="first-level-link">Logros</a>
+        </li>
+        <li class="nav-item">
+            <a class="first-level-link" href="/es/projects-es.html">Proyectos y esfuerzos de sinergia</a>
+        </li>
+        <li class="nav-item">
+            <a href="/es/roadmap-es.html" class="first-level-link">Hoja de ruta</a>
+        </li>
+    </ul>
+</nav>
\ No newline at end of file
diff --git a/src/_includes/nav.njk b/src/_includes/nav.njk
new file mode 100644
index 0000000..67de32e
--- /dev/null
+++ b/src/_includes/nav.njk
@@ -0,0 +1,16 @@
+<nav id="navigation" class="main-navigation dropdown" aria-label="Main navigation">
+    <ul id="nav_list" class="top-level-nav">
+        <li class="nav-item">
+            <a class="first-level-link" href="/primary-elements.html">Primary elements</a>
+        </li>
+        <li class="nav-item">
+            <a href="/accomplishments.html" class="first-level-link">Accomplishments</a>
+        </li>
+        <li class="nav-item">
+            <a class="first-level-link" href="/projects.html">Projects and synergy efforts</a>
+        </li>
+        <li class="nav-item">
+            <a href="/roadmap.html" class="first-level-link">Roadmap</a>
+        </li>
+    </ul>
+</nav>
\ No newline at end of file
diff --git a/accomplishments.html b/src/accomplishments.html
similarity index 74%
rename from accomplishments.html
rename to src/accomplishments.html
index 6408988..62709c0 100644
--- a/accomplishments.html
+++ b/src/accomplishments.html
@@ -1,140 +1,104 @@
-<!DOCTYPE html>
+---
+title: Accomplishments
+description: CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification.
+canonical: https://digitalidstrategy.cdt.ca.gov/accomplishments.html
+shareimage: https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png
+alternatelink: https://digitalidstrategy.cdt.ca.gov/es/accomplishments-es.html
+permalink: /accomplishments.html
+---
+
+<!doctype html>
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />
-    <title>California State Digital ID Strategy</title>
+    <title>{{ title }}</title>
     <meta name="Author" content="State of California" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="HandheldFriendly" content="True" />
     <meta name="MobileOptimized" content="320" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <link
-      rel="alternate"
-      hreflang="es"
-      href="https://digitalidstrategy.cdt.ca.gov/es/accomplishments-es.html"
-    />
+      content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="alternate" hreflang="es" href="{{alternatelink}}" />
 
     <!-- Title Tags -->
-    <meta name="title" content="California State Digital ID Strategy" />
-    <meta property="og:title" content="California State Digital ID Strategy" />
-    <meta
-      property="twitter:title"
-      content="California State Digital ID Strategy"
-    />
+    <meta name="title" content="{{ title }}" />
+    <meta property="og:title" content="{{ title }}" />
+    <meta property="twitter:title" content="{{ title }}" />
 
     <!-- Description Tags -->
-    <meta
-      name="description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
-    <meta
-      property="og:description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
-    <meta
-      property="twitter:description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
+    <meta name="description" content="{{description}}" />
+    <meta property="og:description" content="{{description}}" />
+    <meta property="twitter:description" content="{{description}}" />
 
     <!-- Canonical link, improves SEO -->
-    <link
-      href="https://digitalidstrategy.cdt.ca.gov/accomplishments.html"
-      rel="canonical"
-    />
-    <meta
-      property="og:url"
-      content="https://digitalidstrategy.cdt.ca.gov/accomplishments.html"
-    />
-    <meta
-      property="twitter:url"
-      content="https://digitalidstrategy.cdt.ca.gov/accomplishments.html"
-    />
+    <link href="{{canonical}}" rel="canonical" />
+    <meta property="og:url" content="{{canonical}}" />
+    <meta property="twitter:url" content="{{canonical}}" />
     <!-- END Canonical link -->
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
-    <meta
-      property="og:image"
-      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png"
-    />
+    <meta property="og:image" content="{{shareimage}}" />
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
-    <meta
-      property="twitter:image"
-      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png"
-    />
-
+    <meta property="twitter:image" content="{{shareimage}}" />
     <!-- State Template CDN CSS -->
     <link
       href="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/css/cagov.core.min.css"
       rel="stylesheet"
       integrity="sha256-f2k3x0x/l4G+mg5fxnV+Q37/8RoMOoMOWphHJ4vWn6g="
-      crossorigin="anonymous"
-    />
+      crossorigin="anonymous" />
     <!-- State Template JavaScript CDN -->
     <script
       src="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/js/cagov.core.min.js"
       integrity="sha256-MRHAOqwc4jjHeTGa/9mcdxAv3aVG+lQ7eJ9DPa+Gr/k="
       defer
-      crossorigin="anonymous"
-    ></script>
-    <link rel="stylesheet" href="css/custom.css" />
+      crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="/css/custom.css" />
     <!-- END STATE_TEMPLATE -->
 
     <link
       rel="apple-touch-icon-precomposed"
       sizes="100x100"
-      href="images/apple-touch-icon-precomposed.png"
-    />
+      href="images/apple-touch-icon-precomposed.png" />
     <link
       rel="icon"
       sizes="192x192"
-      href="images/apple-touch-icon-192x192.png"
-    />
+      href="images/apple-touch-icon-192x192.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="180x180"
-      href="images/apple-touch-icon-180x180.png"
-    />
+      href="images/apple-touch-icon-180x180.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="152x152"
-      href="images/apple-touch-icon-152x152.png"
-    />
+      href="images/apple-touch-icon-152x152.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="144x144"
-      href="images/apple-touch-icon-144x144.png"
-    />
+      href="images/apple-touch-icon-144x144.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="120x120"
-      href="images/apple-touch-icon-120x120.png"
-    />
+      href="images/apple-touch-icon-120x120.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="114x114"
-      href="images/apple-touch-icon-114x114.png"
-    />
+      href="images/apple-touch-icon-114x114.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="72x72"
-      href="images/apple-touch-icon-72x72.png"
-    />
+      href="images/apple-touch-icon-72x72.png" />
     <link
       rel="apple-touch-icon-precomposed"
-      href="images/apple-touch-icon-57x57.png"
-    />
+      href="images/apple-touch-icon-57x57.png" />
     <link rel="shortcut icon" href="images/apple-touch-icon-57x57.png" />
     <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
     <link
       rel="shortcut icon"
-      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png"
-    />
+      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png" />
     <!-- Statewide Alerts Server -->
     <script defer src="https://alert.cdt.ca.gov"></script>
     <!-- BEGIN Google Tag Manager -->
@@ -199,7 +163,7 @@
           <div class="flex-row">
             <div class="social-media-links">
               <div class="header-cagov-logo">
-                <a href="https://ca.gov">
+                <a href="https://www.ca.gov">
                   <span class="sr-only">CA.gov</span>
                   <span class="ca-gov-logo-svg"></span>
                 </a>
@@ -211,7 +175,7 @@
             </div>
             <div class="translation-link">
               <a
-                href="es/accomplishments-es.html"
+                href="{{alternatelink}}"
                 hreflang="es"
                 rel="alternate"
                 lang="es"
@@ -225,13 +189,12 @@
       <div class="section-default">
         <div class="branding">
           <div class="header-organization-banner">
-            <a href="index.html">
+            <a href="/">
               <div class="logo-assets">
                 <img
-                  src="images/blue-gold-fingerprint.png"
+                  src="/images/blue-gold-fingerprint.png"
                   alt="Fingerprint icon"
-                  width="67px"
-                />
+                  width="67px" />
                 <div class="logo-text">
                   <span class="logo-state">California State</span>
                   <span class="logo-dept">Digital ID Framework</span>
@@ -251,8 +214,7 @@
             id="nav-icon3"
             class="mobile-control toggle-menu"
             aria-expanded="false"
-            aria-controls="navigation"
-          >
+            aria-controls="navigation">
             <span></span>
             <span></span>
             <span></span>
@@ -271,8 +233,7 @@
                 name="q"
                 aria-labelledby="SearchInput"
                 placeholder="Search"
-                class="search-textfield"
-              />
+                class="search-textfield" />
               <button type="submit" class="gsc-search-button">
                 <span class="ca-gov-icon-search" aria-hidden="true"></span>
                 <span class="sr-only">Submit</span>
@@ -280,8 +241,7 @@
               <div class="close-search-btn">
                 <button
                   class="close-search gsc-clear-button border-0 bg-transparent pos-rel"
-                  type="reset"
-                >
+                  type="reset">
                   <span class="sr-only">Close</span>
                 </button>
               </div>
@@ -289,32 +249,7 @@
           </div>
         </div>
         <!-- navigation types -->
-        <nav
-          id="navigation"
-          class="main-navigation dropdown"
-          aria-label="Main navigation"
-        >
-          <ul id="nav_list" class="top-level-nav">
-            <li class="nav-item">
-              <a class="first-level-link" href="primary-elements.html"
-                >Primary elements</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="accomplishments.html" class="first-level-link"
-                >Accomplishments</a
-              >
-            </li>
-            <li class="nav-item">
-              <a class="first-level-link" href="projects.html"
-                >Projects and synergy efforts</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="roadmap.html" class="first-level-link">Roadmap</a>
-            </li>
-          </ul>
-        </nav>
+        {% include "nav.njk" %}
       </div>
     </header>
     <div id="main-content" class="main-content">
@@ -335,9 +270,8 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Accomplishments</h1>
           <div class="flex primary-card m-b-lg">
             <div class="p-r">
               <img
-                src="images/fingerprint-check.svg"
-                alt="Fingerprint with checkmark icon"
-              />
+                src="/images/fingerprint-check.svg"
+                alt="Fingerprint with checkmark icon" />
             </div>
             <div class="p-r-lg">
               <strong
@@ -384,9 +318,8 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Accomplishments</h1>
           <div class="flex primary-card m-b-lg">
             <div class="p-r">
               <img
-                src="images/fingerprint-check.svg"
-                alt="Fingerprint with checkmark icon"
-              />
+                src="/images/fingerprint-check.svg"
+                alt="Fingerprint with checkmark icon" />
             </div>
             <div class="p-r-lg">
               <strong
@@ -407,9 +340,8 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Accomplishments</h1>
           <div class="flex primary-card m-b-lg">
             <div class="p-r">
               <img
-                src="images/pro-services.svg"
-                alt="Professional services icon"
-              />
+                src="/images/pro-services.svg"
+                alt="Professional services icon" />
             </div>
             <div class="p-r-lg">
               <strong
@@ -441,7 +373,7 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Accomplishments</h1>
 
           <div class="flex primary-card m-b-lg">
             <div class="p-r">
-              <img src="images/users-dialog.svg" alt="User dialog icon" />
+              <img src="/images/users-dialog.svg" alt="User dialog icon" />
             </div>
             <div class="p-r-lg">
               <strong
@@ -475,7 +407,7 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Accomplishments</h1>
 
           <div class="flex primary-card m-b-lg">
             <div class="p-r">
-              <img src="images/flowchart.svg" alt="Flowchart icon" />
+              <img src="/images/flowchart.svg" alt="Flowchart icon" />
             </div>
             <div class="p-r-lg">
               <strong
@@ -519,59 +451,8 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Accomplishments</h1>
             </div>
           </div>
         </div>
-        <div
-          class="bottom-section p-b-sm"
-          style="background: var(--v-6-gray-100, #ededef)"
-        >
-        <div class="container">
-          <div class="row">
-            <div class="col-md-6">
-              <h2 class="h4">About</h2>
-              <ul class="list-unstyled">
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/digitalID/"
-                    >Digital ID Project</a
-                  >
-                </li>
-                <!-- <li><a class="no-underline color-black" href="">Contact us</a></li> -->
-              </ul>
-              <div>
-                <a href="https://cdt.ca.gov/" class="no-underline color-black"
-                  >California Department of Technology</a
-                >
-              </div>
-            </div>
-            <div class="col-md-6">
-              <h2 class="h4">State Strategic plans</h2>
-              <ul class="list-unstyled">
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://digitalstrategy.cdt.ca.gov/index.html"
-                    >Digital Strategy</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/wp-content/uploads/2023/08/Bridge-to-the-Future.pdf"
-                    >Bridge to the Future</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/wp-content/uploads/2021/10/Cybersecurity_Strategy_Plan_FINAL.pdf"
-                    >Information Security Roadmap — Cal-Secure</a
-                  >
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-        </div>
+        <!-- Global Bottom Section -->
+        {% include "bottom-section.njk" %}
       </main>
     </div>
     <!-- Global Footer -->
@@ -595,8 +476,9 @@ <h2 class="h4">State Strategic plans</h2>
               <a href="https://cdt.ca.gov/accessibility/"> Accessibility </a>
             </li>
             <li>
-              <a href="/website-accessibility-certification.html">Website
-                Accessibility Certification</a>
+              <a href="/website-accessibility-certification.html"
+                >Website Accessibility Certification</a
+              >
             </li>
             <li>
               <a href="sitemap.html">Sitemap</a>
@@ -605,8 +487,7 @@ <h2 class="h4">State Strategic plans</h2>
           <ul class="socialsharer-container">
             <li>
               <a
-                href="https://github.com/Office-of-Digital-Innovation/California-State-Web-Template"
-              >
+                href="https://github.com/Office-of-Digital-Innovation/California-State-Web-Template">
                 <span class="ca-gov-icon-github" aria-hidden="true"></span>
                 <span class="sr-only">GitHub</span>
               </a>
diff --git a/css/custom.css b/src/css/custom.css
similarity index 97%
rename from css/custom.css
rename to src/css/custom.css
index 15ef5c1..c939a81 100644
--- a/css/custom.css
+++ b/src/css/custom.css
@@ -98,6 +98,11 @@ ul {
   }
 }
 
+.bottom-section {
+  display: flex;
+  justify-content: center;
+}
+
 .bottom-section h2 {
   border-width: 0 0 1px 0;
   border-color: #046b99;
diff --git a/CDT-Digital-ID-Framework-Strategy.pdf b/src/docs/CDT-Digital-ID-Framework-Strategy.pdf
similarity index 100%
rename from CDT-Digital-ID-Framework-Strategy.pdf
rename to src/docs/CDT-Digital-ID-Framework-Strategy.pdf
diff --git a/CDT-Marco-de-Identidad-Digital.pdf b/src/docs/CDT-Marco-de-Identidad-Digital.pdf
similarity index 100%
rename from CDT-Marco-de-Identidad-Digital.pdf
rename to src/docs/CDT-Marco-de-Identidad-Digital.pdf
diff --git a/es/accomplishments-es.html b/src/es/accomplishments-es.html
similarity index 67%
rename from es/accomplishments-es.html
rename to src/es/accomplishments-es.html
index b7f5b57..0efc082 100644
--- a/es/accomplishments-es.html
+++ b/src/es/accomplishments-es.html
@@ -1,140 +1,109 @@
-<!DOCTYPE html>
+---
+title: Logros
+description: CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas.
+canonical: https://digitalidstrategy.cdt.ca.gov/es/accomplishments-es.html
+shareimage: https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png
+alternatelink: https://digitalidstrategy.cdt.ca.gov/accomplishments.html
+permalink: /es/accomplishments-es.html
+---
+
+<!doctype html>
 <html lang="es-US">
   <head>
     <meta charset="utf-8" />
-    <title>Estrategia de identificación digital del estado de California</title>
+    <title>{{ title }}</title>
     <meta name="Author" content="State of California" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="HandheldFriendly" content="True" />
     <meta name="MobileOptimized" content="320" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <link
-      rel="alternate"
-      hreflang="en"
-      href="https://digitalidstrategy.cdt.ca.gov/accomplishments.html"
-    />
+      content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="alternate" hreflang="en" href="{{ alternatelink }}" />
 
     <!-- Title Tags -->
-    <meta name="title" content="California marco de identidad digital" />
-    <meta property="og:title" content="California marco de identidad digital" />
-    <meta
-      property="twitter:title"
-      content="California marco de identidad digital"
-    />
+    <meta name="title" content="{{ title }}" />
+    <meta property="og:title" content="{{ title }}" />
+    <meta property="twitter:title" content="{{ title }}" />
 
     <!-- Description Tags -->
-    <meta
-      name="description"
-      content="CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas."
-    />
-    <meta
-      property="og:description"
-      content="CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas."
-    />
-    <meta
-      property="twitter:description"
-      content="CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas."
-    />
+    <meta name="description" content="{{ description }}" />
+    <meta property="og:description" content="{{ description }}" />
+    <meta property="twitter:description" content="{{ description }}" />
 
     <!-- Canonical link & share links, improves SEO -->
-    <link
-      href="https://digitalidstrategy.cdt.ca.gov/es/accomplishments-es.html"
-      rel="canonical"
-    />
-    <meta
-      property="og:url"
-      content="https://digitalidstrategy.cdt.ca.gov/es/accomplishments-es.html/"
-    />
-    <meta
-      property="twitter:url"
-      content="https://digitalidstrategy.cdt.ca.gov/es/accomplishments-es.html/"
-    />
+    <link href="{{ canonical }}" rel="canonical" />
+    <meta property="og:url" content="{{ canonical }}" />
+    <meta property="twitter:url" content="{{ canonical }}" />
     <!-- END Canonical link -->
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta
       property="og:image"
-      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png" />
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
     <meta
       property="twitter:image"
-      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png" />
 
     <!-- State Template CDN CSS -->
     <link
       href="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/css/cagov.core.min.css"
       rel="stylesheet"
       integrity="sha256-f2k3x0x/l4G+mg5fxnV+Q37/8RoMOoMOWphHJ4vWn6g="
-      crossorigin="anonymous"
-    />
+      crossorigin="anonymous" />
     <!-- State Template JavaScript CDN -->
     <script
       src="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/js/cagov.core.min.js"
       integrity="sha256-MRHAOqwc4jjHeTGa/9mcdxAv3aVG+lQ7eJ9DPa+Gr/k="
       defer
-      crossorigin="anonymous"
-    ></script>
-    <link rel="stylesheet" href="../css/custom.css" />
+      crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="/css/custom.css" />
     <!-- END STATE_TEMPLATE -->
 
     <link
       rel="apple-touch-icon-precomposed"
       sizes="100x100"
-      href="images/apple-touch-icon-precomposed.png"
-    />
+      href="/images/apple-touch-icon-precomposed.png" />
     <link
       rel="icon"
       sizes="192x192"
-      href="images/apple-touch-icon-192x192.png"
-    />
+      href="/images/apple-touch-icon-192x192.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="180x180"
-      href="images/apple-touch-icon-180x180.png"
-    />
+      href="/images/apple-touch-icon-180x180.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="152x152"
-      href="images/apple-touch-icon-152x152.png"
-    />
+      href="/images/apple-touch-icon-152x152.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="144x144"
-      href="images/apple-touch-icon-144x144.png"
-    />
+      href="/images/apple-touch-icon-144x144.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="120x120"
-      href="images/apple-touch-icon-120x120.png"
-    />
+      href="/images/apple-touch-icon-120x120.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="114x114"
-      href="images/apple-touch-icon-114x114.png"
-    />
+      href="/images/apple-touch-icon-114x114.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="72x72"
-      href="images/apple-touch-icon-72x72.png"
-    />
+      href="/images/apple-touch-icon-72x72.png" />
     <link
       rel="apple-touch-icon-precomposed"
-      href="images/apple-touch-icon-57x57.png"
-    />
-    <link rel="shortcut icon" href="images/apple-touch-icon-57x57.png" />
-    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
+      href="/images/apple-touch-icon-57x57.png" />
+    <link rel="shortcut icon" href="/images/apple-touch-icon-57x57.png" />
+    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />
     <link
       rel="shortcut icon"
-      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png"
-    />
+      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png" />
     <!-- Statewide Alerts Server -->
     <script defer src="https://alert.cdt.ca.gov"></script>
     <!-- BEGIN Google Tag Manager -->
@@ -188,7 +157,13 @@
               </p>
             </div>
             <div class="translation-link">
-              <a href="../accomplishments.html">English</a>
+              <a
+                href="/accomplishments/"
+                rel="alternate"
+                hreflang="en"
+                lang="es"
+                >Inglés</a
+              >
             </div>
           </div>
         </div>
@@ -197,14 +172,13 @@
       <div class="section-default">
         <div class="branding">
           <div class="header-organization-banner">
-            <a href="index-es.html">
+            <a href="/es/index-es/">
               <div class="logo-assets">
                 <img
-                  src="../images/blue-gold-fingerprint.png"
+                  src="/images/blue-gold-fingerprint.png"
                   alt="Fingerprint icon"
                   height="66px"
-                  width="67px"
-                />
+                  width="67px" />
                 <div class="logo-text">
                   <span class="logo-state">California</span>
                   <span class="logo-dept">Marco de Identidad Digital</span>
@@ -224,8 +198,7 @@
             id="nav-icon3"
             class="mobile-control toggle-menu"
             aria-expanded="false"
-            aria-controls="navigation"
-          >
+            aria-controls="navigation">
             <span></span>
             <span></span>
             <span></span>
@@ -246,8 +219,7 @@
                 name="q"
                 aria-labelledby="SearchInput"
                 placeholder="Search"
-                class="search-textfield"
-              />
+                class="search-textfield" />
               <button type="submit" class="gsc-search-button">
                 <span class="ca-gov-icon-search" aria-hidden="true"></span>
                 <span class="sr-only">Entregar</span>
@@ -255,8 +227,7 @@
               <div class="close-search-btn">
                 <button
                   class="close-search gsc-clear-button border-0 bg-transparent pos-rel"
-                  type="reset"
-                >
+                  type="reset">
                   <span class="sr-only">Cerca</span>
                 </button>
               </div>
@@ -264,34 +235,7 @@
           </div>
         </div>
         <!-- navigation types -->
-        <nav
-          id="navigation"
-          class="main-navigation dropdown"
-          aria-label="Main navigation"
-        >
-          <ul id="nav_list" class="top-level-nav">
-            <li class="nav-item">
-              <a class="first-level-link" href="primary-elements-es.html"
-                >Elementos primarios</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="accomplishments-es.html" class="first-level-link"
-                >Logros</a
-              >
-            </li>
-            <li class="nav-item">
-              <a class="first-level-link" href="projects-es.html"
-                >Proyectos y esfuerzos de sinergia</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="roadmap-es.html" class="first-level-link"
-                >Hoja de ruta</a
-              >
-            </li>
-          </ul>
-        </nav>
+        {% include "nav-es.njk" %}
       </div>
     </header>
     <div id="main-content" class="main-content">
@@ -312,9 +256,8 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Logros</h1>
           <div class="flex primary-card m-b-lg">
             <div class="p-r">
               <img
-                src="../images/fingerprint-check.svg"
-                alt="Fingerprint with checkmark icon"
-              />
+                src="/images/fingerprint-check.svg"
+                alt="Fingerprint with checkmark icon" />
             </div>
             <div class="p-r-lg">
               <strong
@@ -365,8 +308,7 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Logros</h1>
             <div class="p-r">
               <img
                 src="../images/fingerprint-check.svg"
-                alt="Fingerprint with checkmark icon"
-              />
+                alt="Fingerprint with checkmark icon" />
             </div>
             <div class="p-r-lg">
               <strong
@@ -388,9 +330,8 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Logros</h1>
           <div class="flex primary-card m-b-lg">
             <div class="p-r">
               <img
-                src="../images/pro-services.svg"
-                alt="Professional services icon"
-              />
+                src="/images/pro-services.svg"
+                alt="Professional services icon" />
             </div>
             <div class="p-r-lg">
               <strong>
@@ -425,7 +366,7 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Logros</h1>
 
           <div class="flex primary-card m-b-lg">
             <div class="p-r">
-              <img src="../images/users-dialog.svg" alt="User dialog icon" />
+              <img src="/images/users-dialog.svg" alt="User dialog icon" />
             </div>
             <div class="p-r-lg">
               <strong>
@@ -460,7 +401,7 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Logros</h1>
 
           <div class="flex primary-card m-b-lg">
             <div class="p-r">
-              <img src="../images/flowchart.svg" alt="Flowchart icon" />
+              <img src="/images/flowchart.svg" alt="Flowchart icon" />
             </div>
             <div class="p-r-lg">
               <strong>
@@ -492,8 +433,7 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Logros</h1>
                 se ha puesto en contacto con la
                 <a
                   href="https://www.cpuc.ca.gov/"
-                  aria-label="California Public Utilities Commission"
-                ></a
+                  aria-label="California Public Utilities Commission"></a
                 >Comisión de Servicios Públicos de California (CPUC) y la
                 <a href="https://cppa.ca.gov/"
                   >Agencia de Protección de la Privacidad de California</a
@@ -505,121 +445,12 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Logros</h1>
             </div>
           </div>
         </div>
-        <div
-          class="bottom-section p-b-sm"
-          style="background: var(--v-6-gray-100, #ededef)"
-        >
-          <div class="container row">
-            <div class="col-md-6">
-              <h2 class="h4">Sobre Marco de Identidad Digital</h2>
-              <ul class="list-unstyled">
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/digitalID/"
-                    >Proyecto de Identidad Digital</a
-                  >
-                </li>
-                <div>
-                  <a
-                    href="https://cdt.ca.gov/"
-                    hreflang="en"
-                    class="no-underline color-black"
-                    >Departamento de Tecnología de California</a
-                  >
-                </div>
-              </ul>
-            </div>
-            <div class="col-md-6">
-              <h2 class="h4">Planes estratégicos estatales</h2>
-              <ul class="list-unstyled">
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://digitalstrategy.cdt.ca.gov/index.html"
-                    >Estrategia digital</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/wp-content/uploads/2023/08/Bridge-to-the-Future.pdf"
-                    >Puente al futuro</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/wp-content/uploads/2021/10/Cybersecurity_Strategy_Plan_FINAL.pdf"
-                    >Hoja de ruta para la seguridad de la información -
-                    Cal-Secure</a
-                  >
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
+        <!-- Global Bottom Section -->
+        {% include "bottom-section-es.njk" %}
       </main>
     </div>
     <!-- Global Footer -->
-    <footer id="footer" class="global-footer">
-      <div class="container">
-        <div class="d-flex">
-          <a href="https://ca.gov" class="cagov-logo">
-            <span class="sr-only">CA.gov</span>
-            <span class="ca-gov-logo-svg"></span>
-          </a>
-          <ul class="footer-links">
-            <li>
-              <a href="https://cdt.ca.gov/conditions-of-use/"
-                >Condiciones de Uso</a
-              >
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/privacy-policy/"
-                >Política de privacidad
-              </a>
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/accessibility/">Accesibilidad</a>
-            </li>
-            <li>
-              <a href="/es/website-accessibility-certification-es.html">Certificación de accesibilidad del sitio web</a>
-            </li>
-            <li>
-              <a href="sitemap-es.html">Mapa del sitio</a>
-            </li>
-          </ul>
-          <ul class="socialsharer-container">
-            <li>
-              <a
-                href="https://github.com/Office-of-Digital-Innovation/California-State-Web-Template"
-              >
-                <span class="ca-gov-icon-github" aria-hidden="true"></span>
-                <span class="sr-only">GitHub</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <!-- Copyright Statement -->
-      <div class="copyright">
-        <div class="container text-right">
-          Copyright &copy;
-          <span id="thisyear">
-            <script>
-              document
-                .getElementById("thisyear")
-                .appendChild(document.createTextNode(new Date().getFullYear()));
-            </script>
-          </span>
-          Estado de California
-        </div>
-      </div>
-      <button class="return-top">
-        <span class="sr-only">Volver arriba</span>
-      </button>
-    </footer>
+    {% include "footer-es.njk" %}
     <!-- Extra Decorative Content -->
     <div class="decoration-last">&nbsp;</div>
   </body>
diff --git a/es/index-es.html b/src/es/index-es.html
similarity index 72%
rename from es/index-es.html
rename to src/es/index-es.html
index 7a31831..355c265 100644
--- a/es/index-es.html
+++ b/src/es/index-es.html
@@ -1,4 +1,13 @@
-<!DOCTYPE html>
+---
+title: Estrategia de identificación digital del estado de California
+description: CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas.
+canonical: https://digitalidstrategy.cdt.ca.gov/es/index-es.html
+shareimage: https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png
+alternatelink: https://digitalidstrategy.cdt.ca.gov/index.html
+permalink: /es/index-es.html
+---
+
+<!doctype html>
 <html lang="es-US">
   <head>
     <meta charset="utf-8" />
@@ -9,132 +18,109 @@
     <meta name="MobileOptimized" content="320" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
+      content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <link
       rel="alternate"
       hreflang="en"
-      href="https://digitalidstrategy.cdt.ca.gov/"
-    />
+      href="https://digitalidstrategy.cdt.ca.gov/" />
 
     <!-- Title Tags -->
     <meta name="title" content="California marco de identidad digital" />
     <meta property="og:title" content="California marco de identidad digital" />
     <meta
       property="twitter:title"
-      content="California marco de identidad digital"
-    />
+      content="California marco de identidad digital" />
 
     <!-- Description Tags -->
     <meta
       name="description"
-      content="CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas."
-    />
+      content="CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas." />
     <meta
       property="og:description"
-      content="CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas."
-    />
+      content="CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas." />
     <meta
       property="twitter:description"
-      content="CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas."
-    />
+      content="CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas." />
 
     <!-- Canonical link & share links, improves SEO -->
     <link
       href="https://digitalidstrategy.cdt.ca.gov/es/index-es.html"
-      rel="canonical"
-    />
+      rel="canonical" />
     <meta
       property="og:url"
-      content="https://digitalidstrategy.cdt.ca.gov/es/index-es.html/"
-    />
+      content="https://digitalidstrategy.cdt.ca.gov/es/index-es.html/" />
     <meta
       property="twitter:url"
-      content="https://digitalidstrategy.cdt.ca.gov/es/index-es.html/"
-    />
+      content="https://digitalidstrategy.cdt.ca.gov/es/index-es.html/" />
     <!-- END Canonical link -->
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta
       property="og:image"
-      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png" />
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
     <meta
       property="twitter:image"
-      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png" />
 
     <!-- State Template CDN CSS -->
     <link
       href="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/css/cagov.core.min.css"
       rel="stylesheet"
       integrity="sha256-f2k3x0x/l4G+mg5fxnV+Q37/8RoMOoMOWphHJ4vWn6g="
-      crossorigin="anonymous"
-    />
+      crossorigin="anonymous" />
     <!-- State Template JavaScript CDN -->
     <script
       src="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/js/cagov.core.min.js"
       integrity="sha256-MRHAOqwc4jjHeTGa/9mcdxAv3aVG+lQ7eJ9DPa+Gr/k="
       defer
-      crossorigin="anonymous"
-    ></script>
-    <link rel="stylesheet" href="../css/custom.css" />
+      crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="/css/custom.css" />
     <!-- END STATE_TEMPLATE -->
 
     <link
       rel="apple-touch-icon-precomposed"
       sizes="100x100"
-      href="images/apple-touch-icon-precomposed.png"
-    />
+      href="/images/apple-touch-icon-precomposed.png" />
     <link
       rel="icon"
       sizes="192x192"
-      href="images/apple-touch-icon-192x192.png"
-    />
+      href="/images/apple-touch-icon-192x192.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="180x180"
-      href="images/apple-touch-icon-180x180.png"
-    />
+      href="/images/apple-touch-icon-180x180.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="152x152"
-      href="images/apple-touch-icon-152x152.png"
-    />
+      href="/images/apple-touch-icon-152x152.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="144x144"
-      href="images/apple-touch-icon-144x144.png"
-    />
+      href="/images/apple-touch-icon-144x144.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="120x120"
-      href="images/apple-touch-icon-120x120.png"
-    />
+      href="/images/apple-touch-icon-120x120.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="114x114"
-      href="images/apple-touch-icon-114x114.png"
-    />
+      href="/images/apple-touch-icon-114x114.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="72x72"
-      href="images/apple-touch-icon-72x72.png"
-    />
+      href="/images/apple-touch-icon-72x72.png" />
     <link
       rel="apple-touch-icon-precomposed"
-      href="images/apple-touch-icon-57x57.png"
-    />
-    <link rel="shortcut icon" href="images/apple-touch-icon-57x57.png" />
-    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
+      href="/images/apple-touch-icon-57x57.png" />
+    <link rel="shortcut icon" href="/images/apple-touch-icon-57x57.png" />
+    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />
     <link
       rel="shortcut icon"
-      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png"
-    />
+      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png" />
     <!-- Statewide Alerts Server -->
     <script defer src="https://alert.cdt.ca.gov"></script>
     <!-- BEGIN Google Tag Manager -->
@@ -197,14 +183,13 @@
       <div class="section-default">
         <div class="branding">
           <div class="header-organization-banner">
-            <a href="index-es.html">
+            <a href="/es/">
               <div class="logo-assets">
                 <img
-                  src="../images/blue-gold-fingerprint.png"
+                  src="/images/blue-gold-fingerprint.png"
                   alt="Fingerprint icon"
                   height="66px"
-                  width="67px"
-                />
+                  width="67px" />
                 <div class="logo-text">
                   <span class="logo-state">California</span>
                   <span class="logo-dept">Marco de Identidad Digital</span>
@@ -224,8 +209,7 @@
             id="nav-icon3"
             class="mobile-control toggle-menu"
             aria-expanded="false"
-            aria-controls="navigation"
-          >
+            aria-controls="navigation">
             <span></span>
             <span></span>
             <span></span>
@@ -246,8 +230,7 @@
                 name="q"
                 aria-labelledby="SearchInput"
                 placeholder="Search"
-                class="search-textfield"
-              />
+                class="search-textfield" />
               <button type="submit" class="gsc-search-button">
                 <span class="ca-gov-icon-search" aria-hidden="true"></span>
                 <span class="sr-only">Entregar</span>
@@ -255,8 +238,7 @@
               <div class="close-search-btn">
                 <button
                   class="close-search gsc-clear-button border-0 bg-transparent pos-rel"
-                  type="reset"
-                >
+                  type="reset">
                   <span class="sr-only">Cerca</span>
                 </button>
               </div>
@@ -264,34 +246,7 @@
           </div>
         </div>
         <!-- navigation types -->
-        <nav
-          id="navigation"
-          class="main-navigation dropdown"
-          aria-label="Main navigation"
-        >
-          <ul id="nav_list" class="top-level-nav">
-            <li class="nav-item">
-              <a class="first-level-link" href="primary-elements-es.html"
-                >Elementos primarios</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="accomplishments-es.html" class="first-level-link"
-                >Logros</a
-              >
-            </li>
-            <li class="nav-item">
-              <a class="first-level-link" href="projects-es.html"
-                >Proyectos y esfuerzos de sinergia</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="roadmap-es.html" class="first-level-link"
-                >Hoja de ruta</a
-              >
-            </li>
-          </ul>
-        </nav>
+        {% include "nav-es.njk" %}
       </div>
     </header>
     <div id="main-content" class="main-content">
@@ -304,7 +259,7 @@ <h1 class="h2 text-light fw-lighter m-t-lg">
               </h1>
               <div class="m-b-md">
                 <a
-                  href="../CDT-Marco-de-Identidad-Digital.pdf"
+                  href="/CDT-Marco-de-Identidad-Digital.pdf"
                   class="btn btn-highlight m-r-sm m-b-sm"
                   style="color: #01395e"
                   download
@@ -450,11 +405,10 @@ <h2>Cómo funciona</h2>
               producida o administrada por el CDT.
             </p>
             <img
-              src="../images/digital-id-framework-v2-es.svg"
+              src="/images/digital-id-framework-v2-es.svg"
               class="p-b-lg"
               alt="Digital ID Framework."
-              style="width: 95%"
-            />
+              style="width: 95%" />
             <ol>
               <li>
                 J. Doe va directamente al sitio web de la agencia que administra
@@ -494,122 +448,12 @@ <h2>Cómo funciona</h2>
           <p>We welcome your input. Provide feedback.</p> -->
           </div>
         </div>
-
-        <div
-          class="bottom-section p-b-sm"
-          style="background: var(--v-6-gray-100, #ededef)"
-        >
-          <div class="container row">
-            <div class="col-md-6">
-              <h2 class="h4">Sobre Marco de Identidad Digital</h2>
-              <ul class="list-unstyled">
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/digitalID/"
-                    >Proyecto de Identidad Digital</a
-                  >
-                </li>
-                <div>
-                  <a
-                    href="https://cdt.ca.gov/"
-                    hreflang="en"
-                    class="no-underline color-black"
-                    >Departamento de Tecnología de California</a
-                  >
-                </div>
-              </ul>
-            </div>
-            <div class="col-md-6">
-              <h2 class="h4">Planes estratégicos estatales</h2>
-              <ul class="list-unstyled">
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://digitalstrategy.cdt.ca.gov/index.html"
-                    >Estrategia digital</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/wp-content/uploads/2023/08/Bridge-to-the-Future.pdf"
-                    >Puente al futuro</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/wp-content/uploads/2021/10/Cybersecurity_Strategy_Plan_FINAL.pdf"
-                    >Hoja de ruta para la seguridad de la información -
-                    <i>Cal-Secure</i></a
-                  >
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
+        <!-- Global Bottom Section -->
+        {% include "bottom-section-es.njk" %}
       </main>
     </div>
     <!-- Global Footer -->
-    <footer id="footer" class="global-footer">
-      <div class="container">
-        <div class="d-flex">
-          <a href="https://ca.gov" class="cagov-logo">
-            <span class="sr-only">CA.gov</span>
-            <span class="ca-gov-logo-svg"></span>
-          </a>
-          <ul class="footer-links">
-            <li>
-              <a href="https://cdt.ca.gov/conditions-of-use/"
-                >Condiciones de Uso</a
-              >
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/privacy-policy/"
-                >Política de privacidad
-              </a>
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/accessibility/">Accesibilidad</a>
-            </li>
-            <li>
-              <a href="/es/website-accessibility-certification-es.html">Certificación de accesibilidad del sitio web</a>
-            </li>
-            <li>
-              <a href="sitemap-es.html">Mapa del sitio</a>
-            </li>
-          </ul>
-          <ul class="socialsharer-container">
-            <li>
-              <a
-                href="https://github.com/Office-of-Digital-Innovation/California-State-Web-Template"
-              >
-                <span class="ca-gov-icon-github" aria-hidden="true"></span>
-                <span class="sr-only">GitHub</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <!-- Copyright Statement -->
-      <div class="copyright">
-        <div class="container text-right">
-          Copyright &copy;
-          <span id="thisyear">
-            <script>
-              document
-                .getElementById("thisyear")
-                .appendChild(document.createTextNode(new Date().getFullYear()));
-            </script>
-          </span>
-          Estado de California
-        </div>
-      </div>
-      <button class="return-top">
-        <span class="sr-only">Volver arriba</span>
-      </button>
-    </footer>
+    {% include "footer-es.njk" %}
     <!-- Extra Decorative Content -->
     <div class="decoration-last">&nbsp;</div>
   </body>
diff --git a/es/primary-elements-es.html b/src/es/primary-elements-es.html
similarity index 70%
rename from es/primary-elements-es.html
rename to src/es/primary-elements-es.html
index 2e49675..eb7160e 100644
--- a/es/primary-elements-es.html
+++ b/src/es/primary-elements-es.html
@@ -1,140 +1,109 @@
-<!DOCTYPE html>
+---
+title: Elementos primarios
+description: CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas.
+canonical: https://digitalidstrategy.cdt.ca.gov/es/primary-elements-es.html
+shareimage: https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png
+alternatelink: https://digitalidstrategy.cdt.ca.gov/primary-elements.html
+permalink: /es/primary-elements-es.html
+---
+
+<!doctype html>
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />
-    <title>Estrategia de identificación digital del estado de California</title>
+    <title>{{ title }}</title>
     <meta name="Author" content="State of California" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="HandheldFriendly" content="True" />
     <meta name="MobileOptimized" content="320" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <link
-      rel="alternate"
-      hreflang="en"
-      href="https://digitalidstrategy.cdt.ca.gov/primary-elements.html"
-    />
+      content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="alternate" hreflang="en" href="{{ alternatelink }}" />
 
     <!-- Title Tags -->
-    <meta name="title" content="California marco de identidad digital" />
-    <meta property="og:title" content="California marco de identidad digital" />
-    <meta
-      property="twitter:title"
-      content="California marco de identidad digital"
-    />
+    <meta name="title" content="{{ title }}" />
+    <meta property="og:title" content="{{ title }}" />
+    <meta property="twitter:title" content="{{ title }}" />
 
     <!-- Description Tags -->
-    <meta
-      name="description"
-      content="CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas."
-    />
-    <meta
-      property="og:description"
-      content="CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas."
-    />
-    <meta
-      property="twitter:description"
-      content="CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas."
-    />
+    <meta name="description" content="{{ description }}" />
+    <meta property="og:description" content="{{ description }}" />
+    <meta property="twitter:description" content="{{ description }}" />
 
     <!-- Canonical link & share links, improves SEO -->
-    <link
-      href="https://digitalidstrategy.cdt.ca.gov/es/primary-elements-es.html"
-      rel="canonical"
-    />
-    <meta
-      property="og:url"
-      content="https://digitalidstrategy.cdt.ca.gov/es/primary-elements-es.html/"
-    />
-    <meta
-      property="twitter:url"
-      content="https://digitalidstrategy.cdt.ca.gov/es/primary-elements-es.html/"
-    />
+    <link href="{{ canonical }}" rel="canonical" />
+    <meta property="og:url" content="{{ canonical }}" />
+    <meta property="twitter:url" content="{{ canonical }}" />
     <!-- END Canonical link -->
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta
       property="og:image"
-      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png" />
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
     <meta
       property="twitter:image"
-      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png" />
 
     <!-- State Template CDN CSS -->
     <link
       href="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/css/cagov.core.min.css"
       rel="stylesheet"
       integrity="sha256-f2k3x0x/l4G+mg5fxnV+Q37/8RoMOoMOWphHJ4vWn6g="
-      crossorigin="anonymous"
-    />
+      crossorigin="anonymous" />
     <!-- State Template JavaScript CDN -->
     <script
       src="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/js/cagov.core.min.js"
       integrity="sha256-MRHAOqwc4jjHeTGa/9mcdxAv3aVG+lQ7eJ9DPa+Gr/k="
       defer
-      crossorigin="anonymous"
-    ></script>
-    <link rel="stylesheet" href="../css/custom.css" />
+      crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="/css/custom.css" />
     <!-- END STATE_TEMPLATE -->
 
     <link
       rel="apple-touch-icon-precomposed"
       sizes="100x100"
-      href="images/apple-touch-icon-precomposed.png"
-    />
+      href="/images/apple-touch-icon-precomposed.png" />
     <link
       rel="icon"
       sizes="192x192"
-      href="images/apple-touch-icon-192x192.png"
-    />
+      href="/images/apple-touch-icon-192x192.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="180x180"
-      href="images/apple-touch-icon-180x180.png"
-    />
+      href="/images/apple-touch-icon-180x180.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="152x152"
-      href="images/apple-touch-icon-152x152.png"
-    />
+      href="/images/apple-touch-icon-152x152.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="144x144"
-      href="images/apple-touch-icon-144x144.png"
-    />
+      href="/images/apple-touch-icon-144x144.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="120x120"
-      href="images/apple-touch-icon-120x120.png"
-    />
+      href="/images/apple-touch-icon-120x120.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="114x114"
-      href="images/apple-touch-icon-114x114.png"
-    />
+      href="/images/apple-touch-icon-114x114.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="72x72"
-      href="images/apple-touch-icon-72x72.png"
-    />
+      href="/images/apple-touch-icon-72x72.png" />
     <link
       rel="apple-touch-icon-precomposed"
-      href="images/apple-touch-icon-57x57.png"
-    />
-    <link rel="shortcut icon" href="images/apple-touch-icon-57x57.png" />
-    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
+      href="/images/apple-touch-icon-57x57.png" />
+    <link rel="shortcut icon" href="/images/apple-touch-icon-57x57.png" />
+    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />
     <link
       rel="shortcut icon"
-      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png"
-    />
+      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png" />
     <!-- Statewide Alerts Server -->
     <script defer src="https://alert.cdt.ca.gov"></script>
     <!-- BEGIN Google Tag Manager -->
@@ -189,7 +158,7 @@
             </div>
             <div class="translation-link">
               <a
-                href="../primary-elements.html"
+                href="/primary-elements/"
                 rel="alternate"
                 hreflang="en"
                 lang="es"
@@ -203,14 +172,13 @@
       <div class="section-default">
         <div class="branding">
           <div class="header-organization-banner">
-            <a href="index-es.html">
+            <a href="/es/index-es/">
               <div class="logo-assets">
                 <img
-                  src="../images/blue-gold-fingerprint.png"
+                  src="/images/blue-gold-fingerprint.png"
                   alt="Fingerprint icon"
                   height="66px"
-                  width="67px"
-                />
+                  width="67px" />
                 <div class="logo-text">
                   <span class="logo-state">California</span>
                   <span class="logo-dept">Marco de Identidad Digital</span>
@@ -230,8 +198,7 @@
             id="nav-icon3"
             class="mobile-control toggle-menu"
             aria-expanded="false"
-            aria-controls="navigation"
-          >
+            aria-controls="navigation">
             <span></span>
             <span></span>
             <span></span>
@@ -252,8 +219,7 @@
                 name="q"
                 aria-labelledby="SearchInput"
                 placeholder="Search"
-                class="search-textfield"
-              />
+                class="search-textfield" />
               <button type="submit" class="gsc-search-button">
                 <span class="ca-gov-icon-search" aria-hidden="true"></span>
                 <span class="sr-only">Entregar</span>
@@ -261,8 +227,7 @@
               <div class="close-search-btn">
                 <button
                   class="close-search gsc-clear-button border-0 bg-transparent pos-rel"
-                  type="reset"
-                >
+                  type="reset">
                   <span class="sr-only">Cerca</span>
                 </button>
               </div>
@@ -270,34 +235,7 @@
           </div>
         </div>
         <!-- navigation types -->
-        <nav
-          id="navigation"
-          class="main-navigation dropdown"
-          aria-label="Main navigation"
-        >
-          <ul id="nav_list" class="top-level-nav">
-            <li class="nav-item">
-              <a class="first-level-link" href="primary-elements-es.html"
-                >Elementos primarios</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="accomplishments-es.html" class="first-level-link"
-                >Logros</a
-              >
-            </li>
-            <li class="nav-item">
-              <a class="first-level-link" href="projects-es.html"
-                >Proyectos y esfuerzos de sinergia</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="roadmap-es.html" class="first-level-link"
-                >Hoja de ruta</a
-              >
-            </li>
-          </ul>
-        </nav>
+        {% include "nav-es.njk" %}
       </div>
     </header>
     <div id="main-content" class="main-content">
@@ -313,7 +251,7 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Elementos primarios</h1>
           </p>
           <div class="flex primary-card m-b-lg">
             <div class="p-r">
-              <img src="../images/badge.svg" alt="Badge icon" />
+              <img src="/images/badge.svg" alt="Badge icon" />
             </div>
             <div class="p-r-lg">
               <strong>Identificación digital</strong>
@@ -387,7 +325,7 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Elementos primarios</h1>
 
           <div class="flex primary-card m-b-lg">
             <div class="p-r">
-              <img src="../images/encrypted.svg" alt="Encrypted icon" />
+              <img src="/images/encrypted.svg" alt="Encrypted icon" />
             </div>
             <div class="p-r-lg">
               <strong>Credenciales digitales</strong>
@@ -426,7 +364,7 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Elementos primarios</h1>
           </div>
           <div class="flex primary-card m-b-lg">
             <div class="p-r">
-              <img src="../images/aod.svg" alt="Mobile phone icon" />
+              <img src="/images/aod.svg" alt="Mobile phone icon" />
             </div>
             <div class="p-r-lg">
               <strong>Monedero digital</strong>
@@ -515,121 +453,11 @@ <h2>Principios básicos</h2>
             siempre que sea posible.
           </p>
         </div>
-
-        <div
-          class="bottom-section p-b-sm"
-          style="background: var(--v-6-gray-100, #ededef)"
-        >
-          <div class="container row">
-            <div class="col-md-6">
-              <h2 class="h4">Sobre Marco de Identidad Digital</h2>
-              <ul class="list-unstyled">
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/digitalID/"
-                    >Proyecto de Identidad Digital</a
-                  >
-                </li>
-                <div>
-                  <a
-                    href="https://cdt.ca.gov/"
-                    hreflang="en"
-                    class="no-underline color-black"
-                    >Departamento de Tecnología de California</a
-                  >
-                </div>
-              </ul>
-            </div>
-            <div class="col-md-6">
-              <h2 class="h4">Planes estratégicos estatales</h2>
-              <ul class="list-unstyled">
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://digitalstrategy.cdt.ca.gov/index.html"
-                    >Estrategia digital</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/wp-content/uploads/2023/08/Bridge-to-the-Future.pdf"
-                    >Puente al futuro</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/wp-content/uploads/2021/10/Cybersecurity_Strategy_Plan_FINAL.pdf"
-                    >Hoja de ruta para la seguridad de la información -
-                    Cal-Secure</a
-                  >
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
+        <!-- Global Bottom Section -->
+        {% include "bottom-section-es.njk" %}
       </main>
     </div>
     <!-- Global Footer -->
-    <footer id="footer" class="global-footer">
-      <div class="container">
-        <div class="d-flex">
-          <a href="https://ca.gov" class="cagov-logo">
-            <span class="sr-only">CA.gov</span>
-            <span class="ca-gov-logo-svg"></span>
-          </a>
-          <ul class="footer-links">
-            <li>
-              <a href="https://cdt.ca.gov/conditions-of-use/"
-                >Condiciones de Uso</a
-              >
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/privacy-policy/"
-                >Política de privacidad
-              </a>
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/accessibility/">Accesibilidad</a>
-            </li>
-            <li>
-              <a href="/es/website-accessibility-certification-es.html">Certificación de accesibilidad del sitio web</a>
-            </li>
-            <li>
-              <a href="sitemap-es.html">Mapa del sitio</a>
-            </li>
-          </ul>
-          <ul class="socialsharer-container">
-            <li>
-              <a
-                href="https://github.com/Office-of-Digital-Innovation/California-State-Web-Template"
-              >
-                <span class="ca-gov-icon-github" aria-hidden="true"></span>
-                <span class="sr-only">GitHub</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <!-- Copyright Statement -->
-      <div class="copyright">
-        <div class="container text-right">
-          Copyright &copy;
-          <span id="thisyear">
-            <script>
-              document
-                .getElementById("thisyear")
-                .appendChild(document.createTextNode(new Date().getFullYear()));
-            </script>
-          </span>
-          Estado de California
-        </div>
-      </div>
-      <button class="return-top">
-        <span class="sr-only">Volver arriba</span>
-      </button>
-    </footer>
+    {% include "footer-es.njk" %}
   </body>
 </html>
diff --git a/es/projects-es.html b/src/es/projects-es.html
similarity index 61%
rename from es/projects-es.html
rename to src/es/projects-es.html
index 70be1b3..fcfb629 100644
--- a/es/projects-es.html
+++ b/src/es/projects-es.html
@@ -1,140 +1,109 @@
-<!DOCTYPE html>
+---
+title: Proyectos y esfuerzos de sinergia
+description: CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas.
+canonical: https://digitalidstrategy.cdt.ca.gov/es/projects-es.html
+shareimage: https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png
+alternatelink: https://digitalidstrategy.cdt.ca.gov/projects.html
+permalink: /es/projects-es.html
+---
+
+<!doctype html>
 <html lang="es-US">
   <head>
     <meta charset="utf-8" />
-    <title>Estrategia de identificación digital del estado de California</title>
+    <title>{{ title }}</title>
     <meta name="Author" content="State of California" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="HandheldFriendly" content="True" />
     <meta name="MobileOptimized" content="320" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <link
-      rel="alternate"
-      hreflang="en"
-      href="https://digitalidstrategy.cdt.ca.gov/projects.html"
-    />
+      content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="alternate" hreflang="en" href="{{ alternatelink }}" />
 
     <!-- Title Tags -->
-    <meta name="title" content="California marco de identidad digital" />
-    <meta property="og:title" content="California marco de identidad digital" />
-    <meta
-      property="twitter:title"
-      content="California marco de identidad digital"
-    />
+    <meta name="title" content="{{ title }}" />
+    <meta property="og:title" content="{{ title }}" />
+    <meta property="twitter:title" content="{{ title }}" />
 
     <!-- Description Tags -->
-    <meta
-      name="description"
-      content="CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas."
-    />
-    <meta
-      property="og:description"
-      content="CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas."
-    />
-    <meta
-      property="twitter:description"
-      content="CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas."
-    />
+    <meta name="description" content="{{ description }}" />
+    <meta property="og:description" content="{{ description }}" />
+    <meta property="twitter:description" content="{{ description }}" />
 
     <!-- Canonical link & share links, improves SEO -->
-    <link
-      href="https://digitalidstrategy.cdt.ca.gov/es/projects-es.html"
-      rel="canonical"
-    />
-    <meta
-      property="og:url"
-      content="https://digitalidstrategy.cdt.ca.gov/es/projects-es.html/"
-    />
-    <meta
-      property="twitter:url"
-      content="https://digitalidstrategy.cdt.ca.gov/es/projects-es.html/"
-    />
+    <link href="{{ canonical }}" rel="canonical" />
+    <meta property="og:url" content="{{ canonical }}" />
+    <meta property="twitter:url" content="{{ canonical }}" />
     <!-- END Canonical link -->
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta
       property="og:image"
-      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png" />
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
     <meta
       property="twitter:image"
-      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png" />
 
     <!-- State Template CDN CSS -->
     <link
       href="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/css/cagov.core.min.css"
       rel="stylesheet"
       integrity="sha256-f2k3x0x/l4G+mg5fxnV+Q37/8RoMOoMOWphHJ4vWn6g="
-      crossorigin="anonymous"
-    />
+      crossorigin="anonymous" />
     <!-- State Template JavaScript CDN -->
     <script
       src="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/js/cagov.core.min.js"
       integrity="sha256-MRHAOqwc4jjHeTGa/9mcdxAv3aVG+lQ7eJ9DPa+Gr/k="
       defer
-      crossorigin="anonymous"
-    ></script>
-    <link rel="stylesheet" href="../css/custom.css" />
+      crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="/css/custom.css" />
     <!-- END STATE_TEMPLATE -->
 
     <link
       rel="apple-touch-icon-precomposed"
       sizes="100x100"
-      href="images/apple-touch-icon-precomposed.png"
-    />
+      href="/images/apple-touch-icon-precomposed.png" />
     <link
       rel="icon"
       sizes="192x192"
-      href="images/apple-touch-icon-192x192.png"
-    />
+      href="/images/apple-touch-icon-192x192.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="180x180"
-      href="images/apple-touch-icon-180x180.png"
-    />
+      href="/images/apple-touch-icon-180x180.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="152x152"
-      href="images/apple-touch-icon-152x152.png"
-    />
+      href="/images/apple-touch-icon-152x152.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="144x144"
-      href="images/apple-touch-icon-144x144.png"
-    />
+      href="/images/apple-touch-icon-144x144.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="120x120"
-      href="images/apple-touch-icon-120x120.png"
-    />
+      href="/images/apple-touch-icon-120x120.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="114x114"
-      href="images/apple-touch-icon-114x114.png"
-    />
+      href="/images/apple-touch-icon-114x114.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="72x72"
-      href="images/apple-touch-icon-72x72.png"
-    />
+      href="/images/apple-touch-icon-72x72.png" />
     <link
       rel="apple-touch-icon-precomposed"
-      href="images/apple-touch-icon-57x57.png"
-    />
-    <link rel="shortcut icon" href="images/apple-touch-icon-57x57.png" />
-    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
+      href="/images/apple-touch-icon-57x57.png" />
+    <link rel="shortcut icon" href="/images/apple-touch-icon-57x57.png" />
+    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />
     <link
       rel="shortcut icon"
-      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png"
-    />
+      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png" />
     <!-- Statewide Alerts Server -->
     <script defer src="https://alert.cdt.ca.gov"></script>
     <!-- BEGIN Google Tag Manager -->
@@ -188,7 +157,7 @@
               </p>
             </div>
             <div class="translation-link">
-              <a href="../projects.html" rel="alternate" hreflang="en" lang="es"
+              <a href="/projects/" rel="alternate" hreflang="en" lang="es"
                 >Inglés</a
               >
             </div>
@@ -199,14 +168,13 @@
       <div class="section-default">
         <div class="branding">
           <div class="header-organization-banner">
-            <a href="index-es.html">
+            <a href="/es/index-es/">
               <div class="logo-assets">
                 <img
-                  src="../images/blue-gold-fingerprint.png"
+                  src="/images/blue-gold-fingerprint.png"
                   alt="Fingerprint icon"
                   height="66px"
-                  width="67px"
-                />
+                  width="67px" />
                 <div class="logo-text">
                   <span class="logo-state">California</span>
                   <span class="logo-dept">Marco de Identidad Digital</span>
@@ -226,8 +194,7 @@
             id="nav-icon3"
             class="mobile-control toggle-menu"
             aria-expanded="false"
-            aria-controls="navigation"
-          >
+            aria-controls="navigation">
             <span></span>
             <span></span>
             <span></span>
@@ -248,8 +215,7 @@
                 name="q"
                 aria-labelledby="SearchInput"
                 placeholder="Search"
-                class="search-textfield"
-              />
+                class="search-textfield" />
               <button type="submit" class="gsc-search-button">
                 <span class="ca-gov-icon-search" aria-hidden="true"></span>
                 <span class="sr-only">Entregar</span>
@@ -257,8 +223,7 @@
               <div class="close-search-btn">
                 <button
                   class="close-search gsc-clear-button border-0 bg-transparent pos-rel"
-                  type="reset"
-                >
+                  type="reset">
                   <span class="sr-only">Cerca</span>
                 </button>
               </div>
@@ -266,34 +231,7 @@
           </div>
         </div>
         <!-- navigation types -->
-        <nav
-          id="navigation"
-          class="main-navigation dropdown"
-          aria-label="Main navigation"
-        >
-          <ul id="nav_list" class="top-level-nav">
-            <li class="nav-item">
-              <a class="first-level-link" href="primary-elements-es.html"
-                >Elementos primarios</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="accomplishments-es.html" class="first-level-link"
-                >Logros</a
-              >
-            </li>
-            <li class="nav-item">
-              <a class="first-level-link" href="projects-es.html"
-                >Proyectos y esfuerzos de sinergia</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="roadmap-es.html" class="first-level-link"
-                >Hoja de ruta</a
-              >
-            </li>
-          </ul>
-        </nav>
+        {% include "nav-es.njk" %}
       </div>
     </header>
     <div id="main-content" class="main-content">
@@ -424,121 +362,12 @@ <h4 class="m-t-0">Integraciones de proveedores de identidad</h4>
             </div>
           </div>
         </div>
-        <div
-          class="bottom-section p-b-sm"
-          style="background: var(--v-6-gray-100, #ededef)"
-        >
-          <div class="container row">
-            <div class="col-md-6">
-              <h2 class="h4">Sobre Marco de Identidad Digital</h2>
-              <ul class="list-unstyled">
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/digitalID/"
-                    >Proyecto de Identidad Digital</a
-                  >
-                </li>
-                <div>
-                  <a
-                    href="https://cdt.ca.gov/"
-                    hreflang="en"
-                    class="no-underline color-black"
-                    >Departamento de Tecnología de California</a
-                  >
-                </div>
-              </ul>
-            </div>
-            <div class="col-md-6">
-              <h2 class="h4">Planes estratégicos estatales</h2>
-              <ul class="list-unstyled">
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://digitalstrategy.cdt.ca.gov/index.html"
-                    >Estrategia digital</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/wp-content/uploads/2023/08/Bridge-to-the-Future.pdf"
-                    >Puente al futuro</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/wp-content/uploads/2021/10/Cybersecurity_Strategy_Plan_FINAL.pdf"
-                    >Hoja de ruta para la seguridad de la información -
-                    Cal-Secure</a
-                  >
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
+        <!-- Global Bottom Section -->
+        {% include "bottom-section-es.njk" %}
       </main>
     </div>
     <!-- Global Footer -->
-    <footer id="footer" class="global-footer">
-      <div class="container">
-        <div class="d-flex">
-          <a href="https://ca.gov" class="cagov-logo">
-            <span class="sr-only">CA.gov</span>
-            <span class="ca-gov-logo-svg"></span>
-          </a>
-          <ul class="footer-links">
-            <li>
-              <a href="https://cdt.ca.gov/conditions-of-use/"
-                >Condiciones de Uso</a
-              >
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/privacy-policy/"
-                >Política de privacidad
-              </a>
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/accessibility/">Accesibilidad</a>
-            </li>
-            <li>
-              <a href="/es/website-accessibility-certification-es.html">Certificación de accesibilidad del sitio web</a>
-            </li>
-            <li>
-              <a href="sitemap-es.html">Mapa del sitio</a>
-            </li>
-          </ul>
-          <ul class="socialsharer-container">
-            <li>
-              <a
-                href="https://github.com/Office-of-Digital-Innovation/California-State-Web-Template"
-              >
-                <span class="ca-gov-icon-github" aria-hidden="true"></span>
-                <span class="sr-only">GitHub</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <!-- Copyright Statement -->
-      <div class="copyright">
-        <div class="container text-right">
-          Copyright &copy;
-          <span id="thisyear">
-            <script>
-              document
-                .getElementById("thisyear")
-                .appendChild(document.createTextNode(new Date().getFullYear()));
-            </script>
-          </span>
-          Estado de California
-        </div>
-      </div>
-      <button class="return-top">
-        <span class="sr-only">Volver arriba</span>
-      </button>
-    </footer>
+    {% include "footer-es.njk" %}
     <!-- Extra Decorative Content -->
     <div class="decoration-last">&nbsp;</div>
   </body>
diff --git a/es/roadmap-es.html b/src/es/roadmap-es.html
similarity index 68%
rename from es/roadmap-es.html
rename to src/es/roadmap-es.html
index b39adc1..07fc95a 100644
--- a/es/roadmap-es.html
+++ b/src/es/roadmap-es.html
@@ -1,140 +1,109 @@
-<!DOCTYPE html>
+---
+title: Hoja de ruta
+description: CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas.
+canonical: https://digitalidstrategy.cdt.ca.gov/es/roadmap-es.html
+shareimage: https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png
+alternatelink: https://digitalidstrategy.cdt.ca.gov/roadmap.html
+permalink: /es/roadmap-es.html
+---
+
+<!doctype html>
 <html lang="es-US">
   <head>
     <meta charset="utf-8" />
-    <title>Estrategia de identificación digital del estado de California</title>
+    <title>{{ title }}</title>
     <meta name="Author" content="State of California" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="HandheldFriendly" content="True" />
     <meta name="MobileOptimized" content="320" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <link
-      rel="alternate"
-      hreflang="en"
-      href="https://digitalidstrategy.cdt.ca.gov/roadmap.html"
-    />
+      content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="alternate" hreflang="en" href="{{ alternatelink }}" />
 
     <!-- Title Tags -->
-    <meta name="title" content="California marco de identidad digital" />
-    <meta property="og:title" content="California marco de identidad digital" />
-    <meta
-      property="twitter:title"
-      content="California marco de identidad digital"
-    />
+    <meta name="title" content="{{ title }}" />
+    <meta property="og:title" content="{{ title }}" />
+    <meta property="twitter:title" content="{{ title }}" />
 
     <!-- Description Tags -->
-    <meta
-      name="description"
-      content="CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas."
-    />
-    <meta
-      property="og:description"
-      content="CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas."
-    />
-    <meta
-      property="twitter:description"
-      content="CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas."
-    />
+    <meta name="description" content="{{ description }}" />
+    <meta property="og:description" content="{{ description }}" />
+    <meta property="twitter:description" content="{{ description }}" />
 
     <!-- Canonical link & share links, improves SEO -->
-    <link
-      href="https://digitalidstrategy.cdt.ca.gov/es/roadmap-es.html"
-      rel="canonical"
-    />
-    <meta
-      property="og:url"
-      content="https://digitalidstrategy.cdt.ca.gov/es/roadmap-es.html/"
-    />
-    <meta
-      property="twitter:url"
-      content="https://digitalidstrategy.cdt.ca.gov/es/roadmap-es.html/"
-    />
+    <link href="{{ canonical }}" rel="canonical" />
+    <meta property="og:url" content="{{ canonical }}" />
+    <meta property="twitter:url" content="{{ canonical }}" />
     <!-- END Canonical link -->
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta
       property="og:image"
-      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png" />
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
     <meta
       property="twitter:image"
-      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png" />
 
     <!-- State Template CDN CSS -->
     <link
       href="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/css/cagov.core.min.css"
       rel="stylesheet"
       integrity="sha256-f2k3x0x/l4G+mg5fxnV+Q37/8RoMOoMOWphHJ4vWn6g="
-      crossorigin="anonymous"
-    />
+      crossorigin="anonymous" />
     <!-- State Template JavaScript CDN -->
     <script
       src="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/js/cagov.core.min.js"
       integrity="sha256-MRHAOqwc4jjHeTGa/9mcdxAv3aVG+lQ7eJ9DPa+Gr/k="
       defer
-      crossorigin="anonymous"
-    ></script>
-    <link rel="stylesheet" href="../css/custom.css" />
+      crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="/css/custom.css" />
     <!-- END STATE_TEMPLATE -->
 
     <link
       rel="apple-touch-icon-precomposed"
       sizes="100x100"
-      href="images/apple-touch-icon-precomposed.png"
-    />
+      href="/images/apple-touch-icon-precomposed.png" />
     <link
       rel="icon"
       sizes="192x192"
-      href="images/apple-touch-icon-192x192.png"
-    />
+      href="/images/apple-touch-icon-192x192.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="180x180"
-      href="images/apple-touch-icon-180x180.png"
-    />
+      href="/images/apple-touch-icon-180x180.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="152x152"
-      href="images/apple-touch-icon-152x152.png"
-    />
+      href="/images/apple-touch-icon-152x152.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="144x144"
-      href="images/apple-touch-icon-144x144.png"
-    />
+      href="/images/apple-touch-icon-144x144.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="120x120"
-      href="images/apple-touch-icon-120x120.png"
-    />
+      href="/images/apple-touch-icon-120x120.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="114x114"
-      href="images/apple-touch-icon-114x114.png"
-    />
+      href="/images/apple-touch-icon-114x114.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="72x72"
-      href="images/apple-touch-icon-72x72.png"
-    />
+      href="/images/apple-touch-icon-72x72.png" />
     <link
       rel="apple-touch-icon-precomposed"
-      href="images/apple-touch-icon-57x57.png"
-    />
-    <link rel="shortcut icon" href="images/apple-touch-icon-57x57.png" />
-    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
+      href="/images/apple-touch-icon-57x57.png" />
+    <link rel="shortcut icon" href="/images/apple-touch-icon-57x57.png" />
+    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />
     <link
       rel="shortcut icon"
-      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png"
-    />
+      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png" />
     <!-- Statewide Alerts Server -->
     <script defer src="https://alert.cdt.ca.gov"></script>
     <!-- BEGIN Google Tag Manager -->
@@ -188,7 +157,7 @@
               </p>
             </div>
             <div class="translation-link">
-              <a href="../roadmap.html" rel="alternate" hreflang="en" lang="es"
+              <a href="/roadmap/" rel="alternate" hreflang="en" lang="es"
                 >Inglés</a
               >
             </div>
@@ -199,14 +168,13 @@
       <div class="section-default">
         <div class="branding">
           <div class="header-organization-banner">
-            <a href="index-es.html">
+            <a href="/es/index-es/">
               <div class="logo-assets">
                 <img
-                  src="../images/blue-gold-fingerprint.png"
+                  src="/images/blue-gold-fingerprint.png"
                   alt="Fingerprint icon"
                   height="66px"
-                  width="67px"
-                />
+                  width="67px" />
                 <div class="logo-text">
                   <span class="logo-state">California</span>
                   <span class="logo-dept">Marco de Identidad Digital</span>
@@ -226,8 +194,7 @@
             id="nav-icon3"
             class="mobile-control toggle-menu"
             aria-expanded="false"
-            aria-controls="navigation"
-          >
+            aria-controls="navigation">
             <span></span>
             <span></span>
             <span></span>
@@ -248,8 +215,7 @@
                 name="q"
                 aria-labelledby="SearchInput"
                 placeholder="Search"
-                class="search-textfield"
-              />
+                class="search-textfield" />
               <button type="submit" class="gsc-search-button">
                 <span class="ca-gov-icon-search" aria-hidden="true"></span>
                 <span class="sr-only">Entregar</span>
@@ -257,8 +223,7 @@
               <div class="close-search-btn">
                 <button
                   class="close-search gsc-clear-button border-0 bg-transparent pos-rel"
-                  type="reset"
-                >
+                  type="reset">
                   <span class="sr-only">Cerca</span>
                 </button>
               </div>
@@ -266,34 +231,7 @@
           </div>
         </div>
         <!-- navigation types -->
-        <nav
-          id="navigation"
-          class="main-navigation dropdown"
-          aria-label="Main navigation"
-        >
-          <ul id="nav_list" class="top-level-nav">
-            <li class="nav-item">
-              <a class="first-level-link" href="primary-elements-es.html"
-                >Elementos primarios</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="accomplishments-es.html" class="first-level-link"
-                >Logros</a
-              >
-            </li>
-            <li class="nav-item">
-              <a class="first-level-link" href="projects-es.html"
-                >Proyectos y esfuerzos de sinergia</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="roadmap-es.html" class="first-level-link"
-                >Hoja de ruta</a
-              >
-            </li>
-          </ul>
-        </nav>
+        {% include "nav-es.njk" %}
       </div>
     </header>
     <div id="main-content" class="main-content">
@@ -318,18 +256,15 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Hoja de ruta</h1>
                     <article class="row">
                       <!-- Timeline Date -->
                       <div
-                        class="col-md-3 text-md-end p-x-md negative-margin-top"
-                      ></div>
+                        class="col-md-3 text-md-end p-x-md negative-margin-top"></div>
                       <!-- End Timeline Date -->
                       <!-- Timeline Content -->
                       <div
-                        class="col-md-9 pos-rel brd-md-left brd-blue-light p-x-md"
-                      >
+                        class="col-md-9 pos-rel brd-md-left brd-blue-light p-x-md">
                         <!-- Timeline Dot -->
                         <div class="timeline-dot d-none d-md-block">
                           <span
-                            class="dot-line-inner bg-white bg-primary-before brd-0 completed"
-                          ></span>
+                            class="dot-line-inner bg-white bg-primary-before brd-0 completed"></span>
                         </div>
                         <!-- End Timeline Dot -->
                         <div class="negative-margin-top">
@@ -386,18 +321,15 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Hoja de ruta</h1>
                     <article class="row">
                       <!-- Timeline Date -->
                       <div
-                        class="col-md-3 text-md-end p-x-md negative-margin-top"
-                      ></div>
+                        class="col-md-3 text-md-end p-x-md negative-margin-top"></div>
                       <!-- End Timeline Date -->
                       <!-- Timeline Content -->
                       <div
-                        class="col-md-9 pos-rel brd-md-left brd-blue-light p-x-md"
-                      >
+                        class="col-md-9 pos-rel brd-md-left brd-blue-light p-x-md">
                         <!-- Timeline Dot -->
                         <div class="timeline-dot d-none d-md-block">
                           <span
-                            class="dot-line-inner current-step-bg bg-primary-before brd-0"
-                          ></span>
+                            class="dot-line-inner current-step-bg bg-primary-before brd-0"></span>
                         </div>
                         <!-- End Timeline Dot -->
                         <div class="negative-margin-top">
@@ -439,18 +371,15 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Hoja de ruta</h1>
                     <article class="row">
                       <!-- Timeline Date -->
                       <div
-                        class="col-md-3 text-md-end p-x-md negative-margin-top"
-                      ></div>
+                        class="col-md-3 text-md-end p-x-md negative-margin-top"></div>
                       <!-- End Timeline Date -->
                       <!-- Timeline Content -->
                       <div
-                        class="col-md-9 pos-rel brd-md-left brd-gray-light p-x-md"
-                      >
+                        class="col-md-9 pos-rel brd-md-left brd-gray-light p-x-md">
                         <!-- Timeline Dot -->
                         <div class="timeline-dot d-none d-md-block">
                           <span
-                            class="dot-line-inner current-step-bg bg-primary-before white-dot brd-0"
-                          ></span>
+                            class="dot-line-inner current-step-bg bg-primary-before white-dot brd-0"></span>
                         </div>
                         <!-- End Timeline Dot -->
                         <div class="negative-margin-top">
@@ -494,19 +423,16 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Hoja de ruta</h1>
                     <article class="row">
                       <!-- Timeline Date -->
                       <div
-                        class="col-md-3 text-md-end p-x-md negative-margin-top"
-                      ></div>
+                        class="col-md-3 text-md-end p-x-md negative-margin-top"></div>
                       <!-- End Timeline Date -->
                       <!-- Timeline Content -->
                       <div class="col-md-9 pos-rel p-x-md">
                         <!-- Timeline Dot -->
                         <div
                           class="timeline-dot d-none d-md-block"
-                          style="left: -0.8rem"
-                        >
+                          style="left: -0.8rem">
                           <span
-                            class="dot-line-inner white-dot future-step-bg bg-primary-before brd-0"
-                          ></span>
+                            class="dot-line-inner white-dot future-step-bg bg-primary-before brd-0"></span>
                         </div>
                         <!-- End Timeline Dot -->
                         <div class="negative-margin-top">
@@ -531,121 +457,12 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Hoja de ruta</h1>
             <!--End Experience-->
           </div>
         </div>
-        <div
-          class="bottom-section p-b-sm"
-          style="background: var(--v-6-gray-100, #ededef)"
-        >
-          <div class="container row">
-            <div class="col-md-6">
-              <h2 class="h4">Sobre Marco de Identidad Digital</h2>
-              <ul class="list-unstyled">
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/digitalID/"
-                    >Proyecto de Identidad Digital</a
-                  >
-                </li>
-                <div>
-                  <a
-                    href="https://cdt.ca.gov/"
-                    hreflang="en"
-                    class="no-underline color-black"
-                    >Departamento de Tecnología de California</a
-                  >
-                </div>
-              </ul>
-            </div>
-            <div class="col-md-6">
-              <h2 class="h4">Planes estratégicos estatales</h2>
-              <ul class="list-unstyled">
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://digitalstrategy.cdt.ca.gov/index.html"
-                    >Estrategia Digital</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/wp-content/uploads/2023/08/Bridge-to-the-Future.pdf"
-                    >Puente al futuro</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/wp-content/uploads/2021/10/Cybersecurity_Strategy_Plan_FINAL.pdf"
-                    >Hoja de ruta para la seguridad de la información -
-                    Cal-Secure</a
-                  >
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
+        <!-- Global Bottom Section -->
+        {% include "bottom-section-es.njk" %}
       </main>
     </div>
     <!-- Global Footer -->
-    <footer id="footer" class="global-footer">
-      <div class="container">
-        <div class="d-flex">
-          <a href="https://ca.gov" class="cagov-logo">
-            <span class="sr-only">CA.gov</span>
-            <span class="ca-gov-logo-svg"></span>
-          </a>
-          <ul class="footer-links">
-            <li>
-              <a href="https://cdt.ca.gov/conditions-of-use/"
-                >Condiciones de Uso</a
-              >
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/privacy-policy/"
-                >Política de privacidad
-              </a>
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/accessibility/">Accesibilidad</a>
-            </li>
-            <li>
-              <a href="/es/website-accessibility-certification-es.html">Certificación de accesibilidad del sitio web</a>
-            </li>
-            <li>
-              <a href="sitemap-es.html">Mapa del sitio</a>
-            </li>
-          </ul>
-          <ul class="socialsharer-container">
-            <li>
-              <a
-                href="https://github.com/Office-of-Digital-Innovation/California-State-Web-Template"
-              >
-                <span class="ca-gov-icon-github" aria-hidden="true"></span>
-                <span class="sr-only">GitHub</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <!-- Copyright Statement -->
-      <div class="copyright">
-        <div class="container text-right">
-          Copyright &copy;
-          <span id="thisyear">
-            <script>
-              document
-                .getElementById("thisyear")
-                .appendChild(document.createTextNode(new Date().getFullYear()));
-            </script>
-          </span>
-          Estado de California
-        </div>
-      </div>
-      <button class="return-top">
-        <span class="sr-only">Volver arriba</span>
-      </button>
-    </footer>
+    {% include "footer-es.njk" %}
     <!-- Extra Decorative Content -->
     <div class="decoration-last">&nbsp;</div>
   </body>
diff --git a/es/sitemap-es.html b/src/es/sitemap-es.html
similarity index 53%
rename from es/sitemap-es.html
rename to src/es/sitemap-es.html
index e667724..46797c9 100644
--- a/es/sitemap-es.html
+++ b/src/es/sitemap-es.html
@@ -1,140 +1,109 @@
-<!DOCTYPE html>
+---
+title: Mapa del sitio
+description: CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas.
+canonical: https://digitalidstrategy.cdt.ca.gov/es/sitemap-es.html
+shareimage: https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png
+alternatelink: https://digitalidstrategy.cdt.ca.gov/sitemap.html
+permalink: /es/sitemap-es.html
+---
+
+<!doctype html>
 <html lang="es-US">
   <head>
     <meta charset="utf-8" />
-    <title>Estrategia de identificación digital del estado de California</title>
+    <title>{{ title }}</title>
     <meta name="Author" content="State of California" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="HandheldFriendly" content="True" />
     <meta name="MobileOptimized" content="320" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <link
-      rel="alternate"
-      hreflang="en"
-      href="https://digitalidstrategy.cdt.ca.gov/sitemap.html"
-    />
+      content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="alternate" hreflang="en" href="{{ alternatelink }}" />
 
     <!-- Title Tags -->
-    <meta name="title" content="California marco de identidad digital" />
-    <meta property="og:title" content="California marco de identidad digital" />
-    <meta
-      property="twitter:title"
-      content="California marco de identidad digital"
-    />
+    <meta name="title" content="{{ title }}" />
+    <meta property="og:title" content="{{ title }}" />
+    <meta property="twitter:title" content="{{ title }}" />
 
     <!-- Description Tags -->
-    <meta
-      name="description"
-      content="CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas."
-    />
-    <meta
-      property="og:description"
-      content="CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas."
-    />
-    <meta
-      property="twitter:description"
-      content="CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas."
-    />
+    <meta name="description" content="{{ description }}" />
+    <meta property="og:description" content="{{ description }}" />
+    <meta property="twitter:description" content="{{ description }}" />
 
     <!-- Canonical link & share links, improves SEO -->
-    <link
-      href="https://digitalidstrategy.cdt.ca.gov/es/sitemap-es.html"
-      rel="canonical"
-    />
-    <meta
-      property="og:url"
-      content="https://digitalidstrategy.cdt.ca.gov/es/sitemap-es.html/"
-    />
-    <meta
-      property="twitter:url"
-      content="https://digitalidstrategy.cdt.ca.gov/es/sitemap-es.html/"
-    />
+    <link href="{{ canonical }}" rel="canonical" />
+    <meta property="og:url" content="{{ canonical }}" />
+    <meta property="twitter:url" content="{{ canonical }}" />
     <!-- END Canonical link -->
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta
       property="og:image"
-      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png" />
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
     <meta
       property="twitter:image"
-      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png" />
 
     <!-- State Template CDN CSS -->
     <link
       href="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/css/cagov.core.min.css"
       rel="stylesheet"
       integrity="sha256-f2k3x0x/l4G+mg5fxnV+Q37/8RoMOoMOWphHJ4vWn6g="
-      crossorigin="anonymous"
-    />
+      crossorigin="anonymous" />
     <!-- State Template JavaScript CDN -->
     <script
       src="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/js/cagov.core.min.js"
       integrity="sha256-MRHAOqwc4jjHeTGa/9mcdxAv3aVG+lQ7eJ9DPa+Gr/k="
       defer
-      crossorigin="anonymous"
-    ></script>
-    <link rel="stylesheet" href="../css/custom.css" />
+      crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="/css/custom.css" />
     <!-- END STATE_TEMPLATE -->
 
     <link
       rel="apple-touch-icon-precomposed"
       sizes="100x100"
-      href="images/apple-touch-icon-precomposed.png"
-    />
+      href="/images/apple-touch-icon-precomposed.png" />
     <link
       rel="icon"
       sizes="192x192"
-      href="images/apple-touch-icon-192x192.png"
-    />
+      href="/images/apple-touch-icon-192x192.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="180x180"
-      href="images/apple-touch-icon-180x180.png"
-    />
+      href="/images/apple-touch-icon-180x180.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="152x152"
-      href="images/apple-touch-icon-152x152.png"
-    />
+      href="/images/apple-touch-icon-152x152.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="144x144"
-      href="images/apple-touch-icon-144x144.png"
-    />
+      href="/images/apple-touch-icon-144x144.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="120x120"
-      href="images/apple-touch-icon-120x120.png"
-    />
+      href="/images/apple-touch-icon-120x120.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="114x114"
-      href="images/apple-touch-icon-114x114.png"
-    />
+      href="/images/apple-touch-icon-114x114.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="72x72"
-      href="images/apple-touch-icon-72x72.png"
-    />
+      href="/images/apple-touch-icon-72x72.png" />
     <link
       rel="apple-touch-icon-precomposed"
-      href="images/apple-touch-icon-57x57.png"
-    />
-    <link rel="shortcut icon" href="images/apple-touch-icon-57x57.png" />
-    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
+      href="/images/apple-touch-icon-57x57.png" />
+    <link rel="shortcut icon" href="/images/apple-touch-icon-57x57.png" />
+    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />
     <link
       rel="shortcut icon"
-      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png"
-    />
+      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png" />
     <!-- Statewide Alerts Server -->
     <script defer src="https://alert.cdt.ca.gov"></script>
     <!-- BEGIN Google Tag Manager -->
@@ -210,7 +179,7 @@
               </p>
             </div>
             <div class="translation-link">
-              <a href="../sitemap.html" hreflang="en" rel="alternate" lang="es"
+              <a href="/sitemap/" rel="alternate" hreflang="en" lang="es"
                 >Inglés</a
               >
             </div>
@@ -221,14 +190,13 @@
       <div class="section-default">
         <div class="branding">
           <div class="header-organization-banner">
-            <a href="index-es.html">
+            <a href="/es/index-es/">
               <div class="logo-assets">
                 <img
-                  src="../images/blue-gold-fingerprint.png"
+                  src="/images/blue-gold-fingerprint.png"
                   alt="Fingerprint icon"
                   height="66px"
-                  width="67px"
-                />
+                  width="67px" />
                 <div class="logo-text">
                   <span class="logo-state">California</span>
                   <span class="logo-dept">Marco de identidad digital</span>
@@ -248,8 +216,7 @@
             id="nav-icon3"
             class="mobile-control toggle-menu"
             aria-expanded="false"
-            aria-controls="navigation"
-          >
+            aria-controls="navigation">
             <span></span>
             <span></span>
             <span></span>
@@ -270,8 +237,7 @@
                 name="q"
                 aria-labelledby="SearchInput"
                 placeholder="Search"
-                class="search-textfield"
-              />
+                class="search-textfield" />
               <button type="submit" class="gsc-search-button">
                 <span class="ca-gov-icon-search" aria-hidden="true"></span>
                 <span class="sr-only">Entregar</span>
@@ -279,8 +245,7 @@
               <div class="close-search-btn">
                 <button
                   class="close-search gsc-clear-button border-0 bg-transparent pos-rel"
-                  type="reset"
-                >
+                  type="reset">
                   <span class="sr-only">Cerca</span>
                 </button>
               </div>
@@ -288,34 +253,7 @@
           </div>
         </div>
         <!-- navigation types -->
-        <nav
-          id="navigation"
-          class="main-navigation dropdown"
-          aria-label="Main navigation"
-        >
-          <ul id="nav_list" class="top-level-nav">
-            <li class="nav-item">
-              <a class="first-level-link" href="primary-elements-es.html"
-                >Elementos primarios</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="accomplishments-es.html" class="first-level-link"
-                >Logros</a
-              >
-            </li>
-            <li class="nav-item">
-              <a class="first-level-link" href="projects-es.html"
-                >Proyectos y esfuerzos de sinergia</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="roadmap-es.html" class="first-level-link"
-                >Hoja de ruta</a
-              >
-            </li>
-          </ul>
-        </nav>
+        {% include "nav-es.njk" %}
       </div>
     </header>
     <div id="main-content" class="main-content">
@@ -340,118 +278,12 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Mapa del sitio</h1>
             </li>
           </ul>
         </div>
-        <div
-          class="bottom-section p-b-sm"
-          style="background: var(--v-6-gray-100, #ededef)"
-        >
-          <div class="container row">
-            <div class="col-md-6">
-              <h2 class="h4">Sobre Marco de Identidad Digital</h2>
-              <ul class="list-unstyled">
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/digitalID/"
-                    >Proyecto de Identidad Digital</a
-                  >
-                </li>
-                <div>
-                  <a
-                    href="https://cdt.ca.gov/"
-                    hreflang="en"
-                    class="no-underline color-black"
-                    >Departamento de Tecnología de California</a
-                  >
-                </div>
-              </ul>
-            </div>
-            <div class="col-md-6">
-              <h2 class="h4">Planes estratégicos estatales</h2>
-              <ul class="list-unstyled">
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://digitalstrategy.cdt.ca.gov/index.html"
-                    >Estrategia digital</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/wp-content/uploads/2023/08/Bridge-to-the-Future.pdf"
-                    >Puente al futuro</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/wp-content/uploads/2021/10/Cybersecurity_Strategy_Plan_FINAL.pdf"
-                    >Hoja de ruta para la seguridad de la información -
-                    <i>Cal-Secure</i></a
-                  >
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
+        <!-- Global Bottom Section -->
+        {% include "bottom-section-es.njk" %}
       </main>
     </div>
     <!-- Global Footer -->
-    <footer id="footer" class="global-footer">
-      <div class="container">
-        <div class="d-flex">
-          <a href="https://ca.gov" class="cagov-logo">
-            <span class="sr-only">CA.gov</span>
-            <span class="ca-gov-logo-svg"></span>
-          </a>
-          <ul class="footer-links">
-            <li>
-              <a href="https://cdt.ca.gov/conditions-of-use/"
-                >Condiciones de Uso</a
-              >
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/privacy-policy/"
-                >Política de privacidad
-              </a>
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/accessibility/">Accesibilidad</a>
-            </li>
-            <li>
-              <a href="sitemap-es.html">Mapa del sitio</a>
-            </li>
-          </ul>
-          <ul class="socialsharer-container">
-            <li>
-              <a
-                href="https://github.com/Office-of-Digital-Innovation/California-State-Web-Template"
-              >
-                <span class="ca-gov-icon-github" aria-hidden="true"></span>
-                <span class="sr-only">GitHub</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <!-- Copyright Statement -->
-      <div class="copyright">
-        <div class="container text-right">
-          Copyright &copy;
-          <span id="thisyear">
-            <script>
-              document
-                .getElementById("thisyear")
-                .appendChild(document.createTextNode(new Date().getFullYear()));
-            </script>
-          </span>
-          Estado de California
-        </div>
-      </div>
-      <button class="return-top">
-        <span class="sr-only">Volver arriba</span>
-      </button>
-    </footer>
+    {% include "footer-es.njk" %}
     <!-- Extra Decorative Content -->
     <div class="decoration-last">&nbsp;</div>
   </body>
diff --git a/src/es/website-accessibility-certification-es.html b/src/es/website-accessibility-certification-es.html
new file mode 100644
index 0000000..3073b50
--- /dev/null
+++ b/src/es/website-accessibility-certification-es.html
@@ -0,0 +1,352 @@
+---
+title: Certificación de accesibilidad del sitio web
+description: CDT lidera todos los aspectos del Marco de Identidad Digital de California, este sistema permite verificar la identidad digital y la elegibilidad a programas.
+canonical: https://digitalidstrategy.cdt.ca.gov/es/website-accessibility-certification-es.html
+shareimage: https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png
+alternatelink: https://digitalidstrategy.cdt.ca.gov/website-accessibility-certification.html
+permalink: /es/website-accessibility-certification-es.html
+---
+
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8" />
+    <title>{{ title }}</title>
+    <meta name="Author" content="State of California" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="HandheldFriendly" content="True" />
+    <meta name="MobileOptimized" content="320" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="alternate" hreflang="en" href="{{ alternatelink }}" />
+
+    <!-- Title Tags -->
+    <meta name="title" content="{{ title }}" />
+    <meta property="og:title" content="{{ title }}" />
+    <meta property="twitter:title" content="{{ title }}" />
+
+    <!-- Description Tags -->
+    <meta name="description" content="{{ description }}" />
+    <meta property="og:description" content="{{ description }}" />
+    <meta property="twitter:description" content="{{ description }}" />
+
+    <!-- Canonical link, improves SEO -->
+    <link href="{{ canonical }}" rel="canonical" />
+    <meta property="og:url" content="{{ canonical }}" />
+    <meta property="twitter:url" content="{{ canonical }}" />
+    <!-- END Canonical link -->
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:image"
+      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png" />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta
+      property="twitter:image"
+      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png" />
+
+    <!-- State Template CDN CSS -->
+    <link
+      href="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/css/cagov.core.min.css"
+      rel="stylesheet"
+      integrity="sha256-f2k3x0x/l4G+mg5fxnV+Q37/8RoMOoMOWphHJ4vWn6g="
+      crossorigin="anonymous" />
+    <!-- State Template JavaScript CDN -->
+    <script
+      src="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/js/cagov.core.min.js"
+      integrity="sha256-MRHAOqwc4jjHeTGa/9mcdxAv3aVG+lQ7eJ9DPa+Gr/k="
+      defer
+      crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="/css/custom.css" />
+    <!-- END STATE_TEMPLATE -->
+
+    <link
+      rel="apple-touch-icon-precomposed"
+      sizes="100x100"
+      href="/images/apple-touch-icon-precomposed.png" />
+    <link
+      rel="icon"
+      sizes="192x192"
+      href="/images/apple-touch-icon-192x192.png" />
+    <link
+      rel="apple-touch-icon-precomposed"
+      sizes="180x180"
+      href="/images/apple-touch-icon-180x180.png" />
+    <link
+      rel="apple-touch-icon-precomposed"
+      sizes="152x152"
+      href="/images/apple-touch-icon-152x152.png" />
+    <link
+      rel="apple-touch-icon-precomposed"
+      sizes="144x144"
+      href="/images/apple-touch-icon-144x144.png" />
+    <link
+      rel="apple-touch-icon-precomposed"
+      sizes="120x120"
+      href="/images/apple-touch-icon-120x120.png" />
+    <link
+      rel="apple-touch-icon-precomposed"
+      sizes="114x114"
+      href="/images/apple-touch-icon-114x114.png" />
+    <link
+      rel="apple-touch-icon-precomposed"
+      sizes="72x72"
+      href="/images/apple-touch-icon-72x72.png" />
+    <link
+      rel="apple-touch-icon-precomposed"
+      href="/images/apple-touch-icon-57x57.png" />
+    <link rel="shortcut icon" href="/images/apple-touch-icon-57x57.png" />
+    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />
+    <link
+      rel="shortcut icon"
+      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png" />
+    <!-- Statewide Alerts Server -->
+    <script defer src="https://alert.cdt.ca.gov"></script>
+    <!-- BEGIN Google Tag Manager -->
+    <link rel="preconnect" href="https://www.googletagmanager.com" />
+    <link rel="preconnect" href="https://www.google-analytics.com" />
+    <script>
+      //*** BEGIN STATE TEMPLATE CHANGE REQUESTED
+      //Your GA4 Measurement ID that this website should use for website analytics
+      var yourGA4MeasurementId = "G-CLMC17ZTJT";
+      //*** END STATE TEMPLATE CHANGE REQUESTED
+
+      //Support code to make this work, just leave this as is
+      var stateGTMAccount = "GTM-NJ6Q4MV"; //GTM-NJ6Q4MV - all ca.gov
+      (function (w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l != "dataLayer" ? "&l=" + l : "";
+        j.async = true;
+        j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
+        f.parentNode.insertBefore(j, f);
+        (function () {
+          dataLayer.push(arguments);
+        })("config", yourGA4MeasurementId, {
+          cookie_flags: "secure;samesite=lax;domain=",
+        });
+      })(window, document, "script", "dataLayer", stateGTMAccount);
+    </script>
+    <!-- END Google Tag Manager -->
+
+    <script type="text/javascript">
+      let languageFlag = sessionStorage.getItem("isBrowserSpanish");
+      let lang = window.navigator.languages
+        ? window.navigator.languages[0]
+        : null;
+      lang =
+        lang ||
+        window.navigator.language ||
+        window.navigator.browserLanguage ||
+        window.navigator.userLanguage;
+
+      let shortLang = lang;
+      if (shortLang.indexOf("-") !== -1) shortLang = shortLang.split("-")[0];
+
+      if (shortLang.indexOf("_") !== -1) shortLang = shortLang.split("_")[0];
+
+      if (shortLang === "es" && !languageFlag) {
+        window.location.replace("./" + shortLang + "/website-accessibility-certification-es.html");
+        sessionStorage.setItem("isBrowserSpanish", "true");
+      }
+    </script>
+  </head>
+
+  <body class="primary">
+    <header role="banner" id="header" class="global-header fixed">
+      <div id="skip-to-content">
+        <a href="#main-content">Skip to Main Content</a>
+      </div>
+      <div class="utility-header">
+        <div class="container">
+          <div class="flex-row">
+            <div class="social-media-links">
+              <div class="header-cagov-logo">
+                <a href="https://ca.gov">
+                  <span class="sr-only">CA.gov</span>
+                  <span class="ca-gov-logo-svg"></span>
+                </a>
+              </div>
+              <p class="official-tag">
+                <span class="desktop-only">Official website of the</span>
+                State of California
+              </p>
+            </div>
+            <div class="translation-link">
+              <a
+                href="/website-accessibility-certification/"
+                rel="alternate"
+                hreflang="en"
+                lang="es"
+                >Inglés</a
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- header branding with light gray background -->
+      <div class="section-default">
+        <div class="branding">
+          <div class="header-organization-banner">
+            <a href="/es/index-es/">
+              <div class="logo-assets">
+                <img
+                  src="/images/blue-gold-fingerprint.png"
+                  alt="Fingerprint icon"
+                  width="67px" />
+                <div class="logo-text">
+                  <span class="logo-state">California State</span>
+                  <span class="logo-dept">Digital ID Framework</span>
+                </div>
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+      <!-- mobile navigation controls -->
+      <div class="mobile-controls">
+        <span class="mobile-control-group mobile-header-icons">
+          <!-- Add more mobile controls here. These will be on the right side of the mobile page header section -->
+        </span>
+        <div class="mobile-control-group main-nav-icons">
+          <button
+            id="nav-icon3"
+            class="mobile-control toggle-menu"
+            aria-expanded="false"
+            aria-controls="navigation">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span class="sr-only">Menu</span>
+          </button>
+        </div>
+      </div>
+      <div class="navigation-search full-width-nav container">
+        <div id="head-search" class="search-container featured-search hidden">
+          <div class="container">
+            <form id="Search" class="pos-rel" action="serp.html">
+              <span class="sr-only" id="SearchInput">Custom Google Search</span>
+              <input
+                type="search"
+                name="q"
+                aria-labelledby="SearchInput"
+                placeholder="Search"
+                class="search-textfield" />
+              <button type="submit" class="gsc-search-button">
+                <span class="ca-gov-icon-search" aria-hidden="true"></span>
+                <span class="sr-only">Submit</span>
+              </button>
+              <div class="close-search-btn">
+                <button
+                  class="close-search gsc-clear-button border-0 bg-transparent pos-rel"
+                  type="reset">
+                  <span class="sr-only">Close</span>
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+        <!-- navigation types -->
+        {% include "nav-es.njk" %}
+      </div>
+    </header>
+    <div id="main-content" class="main-content">
+      <main class="main-primary" id="main">
+        <div class="focus-area-header">
+          <h1 class="container m-t-0 p-b-lg p-t-lg">
+            Certificación de Accesibilidad de Sitios Web
+          </h1>
+        </div>
+        <div class="container">
+          <div class="row">
+            <div class="col-md-10 p-b-lg">
+              <h2>Certificación 2025</h2>
+
+              <div class="m-b-lg">
+                <h3 class="m-b-0">Agencia:</h3>
+                Departamento de Tecnología de California
+              </div>
+              <div class="m-b-lg">
+                <h3 class="m-b-0">Fecha de certificación:</h3>
+                10 de junio de 2025
+              </div>
+              <div class="m-b-lg">
+                <h3 class="m-b-0">Contacto:</h3>
+                <a href="mailto:example@state.ca.gov">
+                  ServiceDesk@state.ca.gov
+                </a>
+              </div>
+
+              <p class="lh-lg">
+                Los abajo firmantes certifican que, a partir del
+                <strong>10 de junio de 2025</strong>, el sitio web del
+                <strong
+                  >Estrategia de identificación digital del estado de
+                  California</strong
+                >
+                está diseñado, desarrollado y mantenido para ser accesible. Esto
+                indica el cumplimiento de lo siguiente:
+              </p>
+
+              <ul class="m-b-lg">
+                <li>
+                  Secciones
+                  <a
+                    href="https://leginfo.legislature.ca.gov/faces/codes_displaySection.xhtml?sectionNum=7405&lawCode=GOV"
+                    >7405 del Código de Gobierno de California</a
+                  >,
+                  <a
+                    href="https://leginfo.legislature.ca.gov/faces/codes_displaySection.xhtml?sectionNum=11135&lawCode=GOV"
+                    >11135</a
+                  >, y
+                  <a
+                    href="vhttps://leginfo.legislature.ca.gov/faces/codes_displaySection.xhtml?sectionNum=11546.7&lawCode=GOV"
+                    >11546.7</a
+                  >
+                </li>
+                <li>
+                  <a href="https://www.w3.org/TR/WCAG21?portal-california"
+                    >Pautas de accesibilidad al contenido web 2.1</a
+                  >
+                  publicado por la Iniciativa de Accesibilidad Web del Consorcio
+                  World Wide Web
+                </li>
+                <li>Criterios de éxito de nivel AA como mínimo</li>
+              </ul>
+
+              <div class="row">
+                <div class="lh-lg">
+                  <strong>Quentin Wright</strong>
+                  <p>
+                    Director de Información<br />
+                    (Firma en archivo) 10 de junio de 2025
+                  </p>
+                </div>
+                <div class="lh-lg">
+                  <strong>Liana Bailey-Crimmins</strong>
+                  <p>
+                    Director<br />
+                    (Firma en archivo) 10 de junio de 2025
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Global Bottom Section -->
+        {% include "bottom-section-es.njk" %}
+      </main>
+    </div>
+    <!-- Global Footer -->
+    {% include "footer-es.njk" %}
+    <!-- Extra Decorative Content -->
+    <div class="decoration-last">&nbsp;</div>
+  </body>
+</html>
diff --git a/images/aod.svg b/src/images/aod.svg
similarity index 100%
rename from images/aod.svg
rename to src/images/aod.svg
diff --git a/images/apple-touch-icon-114x114.png b/src/images/apple-touch-icon-114x114.png
similarity index 100%
rename from images/apple-touch-icon-114x114.png
rename to src/images/apple-touch-icon-114x114.png
diff --git a/images/apple-touch-icon-120x120.png b/src/images/apple-touch-icon-120x120.png
similarity index 100%
rename from images/apple-touch-icon-120x120.png
rename to src/images/apple-touch-icon-120x120.png
diff --git a/images/apple-touch-icon-144x144.png b/src/images/apple-touch-icon-144x144.png
similarity index 100%
rename from images/apple-touch-icon-144x144.png
rename to src/images/apple-touch-icon-144x144.png
diff --git a/images/apple-touch-icon-152x152.png b/src/images/apple-touch-icon-152x152.png
similarity index 100%
rename from images/apple-touch-icon-152x152.png
rename to src/images/apple-touch-icon-152x152.png
diff --git a/images/apple-touch-icon-180x180.png b/src/images/apple-touch-icon-180x180.png
similarity index 100%
rename from images/apple-touch-icon-180x180.png
rename to src/images/apple-touch-icon-180x180.png
diff --git a/images/apple-touch-icon-192x192.png b/src/images/apple-touch-icon-192x192.png
similarity index 100%
rename from images/apple-touch-icon-192x192.png
rename to src/images/apple-touch-icon-192x192.png
diff --git a/images/apple-touch-icon-57x57.png b/src/images/apple-touch-icon-57x57.png
similarity index 100%
rename from images/apple-touch-icon-57x57.png
rename to src/images/apple-touch-icon-57x57.png
diff --git a/images/apple-touch-icon-72x72.png b/src/images/apple-touch-icon-72x72.png
similarity index 100%
rename from images/apple-touch-icon-72x72.png
rename to src/images/apple-touch-icon-72x72.png
diff --git a/images/apple-touch-icon-precomposed.png b/src/images/apple-touch-icon-precomposed.png
similarity index 100%
rename from images/apple-touch-icon-precomposed.png
rename to src/images/apple-touch-icon-precomposed.png
diff --git a/images/apple-touch-icon.png b/src/images/apple-touch-icon.png
similarity index 100%
rename from images/apple-touch-icon.png
rename to src/images/apple-touch-icon.png
diff --git a/images/badge.svg b/src/images/badge.svg
similarity index 100%
rename from images/badge.svg
rename to src/images/badge.svg
diff --git a/images/blue-gold-fingerprint.png b/src/images/blue-gold-fingerprint.png
similarity index 100%
rename from images/blue-gold-fingerprint.png
rename to src/images/blue-gold-fingerprint.png
diff --git a/images/digital-id-framework-v2-es.svg b/src/images/digital-id-framework-v2-es.svg
similarity index 100%
rename from images/digital-id-framework-v2-es.svg
rename to src/images/digital-id-framework-v2-es.svg
diff --git a/images/digital-id-framework-v2.svg b/src/images/digital-id-framework-v2.svg
similarity index 100%
rename from images/digital-id-framework-v2.svg
rename to src/images/digital-id-framework-v2.svg
diff --git a/images/digital-id-framework.png b/src/images/digital-id-framework.png
similarity index 100%
rename from images/digital-id-framework.png
rename to src/images/digital-id-framework.png
diff --git a/images/digital-id-framework.svg b/src/images/digital-id-framework.svg
similarity index 100%
rename from images/digital-id-framework.svg
rename to src/images/digital-id-framework.svg
diff --git a/images/encrypted.svg b/src/images/encrypted.svg
similarity index 100%
rename from images/encrypted.svg
rename to src/images/encrypted.svg
diff --git a/images/fingerprint-check.svg b/src/images/fingerprint-check.svg
similarity index 100%
rename from images/fingerprint-check.svg
rename to src/images/fingerprint-check.svg
diff --git a/images/flowchart.svg b/src/images/flowchart.svg
similarity index 100%
rename from images/flowchart.svg
rename to src/images/flowchart.svg
diff --git a/images/lightrail-share.png b/src/images/lightrail-share.png
similarity index 100%
rename from images/lightrail-share.png
rename to src/images/lightrail-share.png
diff --git a/images/lightrail.png b/src/images/lightrail.png
similarity index 100%
rename from images/lightrail.png
rename to src/images/lightrail.png
diff --git a/images/pro-services.svg b/src/images/pro-services.svg
similarity index 100%
rename from images/pro-services.svg
rename to src/images/pro-services.svg
diff --git a/images/users-dialog.svg b/src/images/users-dialog.svg
similarity index 100%
rename from images/users-dialog.svg
rename to src/images/users-dialog.svg
diff --git a/index.html b/src/index.html
similarity index 69%
rename from index.html
rename to src/index.html
index e564e69..34570a9 100644
--- a/index.html
+++ b/src/index.html
@@ -1,139 +1,115 @@
-<!DOCTYPE html>
+---
+title: California State Digital ID Strategy
+description: CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification.
+canonical: https://digitalidstrategy.cdt.ca.gov/
+shareimage: https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png
+alternatelink: https://digitalidstrategy.cdt.ca.gov/es/index-es.html
+permalink: /index.html
+---
+
+<!doctype html>
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />
-    <title>California State Digital ID Strategy</title>
+    <title>{{ title }}</title>
     <meta name="Author" content="State of California" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="HandheldFriendly" content="True" />
     <meta name="MobileOptimized" content="320" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <link
-      rel="alternate"
-      hreflang="es"
-      href="https://digitalidstrategy.cdt.ca.gov/es/index-es.html"
-    />
+      content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="alternate" hreflang="es" href="{{ alternatelink }}" />
 
     <!-- Title Tags -->
-    <meta name="title" content="California State Digital ID Strategy" />
-    <meta property="og:title" content="California State Digital ID Strategy" />
-    <meta
-      property="twitter:title"
-      content="California State Digital ID Strategy"
-    />
+    <meta name="title" content="{{ title }}" />
+    <meta property="og:title" content="{{ title }}" />
+    <meta property="twitter:title" content="{{ title }}" />
 
     <!-- Description Tags -->
-    <meta
-      name="description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
-    <meta
-      property="og:description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
-    <meta
-      property="twitter:description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
+    <meta name="description" content="{{ description }}" />
+    <meta property="og:description" content="{{ description }}" />
+    <meta property="twitter:description" content="{{ description }}" />
 
     <!-- Canonical link, improves SEO -->
-    <link href="https://digitalidstrategy.cdt.ca.gov/" rel="canonical" />
-    <meta property="og:url" content="https://digitalidstrategy.cdt.ca.gov/" />
+    <link href="{{ canonical }}" rel="canonical" />
+    <meta property="og:url" content="{{ canonical }}" />
     <meta
       property="twitter:url"
-      content="https://digitalidstrategy.cdt.ca.gov/"
-    />
+      content="https://digitalidstrategy.cdt.ca.gov/" />
     <!-- END Canonical link -->
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta
       property="og:image"
-      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png" />
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
     <meta
       property="twitter:image"
-      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png" />
 
     <!-- State Template CDN CSS -->
     <link
       href="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/css/cagov.core.min.css"
       rel="stylesheet"
       integrity="sha256-f2k3x0x/l4G+mg5fxnV+Q37/8RoMOoMOWphHJ4vWn6g="
-      crossorigin="anonymous"
-    />
+      crossorigin="anonymous" />
     <!-- State Template JavaScript CDN -->
     <script
       src="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/js/cagov.core.min.js"
       integrity="sha256-MRHAOqwc4jjHeTGa/9mcdxAv3aVG+lQ7eJ9DPa+Gr/k="
       defer
-      crossorigin="anonymous"
-    ></script>
-    <link rel="stylesheet" href="css/custom.css" />
+      crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="/css/custom.css" />
     <!-- END STATE_TEMPLATE -->
 
     <link
       rel="apple-touch-icon-precomposed"
       sizes="100x100"
-      href="images/apple-touch-icon-precomposed.png"
-    />
+      href="images/apple-touch-icon-precomposed.png" />
     <link
       rel="icon"
       sizes="192x192"
-      href="images/apple-touch-icon-192x192.png"
-    />
+      href="images/apple-touch-icon-192x192.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="180x180"
-      href="images/apple-touch-icon-180x180.png"
-    />
+      href="images/apple-touch-icon-180x180.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="152x152"
-      href="images/apple-touch-icon-152x152.png"
-    />
+      href="images/apple-touch-icon-152x152.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="144x144"
-      href="images/apple-touch-icon-144x144.png"
-    />
+      href="images/apple-touch-icon-144x144.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="120x120"
-      href="images/apple-touch-icon-120x120.png"
-    />
+      href="images/apple-touch-icon-120x120.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="114x114"
-      href="images/apple-touch-icon-114x114.png"
-    />
+      href="images/apple-touch-icon-114x114.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="72x72"
-      href="images/apple-touch-icon-72x72.png"
-    />
+      href="images/apple-touch-icon-72x72.png" />
     <link
       rel="apple-touch-icon-precomposed"
-      href="images/apple-touch-icon-57x57.png"
-    />
+      href="images/apple-touch-icon-57x57.png" />
     <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
     <link
       rel="shortcut icon"
-      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png"
-    />
+      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png" />
     <!-- Statewide Alerts Server -->
     <script
       defer
       src="https://alert.cdt.ca.gov"
-      crossorigin="anonymous"
-    ></script>
+      crossorigin="anonymous"></script>
     <!-- BEGIN Google Tag Manager -->
     <link rel="preconnect" href="https://www.googletagmanager.com" />
     <link rel="preconnect" href="https://www.google-analytics.com" />
@@ -207,7 +183,11 @@
               </p>
             </div>
             <div class="translation-link">
-              <a href="es/index-es.html" hreflang="es" rel="alternate" lang="es"
+              <a
+                href="/es/index-es.html"
+                hreflang="es"
+                rel="alternate"
+                lang="es"
                 >Español</a
               >
             </div>
@@ -218,14 +198,13 @@
       <div class="section-default">
         <div class="branding">
           <div class="header-organization-banner">
-            <a href="index.html">
+            <a href="/">
               <div class="logo-assets">
                 <img
-                  src="images/blue-gold-fingerprint.png"
+                  src="/images/blue-gold-fingerprint.png"
                   alt="Fingerprint icon"
                   height="66px"
-                  width="67px"
-                />
+                  width="67px" />
                 <div class="logo-text">
                   <span class="logo-state">California State</span>
                   <span class="logo-dept">Digital ID Framework</span>
@@ -245,8 +224,7 @@
             id="nav-icon3"
             class="mobile-control toggle-menu"
             aria-expanded="false"
-            aria-controls="navigation"
-          >
+            aria-controls="navigation">
             <span></span>
             <span></span>
             <span></span>
@@ -265,8 +243,7 @@
                 name="q"
                 aria-labelledby="SearchInput"
                 placeholder="Search"
-                class="search-textfield"
-              />
+                class="search-textfield" />
               <button type="submit" class="gsc-search-button">
                 <span class="ca-gov-icon-search" aria-hidden="true"></span>
                 <span class="sr-only">Submit</span>
@@ -274,8 +251,7 @@
               <div class="close-search-btn">
                 <button
                   class="close-search gsc-clear-button border-0 bg-transparent pos-rel"
-                  type="reset"
-                >
+                  type="reset">
                   <span class="sr-only">Close</span>
                 </button>
               </div>
@@ -283,32 +259,7 @@
           </div>
         </div>
         <!-- navigation types -->
-        <nav
-          id="navigation"
-          class="main-navigation dropdown"
-          aria-label="Main navigation"
-        >
-          <ul id="nav_list" class="top-level-nav">
-            <li class="nav-item">
-              <a class="first-level-link" href="primary-elements.html"
-                >Primary elements</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="accomplishments.html" class="first-level-link"
-                >Accomplishments</a
-              >
-            </li>
-            <li class="nav-item">
-              <a class="first-level-link" href="projects.html"
-                >Projects and synergy efforts</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="roadmap.html" class="first-level-link">Roadmap</a>
-            </li>
-          </ul>
-        </nav>
+        {% include "nav.njk" %}
       </div>
     </header>
     <div id="main-content" class="main-content">
@@ -463,11 +414,10 @@ <h2>How it works</h2>
             </p>
 
             <img
-              src="images/digital-id-framework-v2.svg"
+              src="/images/digital-id-framework-v2.svg"
               class="p-b-lg"
               alt="The Digital ID framework diagram."
-              style="width: 95%"
-            />
+              style="width: 95%" />
 
             <p>
               As is shown in this diagram, the California Identity Gateway is a
@@ -520,119 +470,12 @@ <h2>How it works</h2>
           <p>We welcome your input. Provide feedback.</p> -->
           </div>
         </div>
-
-        <div
-          class="bottom-section p-b-sm"
-          style="background: var(--v-6-gray-100, #ededef)"
-        >
-        <div class="container">
-          <div class="row">
-            <div class="col-md-6">
-              <h2 class="h4">About</h2>
-              <ul class="list-unstyled">
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/digitalID/"
-                    >Digital ID Project</a
-                  >
-                </li>
-                <!-- <li><a class="no-underline color-black" href="">Contact us</a></li> -->
-              </ul>
-              <div>
-                <a href="https://cdt.ca.gov/" class="no-underline color-black"
-                  >California Department of Technology</a
-                >
-              </div>
-            </div>
-            <div class="col-md-6">
-              <h2 class="h4">State Strategic plans</h2>
-              <ul class="list-unstyled">
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://digitalstrategy.cdt.ca.gov/index.html"
-                    >Digital Strategy</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/wp-content/uploads/2023/08/Bridge-to-the-Future.pdf"
-                    >Bridge to the Future</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/wp-content/uploads/2021/10/Cybersecurity_Strategy_Plan_FINAL.pdf"
-                    >Information Security Roadmap — Cal-Secure</a
-                  >
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
+        <!-- Global Bottom Section -->
+        {% include "bottom-section.njk" %}
       </main>
     </div>
     <!-- Global Footer -->
-    <footer id="footer" class="global-footer">
-      <div class="container">
-        <div class="d-flex">
-          <a href="https://ca.gov" class="cagov-logo">
-            <span class="sr-only">CA.gov</span>
-            <span class="ca-gov-logo-svg"></span>
-          </a>
-          <ul class="footer-links">
-            <li>
-              <a href="https://cdt.ca.gov/conditions-of-use/"
-                >Conditions of use</a
-              >
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/privacy-policy/">Privacy policy</a>
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/accessibility/"> Accessibility </a>
-            </li>
-            <li>
-              <a href="/website-accessibility-certification.html">Website
-                Accessibility Certification</a>
-            </li>
-            <li>
-              <a href="sitemap.html">Sitemap</a>
-            </li>
-          </ul>
-          <ul class="socialsharer-container">
-            <li>
-              <a
-                href="https://github.com/Office-of-Digital-Innovation/California-State-Web-Template"
-              >
-                <span class="ca-gov-icon-github" aria-hidden="true"></span>
-                <span class="sr-only">GitHub</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <!-- Copyright Statement -->
-      <div class="copyright">
-        <div class="container text-right">
-          Copyright &copy;
-          <span id="thisyear">
-            <script>
-              document
-                .getElementById("thisyear")
-                .appendChild(document.createTextNode(new Date().getFullYear()));
-            </script>
-          </span>
-          State of California
-        </div>
-      </div>
-      <button class="return-top">
-        <span class="sr-only">Back to top</span>
-      </button>
-    </footer>
+    {% include "footer.njk" %}
     <!-- Extra Decorative Content -->
     <div class="decoration-last">&nbsp;</div>
   </body>
diff --git a/primary-elements.html b/src/primary-elements.html
similarity index 73%
rename from primary-elements.html
rename to src/primary-elements.html
index 43ef8e8..e33cea9 100644
--- a/primary-elements.html
+++ b/src/primary-elements.html
@@ -1,8 +1,17 @@
+---
+title: Primary elements
+description: CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification.
+canonical: https://digitalidstrategy.cdt.ca.gov/primary-elements.html
+shareimage: https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png
+alternatelink: https://digitalidstrategy.cdt.ca.gov/es/primary-elements-es.html
+permalink: /primary-elements.html
+---
+
 <!DOCTYPE html>
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />
-    <title>California State Digital ID Strategy</title>
+  <title>{{ title }}</title>
     <meta name="Author" content="State of California" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="HandheldFriendly" content="True" />
@@ -11,47 +20,22 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <link
-      rel="alternate"
-      hreflang="es"
-      href="https://digitalidstrategy.cdt.ca.gov/es/primary-elements-es.html"
-    />
+    <link rel="alternate" hreflang="es" href="{{ alternatelink }}" />
 
     <!-- Title Tags -->
-    <meta name="title" content="California State Digital ID Strategy" />
-    <meta property="og:title" content="California State Digital ID Strategy" />
-    <meta
-      property="twitter:title"
-      content="California State Digital ID Strategy"
-    />
+    <meta name="title" content="{{ title }}" />
+    <meta property="og:title" content="{{ title }}" />
+    <meta property="twitter:title" content="{{ title }}" />
 
     <!-- Description Tags -->
-    <meta
-      name="description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
-    <meta
-      property="og:description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
-    <meta
-      property="twitter:description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
+    <meta name="description" content="{{ description }}" />
+    <meta property="og:description" content="{{ description }}" />
+    <meta property="twitter:description" content="{{ description }}" />
 
     <!-- Canonical link, improves SEO -->
-    <link
-      href="https://digitalidstrategy.cdt.ca.gov/primary-elements.html"
-      rel="canonical"
-    />
-    <meta
-      property="og:url"
-      content="https://digitalidstrategy.cdt.ca.gov/primary-elements.html"
-    />
-    <meta
-      property="twitter:url"
-      content="https://digitalidstrategy.cdt.ca.gov/primary-elements.html"
-    />
+    <link href="{{ canonical }}" rel="canonical" />
+    <meta property="og:url" content="{{ canonical }}" />
+    <meta property="twitter:url" content="{{ canonical }}" />
     <!-- END Canonical link -->
 
     <!-- Open Graph / Facebook -->
@@ -82,7 +66,7 @@
       defer
       crossorigin="anonymous"
     ></script>
-    <link rel="stylesheet" href="css/custom.css" />
+    <link rel="stylesheet" href="/css/custom.css" />
     <!-- END STATE_TEMPLATE -->
 
     <link
@@ -211,7 +195,7 @@
             </div>
             <div class="translation-link">
               <a
-                href="es/primary-elements-es.html"
+                href="/es/primary-elements-es.html"
                 hreflang="es"
                 rel="alternate"
                 lang="es"
@@ -226,10 +210,10 @@
       <div class="section-default">
         <div class="branding">
           <div class="header-organization-banner">
-            <a href="index.html">
+            <a href="/">
               <div class="logo-assets">
                 <img
-                  src="images/blue-gold-fingerprint.png"
+                  src="/images/blue-gold-fingerprint.png"
                   alt="Fingerprint icon"
                   width="67px"
                 />
@@ -290,32 +274,7 @@
           </div>
         </div>
         <!-- navigation types -->
-        <nav
-          id="navigation"
-          class="main-navigation dropdown"
-          aria-label="Main navigation"
-        >
-          <ul id="nav_list" class="top-level-nav">
-            <li class="nav-item">
-              <a class="first-level-link" href="primary-elements.html"
-                >Primary elements</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="accomplishments.html" class="first-level-link"
-                >Accomplishments</a
-              >
-            </li>
-            <li class="nav-item">
-              <a class="first-level-link" href="projects.html"
-                >Projects and synergy efforts</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="roadmap.html" class="first-level-link">Roadmap</a>
-            </li>
-          </ul>
-        </nav>
+        {% include "nav.njk" %}
       </div>
     </header>
     <div id="main-content" class="main-content">
@@ -332,7 +291,7 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Primary elements</h1>
 
           <div class="flex primary-card m-b-lg">
             <div class="p-r">
-              <img src="images/badge.svg" alt="Badge icon" />
+              <img src="/images/badge.svg" alt="Badge icon" />
             </div>
             <div class="p-r-lg">
               <strong>Digital ID</strong>
@@ -371,7 +330,7 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Primary elements</h1>
 
           <div class="flex primary-card m-b-lg">
             <div class="p-r">
-              <img src="images/badge.svg" alt="Badge icon" />
+              <img src="/images/badge.svg" alt="Badge icon" />
             </div>
             <div class="p-r-lg">
               <strong>California Identity Gateway</strong>
@@ -397,7 +356,7 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Primary elements</h1>
           </div>
           <div class="flex primary-card m-b-lg">
             <div class="p-r">
-              <img src="images/encrypted.svg" alt="Encrypted icon" />
+              <img src="/images/encrypted.svg" alt="Encrypted icon" />
             </div>
             <div class="p-r-lg">
               <strong>Digital Credentials</strong>
@@ -431,7 +390,7 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Primary elements</h1>
           </div>
           <div class="flex primary-card m-b-lg">
             <div class="p-r">
-              <img src="images/aod.svg" alt="Mobile phone icon" />
+              <img src="/images/aod.svg" alt="Mobile phone icon" />
             </div>
             <div class="p-r-lg">
               <strong>Digital Wallet</strong>
@@ -508,120 +467,13 @@ <h3 class="h5">Openness and transparency</h3>
             software whenever possible.
           </p>
         </div>
-
-        <div
-          class="bottom-section p-b-sm"
-          style="background: var(--v-6-gray-100, #ededef)"
-        >
-          <div class="container">
-            <div class="row">
-              <div class="col-md-6">
-                <h2 class="h4">About</h2>
-                <ul class="list-unstyled">
-                  <li>
-                    <a
-                      class="no-underline color-black"
-                      href="https://cdt.ca.gov/digitalID/"
-                      >Digital ID Project</a
-                    >
-                  </li>
-                  <!-- <li><a class="no-underline color-black" href="">Contact us</a></li> -->
-                </ul>
-                <div>
-                  <a href="https://cdt.ca.gov/" class="no-underline color-black"
-                    >California Department of Technology</a
-                  >
-                </div>
-              </div>
-              <div class="col-md-6">
-                <h2 class="h4">State Strategic plans</h2>
-                <ul class="list-unstyled">
-                  <li>
-                    <a
-                      class="no-underline color-black"
-                      href="https://digitalstrategy.cdt.ca.gov/index.html"
-                      >Digital Strategy</a
-                    >
-                  </li>
-                  <li>
-                    <a
-                      class="no-underline color-black"
-                      href="https://cdt.ca.gov/wp-content/uploads/2023/08/Bridge-to-the-Future.pdf"
-                      >Bridge to the Future</a
-                    >
-                  </li>
-                  <li>
-                    <a
-                      class="no-underline color-black"
-                      href="https://cdt.ca.gov/wp-content/uploads/2021/10/Cybersecurity_Strategy_Plan_FINAL.pdf"
-                      >Information Security Roadmap — Cal-Secure</a
-                    >
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
+        <!-- Global Bottom Section -->
+        {% include "bottom-section.njk" %}
         </div>
       </main>
     </div>
     <!-- Global Footer -->
-    <footer id="footer" class="global-footer">
-      <div class="container">
-        <div class="d-flex">
-          <a href="https://ca.gov" class="cagov-logo">
-            <span class="sr-only">CA.gov</span>
-            <span class="ca-gov-logo-svg"></span>
-          </a>
-          <ul class="footer-links">
-            <li>
-              <a href="https://cdt.ca.gov/conditions-of-use/"
-                >Conditions of use</a
-              >
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/privacy-policy/">Privacy policy</a>
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/accessibility/"> Accessibility </a>
-            </li>
-            <li>
-              <a href="/website-accessibility-certification.html">Website
-                Accessibility Certification</a>
-            </li>
-            <li>
-              <a href="sitemap.html">Sitemap</a>
-            </li>
-          </ul>
-          <ul class="socialsharer-container">
-            <li>
-              <a
-                href="https://github.com/Office-of-Digital-Innovation/California-State-Web-Template"
-              >
-                <span class="ca-gov-icon-github" aria-hidden="true"></span>
-                <span class="sr-only">GitHub</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <!-- Copyright Statement -->
-      <div class="copyright">
-        <div class="container text-right">
-          Copyright &copy;
-          <span id="thisyear">
-            <script>
-              document
-                .getElementById("thisyear")
-                .appendChild(document.createTextNode(new Date().getFullYear()));
-            </script>
-          </span>
-          State of California
-        </div>
-      </div>
-      <button class="return-top">
-        <span class="sr-only">Back to top</span>
-      </button>
-    </footer>
+    {% include "footer.njk" %}
     <!-- Extra Decorative Content -->
     <div class="decoration-last">&nbsp;</div>
   </body>
diff --git a/projects.html b/src/projects.html
similarity index 62%
rename from projects.html
rename to src/projects.html
index f82dd34..4b06a2a 100644
--- a/projects.html
+++ b/src/projects.html
@@ -1,140 +1,109 @@
-<!DOCTYPE html>
+---
+title: Projects and synergy efforts
+description: CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification.
+canonical: https://digitalidstrategy.cdt.ca.gov/projects.html
+shareimage: https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png
+alternatelink: https://digitalidstrategy.cdt.ca.gov/es/projects-es.html
+permalink: /projects.html
+---
+
+<!doctype html>
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />
-    <title>California State Digital ID Strategy</title>
+    <title>{{ title }}</title>
     <meta name="Author" content="State of California" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="HandheldFriendly" content="True" />
     <meta name="MobileOptimized" content="320" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <link
-      rel="alternate"
-      hreflang="es"
-      href="https://digitalidstrategy.cdt.ca.gov/es/projects-es.html"
-    />
+      content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="alternate" hreflang="es" href="{{ alternatelink }}" />
 
     <!-- Title Tags -->
-    <meta name="title" content="California State Digital ID Strategy" />
-    <meta property="og:title" content="California State Digital ID Strategy" />
-    <meta
-      property="twitter:title"
-      content="California State Digital ID Strategy"
-    />
+    <meta name="title" content="{{ title }}" />
+    <meta property="og:title" content="{{ title }}" />
+    <meta property="twitter:title" content="{{ title }}" />
 
     <!-- Description Tags -->
-    <meta
-      name="description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
-    <meta
-      property="og:description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
-    <meta
-      property="twitter:description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
+    <meta name="description" content="{{ description }}" />
+    <meta property="og:description" content="{{ description }}" />
+    <meta property="twitter:description" content="{{ description }}" />
 
     <!-- Canonical link, improves SEO -->
-    <link
-      href="https://digitalidstrategy.cdt.ca.gov/projects.html"
-      rel="canonical"
-    />
-    <meta
-      property="og:url"
-      content="https://digitalidstrategy.cdt.ca.gov/projects.html"
-    />
-    <meta
-      property="twitter:url"
-      content="https://digitalidstrategy.cdt.ca.gov/projects.html"
-    />
+    <link href="{{ canonical }}" rel="canonical" />
+    <meta property="og:url" content="{{ canonical }}" />
+    <meta property="twitter:url" content="{{ canonical }}" />
     <!-- END Canonical link -->
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta
       property="og:image"
-      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png" />
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
     <meta
       property="twitter:image"
-      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png" />
 
     <!-- State Template CDN CSS -->
     <link
       href="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/css/cagov.core.min.css"
       rel="stylesheet"
       integrity="sha256-f2k3x0x/l4G+mg5fxnV+Q37/8RoMOoMOWphHJ4vWn6g="
-      crossorigin="anonymous"
-    />
+      crossorigin="anonymous" />
     <!-- State Template JavaScript CDN -->
     <script
       src="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/js/cagov.core.min.js"
       integrity="sha256-MRHAOqwc4jjHeTGa/9mcdxAv3aVG+lQ7eJ9DPa+Gr/k="
       defer
-      crossorigin="anonymous"
-    ></script>
-    <link rel="stylesheet" href="css/custom.css" />
+      crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="/css/custom.css" />
     <!-- END STATE_TEMPLATE -->
 
     <link
       rel="apple-touch-icon-precomposed"
       sizes="100x100"
-      href="images/apple-touch-icon-precomposed.png"
-    />
+      href="images/apple-touch-icon-precomposed.png" />
     <link
       rel="icon"
       sizes="192x192"
-      href="images/apple-touch-icon-192x192.png"
-    />
+      href="images/apple-touch-icon-192x192.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="180x180"
-      href="images/apple-touch-icon-180x180.png"
-    />
+      href="images/apple-touch-icon-180x180.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="152x152"
-      href="images/apple-touch-icon-152x152.png"
-    />
+      href="images/apple-touch-icon-152x152.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="144x144"
-      href="images/apple-touch-icon-144x144.png"
-    />
+      href="images/apple-touch-icon-144x144.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="120x120"
-      href="images/apple-touch-icon-120x120.png"
-    />
+      href="images/apple-touch-icon-120x120.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="114x114"
-      href="images/apple-touch-icon-114x114.png"
-    />
+      href="images/apple-touch-icon-114x114.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="72x72"
-      href="images/apple-touch-icon-72x72.png"
-    />
+      href="images/apple-touch-icon-72x72.png" />
     <link
       rel="apple-touch-icon-precomposed"
-      href="images/apple-touch-icon-57x57.png"
-    />
+      href="images/apple-touch-icon-57x57.png" />
     <link rel="shortcut icon" href="images/apple-touch-icon-57x57.png" />
     <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
     <link
       rel="shortcut icon"
-      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png"
-    />
+      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png" />
     <!-- Statewide Alerts Server -->
     <script defer src="https://alert.cdt.ca.gov"></script>
     <!-- BEGIN Google Tag Manager -->
@@ -211,7 +180,7 @@
             </div>
             <div class="translation-link">
               <a
-                href="es/projects-es.html"
+                href="/es/projects-es.html"
                 hreflang="es"
                 rel="alternate"
                 lang="es"
@@ -225,13 +194,12 @@
       <div class="section-default">
         <div class="branding">
           <div class="header-organization-banner">
-            <a href="index.html">
+            <a href="/">
               <div class="logo-assets">
                 <img
-                  src="images/blue-gold-fingerprint.png"
+                  src="/images/blue-gold-fingerprint.png"
                   alt="Fingerprint icon"
-                  width="67px"
-                />
+                  width="67px" />
                 <div class="logo-text">
                   <span class="logo-state">California State</span>
                   <span class="logo-dept">Digital ID Framework</span>
@@ -251,8 +219,7 @@
             id="nav-icon3"
             class="mobile-control toggle-menu"
             aria-expanded="false"
-            aria-controls="navigation"
-          >
+            aria-controls="navigation">
             <span></span>
             <span></span>
             <span></span>
@@ -271,8 +238,7 @@
                 name="q"
                 aria-labelledby="SearchInput"
                 placeholder="Search"
-                class="search-textfield"
-              />
+                class="search-textfield" />
               <button type="submit" class="gsc-search-button">
                 <span class="ca-gov-icon-search" aria-hidden="true"></span>
                 <span class="sr-only">Submit</span>
@@ -280,8 +246,7 @@
               <div class="close-search-btn">
                 <button
                   class="close-search gsc-clear-button border-0 bg-transparent pos-rel"
-                  type="reset"
-                >
+                  type="reset">
                   <span class="sr-only">Close</span>
                 </button>
               </div>
@@ -289,32 +254,7 @@
           </div>
         </div>
         <!-- navigation types -->
-        <nav
-          id="navigation"
-          class="main-navigation dropdown"
-          aria-label="Main navigation"
-        >
-          <ul id="nav_list" class="top-level-nav">
-            <li class="nav-item">
-              <a class="first-level-link" href="primary-elements.html"
-                >Primary elements</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="accomplishments.html" class="first-level-link"
-                >Accomplishments</a
-              >
-            </li>
-            <li class="nav-item">
-              <a class="first-level-link" href="projects.html"
-                >Projects and synergy efforts</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="roadmap.html" class="first-level-link">Roadmap</a>
-            </li>
-          </ul>
-        </nav>
+        {% include "nav.njk" %}
       </div>
     </header>
     <div id="main-content" class="main-content">
@@ -426,119 +366,12 @@ <h4 class="m-t-0">Identity Provider integrations</h4>
             </div>
           </div>
         </div>
-        <div
-          class="bottom-section p-b-sm"
-          style="background: var(--v-6-gray-100, #ededef)"
-        >
-          <div class="container">
-            <div class="row">
-              <div class="col-md-6">
-                <h2 class="h4">About</h2>
-                <ul class="list-unstyled">
-                  <li>
-                    <a
-                      class="no-underline color-black"
-                      href="https://cdt.ca.gov/digitalID/"
-                      >Digital ID Project</a
-                    >
-                  </li>
-                  <!-- <li><a class="no-underline color-black" href="">Contact us</a></li> -->
-                </ul>
-                <div>
-                  <a href="https://cdt.ca.gov/" class="no-underline color-black"
-                    >California Department of Technology</a
-                  >
-                </div>
-              </div>
-              <div class="col-md-6">
-                <h2 class="h4">State Strategic plans</h2>
-                <ul class="list-unstyled">
-                  <li>
-                    <a
-                      class="no-underline color-black"
-                      href="https://digitalstrategy.cdt.ca.gov/index.html"
-                      >Digital Strategy</a
-                    >
-                  </li>
-                  <li>
-                    <a
-                      class="no-underline color-black"
-                      href="https://cdt.ca.gov/wp-content/uploads/2023/08/Bridge-to-the-Future.pdf"
-                      >Bridge to the Future</a
-                    >
-                  </li>
-                  <li>
-                    <a
-                      class="no-underline color-black"
-                      href="https://cdt.ca.gov/wp-content/uploads/2021/10/Cybersecurity_Strategy_Plan_FINAL.pdf"
-                      >Information Security Roadmap — Cal-Secure</a
-                    >
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
+        <!-- Global Bottom Section -->
+        {% include "bottom-section.njk" %}
       </main>
     </div>
     <!-- Global Footer -->
-    <footer id="footer" class="global-footer">
-      <div class="container">
-        <div class="d-flex">
-          <a href="https://ca.gov" class="cagov-logo">
-            <span class="sr-only">CA.gov</span>
-            <span class="ca-gov-logo-svg"></span>
-          </a>
-          <ul class="footer-links">
-            <li>
-              <a href="https://cdt.ca.gov/conditions-of-use/"
-                >Conditions of use</a
-              >
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/privacy-policy/">Privacy policy</a>
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/accessibility/"> Accessibility </a>
-            </li>
-            <li>
-              <a href="/website-accessibility-certification.html">Website
-                Accessibility Certification</a>
-            </li>
-            <li>
-              <a href="sitemap.html">Sitemap</a>
-            </li>
-          </ul>
-          <ul class="socialsharer-container">
-            <li>
-              <a
-                href="https://github.com/Office-of-Digital-Innovation/California-State-Web-Template"
-              >
-                <span class="ca-gov-icon-github" aria-hidden="true"></span>
-                <span class="sr-only">GitHub</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <!-- Copyright Statement -->
-      <div class="copyright">
-        <div class="container text-right">
-          Copyright &copy;
-          <span id="thisyear">
-            <script>
-              document
-                .getElementById("thisyear")
-                .appendChild(document.createTextNode(new Date().getFullYear()));
-            </script>
-          </span>
-          State of California
-        </div>
-      </div>
-      <button class="return-top">
-        <span class="sr-only">Back to top</span>
-      </button>
-    </footer>
+    {% include "footer.njk" %}
     <!-- Extra Decorative Content -->
     <div class="decoration-last">&nbsp;</div>
   </body>
diff --git a/roadmap.html b/src/roadmap.html
similarity index 69%
rename from roadmap.html
rename to src/roadmap.html
index cecb1a2..a4577a4 100644
--- a/roadmap.html
+++ b/src/roadmap.html
@@ -1,140 +1,109 @@
-<!DOCTYPE html>
+---
+title: Roadmap
+description: CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification.
+canonical: https://digitalidstrategy.cdt.ca.gov/roadmap.html
+shareimage: https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png
+alternatelink: https://digitalidstrategy.cdt.ca.gov/es/roadmap-es.html
+permalink: /roadmap.html
+---
+
+<!doctype html>
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />
-    <title>California State Digital ID Strategy</title>
+    <title>{{ title }}</title>
     <meta name="Author" content="State of California" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="HandheldFriendly" content="True" />
     <meta name="MobileOptimized" content="320" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <link
-      rel="alternate"
-      hreflang="es"
-      href="https://digitalidstrategy.cdt.ca.gov/es/roadmap-es.html"
-    />
+      content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="alternate" hreflang="es" href="{{ alternatelink }}" />
 
     <!-- Title Tags -->
-    <meta name="title" content="California State Digital ID Strategy" />
-    <meta property="og:title" content="California State Digital ID Strategy" />
-    <meta
-      property="twitter:title"
-      content="California State Digital ID Strategy"
-    />
+    <meta name="title" content="{{ title }}" />
+    <meta property="og:title" content="{{ title }}" />
+    <meta property="twitter:title" content="{{ title }}" />
 
     <!-- Description Tags -->
-    <meta
-      name="description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
-    <meta
-      property="og:description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
-    <meta
-      property="twitter:description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
+    <meta name="description" content="{{ description }}" />
+    <meta property="og:description" content="{{ description }}" />
+    <meta property="twitter:description" content="{{ description }}" />
 
     <!-- Canonical link, improves SEO -->
-    <link
-      href="https://digitalidstrategy.cdt.ca.gov/roadmap.html"
-      rel="canonical"
-    />
-    <meta
-      property="og:url"
-      content="https://digitalidstrategy.cdt.ca.gov/roadmap.html"
-    />
-    <meta
-      property="twitter:url"
-      content="https://digitalidstrategy.cdt.ca.gov/roadmap.html"
-    />
+    <link href="{{ canonical }}" rel="canonical" />
+    <meta property="og:url" content="{{ canonical }}" />
+    <meta property="twitter:url" content="{{ canonical }}" />
     <!-- END Canonical link -->
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta
       property="og:image"
-      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png" />
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
     <meta
       property="twitter:image"
-      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png" />
 
     <!-- State Template CDN CSS -->
     <link
       href="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/css/cagov.core.min.css"
       rel="stylesheet"
       integrity="sha256-f2k3x0x/l4G+mg5fxnV+Q37/8RoMOoMOWphHJ4vWn6g="
-      crossorigin="anonymous"
-    />
+      crossorigin="anonymous" />
     <!-- State Template JavaScript CDN -->
     <script
       src="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/js/cagov.core.min.js"
       integrity="sha256-MRHAOqwc4jjHeTGa/9mcdxAv3aVG+lQ7eJ9DPa+Gr/k="
       defer
-      crossorigin="anonymous"
-    ></script>
-    <link rel="stylesheet" href="css/custom.css" />
+      crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="/css/custom.css" />
     <!-- END STATE_TEMPLATE -->
 
     <link
       rel="apple-touch-icon-precomposed"
       sizes="100x100"
-      href="images/apple-touch-icon-precomposed.png"
-    />
+      href="images/apple-touch-icon-precomposed.png" />
     <link
       rel="icon"
       sizes="192x192"
-      href="images/apple-touch-icon-192x192.png"
-    />
+      href="images/apple-touch-icon-192x192.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="180x180"
-      href="images/apple-touch-icon-180x180.png"
-    />
+      href="images/apple-touch-icon-180x180.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="152x152"
-      href="images/apple-touch-icon-152x152.png"
-    />
+      href="images/apple-touch-icon-152x152.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="144x144"
-      href="images/apple-touch-icon-144x144.png"
-    />
+      href="images/apple-touch-icon-144x144.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="120x120"
-      href="images/apple-touch-icon-120x120.png"
-    />
+      href="images/apple-touch-icon-120x120.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="114x114"
-      href="images/apple-touch-icon-114x114.png"
-    />
+      href="images/apple-touch-icon-114x114.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="72x72"
-      href="images/apple-touch-icon-72x72.png"
-    />
+      href="images/apple-touch-icon-72x72.png" />
     <link
       rel="apple-touch-icon-precomposed"
-      href="images/apple-touch-icon-57x57.png"
-    />
+      href="images/apple-touch-icon-57x57.png" />
     <link rel="shortcut icon" href="images/apple-touch-icon-57x57.png" />
     <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
     <link
       rel="shortcut icon"
-      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png"
-    />
+      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png" />
     <!-- Statewide Alerts Server -->
     <script defer src="https://alert.cdt.ca.gov"></script>
     <!-- BEGIN Google Tag Manager -->
@@ -211,7 +180,7 @@
             </div>
             <div class="translation-link">
               <a
-                href="es/roadmap-es.html"
+                href="/es/roadmap-es.html"
                 hreflang="es"
                 rel="alternate"
                 lang="es"
@@ -225,13 +194,12 @@
       <div class="section-default">
         <div class="branding">
           <div class="header-organization-banner">
-            <a href="index.html">
+            <a href="/">
               <div class="logo-assets">
                 <img
-                  src="images/blue-gold-fingerprint.png"
+                  src="/images/blue-gold-fingerprint.png"
                   alt="Fingerprint icon"
-                  width="67px"
-                />
+                  width="67px" />
                 <div class="logo-text">
                   <span class="logo-state">California State</span>
                   <span class="logo-dept">Digital ID Framework</span>
@@ -251,8 +219,7 @@
             id="nav-icon3"
             class="mobile-control toggle-menu"
             aria-expanded="false"
-            aria-controls="navigation"
-          >
+            aria-controls="navigation">
             <span></span>
             <span></span>
             <span></span>
@@ -271,8 +238,7 @@
                 name="q"
                 aria-labelledby="SearchInput"
                 placeholder="Search"
-                class="search-textfield"
-              />
+                class="search-textfield" />
               <button type="submit" class="gsc-search-button">
                 <span class="ca-gov-icon-search" aria-hidden="true"></span>
                 <span class="sr-only">Submit</span>
@@ -280,8 +246,7 @@
               <div class="close-search-btn">
                 <button
                   class="close-search gsc-clear-button border-0 bg-transparent pos-rel"
-                  type="reset"
-                >
+                  type="reset">
                   <span class="sr-only">Close</span>
                 </button>
               </div>
@@ -289,32 +254,7 @@
           </div>
         </div>
         <!-- navigation types -->
-        <nav
-          id="navigation"
-          class="main-navigation dropdown"
-          aria-label="Main navigation"
-        >
-          <ul id="nav_list" class="top-level-nav">
-            <li class="nav-item">
-              <a class="first-level-link" href="primary-elements.html"
-                >Primary elements</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="accomplishments.html" class="first-level-link"
-                >Accomplishments</a
-              >
-            </li>
-            <li class="nav-item">
-              <a class="first-level-link" href="projects.html"
-                >Projects and synergy efforts</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="roadmap.html" class="first-level-link">Roadmap</a>
-            </li>
-          </ul>
-        </nav>
+        {% include "nav.njk" %}
       </div>
     </header>
     <div id="main-content" class="main-content">
@@ -338,18 +278,15 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Roadmap</h1>
                     <article class="row">
                       <!-- Timeline Date -->
                       <div
-                        class="col-md-3 text-md-end p-x-md negative-margin-top"
-                      ></div>
+                        class="col-md-3 text-md-end p-x-md negative-margin-top"></div>
                       <!-- End Timeline Date -->
                       <!-- Timeline Content -->
                       <div
-                        class="col-md-9 pos-rel brd-md-left brd-blue-light p-x-md"
-                      >
+                        class="col-md-9 pos-rel brd-md-left brd-blue-light p-x-md">
                         <!-- Timeline Dot -->
                         <div class="timeline-dot d-block">
                           <span
-                            class="dot-line-inner bg-white bg-primary-before brd-0 completed"
-                          ></span>
+                            class="dot-line-inner bg-white bg-primary-before brd-0 completed"></span>
                         </div>
                         <!-- End Timeline Dot -->
                         <div class="negative-margin-top">
@@ -402,18 +339,15 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Roadmap</h1>
                     <article class="row">
                       <!-- Timeline Date -->
                       <div
-                        class="col-md-3 text-md-end p-x-md negative-margin-top"
-                      ></div>
+                        class="col-md-3 text-md-end p-x-md negative-margin-top"></div>
                       <!-- End Timeline Date -->
                       <!-- Timeline Content -->
                       <div
-                        class="col-md-9 pos-rel brd-md-left brd-blue-light p-x-md"
-                      >
+                        class="col-md-9 pos-rel brd-md-left brd-blue-light p-x-md">
                         <!-- Timeline Dot -->
                         <div class="timeline-dot d-block">
                           <span
-                            class="dot-line-inner current-step-bg bg-primary-before brd-0"
-                          ></span>
+                            class="dot-line-inner current-step-bg bg-primary-before brd-0"></span>
                         </div>
                         <!-- End Timeline Dot -->
                         <div class="negative-margin-top">
@@ -455,18 +389,15 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Roadmap</h1>
                     <article class="row">
                       <!-- Timeline Date -->
                       <div
-                        class="col-md-3 text-md-end p-x-md negative-margin-top"
-                      ></div>
+                        class="col-md-3 text-md-end p-x-md negative-margin-top"></div>
                       <!-- End Timeline Date -->
                       <!-- Timeline Content -->
                       <div
-                        class="col-md-9 pos-rel brd-md-left brd-gray-light p-x-md"
-                      >
+                        class="col-md-9 pos-rel brd-md-left brd-gray-light p-x-md">
                         <!-- Timeline Dot -->
                         <div class="timeline-dot d-block">
                           <span
-                            class="dot-line-inner current-step-bg bg-primary-before white-dot brd-0"
-                          ></span>
+                            class="dot-line-inner current-step-bg bg-primary-before white-dot brd-0"></span>
                         </div>
                         <!-- End Timeline Dot -->
                         <div class="negative-margin-top">
@@ -510,16 +441,14 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Roadmap</h1>
                     <article class="row">
                       <!-- Timeline Date -->
                       <div
-                        class="col-md-3 text-md-end p-x-md negative-margin-top"
-                      ></div>
+                        class="col-md-3 text-md-end p-x-md negative-margin-top"></div>
                       <!-- End Timeline Date -->
                       <!-- Timeline Content -->
                       <div class="col-md-9 pos-rel p-x-md">
                         <!-- Timeline Dot -->
                         <div class="timeline-dot d-block" style="left: -0.8rem">
                           <span
-                            class="dot-line-inner white-dot future-step-bg bg-primary-before brd-0"
-                          ></span>
+                            class="dot-line-inner white-dot future-step-bg bg-primary-before brd-0"></span>
                         </div>
                         <!-- End Timeline Dot -->
                         <!-- <div class="negative-margin-top">
@@ -547,119 +476,12 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Roadmap</h1>
             <!--End Experience-->
           </div>
         </div>
-        <div
-          class="bottom-section p-b-sm"
-          style="background: var(--v-6-gray-100, #ededef)"
-        >
-          <div class="container">
-            <div class="row">
-              <div class="col-md-6">
-                <h2 class="h4">About</h2>
-                <ul class="list-unstyled">
-                  <li>
-                    <a
-                      class="no-underline color-black"
-                      href="https://cdt.ca.gov/digitalID/"
-                      >Digital ID Project</a
-                    >
-                  </li>
-                  <!-- <li><a class="no-underline color-black" href="">Contact us</a></li> -->
-                </ul>
-                <div>
-                  <a href="https://cdt.ca.gov/" class="no-underline color-black"
-                    >California Department of Technology</a
-                  >
-                </div>
-              </div>
-              <div class="col-md-6">
-                <h2 class="h4">State Strategic plans</h2>
-                <ul class="list-unstyled">
-                  <li>
-                    <a
-                      class="no-underline color-black"
-                      href="https://digitalstrategy.cdt.ca.gov/index.html"
-                      >Digital Strategy</a
-                    >
-                  </li>
-                  <li>
-                    <a
-                      class="no-underline color-black"
-                      href="https://cdt.ca.gov/wp-content/uploads/2023/08/Bridge-to-the-Future.pdf"
-                      >Bridge to the Future</a
-                    >
-                  </li>
-                  <li>
-                    <a
-                      class="no-underline color-black"
-                      href="https://cdt.ca.gov/wp-content/uploads/2021/10/Cybersecurity_Strategy_Plan_FINAL.pdf"
-                      >Information Security Roadmap — Cal-Secure</a
-                    >
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
+        <!-- Global Bottom Section -->
+        {% include "bottom-section.njk" %}
       </main>
     </div>
     <!-- Global Footer -->
-    <footer id="footer" class="global-footer">
-      <div class="container">
-        <div class="d-flex">
-          <a href="https://ca.gov" class="cagov-logo">
-            <span class="sr-only">CA.gov</span>
-            <span class="ca-gov-logo-svg"></span>
-          </a>
-          <ul class="footer-links">
-            <li>
-              <a href="https://cdt.ca.gov/conditions-of-use/"
-                >Conditions of use</a
-              >
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/privacy-policy/">Privacy policy</a>
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/accessibility/"> Accessibility </a>
-            </li>
-            <li>
-              <a href="/website-accessibility-certification.html">Website
-                Accessibility Certification</a>
-            </li>
-            <li>
-              <a href="sitemap.html">Sitemap</a>
-            </li>
-          </ul>
-          <ul class="socialsharer-container">
-            <li>
-              <a
-                href="https://github.com/Office-of-Digital-Innovation/California-State-Web-Template"
-              >
-                <span class="ca-gov-icon-github" aria-hidden="true"></span>
-                <span class="sr-only">GitHub</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <!-- Copyright Statement -->
-      <div class="copyright">
-        <div class="container text-right">
-          Copyright &copy;
-          <span id="thisyear">
-            <script>
-              document
-                .getElementById("thisyear")
-                .appendChild(document.createTextNode(new Date().getFullYear()));
-            </script>
-          </span>
-          State of California
-        </div>
-      </div>
-      <button class="return-top">
-        <span class="sr-only">Back to top</span>
-      </button>
-    </footer>
+    {% include "footer.njk" %}
     <!-- Extra Decorative Content -->
     <div class="decoration-last">&nbsp;</div>
   </body>
diff --git a/favicon.ico b/src/root/favicon.ico
similarity index 100%
rename from favicon.ico
rename to src/root/favicon.ico
diff --git a/robots.txt b/src/root/robots.txt
similarity index 100%
rename from robots.txt
rename to src/root/robots.txt
diff --git a/sitemap.xml b/src/root/sitemap.xml
similarity index 100%
rename from sitemap.xml
rename to src/root/sitemap.xml
diff --git a/sitemap.html b/src/sitemap.html
similarity index 55%
rename from sitemap.html
rename to src/sitemap.html
index 3341172..b781bb7 100644
--- a/sitemap.html
+++ b/src/sitemap.html
@@ -1,140 +1,109 @@
-<!DOCTYPE html>
+---
+title: Sitemap
+description: CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification.
+canonical: https://digitalidstrategy.cdt.ca.gov/sitemap.html
+shareimage: https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png
+alternatelink: https://digitalidstrategy.cdt.ca.gov/es/sitemap-es.html
+permalink: /sitemap.html
+---
+
+<!doctype html>
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />
-    <title>California State Digital ID Strategy</title>
+    <title>{{ title }}</title>
     <meta name="Author" content="State of California" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="HandheldFriendly" content="True" />
     <meta name="MobileOptimized" content="320" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <link
-      rel="alternate"
-      hreflang="es"
-      href="https://digitalidstrategy.cdt.ca.gov/es/sitemap-es.html"
-    />
+      content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="alternate" hreflang="es" href="{{ alternatelink }}" />
 
     <!-- Title Tags -->
-    <meta name="title" content="California State Digital ID Strategy" />
-    <meta property="og:title" content="California State Digital ID Strategy" />
-    <meta
-      property="twitter:title"
-      content="California State Digital ID Strategy"
-    />
+    <meta name="title" content="{{ title }}" />
+    <meta property="og:title" content="{{ title }}" />
+    <meta property="twitter:title" content="{{ title }}" />
 
     <!-- Description Tags -->
-    <meta
-      name="description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
-    <meta
-      property="og:description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
-    <meta
-      property="twitter:description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
+    <meta name="description" content="{{ description }}" />
+    <meta property="og:description" content="{{ description }}" />
+    <meta property="twitter:description" content="{{ description }}" />
 
     <!-- Canonical link, improves SEO -->
-    <link
-      href="https://digitalidstrategy.cdt.ca.gov/sitemap.html"
-      rel="canonical"
-    />
-    <meta
-      property="og:url"
-      content="https://digitalidstrategy.cdt.ca.gov/sitemap.html"
-    />
-    <meta
-      property="twitter:url"
-      content="https://digitalidstrategy.cdt.ca.gov/sitemap.html"
-    />
+    <link href="{{ canonical }}" rel="canonical" />
+    <meta property="og:url" content="{{ canonical }}" />
+    <meta property="twitter:url" content="{{ canonical }}" />
     <!-- END Canonical link -->
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta
       property="og:image"
-      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png" />
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
     <meta
       property="twitter:image"
-      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png" />
 
     <!-- State Template CDN CSS -->
     <link
       href="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/css/cagov.core.min.css"
       rel="stylesheet"
       integrity="sha256-f2k3x0x/l4G+mg5fxnV+Q37/8RoMOoMOWphHJ4vWn6g="
-      crossorigin="anonymous"
-    />
+      crossorigin="anonymous" />
     <!-- State Template JavaScript CDN -->
     <script
       src="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/js/cagov.core.min.js"
       integrity="sha256-MRHAOqwc4jjHeTGa/9mcdxAv3aVG+lQ7eJ9DPa+Gr/k="
       defer
-      crossorigin="anonymous"
-    ></script>
-    <link rel="stylesheet" href="css/custom.css" />
+      crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="/css/custom.css" />
     <!-- END STATE_TEMPLATE -->
 
     <link
       rel="apple-touch-icon-precomposed"
       sizes="100x100"
-      href="images/apple-touch-icon-precomposed.png"
-    />
+      href="images/apple-touch-icon-precomposed.png" />
     <link
       rel="icon"
       sizes="192x192"
-      href="images/apple-touch-icon-192x192.png"
-    />
+      href="images/apple-touch-icon-192x192.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="180x180"
-      href="images/apple-touch-icon-180x180.png"
-    />
+      href="images/apple-touch-icon-180x180.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="152x152"
-      href="images/apple-touch-icon-152x152.png"
-    />
+      href="images/apple-touch-icon-152x152.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="144x144"
-      href="images/apple-touch-icon-144x144.png"
-    />
+      href="images/apple-touch-icon-144x144.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="120x120"
-      href="images/apple-touch-icon-120x120.png"
-    />
+      href="images/apple-touch-icon-120x120.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="114x114"
-      href="images/apple-touch-icon-114x114.png"
-    />
+      href="images/apple-touch-icon-114x114.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="72x72"
-      href="images/apple-touch-icon-72x72.png"
-    />
+      href="images/apple-touch-icon-72x72.png" />
     <link
       rel="apple-touch-icon-precomposed"
-      href="images/apple-touch-icon-57x57.png"
-    />
+      href="images/apple-touch-icon-57x57.png" />
     <link rel="shortcut icon" href="images/apple-touch-icon-57x57.png" />
     <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
     <link
       rel="shortcut icon"
-      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png"
-    />
+      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png" />
     <!-- Statewide Alerts Server -->
     <script defer src="https://alert.cdt.ca.gov"></script>
     <!-- BEGIN Google Tag Manager -->
@@ -211,7 +180,7 @@
             </div>
             <div class="translation-link">
               <a
-                href="es/sitemap-es.html"
+                href="/es/sitemap-es.html"
                 hreflang="es"
                 rel="alternate"
                 lang="es"
@@ -225,13 +194,12 @@
       <div class="section-default">
         <div class="branding">
           <div class="header-organization-banner">
-            <a href="index.html">
+            <a href="/">
               <div class="logo-assets">
                 <img
-                  src="images/blue-gold-fingerprint.png"
+                  src="/images/blue-gold-fingerprint.png"
                   alt="Fingerprint icon"
-                  width="67px"
-                />
+                  width="67px" />
                 <div class="logo-text">
                   <span class="logo-state">California State</span>
                   <span class="logo-dept">Digital ID Framework</span>
@@ -251,8 +219,7 @@
             id="nav-icon3"
             class="mobile-control toggle-menu"
             aria-expanded="false"
-            aria-controls="navigation"
-          >
+            aria-controls="navigation">
             <span></span>
             <span></span>
             <span></span>
@@ -271,8 +238,7 @@
                 name="q"
                 aria-labelledby="SearchInput"
                 placeholder="Search"
-                class="search-textfield"
-              />
+                class="search-textfield" />
               <button type="submit" class="gsc-search-button">
                 <span class="ca-gov-icon-search" aria-hidden="true"></span>
                 <span class="sr-only">Submit</span>
@@ -280,8 +246,7 @@
               <div class="close-search-btn">
                 <button
                   class="close-search gsc-clear-button border-0 bg-transparent pos-rel"
-                  type="reset"
-                >
+                  type="reset">
                   <span class="sr-only">Close</span>
                 </button>
               </div>
@@ -289,32 +254,7 @@
           </div>
         </div>
         <!-- navigation types -->
-        <nav
-          id="navigation"
-          class="main-navigation dropdown"
-          aria-label="Main navigation"
-        >
-          <ul id="nav_list" class="top-level-nav">
-            <li class="nav-item">
-              <a class="first-level-link" href="primary-elements.html"
-                >Primary elements</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="accomplishments.html" class="first-level-link"
-                >Accomplishments</a
-              >
-            </li>
-            <li class="nav-item">
-              <a class="first-level-link" href="projects.html"
-                >Projects and synergy efforts</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="roadmap.html" class="first-level-link">Roadmap</a>
-            </li>
-          </ul>
-        </nav>
+        {% include "nav.njk" %}
       </div>
     </header>
     <div id="main-content" class="main-content">
@@ -339,115 +279,12 @@ <h1 class="container m-t-0 p-b-lg p-t-lg">Sitemap</h1>
             </li>
           </ul>
         </div>
-        <div
-          class="bottom-section p-b-sm"
-          style="background: var(--v-6-gray-100, #ededef)"
-        >
-        <div class="container">
-          <div class="row">
-            <div class="col-md-6">
-              <h2 class="h4">About</h2>
-              <ul class="list-unstyled">
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/digitalID/"
-                    >Digital ID Project</a
-                  >
-                </li>
-                <!-- <li><a class="no-underline color-black" href="">Contact us</a></li> -->
-              </ul>
-              <div>
-                <a href="https://cdt.ca.gov/" class="no-underline color-black"
-                  >California Department of Technology</a
-                >
-              </div>
-            </div>
-            <div class="col-md-6">
-              <h2 class="h4">State Strategic plans</h2>
-              <ul class="list-unstyled">
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://digitalstrategy.cdt.ca.gov/index.html"
-                    >Digital Strategy</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/wp-content/uploads/2023/08/Bridge-to-the-Future.pdf"
-                    >Bridge to the Future</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="no-underline color-black"
-                    href="https://cdt.ca.gov/wp-content/uploads/2021/10/Cybersecurity_Strategy_Plan_FINAL.pdf"
-                    >Information Security Roadmap — Cal-Secure</a
-                  >
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-        </div>
+        <!-- Global Bottom Section -->
+        {% include "bottom-section.njk" %}
       </main>
     </div>
     <!-- Global Footer -->
-    <footer id="footer" class="global-footer">
-      <div class="container">
-        <div class="d-flex">
-          <a href="https://ca.gov" class="cagov-logo">
-            <span class="sr-only">CA.gov</span>
-            <span class="ca-gov-logo-svg"></span>
-          </a>
-          <ul class="footer-links">
-            <li>
-              <a href="https://cdt.ca.gov/conditions-of-use/"
-                >Conditions of use</a
-              >
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/privacy-policy/">Privacy policy</a>
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/accessibility/"> Accessibility </a>
-            </li>
-            <li>
-              <a href="sitemap.html">Sitemap</a>
-            </li>
-          </ul>
-          <ul class="socialsharer-container">
-            <li>
-              <a
-                href="https://github.com/Office-of-Digital-Innovation/California-State-Web-Template"
-              >
-                <span class="ca-gov-icon-github" aria-hidden="true"></span>
-                <span class="sr-only">GitHub</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <!-- Copyright Statement -->
-      <div class="copyright">
-        <div class="container text-right">
-          Copyright &copy;
-          <span id="thisyear">
-            <script>
-              document
-                .getElementById("thisyear")
-                .appendChild(document.createTextNode(new Date().getFullYear()));
-            </script>
-          </span>
-          State of California
-        </div>
-      </div>
-      <button class="return-top">
-        <span class="sr-only">Back to top</span>
-      </button>
-    </footer>
+    {% include "footer.njk" %}
     <!-- Extra Decorative Content -->
     <div class="decoration-last">&nbsp;</div>
   </body>
diff --git a/website-accessibility-certification.html b/src/website-accessibility-certification.html
similarity index 53%
rename from website-accessibility-certification.html
rename to src/website-accessibility-certification.html
index 2d99101..0c1fcf7 100644
--- a/website-accessibility-certification.html
+++ b/src/website-accessibility-certification.html
@@ -1,140 +1,109 @@
-<!DOCTYPE html>
+---
+title: Web accessibility certification
+description: CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification.
+canonical: https://digitalidstrategy.cdt.ca.gov/website-accessibility-certification.html
+shareimage: https://digitalidstrategy.cdt.ca.gov/images/lightrail-share.png
+alternatelink: https://digitalidstrategy.cdt.ca.gov/es/website-accessibility-certification-es.html
+permalink: /website-accessibility-certification.html
+---
+
+<!doctype html>
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />
-    <title>California State Digital ID Strategy - Web accessibility certification</title>
+    <title>{{ title }}</title>
     <meta name="Author" content="State of California" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="HandheldFriendly" content="True" />
     <meta name="MobileOptimized" content="320" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <link
-      rel="alternate"
-      hreflang="es"
-      href="https://digitalidstrategy.cdt.ca.gov/es/website-accessibility-certification-es.html"
-    />
+      content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="alternate" hreflang="es" href="{{ alternatelink }}" />
 
     <!-- Title Tags -->
-    <meta name="title" content="California State Digital ID Strategy" />
-    <meta property="og:title" content="California State Digital ID Strategy" />
-    <meta
-      property="twitter:title"
-      content="California State Digital ID Strategy"
-    />
+    <meta name="title" content="{{ title }}" />
+    <meta property="og:title" content="{{ title }}" />
+    <meta property="twitter:title" content="{{ title }}" />
 
     <!-- Description Tags -->
-    <meta
-      name="description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
-    <meta
-      property="og:description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
-    <meta
-      property="twitter:description"
-      content="CDT leads all aspects of the California Digital ID Framework — a system of data and services allowing for digital identity and program eligibility verification."
-    />
+    <meta name="description" content="{{ description }}" />
+    <meta property="og:description" content="{{ description }}" />
+    <meta property="twitter:description" content="{{ description }}" />
 
     <!-- Canonical link, improves SEO -->
-    <link
-      href="https://digitalidstrategy.cdt.ca.gov/website-accessibility-certification.html"
-      rel="canonical"
-    />
-    <meta
-      property="og:url"
-      content="https://digitalidstrategy.cdt.ca.gov/website-accessibility-certification.html"
-    />
-    <meta
-      property="twitter:url"
-      content="https://digitalidstrategy.cdt.ca.gov/website-accessibility-certification.html"
-    />
+    <link href="{{ canonical }}" rel="canonical" />
+    <meta property="og:url" content="{{ canonical }}" />
+    <meta property="twitter:url" content="{{ canonical }}" />
     <!-- END Canonical link -->
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta
       property="og:image"
-      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png" />
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
     <meta
       property="twitter:image"
-      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png"
-    />
+      content="https://digitalidstrategy.cdt.ca.govimages/lightrail-share.png" />
 
     <!-- State Template CDN CSS -->
     <link
       href="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/css/cagov.core.min.css"
       rel="stylesheet"
       integrity="sha256-f2k3x0x/l4G+mg5fxnV+Q37/8RoMOoMOWphHJ4vWn6g="
-      crossorigin="anonymous"
-    />
+      crossorigin="anonymous" />
     <!-- State Template JavaScript CDN -->
     <script
       src="https://cdn.cdt.ca.gov/cdt/statetemplate/6.5.1/js/cagov.core.min.js"
       integrity="sha256-MRHAOqwc4jjHeTGa/9mcdxAv3aVG+lQ7eJ9DPa+Gr/k="
       defer
-      crossorigin="anonymous"
-    ></script>
-    <link rel="stylesheet" href="css/custom.css" />
+      crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="/css/custom.css" />
     <!-- END STATE_TEMPLATE -->
 
     <link
       rel="apple-touch-icon-precomposed"
       sizes="100x100"
-      href="images/apple-touch-icon-precomposed.png"
-    />
+      href="images/apple-touch-icon-precomposed.png" />
     <link
       rel="icon"
       sizes="192x192"
-      href="images/apple-touch-icon-192x192.png"
-    />
+      href="images/apple-touch-icon-192x192.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="180x180"
-      href="images/apple-touch-icon-180x180.png"
-    />
+      href="images/apple-touch-icon-180x180.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="152x152"
-      href="images/apple-touch-icon-152x152.png"
-    />
+      href="images/apple-touch-icon-152x152.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="144x144"
-      href="images/apple-touch-icon-144x144.png"
-    />
+      href="images/apple-touch-icon-144x144.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="120x120"
-      href="images/apple-touch-icon-120x120.png"
-    />
+      href="images/apple-touch-icon-120x120.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="114x114"
-      href="images/apple-touch-icon-114x114.png"
-    />
+      href="images/apple-touch-icon-114x114.png" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="72x72"
-      href="images/apple-touch-icon-72x72.png"
-    />
+      href="images/apple-touch-icon-72x72.png" />
     <link
       rel="apple-touch-icon-precomposed"
-      href="images/apple-touch-icon-57x57.png"
-    />
+      href="images/apple-touch-icon-57x57.png" />
     <link rel="shortcut icon" href="images/apple-touch-icon-57x57.png" />
     <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
     <link
       rel="shortcut icon"
-      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png"
-    />
+      href="https://cdt.ca.gov/wp-content/uploads/2017/01/techblog-icon.png" />
     <!-- Statewide Alerts Server -->
     <script defer src="https://alert.cdt.ca.gov"></script>
     <!-- BEGIN Google Tag Manager -->
@@ -211,7 +180,7 @@
             </div>
             <div class="translation-link">
               <a
-                href="es/website-accessibility-certification-es.html"
+                href="/es/website-accessibility-certification-es.html"
                 hreflang="es"
                 rel="alternate"
                 lang="es"
@@ -225,13 +194,12 @@
       <div class="section-default">
         <div class="branding">
           <div class="header-organization-banner">
-            <a href="index.html">
+            <a href="/">
               <div class="logo-assets">
                 <img
-                  src="images/blue-gold-fingerprint.png"
+                  src="/images/blue-gold-fingerprint.png"
                   alt="Fingerprint icon"
-                  width="67px"
-                />
+                  width="67px" />
                 <div class="logo-text">
                   <span class="logo-state">California State</span>
                   <span class="logo-dept">Digital ID Framework</span>
@@ -251,8 +219,7 @@
             id="nav-icon3"
             class="mobile-control toggle-menu"
             aria-expanded="false"
-            aria-controls="navigation"
-          >
+            aria-controls="navigation">
             <span></span>
             <span></span>
             <span></span>
@@ -271,8 +238,7 @@
                 name="q"
                 aria-labelledby="SearchInput"
                 placeholder="Search"
-                class="search-textfield"
-              />
+                class="search-textfield" />
               <button type="submit" class="gsc-search-button">
                 <span class="ca-gov-icon-search" aria-hidden="true"></span>
                 <span class="sr-only">Submit</span>
@@ -280,8 +246,7 @@
               <div class="close-search-btn">
                 <button
                   class="close-search gsc-clear-button border-0 bg-transparent pos-rel"
-                  type="reset"
-                >
+                  type="reset">
                   <span class="sr-only">Close</span>
                 </button>
               </div>
@@ -289,69 +254,44 @@
           </div>
         </div>
         <!-- navigation types -->
-        <nav
-          id="navigation"
-          class="main-navigation dropdown"
-          aria-label="Main navigation"
-        >
-          <ul id="nav_list" class="top-level-nav">
-            <li class="nav-item">
-              <a class="first-level-link" href="primary-elements.html"
-                >Primary elements</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="accomplishments.html" class="first-level-link"
-                >Accomplishments</a
-              >
-            </li>
-            <li class="nav-item">
-              <a class="first-level-link" href="projects.html"
-                >Projects and synergy efforts</a
-              >
-            </li>
-            <li class="nav-item">
-              <a href="es/website-accessibility-certification-es.html" class="first-level-link">Accessibility</a>
-            </li>
-          </ul>
-        </nav>
+        {% include "nav.njk" %}
       </div>
     </header>
     <div id="main-content" class="main-content">
       <main class="main-primary" id="main">
         <div class="focus-area-header">
-          <h1 class="container m-t-0 p-b-lg p-t-lg">Website Accessibility Certification</h1>
+          <h1 class="container m-t-0 p-b-lg p-t-lg">
+            Website Accessibility Certification
+          </h1>
         </div>
         <div class="container">
-
           <div class="row">
             <div class="col-md-10 p-b-lg">
-          
-          
               <h2>2025 Certification</h2>
-          
-              <p>
-                <div class="m-b-lg">
-                  <h3 class="m-b-0">Agency:</h3>
-                  California Department of Technology
-                </div>
-                <div class="m-b-lg">
-                  <h3 class="m-b-0">Certification date:</h3>
-                  June 10, 2025
-                </div>
-                <div class="m-b-lg">
-                  <h3 class="m-b-0">Contact:</h3>
-                  <a href="mailto:example@state.ca.gov"> ServiceDesk@state.ca.gov </a>
-                </div>
-              </p>
-          
+
+              <div class="m-b-lg">
+                <h3 class="m-b-0">Agency:</h3>
+                California Department of Technology
+              </div>
+              <div class="m-b-lg">
+                <h3 class="m-b-0">Certification date:</h3>
+                June 10, 2025
+              </div>
+              <div class="m-b-lg">
+                <h3 class="m-b-0">Contact:</h3>
+                <a href="mailto:example@state.ca.gov">
+                  ServiceDesk@state.ca.gov
+                </a>
+              </div>
+
               <p class="lh-lg">
-                The undersigned certify that, as of <strong>June 10, 2025</strong> the
-                website of the <strong>California State Digital ID Strategy</strong> is
-                designed, developed, and maintained to be accessible. This denotes
-                compliance with the following:
+                The undersigned certify that, as of
+                <strong>June 10, 2025</strong> the website of the
+                <strong>California State Digital ID Strategy</strong> is
+                designed, developed, and maintained to be accessible. This
+                denotes compliance with the following:
               </p>
-          
+
               <ul class="m-b-lg">
                 <li>
                   California Government Code Sections
@@ -372,146 +312,37 @@ <h3 class="m-b-0">Contact:</h3>
                   <a href="https://www.w3.org/TR/WCAG21?portal-california"
                     >Web Content Accessibility Guidelines 2.1</a
                   >
-                  published by the Web Accessibility Initiative of the World Wide Web
-                  Consortium
+                  published by the Web Accessibility Initiative of the World
+                  Wide Web Consortium
                 </li>
                 <li>At a minimum Level AA success criteria</li>
               </ul>
-          
+
               <div class="row">
                 <div class="lh-lg">
                   <strong>Quentin Wright</strong>
                   <p>
                     Chief Information Officer<br />
-                    (Signature on file)
-                    June 10, 2025
+                    (Signature on file) June 10, 2025
                   </p>
                 </div>
                 <div class="lh-lg">
                   <strong>Liana Bailey-Crimmins</strong>
                   <p>
                     Director<br />
-                    (Signature on file)
-                    June 10, 2025
+                    (Signature on file) June 10, 2025
                   </p>
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div
-          class="bottom-section p-b-sm"
-          style="background: var(--v-6-gray-100, #ededef)"
-        >
-          <div class="container">
-            <div class="row">
-              <div class="col-md-6">
-                <h2 class="h4">About</h2>
-                <ul class="list-unstyled">
-                  <li>
-                    <a
-                      class="no-underline color-black"
-                      href="https://cdt.ca.gov/digitalID/"
-                      >Digital ID Project</a
-                    >
-                  </li>
-                  <!-- <li><a class="no-underline color-black" href="">Contact us</a></li> -->
-                </ul>
-                <div>
-                  <a href="https://cdt.ca.gov/" class="no-underline color-black"
-                    >California Department of Technology</a
-                  >
-                </div>
-              </div>
-              <div class="col-md-6">
-                <h2 class="h4">State Strategic plans</h2>
-                <ul class="list-unstyled">
-                  <li>
-                    <a
-                      class="no-underline color-black"
-                      href="https://digitalstrategy.cdt.ca.gov/index.html"
-                      >Digital Strategy</a
-                    >
-                  </li>
-                  <li>
-                    <a
-                      class="no-underline color-black"
-                      href="https://cdt.ca.gov/wp-content/uploads/2023/08/Bridge-to-the-Future.pdf"
-                      >Bridge to the Future</a
-                    >
-                  </li>
-                  <li>
-                    <a
-                      class="no-underline color-black"
-                      href="https://cdt.ca.gov/wp-content/uploads/2021/10/Cybersecurity_Strategy_Plan_FINAL.pdf"
-                      >Information Security Roadmap — Cal-Secure</a
-                    >
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
+        <!-- Global Bottom Section -->
+        {% include "bottom-section.njk" %}
       </main>
     </div>
     <!-- Global Footer -->
-    <footer id="footer" class="global-footer">
-      <div class="container">
-        <div class="d-flex">
-          <a href="https://ca.gov" class="cagov-logo">
-            <span class="sr-only">CA.gov</span>
-            <span class="ca-gov-logo-svg"></span>
-          </a>
-          <ul class="footer-links">
-            <li>
-              <a href="https://cdt.ca.gov/conditions-of-use/"
-                >Conditions of use</a
-              >
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/privacy-policy/">Privacy policy</a>
-            </li>
-            <li>
-              <a href="https://cdt.ca.gov/accessibility/"> Accessibility </a>
-            </li>
-            <li>
-              <a href="/website-accessibility-certification.html">Website
-                Accessibility Certification</a>
-            </li>
-            <li>
-              <a href="sitemap.html">Sitemap</a>
-            </li>
-          </ul>
-          <ul class="socialsharer-container">
-            <li>
-              <a
-                href="https://github.com/Office-of-Digital-Innovation/California-State-Web-Template"
-              >
-                <span class="ca-gov-icon-github" aria-hidden="true"></span>
-                <span class="sr-only">GitHub</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <!-- Copyright Statement -->
-      <div class="copyright">
-        <div class="container text-right">
-          Copyright &copy;
-          <span id="thisyear">
-            <script>
-              document
-                .getElementById("thisyear")
-                .appendChild(document.createTextNode(new Date().getFullYear()));
-            </script>
-          </span>
-          State of California
-        </div>
-      </div>
-      <button class="return-top">
-        <span class="sr-only">Back to top</span>
-      </button>
-    </footer>
+    {% include "footer.njk" %}
     <!-- Extra Decorative Content -->
     <div class="decoration-last">&nbsp;</div>
   </body>