diff --git a/app/layout.tsx b/app/layout.tsx
index 62ba83e..5476dae 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,8 +1,9 @@
 import { Antonio, Libre_Baskerville, Open_Sans } from "next/font/google"
-import Nav from "components/Nav"
 import "styles/tailwind.css"
 import "styles/global.css"
 
+import Footer from "components/Footer"
+import Nav from "components/Nav"
 import { WipTag } from "components/WipTag"
 
 // import Transitions, { Animate } from "components/Transition"
@@ -38,6 +39,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         {/* </Animate> */}
         <WipTag />
         {/* </Transitions> */}
+        <Footer />
       </body>
     </html>
   )
diff --git a/components/AutoComplete/AutoComplete.tsx b/components/AutoComplete/AutoComplete.tsx
index 16d5e7b..cf48af7 100644
--- a/components/AutoComplete/AutoComplete.tsx
+++ b/components/AutoComplete/AutoComplete.tsx
@@ -72,10 +72,9 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
         onFocus={() => {
           setIsFocused(true)
           if (onFocusValue) {
-            setQuery(p => !p?.length ? onFocusValue : p)
+            setQuery((p) => (!p?.length ? onFocusValue : p))
           }
         }}
-
         onBlur={handleBlur}
         placeholder={placeholder || "Search..."}
         className="
@@ -92,10 +91,10 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
         (isLoading ? (
           <Box className="absolute mt-1 w-full rounded border border-gray-300 bg-neutral-900 p-2">Loading...</Box>
         ) : noResults ? (
-          <Box className="absolute mt-1 w-full rounded border border-gray-300 bg-neutral-900 p-2">No matches found. Please search again.</Box>
-
-        )
-        : (
+          <Box className="absolute mt-1 w-full rounded border border-gray-300 bg-neutral-900 p-2">
+            No matches found. Please search again.
+          </Box>
+        ) : (
           results.length > 0 && (
             <Box className="absolute mt-1 w-full rounded border border-gray-300 bg-neutral-900 p-2">
               <ul>
diff --git a/components/Footer/Client.tsx b/components/Footer/Client.tsx
new file mode 100644
index 0000000..f1942b1
--- /dev/null
+++ b/components/Footer/Client.tsx
@@ -0,0 +1,23 @@
+"use client"
+import React from "react"
+import { useTina } from "tinacms/dist/react"
+import { FooterRenderer } from "./Renderer"
+import { FooterProps } from "./types"
+
+export const FooterClient: React.FC<FooterProps> = ({ nav, content }) => {
+  const _nav = useTina({
+    query: nav.query,
+    variables: nav.variables,
+    data: nav.data,
+  })
+  const _content = useTina({
+    query: content.query,
+    variables: content.variables,
+    data: content.data,
+  })
+
+  return (
+    // @ts-ignore
+    <FooterRenderer nav={_nav} content={_content} />
+  )
+}
diff --git a/components/Footer/Renderer.tsx b/components/Footer/Renderer.tsx
new file mode 100644
index 0000000..6a99922
--- /dev/null
+++ b/components/Footer/Renderer.tsx
@@ -0,0 +1,38 @@
+import React from "react"
+import { TinaMarkdown } from "tinacms/dist/rich-text"
+import { FooterProps } from "./types"
+
+export const FooterRenderer: React.FC<FooterProps> = ({ nav, content }) => {
+  const column1 = content.data.page.sections.find((section: any) => section.title === "column1")
+  const column2 = content.data.page.sections.find((section: any) => section.title === "column2")
+  return (
+    <footer className="prose max-w-none bg-theme-navy-500 text-white">
+      {/* three columns 40 / 40 / 20 */}
+      {/* one col on mobile */}
+      <div className="grid grid-cols-1 gap-4 p-4 md:grid-cols-6">
+        <div className="col-span-1 md:col-span-2">
+          <h1 className="text-white">Grocery Gap Atlas</h1>
+          <TinaMarkdown content={content.data.page.body} />
+        </div>
+        <div className="col-span-1 md:col-span-2">
+          <TinaMarkdown content={column1.body} />
+        </div>
+        <div className="col-span-1 md:col-span-2">
+          <TinaMarkdown content={column2.body} />
+        </div>
+      </div>
+      <div className="bg-white/25">
+        {/* horizontal ul of nav.data.links */}
+        <ul className="flex list-none space-x-4 py-2 pl-4 text-white ">
+          {nav.data.nav.links.map((link: any) => (
+            <li key={link.title}>
+              <a href={link.path} className="text-white">
+                {link.title}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </footer>
+  )
+}
diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx
new file mode 100644
index 0000000..d6bb63a
--- /dev/null
+++ b/components/Footer/index.tsx
@@ -0,0 +1,16 @@
+import React from "react"
+import { getMdxContent } from "hooks/useMdxContent"
+import { FooterClient } from "./Client"
+import { FooterRenderer } from "./Renderer"
+import { FooterProps } from "./types"
+
+const Rendererer = process.env.NODE_ENV === "development" ? FooterClient : FooterRenderer
+
+const Footer: React.FC = async () => {
+  const footerNav = await getMdxContent<FooterProps["footerNav"]>("nav", "footer-nav.mdx")
+  const footerContent = await getMdxContent<FooterProps["footerContent"]>("page", "footer.mdx")
+  // @ts-ignore
+  return <Rendererer nav={footerNav} content={footerContent} />
+}
+
+export default Footer
diff --git a/components/Footer/types.ts b/components/Footer/types.ts
new file mode 100644
index 0000000..1d9e0ba
--- /dev/null
+++ b/components/Footer/types.ts
@@ -0,0 +1 @@
+export type FooterProps = any
diff --git a/components/Pages/Home/Renderer.tsx b/components/Pages/Home/Renderer.tsx
index c2464e2..5578eb8 100644
--- a/components/Pages/Home/Renderer.tsx
+++ b/components/Pages/Home/Renderer.tsx
@@ -70,7 +70,7 @@ export const Renderer: React.FC<HomeProps> = ({ pageInfo }) => {
                 ))}
               </h1>
             </div>
-            <div className="my-12 mx-4 flex flex-col justify-end lg:my-0">
+            <div className="mx-4 my-12 flex flex-col justify-end lg:my-0">
               <h2 className="text-4xl font-bold">{getFirstTextElement(sections, "Subtitle")}</h2>
             </div>
           </div>
@@ -78,8 +78,8 @@ export const Renderer: React.FC<HomeProps> = ({ pageInfo }) => {
             <div>{getFirstTextElement(sections, "Main description")}</div>
             <div>
               {getFirstTextElement(sections, "Search CTA")}
-              <br/>
-              <br/>
+              <br />
+              <br />
               <PlaceSearch />
             </div>
           </div>
@@ -91,7 +91,7 @@ export const Renderer: React.FC<HomeProps> = ({ pageInfo }) => {
         {/* reports, trends, toolkit, about */}
         <div className={`my-4 grid grid-cols-1 justify-between gap-4 ${getGridcols(fourUpSections.length)}`}>
           {fourUpSections.map((title: string, i: number) => (
-            <div key={i} className="flex flex-col border-2 p-4 mb-4 lg:mb-0">
+            <div key={i} className="mb-4 flex flex-col border-2 p-4 lg:mb-0">
               <TinaMarkdown content={sections.find((f: any) => f.title === title)?.body} />
             </div>
           ))}
diff --git a/content/nav/footer-nav.mdx b/content/nav/footer-nav.mdx
index e69de29..a7f8d18 100644
--- a/content/nav/footer-nav.mdx
+++ b/content/nav/footer-nav.mdx
@@ -0,0 +1,19 @@
+---
+title: Footer
+links:
+  - title: Home
+    path: /
+  - title: County
+    path: /county
+  - title: State
+    path: /state
+  - title: National
+    path: /national
+  - title: Case Studies
+    path: /posts
+  - title: About
+    path: /about
+  - title: Contact
+    path: /contact
+---
+
diff --git a/content/page/footer.mdx b/content/page/footer.mdx
new file mode 100644
index 0000000..e2261f2
--- /dev/null
+++ b/content/page/footer.mdx
@@ -0,0 +1,18 @@
+---
+sections:
+  - title: column2
+    body: |
+      Funding provided in part by:
+
+      [![](</uploads/Artboard 1.png>)](https://www.rwjf.org/)
+  - title: column1
+    body: |
+      Feeding Fairness is a collaboration of:
+      [![](/uploads/rafi-logo.png)](https://www.rafiusa.org/)
+
+      [![](/uploads/dsilogo.png)](https://datascience.uchicago.edu/)
+---
+
+Understanding the impacts of structural racism & unfair markets on food access.
+
+This tool enables advocates, analytics, and decision-makers to unravel the landscape of inequitable access to food across the US. Use this tool to find opportunities to improve access, break down potential relationships of factors driving inequity, and utilize our data for further analysis and research.
diff --git a/package.json b/package.json
index b0ef570..42c5616 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "e2e:ui": "playwright test --ui",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "postinstall": "npx patch-package -y",
+    "pre-commit": "pnpm prettier --write && pnpm lint && pnpm build",
     "coupling-graph": "npx madge --extensions js,jsx,ts,tsx,css,md,mdx ./ --exclude '.next|tailwind.config.js|reset.d.ts|prettier.config.js|postcss.config.js|playwright.config.ts|next.config.js|next-env.d.ts|instrumentation.ts|e2e/|README.md|.storybook/|.eslintrc.js' --image graph.svg"
   },
   "dependencies": {
diff --git a/public/uploads/Artboard 1.png b/public/uploads/Artboard 1.png
new file mode 100644
index 0000000..7c5dd96
Binary files /dev/null and b/public/uploads/Artboard 1.png differ
diff --git a/public/uploads/dsilogo.png b/public/uploads/dsilogo.png
new file mode 100644
index 0000000..3a98d1e
Binary files /dev/null and b/public/uploads/dsilogo.png differ
diff --git a/public/uploads/rafi-logo.png b/public/uploads/rafi-logo.png
new file mode 100644
index 0000000..d1f3a22
Binary files /dev/null and b/public/uploads/rafi-logo.png differ
diff --git a/styles/global.css b/styles/global.css
index e69de29..ae1ceb1 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -0,0 +1,3 @@
+footer img {
+  max-width: 50%;
+}
\ No newline at end of file