diff --git a/sites/fast-website/src/app/components/index.ts b/sites/fast-website/src/app/components/index.ts
index 450a150d749..7f0ba1ebe1e 100644
--- a/sites/fast-website/src/app/components/index.ts
+++ b/sites/fast-website/src/app/components/index.ts
@@ -1,3 +1,4 @@
 export { WebsiteDesignSystemProvider } from "./design-system-provider";
-export { FASTSectionHeader } from "./section-header";
+export { SiteSectionHeader } from "./section-header";
 export { FastFrame } from "./fast-frame";
+export { SiteNavigation } from "./navigation";
diff --git a/sites/fast-website/src/app/components/navigation/index.ts b/sites/fast-website/src/app/components/navigation/index.ts
new file mode 100644
index 00000000000..0d97549bb3f
--- /dev/null
+++ b/sites/fast-website/src/app/components/navigation/index.ts
@@ -0,0 +1,14 @@
+import { customElement } from "@microsoft/fast-element";
+import { Navigation } from "./navigation";
+import { NavigationTemplate as template } from "./navigation.template";
+import { NavigationStyles as styles } from "./navigation.styles";
+
+@customElement({
+    name: "site-navigation",
+    template,
+    styles,
+})
+export class SiteNavigation extends Navigation {}
+export * from "./navigation.template";
+export * from "./navigation.styles";
+export * from "./navigation";
diff --git a/sites/fast-website/src/app/components/navigation/navigation.styles.ts b/sites/fast-website/src/app/components/navigation/navigation.styles.ts
new file mode 100644
index 00000000000..edc36361464
--- /dev/null
+++ b/sites/fast-website/src/app/components/navigation/navigation.styles.ts
@@ -0,0 +1,18 @@
+import { css } from "@microsoft/fast-element";
+import { display, neutralForegroundRestBehavior } from "@microsoft/fast-components";
+
+export const NavigationStyles = css`
+    ${display("flex")} :host {
+        justify-content: space-between;
+        font-family: var(--body-font);
+        color: var(--neutral-foreground-rest);
+        box-sizing: border-box;
+        width: 100%;
+    }
+    .start {
+        margin-inline-end: auto;
+    }
+    .end {
+        margin-inline-start: auto;
+    }
+`.withBehaviors(neutralForegroundRestBehavior);
diff --git a/sites/fast-website/src/app/components/navigation/navigation.template.ts b/sites/fast-website/src/app/components/navigation/navigation.template.ts
new file mode 100644
index 00000000000..c00f0b8044d
--- /dev/null
+++ b/sites/fast-website/src/app/components/navigation/navigation.template.ts
@@ -0,0 +1,13 @@
+import { html } from "@microsoft/fast-element";
+import { Navigation } from "./navigation";
+import { startTemplate, endTemplate } from "@microsoft/fast-components";
+
+export const NavigationTemplate = html<Navigation>`
+    <template>
+        ${startTemplate}
+        <nav>
+            <slot></slot>
+        </nav>
+        ${endTemplate}
+    </template>
+`;
diff --git a/sites/fast-website/src/app/components/navigation/navigation.ts b/sites/fast-website/src/app/components/navigation/navigation.ts
new file mode 100644
index 00000000000..44e5224b2ea
--- /dev/null
+++ b/sites/fast-website/src/app/components/navigation/navigation.ts
@@ -0,0 +1,8 @@
+import { FASTElement } from "@microsoft/fast-element";
+import { applyMixins, StartEnd } from "@microsoft/fast-components";
+
+export class Navigation extends FASTElement {}
+
+/* eslint-disable-next-line */
+export interface Navigation extends StartEnd {}
+applyMixins(Navigation, StartEnd);
diff --git a/sites/fast-website/src/app/components/section-header/index.ts b/sites/fast-website/src/app/components/section-header/index.ts
index cb6356397a8..d9706579c6e 100755
--- a/sites/fast-website/src/app/components/section-header/index.ts
+++ b/sites/fast-website/src/app/components/section-header/index.ts
@@ -4,11 +4,11 @@ import { SectionHeaderTemplate as template } from "./section-header.template";
 import { SectionHeaderStyles as styles } from "./section-header.styles";
 
 @customElement({
-    name: "fast-section-header",
+    name: "site-section-header",
     template,
     styles,
 })
-export class FASTSectionHeader extends SectionHeader {}
+export class SiteSectionHeader extends SectionHeader {}
 export * from "./section-header.template";
 export * from "./section-header.styles";
 export * from "./section-header";
diff --git a/sites/fast-website/src/app/components/section-header/section-header.styles.ts b/sites/fast-website/src/app/components/section-header/section-header.styles.ts
index e2906c614e2..2d3008f5180 100755
--- a/sites/fast-website/src/app/components/section-header/section-header.styles.ts
+++ b/sites/fast-website/src/app/components/section-header/section-header.styles.ts
@@ -1,4 +1,4 @@
-import { display } from "@microsoft/fast-components";
+import { display, neutralForegroundRestBehavior } from "@microsoft/fast-components";
 import { css } from "@microsoft/fast-element";
 
 export const SectionHeaderStyles = css`
@@ -9,4 +9,4 @@ export const SectionHeaderStyles = css`
         box-sizing: border-box;
         text-align: center;
     }
-`;
+`.withBehaviors(neutralForegroundRestBehavior);
diff --git a/sites/fast-website/src/app/css/style.css b/sites/fast-website/src/app/css/style.css
index 392b70ffc2e..06d390639d7 100644
--- a/sites/fast-website/src/app/css/style.css
+++ b/sites/fast-website/src/app/css/style.css
@@ -27,6 +27,10 @@ body {
   height: 80px;
 }
 
+.header-navigation-item {
+  margin: 0 30px;
+}
+
 .section {
   grid-column: 2;
 }
@@ -46,21 +50,6 @@ body {
   height: 600px;
 }
 
-.footer {
-  grid-column: 2;
-  height: 240px;
-  margin-top: 100px
-}
-
-.footer-links {
-  display: flex;
-  justify-content: space-between;
-}
-
-.footer-copyright-group {
-  display: flex;
-}
-
 .section-badge {
   color: var(--accent-fill-rest);
   font-weight: bold;
@@ -77,3 +66,18 @@ body {
   line-height: 56px;
   margin: 0;
 }
+
+.divider {
+  grid-column: 2;
+  margin-top: 100px;
+  margin-bottom: 60px;
+}
+
+.footer {
+  grid-column: 2;
+  margin-bottom: 84px;
+}
+
+.footer-navigation-item {
+  margin-inline-end: 50px;
+}
diff --git a/sites/fast-website/src/public/index.html b/sites/fast-website/src/public/index.html
index b4519e8f3e6..391c5f82996 100644
--- a/sites/fast-website/src/public/index.html
+++ b/sites/fast-website/src/public/index.html
@@ -14,38 +14,43 @@
       <div class="wrapper">
         <!-- header:start -->
         <header class="header">
-          <fast-anchor href="#" appearance="lightweight">Logo</fast-anchor>
-          <div class="header-link-group">
-            <fast-anchor href="#" appearance="lightweight">Component</fast-anchor>
-            <fast-anchor href="#" appearance="lightweight">Integration</fast-anchor>
-            <fast-anchor href="#" appearance="lightweight">Documentation</fast-anchor>
-            <fast-anchor href="#" appearance="lightweight">Community</fast-anchor>
-          </div>
-          <fast-anchor href="#" appearance="lightweight">Github</fast-anchor>
+          <site-navigation>
+            <fast-anchor slot="start" appearance="lightweight" href="#">FAST</fast-anchor>
+            <fast-anchor class="header-navigation-item" appearance="lightweight" href="#">Components</fast-anchor>
+            <fast-anchor class="header-navigation-item" appearance="lightweight" href="#">Integration</fast-anchor>
+            <fast-anchor class="header-navigation-item" appearance="lightweight" href="#">Documentation</fast-anchor>
+            <fast-anchor class="header-navigation-item" appearance="lightweight" href="#">Community</fast-anchor>
+            <fast-anchor slot="end" appearance="lightweight" href="#">
+              Github
+              <svg width="19" height="20" viewBox="0 0 19 20" xmlns="http://www.w3.org/2000/svg">
+                <path d="M6.71154 17.0776C2.09615 18.4906 2.09615 14.7226 0.25 14.2517L6.71154 17.0776ZM13.1731 19.9036V16.2581C13.2077 15.8089 13.1482 15.3574 12.9986 14.9335C12.849 14.5096 12.6127 14.123 12.3054 13.7995C15.2038 13.4698 18.25 12.3489 18.25 7.20563C18.2498 5.89046 17.754 4.62572 16.8654 3.67319C17.2862 2.52257 17.2564 1.25074 16.7823 0.121918C16.7823 0.121918 15.6931 -0.207776 13.1731 1.51605C11.0574 0.930913 8.82722 0.930913 6.71154 1.51605C4.19154 -0.207776 3.10231 0.121918 3.10231 0.121918C2.62819 1.25074 2.59844 2.52257 3.01923 3.67319C2.12396 4.63279 1.62771 5.90895 1.63462 7.23389C1.63462 12.3394 4.68077 13.4604 7.57923 13.8278C7.27554 14.148 7.04132 14.5299 6.89182 14.9486C6.74233 15.3674 6.6809 15.8135 6.71154 16.2581V19.9036" />
+              </svg>
+            </fast-anchor>
+        </site-navigation>
         </header>
         <!-- header:end -->
 
         <!-- hero-section:start -->
         <section class="section">
           <div class="section-content">
-            <fast-section-header>
+            <site-section-header>
               <fast-badge slot="badge" class="section-badge">ADAPTIVE UI SYSTEM, UTILITIES, & TOOLS</fast-badge>
               <p class="section-heading-hero">The adaptive interface system for modern web experiences</p>
               <p slot="body">Interfaces bult with FAST adapt to your design system and can be used with any modern UI Framework by leveraging industry standard Web Components.</p>
               <fast-button slot="action" appearance="outline">Get start</fast-button>
-            </fast-section-header>
+            </site-section-header>
           </div>
         </section>
         <!-- hero-section:end -->
 
         <section class="section">
           <div class="section-content">
-            <fast-section-header>
+            <site-section-header>
               <fast-badge slot="badge" class="section-badge">FLEXIBLE AND ADAPTABLE</fast-badge>
               <p class="section-heading">One component, many faces</p>
               <p slot="body">Using an unopinionated architecture and Adaptive Styling, one suite of components can blend into any environment.</p>
               <fast-button slot="action" appearance="outline">Explore components</fast-button>
-            </fast-section-header>
+            </site-section-header>
           </div>
         </section>
 
@@ -57,11 +62,11 @@
 
         <section class="section">
           <div class="section-content">
-            <fast-section-header>
+            <site-section-header>
               <fast-badge slot="badge" class="section-badge">FULLY INTEGRATED</fast-badge>
               <p class="section-heading">Works with existing frameworks</p>
               <fast-button slot="action" appearance="outline">Learn more</fast-button>
-            </fast-section-header>
+            </site-section-header>
           </div>
         </section>
 
@@ -75,11 +80,11 @@
 
         <section class="section">
           <div class="section-content">
-            <fast-section-header>
+            <site-section-header>
               <fast-badge slot="badge" class="section-badge">A COMPREHENSIVE TOOLKIT</fast-badge>
               <p class="section-heading">Feature and Utilities</p>
               <fast-button slot="action" appearance="outline">Read documentation</fast-button>
-            </fast-section-header>
+            </site-section-header>
           </div>
         </section>
 
@@ -93,10 +98,10 @@
 
         <section class="section">
           <div class="section-content">
-            <fast-section-header>
+            <site-section-header>
               <fast-badge slot="badge" class="section-badge">LEARN, MODIFY AND FOLLOW</fast-badge>
               <p class="section-heading">Join the community</p>
-            </fast-section-header>
+            </site-section-header>
           </div>
         </section>
 
@@ -109,22 +114,16 @@
         <!-- community:end -->
 
         <!-- footer:start -->
-          <footer class="footer">
-            <fast-divider></fast-divider>
-            <fast-anchor href="#" appearance="lightweight">Logo</fast-anchor>
-            <div class="footer-links">
-                <div class="footer-link-group">
-                    <span>License</span>
-                    <span>Privacy</span>
-                    <span>Terms of use</span>
-                    <span>&copy; 2020 Microsoft</span>
-                </div>
-                <div class="footer-link-group">
-                  <fast-anchor href="#" appearance="lightweight">Medium</fast-anchor>
-                  <fast-anchor href="#" appearance="lightweight">Github</fast-anchor>
-                </div>
-            </div>
-        </footer>
+          <fast-divider class="divider"></fast-divider>
+          <div class="footer">
+            <site-navigation>
+              <fast-anchor class="footer-navigation-item" appearance="lightweight" href="#">License</fast-anchor>
+              <fast-anchor class="footer-navigation-item" appearance="lightweight" href="#">Privacy & Cookies</fast-anchor>
+              <fast-anchor class="footer-navigation-item" appearance="lightweight" href="#">Terms of Use</fast-anchor>
+              <fast-anchor class="footer-navigation-item" appearance="lightweight" href="#">&copy; 2020 Microsoft</fast-anchor>
+              <fast-anchor slot="end" appearance="lightweight" href="#">FAST</fast-anchor>
+            </site-navigation>
+          </div>
         <!-- footer:end -->
       </div>
     </website-design-system-provider>