diff --git a/app/templates/admin_template.html b/app/templates/admin_template.html
index c48f768ce..bd4383579 100644
--- a/app/templates/admin_template.html
+++ b/app/templates/admin_template.html
@@ -1,4 +1,4 @@
-{% extends "main_template.html" %}
+{% extends "new/base.html" %}
 {% from "components/banner.html" import banner %}
 
 {% block headIcons %}
diff --git a/app/templates/new/base.html b/app/templates/new/base.html
new file mode 100644
index 000000000..38ffb049d
--- /dev/null
+++ b/app/templates/new/base.html
@@ -0,0 +1,65 @@
+{% from "./components/skip-link/macro.njk" import usaSkipLink -%}
+{% from "./components/header/macro.njk" import usaHeader -%}
+{% from "./components/footer/macro.njk" import usaFooter -%}
+{# specify absolute url for the static assets folder e.g. http://wwww.domain.com/assets #}
+{%- set assetUrl = assetUrl | default(assetPath) -%}
+<!DOCTYPE html>
+<html lang="{{ htmlLang | default('en') }}" class="{{ htmlClasses }}">
+  <head>
+    <meta charset="utf-8" />
+    <title>{% block pageTitle %}Notify.gov{% endblock %}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="f0f0f0" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="1b1b1b" />
+    {% if config['NR_MONITOR_ON'] %}
+      {% include "partials/newrelic.html" -%}
+    {% endif %}
+
+    {# Ensure that older IE versions always render with the correct rendering engine #}
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+    {% block headIcons %}
+      <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ assetPath | default('/assets') }}/images/favicon.ico" type="image/x-icon" />
+      <link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/usa-mask-icon.svg" color="{{ themeColor | default('#F0F0F0') }}">
+      <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/apple-touch-icon.png">
+      <link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/apple-touch-icon.png">
+    {% endblock %}
+
+    {% block head %}{% endblock %}
+    {# The default og:image is added below head so that scrapers see any custom metatags first, and this is just a fallback #}
+    {% block meta %}
+      <meta property="og:site_name" content="Notify.gov">
+      <meta property="og:image" content="{{ asset_url('images/usa-opengraph-image.png') }}">
+    {% endblock %}
+  </head>
+  <body class="usa-template__body {{ bodyClasses }}">
+    <script nonce="{{ csp_nonce() }}">document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
+    {% block bodyStart %}{% endblock %}
+
+    {% block skipLink %}
+      {{ usaSkipLink({
+        "href": '#main-content',
+        "text": 'Skip to main content'
+      }) }}
+    {% endblock %}
+
+    {% block header %}
+      {{ usaHeader({}) }}
+    {% endblock %}
+
+    {% block main %}
+      <div class="grid-container">
+        {% block beforeContent %}{% endblock %}
+        <main class="{{ mainClasses }}" id="main-content" role="main">
+          {% block content %}{% endblock %}
+        </main>
+      </div>
+    {% endblock %}
+
+    {% block footer %}
+      {{ usaFooter({}) }}
+    {% endblock %}
+
+    {% block bodyEnd %}{% endblock %}
+  </body>
+</html>
diff --git a/app/templates/new/components/footer/README.md b/app/templates/new/components/footer/README.md
new file mode 100644
index 000000000..49c5a7082
--- /dev/null
+++ b/app/templates/new/components/footer/README.md
@@ -0,0 +1,15 @@
+# Footer
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the footer component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/footer).
+
+## Component options
+
+Use options to customize the appearance, content and behavior of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/footer/#options-example-default) for details.
diff --git a/app/templates/new/components/footer/macro-options.json b/app/templates/new/components/footer/macro-options.json
new file mode 100644
index 000000000..f6e2967db
--- /dev/null
+++ b/app/templates/new/components/footer/macro-options.json
@@ -0,0 +1,115 @@
+[
+    {
+        "name": "meta",
+        "type": "object",
+        "required": false,
+        "description": "Object containing options for the meta navigation.",
+        "params": [
+            {
+                "name": "visuallyHiddenTitle",
+                "type": "string",
+                "description": "Title for a meta item section, which defaults to Support links"
+            },
+            {
+                "name": "html",
+                "type": "string",
+                "description": "HTML to add to the meta section of the footer, which will appear below any links specified using meta.items."
+            },
+            {
+                "name": "text",
+                "type": "string",
+                "description": "Text to add to the meta section of the footer, which will appear below any links specified using meta.items. If meta.html is specified, this option is ignored."
+            },
+            {
+                "name": "items",
+                "type": "array",
+                "required": false,
+                "description": "Array of items for use in the meta section of the footer.",
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": false,
+                        "description": "List item text in the meta section of the footer."
+                    },
+                    {
+                        "name": "href",
+                        "type": "string",
+                        "required": false,
+                        "description": "List item href attribute in the meta section of the footer."
+                    },
+                    {
+                        "name": "attributes",
+                        "type": "object",
+                        "required": false,
+                        "description": "HTML attributes (for example data attributes) to add to the anchor in the footer meta section."
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "name": "navigation",
+        "type": "array",
+        "required": false,
+        "description": "Array of items for use in the navigation section of the footer.",
+        "params": [
+            {
+                "name": "title",
+                "type": "string",
+                "required": false,
+                "description": "Title for a section"
+            },
+            {
+                "name": "columns",
+                "type": "integer",
+                "required": false,
+                "description": "Amount of columns to display items in navigation section of the footer."
+            },
+            {
+                "name": "items",
+                "type": "array",
+                "required": false,
+                "description": "Array of items to display in the list in navigation section of the footer.",
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": false,
+                        "description": "List item text in the navigation section of the footer."
+                    },
+                    {
+                        "name": "href",
+                        "type": "string",
+                        "required": false,
+                        "description": "List item href attribute in the navigation section of the footer. Both `text` and `href` attributes need to be present to create a link."
+                    },
+                    {
+                        "name": "attributes",
+                        "type": "object",
+                        "required": false,
+                        "description": "HTML attributes (for example data attributes) to add to the anchor in the footer navigation section."
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "name": "containerClasses",
+        "type": "string",
+        "required": false,
+        "description": "Classes that can be added to the inner container, useful if you want to make the footer full width."
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the footer component container."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the footer component container."
+    }
+]
diff --git a/app/templates/new/components/footer/macro.njk b/app/templates/new/components/footer/macro.njk
new file mode 100644
index 000000000..d0f92f065
--- /dev/null
+++ b/app/templates/new/components/footer/macro.njk
@@ -0,0 +1,3 @@
+{% macro usaFooter(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}
diff --git a/app/templates/new/components/footer/template.njk b/app/templates/new/components/footer/template.njk
new file mode 100644
index 000000000..6864f718a
--- /dev/null
+++ b/app/templates/new/components/footer/template.njk
@@ -0,0 +1,117 @@
+<footer class="usa-footer usa-footer--big">
+  {# <div class="grid-container usa-footer__return-to-top">
+    <a href="#">Return to top</a>
+  </div> #}
+  <div class="usa-footer__primary-section">
+    <div class="grid-container">
+      <div class="grid-row">
+        <div class="grid-col">
+          {# {% if params.navigation %}
+          <nav class="usa-footer__nav" aria-label="Footer navigation,,">
+            <div class="grid-row grid-gap-2">
+              {% for nav in params.navigation %}
+              <div class="mobile-lg:grid-col-6 desktop:grid-col-4">
+                <section class="
+                    usa-footer__primary-content
+                    usa-footer__primary-content--collapsible
+                  ">
+                  <h4 class="usa-footer__primary-link">{{ nav.title }}</h4>
+                  <ul class="usa-list usa-list--unstyled">
+                    {% for item in nav.items %}
+                      {% if item.href and item.text %}
+                      <li class="usa-footer__secondary-link">
+                        <a href="{{ item.href }}" {% for attribute, value in item.attributes %}
+                          {{attribute}}="{{value}}" {% endfor %}>
+                          {{ item.text }}
+                        </a>
+                      </li>
+                      {% endif %}
+                    {% endfor %}
+                  </ul>
+                </section>
+              </div>
+              {% endfor %}
+            </div>
+          </nav>
+          {% endif %} #}
+        </div>
+      </div>
+      <div class="padding-y-1">
+          {% if params.meta %}
+          <h2 class="usa-sr-only">{{ params.meta.visuallyHiddenTitle | default("Support links") }}</h2>
+          {% if params.meta.items %}
+            {% for item in params.meta.items %}
+              <a class="usa-footer__link" href="{{ item.href }}" {% for attribute, value in item.attributes %}
+                {{attribute}}="{{value}}" {% endfor %}>
+                {{ item.text }}
+              </a>
+            {% endfor %}
+          {% endif %}
+          {% if params.meta.text or params.meta.html %}
+          <div>
+            {{ params.meta.html | safe if params.meta.html else params.meta.text }}
+          </div>
+          {% endif %}
+          {% endif %}
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+<div class="usa-identifier site-identifier">
+  <section class="usa-identifier__section usa-identifier__section--masthead" aria-label="Agency identifier,,,,,,">
+    <div class="usa-identifier__container">
+      <div class="usa-identifier__logos"><a href="javascript:void(0);" class="usa-identifier__logo">
+          <img class="usa-identifier__logo-img" src="{{ params.assetsPath | default('/static/images') }}/gsa-logo.svg"  alt="GSA Logo" role="img" width="48"
+            height="48">
+        </a></div>
+      <section class="usa-identifier__identity" aria-label="Agency description">
+        <p class="usa-identifier__identity-domain">beta.notify.gov</p>
+        <p class="usa-identifier__identity-disclaimer">An official website of the <a href="https://gsa.gov">General
+            Services Administration</a></p>
+      </section>
+    </div>
+  </section>
+  <nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="Important links">
+    <div class="usa-identifier__container">
+      <ul class="usa-identifier__required-links-list">
+        <li class="usa-identifier__required-links-item">
+          <a href="https://www.gsa.gov/about-us" class="usa-identifier__required-link">About GSA</a>
+        </li>
+        <li class="usa-identifier__required-links-item">
+          <a href="https://www.gsa.gov/website-information/accessibility-aids"
+            class="usa-identifier__required-link">Accessibility support</a>
+        </li>
+        <li class="usa-identifier__required-links-item">
+          <a href="https://www.gsa.gov/reference/freedom-of-information-act-foia"
+            class="usa-identifier__required-link">FOIA requests</a>
+        </li>
+        <li class="usa-identifier__required-links-item">
+          <a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002"
+            class="usa-identifier__required-link">No FEAR Act data</a>
+        </li>
+        <li class="usa-identifier__required-links-item">
+          <a href="https://www.gsaig.gov/" class="usa-identifier__required-link">Office of the Inspector General</a>
+        </li>
+        <li class="usa-identifier__required-links-item">
+          <a href="https://www.gsa.gov/reference/reports/budget-performance"
+            class="usa-identifier__required-link">Performance reports</a>
+        </li>
+        <li class="usa-identifier__required-links-item">
+          <a href="https://www.gsa.gov/website-information/website-policies"
+            class="usa-identifier__required-link">Privacy policy</a>
+        </li>
+      </ul>
+    </div>
+  </nav>
+  <section class="usa-identifier__section usa-identifier__section--usagov"
+    aria-label="Government information and services">
+    <div class="usa-identifier__container">
+      <div class="usa-identifier__usagov-description">
+        Looking for U.S. government information and services?
+      </div>
+      <a href="https://www.usa.gov/" class="usa-link">Visit USA.gov</a>
+    </div>
+  </section>
+</div>
diff --git a/app/templates/new/components/header/README.md b/app/templates/new/components/header/README.md
new file mode 100644
index 000000000..a3ea34967
--- /dev/null
+++ b/app/templates/new/components/header/README.md
@@ -0,0 +1,15 @@
+# Header
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the header component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/header).
+
+## Component options
+
+Use options to customize the appearance, content and behavior of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/header/#options-example-default) for details.
diff --git a/app/templates/new/components/header/macro-options.json b/app/templates/new/components/header/macro-options.json
new file mode 100644
index 000000000..4411e8100
--- /dev/null
+++ b/app/templates/new/components/header/macro-options.json
@@ -0,0 +1,88 @@
+[
+    {
+        "name": "homepageUrl",
+        "type": "string",
+        "required": false,
+        "description": "The url of the homepage. Defaults to /"
+    },
+    {
+        "name": "assetsPath",
+        "type": "string",
+        "required": false,
+        "description": "The public path for the assets folder. If not provided it defaults to /assets/images"
+    },
+    {
+        "name": "productName",
+        "type": "string",
+        "required": false,
+        "description": "Header title that is placed next to GOV.UK. Used for product names (i.e. Pay, Verify)"
+    },
+    {
+        "name": "serviceName",
+        "type": "string",
+        "required": false,
+        "description": "Header title that is placed next to GOV.UK. Used for product names (i.e. Pay, Verify)"
+    },
+    {
+        "name": "serviceUrl",
+        "type": "string",
+        "required": false,
+        "description": "Url for the service name anchor."
+    },
+    {
+        "name": "navigation",
+        "type": "array",
+        "required": false,
+        "description": "An array of navigation item objects.",
+        "params": [
+            {
+                "name": "text",
+                "type": "string",
+                "required": false,
+                "description": "Text of the navigation item."
+            },
+            {
+                "name": "href",
+                "type": "string",
+                "required": false,
+                "description": "Url of the navigation item anchor. Both `href` and `text` attributes for navigation items need to be provided to create an item."
+            },
+            {
+                "name": "active",
+                "type": "boolean",
+                "required": false,
+                "description": "Flag to mark the navigation item as active or not."
+            },
+            {
+                "name": "attributes",
+                "type": "object",
+                "required": false,
+                "description": "HTML attributes (for example data attributes) to add to the navigation item anchor."
+            }
+        ]
+    },
+    {
+        "name": "navigationClasses",
+        "type": "string",
+        "required": false,
+        "description": "Classes for the navigation section of the header."
+    },
+    {
+        "name": "containerClasses",
+        "type": "string",
+        "required": false,
+        "description": "Classes for the container, useful if you want to make the header fixed width."
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the header container."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the header container."
+    }
+]
diff --git a/app/templates/new/components/header/macro.njk b/app/templates/new/components/header/macro.njk
new file mode 100644
index 000000000..3f0101fc2
--- /dev/null
+++ b/app/templates/new/components/header/macro.njk
@@ -0,0 +1,3 @@
+{% macro usaHeader(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}
diff --git a/app/templates/new/components/header/template.njk b/app/templates/new/components/header/template.njk
new file mode 100644
index 000000000..6cc8cabd8
--- /dev/null
+++ b/app/templates/new/components/header/template.njk
@@ -0,0 +1,104 @@
+<!-- usa banner -->
+<section class="usa-banner site-banner" aria-label="Official website of the United States government,,,,,,">
+  <div class="usa-accordion">
+    <header class="usa-banner__header">
+      <div class="usa-banner__inner">
+        <div class="grid-col-auto">
+          <img aria-hidden="true" class="usa-banner__header-flag" src="/static/img/us_flag_small.png" alt="" />
+        </div>
+        <div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
+          <p class="usa-banner__header-text">An official website of the United States government</p>
+          <p class="usa-banner__header-action">Here’s how you know</p>
+        </div>
+        <button type="button" class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner">
+          <span class="usa-banner__button-text">Here’s how you know</span>
+        </button>
+      </div>
+    </header>
+    <div class="usa-banner__content usa-accordion__content" id="gov-banner" hidden="">
+      <div class="grid-row grid-gap-lg">
+        <div class="usa-banner__guidance tablet:grid-col-6">
+          <img class="usa-banner__icon usa-media-block__img" src="/static/img/icon-dot-gov.svg" role="img" alt="" aria-hidden="true">
+          <div class="usa-media-block__body">
+            <p>
+              <strong>Official websites use .gov</strong>
+              <br>
+              A <strong>.gov</strong> website belongs to an official government organization in the United States.
+            </p>
+          </div>
+        </div>
+        <div class="usa-banner__guidance tablet:grid-col-6">
+          <img class="usa-banner__icon usa-media-block__img" src="/static/img/icon-https.svg" role="img" alt="" aria-hidden="true">
+          <div class="usa-media-block__body">
+            <p>
+              <strong>Secure .gov websites use HTTPS</strong>
+              <br>
+              A <strong>lock</strong> ( <span class="icon-lock"><svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-description" focusable="false"><title id="banner-lock-title">Lock</title><desc id="banner-lock-description">Locked padlock</desc><path fill="#000000" fill-rule="evenodd" d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"></path></svg></span> ) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- usa header -->
+<header class="usa-header usa-header--extended">
+  <div class="usa-navbar">
+    <div class="usa-logo display-flex flex-align-center" id="-logo">
+      {# <div class="logo-img display-flex">
+        <span class="usa-sr-only">US Notify Logo</span>
+        <image src="{{ params.assetsPath | default('/static/images') }}/us-notify-color.png" alt="US Notify logo" xlink:href=""
+          class="usa-flag-logo margin-right-1" width="40" height="35"></image>
+      </div> #}
+      <em class="logo-text usa-logo__text">
+        <a href="/" title="notify.gov">notify.gov</a>
+      </em>
+    </div>
+    {% if current_user.is_authenticated %}
+      <button type="button" class="usa-menu-btn">Menu</button>
+    {% endif %}
+  </div>
+  <nav aria-label="Primary navigation" class="usa-nav">
+    <div class="usa-nav__inner">
+      <button type="button" class="usa-nav__close">
+        <img src="/static/images/usa-icons/close.svg" role="img" alt="Close" />
+      </button>
+      <ul class="usa-nav__primary usa-accordion margin-right-1">
+        {% for item in params.navigation %}
+          {% if item.href and item.text %}
+          <li class="usa-nav__primary-item{{ ' is-current' if item.active }}">
+            <a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value in
+              item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
+              <span>{{ item.text }}</span>
+            </a>
+          </li>
+          {% endif %}
+        {% endfor %}
+      </ul>
+      <div class="usa-nav__secondary margin-bottom-2">
+        <ul class="usa-nav__secondary-links">
+          {% for item in params.secondaryNavigation %}
+            {% if item.href and item.text %}
+              <li class="usa-nav__secondary-item{{ ' is-current' if item.active }}">
+                <a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value in
+                  item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
+                  <span>{{ item.text }}</span>
+                </a>
+              </li>
+          {% endif %}
+        {% endfor %}
+        </ul>
+        <!-- <section aria-label="Search component">
+          <form class="usa-search usa-search--small margin-bottom-2" role="search">
+            <label class="usa-sr-only" for="search-field">Search</label>
+            <input class="usa-input" id="search-field" type="search" name="search" />
+            <button class="usa-button" type="submit">
+              <img src="/static/images/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" />
+            </button>
+          </form>
+        </section> -->
+      </div>
+    </div>
+  </nav>
+</header>
diff --git a/app/templates/new/components/skip-link/README.md b/app/templates/new/components/skip-link/README.md
new file mode 100644
index 000000000..feb7c6614
--- /dev/null
+++ b/app/templates/new/components/skip-link/README.md
@@ -0,0 +1,15 @@
+# Skip link
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the skip link component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/skip-link).
+
+## Component options
+
+Use options to customize the appearance, content and behavior of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/skip-link/#options-example-default) for details.
diff --git a/app/templates/new/components/skip-link/macro-options.json b/app/templates/new/components/skip-link/macro-options.json
new file mode 100644
index 000000000..9a36a1267
--- /dev/null
+++ b/app/templates/new/components/skip-link/macro-options.json
@@ -0,0 +1,32 @@
+[
+    {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": "If `html` is set, this is not required. Text to use within the skip link component. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "html",
+        "type": "string",
+        "required": true,
+        "description": "If `text` is set, this is not required. HTML to use within the skip link component. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": "The value of the skip link href attribute. Defaults to"
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the skip link."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the skip link."
+    }
+]
diff --git a/app/templates/new/components/skip-link/macro.njk b/app/templates/new/components/skip-link/macro.njk
new file mode 100644
index 000000000..4b1d7ff9a
--- /dev/null
+++ b/app/templates/new/components/skip-link/macro.njk
@@ -0,0 +1,3 @@
+{% macro usaSkipLink(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}
diff --git a/app/templates/new/components/skip-link/template.njk b/app/templates/new/components/skip-link/template.njk
new file mode 100644
index 000000000..e0dad15a8
--- /dev/null
+++ b/app/templates/new/components/skip-link/template.njk
@@ -0,0 +1,7 @@
+<a href="{{ params.href | default('#content') }}" class="usa-skipnav{%- if params.classes %} {{ params.classes }}{% endif -%}"{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{- params.html | safe if params.html else params.text -}}
+</a>
+
+<a class="usa-skipnav " href="#main-content">
+  Skip to main content
+</a>
diff --git a/app/templates/new/templates_glossary.md b/app/templates/new/templates_glossary.md
new file mode 100644
index 000000000..cdf824871
--- /dev/null
+++ b/app/templates/new/templates_glossary.md
@@ -0,0 +1,27 @@
+
+# New Templates Glossary
+
+This document serves as a glossary for the templates directory structure of the project.
+
+## Directory Structure
+
+- `/templates`
+  - **/layouts**: Contains base templates and shared layouts used across the site. Simply put, it defines the overall structure or skeleton of the application (less frequently revised).
+    - `base.html`: The main base template from which all other templates inherit.
+    - `/admin`
+      - `admin-base.html`: A specialized layout for admin pages. It extends `base.html` but can include additional styling, scripts, or components specific to admin interfaces to enhance security and organization.
+      - `withnav.html`: A variation of the base layout that includes a sidebar.
+    - `/error`: Templates for handling HTTP errors
+  - **/components**: Houses reusable UI components that can be included in multiple templates and can be tailored with different content or links depending on the context.(more frequently revised or customized)
+    - `header.html`: Template for the site's header, included in `base.html`.
+    - `footer.html`: Template for the site's footer, included in `base.html`.
+  - **/partials**: For smaller, reusable pieces of templates, like navigation breadcrumbs or pagination controls we could put this folder into components but if it's more specific to layouts, we can move it into that folder as a sub directory
+  - **/views** (or **/pages**): Individual page templates that use the base layouts, components, and partials to present content.
+
+### Best Practices
+
+- Use **inheritance** (`{% extends %}`) to build on base layouts.
+- Employ **components** (`{% include %}`) for reusable UI elements to keep the code DRY and facilitate easier updates.
+
+### Notes
+- Macro json files are just guides on how to structure a dict. It's not actually being used as data being passed to components
