diff --git a/Testing.MD b/Testing.MD
new file mode 100644
index 0000000..47d6a32
--- /dev/null
+++ b/Testing.MD
@@ -0,0 +1,15 @@
+# Testing
+
+## TDD - Test Driven Development
+
+## Types of Test
+
+- Smoke Tests
+  - Does it exist
+- Unit Tests
+  - Testing each item in isolation
+- Snapshot Tests
+  - Freeze it / i like it today
+- Visual / UI Snapshot
+  - Percy.IO
+  - etc
diff --git a/__tests__/__snapshots__/header.test.tsx.snap b/__tests__/__snapshots__/header.test.tsx.snap
new file mode 100644
index 0000000..aa9a595
--- /dev/null
+++ b/__tests__/__snapshots__/header.test.tsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header Looks Great 1`] = `
+<DocumentFragment>
+  <nav>
+    Platform Starter
+    <a
+      href="/login"
+    >
+      Login
+    </a>
+  </nav>
+</DocumentFragment>
+`;
diff --git a/__tests__/footer.test.tsx b/__tests__/footer.test.tsx
new file mode 100644
index 0000000..172ab2a
--- /dev/null
+++ b/__tests__/footer.test.tsx
@@ -0,0 +1,11 @@
+import { render } from "@testing-library/react";
+import Footer from "../src/components/Footer";
+
+describe("Footer", () => {
+  it("Has correct year", () => {
+    // const MockFooter = () => <footer>2022</footer>;
+    const {getByText} = render(<Footer />)
+    // const { getByText } = render(<MockFooter />);
+    expect(getByText(2022)).toBeTruthy();
+  });
+});
diff --git a/__tests__/header.test.tsx b/__tests__/header.test.tsx
new file mode 100644
index 0000000..5c9cfe1
--- /dev/null
+++ b/__tests__/header.test.tsx
@@ -0,0 +1,10 @@
+import { render } from "@testing-library/react";
+import Header from "../src/components/Header";
+
+describe("Header", () => {
+  it("Looks Great", () => {
+    const { asFragment } = render(<Header />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/pages/_app.tsx b/pages/_app.tsx
index c055f25..9b5bba3 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,14 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import Footer from "../src/components/Footer";
+import Header from "../src/components/Header";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <>
+      <Header />
+      <Component {...pageProps} />
+      <Footer />
+    </>
+  );
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..ec6ceb9
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Footer() {
+  return (
+    <div>2022</div>
+  )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..383d781
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,13 @@
+import Link from "next/link";
+import React from "react";
+
+function Header() {
+  return (
+    <nav>
+      Platform Starter
+      <Link href="/login">Login</Link>
+    </nav>
+  );
+}
+
+export default Header;
diff --git a/tsconfig.json b/tsconfig.json
index 5a7cd32..92fef9e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,6 +15,6 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "__tests__/firstTest.test.js"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "__tests__/firstTest.test.jsx"],
   "exclude": ["node_modules"]
 }