diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx
index c205b98ba..7fefce4df 100644
--- a/components/core/Footer/Footer.tsx
+++ b/components/core/Footer/Footer.tsx
@@ -3,7 +3,8 @@ import cn from 'classnames'
 import Link from 'next/link'
 import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
 import getSlug from '@utils/get-slug'
-import { Logo } from '@components/ui'
+import { Logo, Container } from '@components/ui'
+import { Github } from '@components/icon'
 
 interface Props {
   className?: string
@@ -14,79 +15,97 @@ interface Props {
 const LEGAL_PAGES = ['terms-of-use', 'shipping-returns', 'privacy-policy']
 
 const Footer: FC<Props> = ({ className, pages }) => {
-  const rootClassName = cn(
-    'flex flex-col p-6 md:py-12 md:flex-row flex-wrap max-w-screen-xl m-auto',
-    className
-  )
+  const rootClassName = cn(className)
   const { sitePages, legalPages } = getPages(pages)
 
   return (
-    <div className="bg-black text-white">
-      <footer className={rootClassName}>
-        <div className="grid grid-col-12"></div>
-        <div>
-          <Link href="/">
-            <a className="flex flex-initial items-center  font-bold md:mr-24">
-              <span className="rounded-full border border-gray-700 mr-2">
-                <Logo />
-              </span>
-              <span>ACME</span>
-            </a>
-          </Link>
+    <footer className={rootClassName}>
+      <Container>
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-2 border-b border-accents-2 py-6">
+          <div className="col-span-1 lg:col-span-2">
+            <Link href="/">
+              <a className="flex flex-initial items-center  font-bold md:mr-24">
+                <span className="rounded-full border border-gray-700 mr-2">
+                  <Logo />
+                </span>
+                <span>ACME</span>
+              </a>
+            </Link>
+          </div>
+          <div className="col-span-1 lg:col-span-2">
+            {' '}
+            <ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
+              <li className="py-3 md:py-0 md:pb-4">
+                <Link href="/">
+                  <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                    Home
+                  </a>
+                </Link>
+              </li>
+              <li className="py-3 md:py-0 md:pb-4">
+                <Link href="/">
+                  <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                    Careers
+                  </a>
+                </Link>
+              </li>
+              <li className="py-3 md:py-0 md:pb-4">
+                <Link href="/blog">
+                  <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                    Blog
+                  </a>
+                </Link>
+              </li>
+              {sitePages.map((page) => (
+                <li key={page.url} className="py-3 md:py-0 md:pb-4">
+                  <Link href={page.url!}>
+                    <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                      {page.name}
+                    </a>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="col-span-1 lg:col-span-2">
+            <ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
+              {legalPages.map((page) => (
+                <li key={page.url} className="py-3 md:py-0 md:pb-4">
+                  <Link href={page.url!}>
+                    <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                      {page.name}
+                    </a>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="col-span-1 lg:col-span-6 flex justify-end">
+            {' '}
+            <div>
+              <small className="text-white">
+                <Github />
+              </small>
+            </div>
+          </div>
         </div>
-
-        <ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
-          <li className="py-3 md:py-0 md:pb-4">
-            <Link href="/">
-              <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
-                Home
-              </a>
-            </Link>
-          </li>
-          <li className="py-3 md:py-0 md:pb-4">
-            <Link href="/">
-              <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
-                Careers
-              </a>
-            </Link>
-          </li>
-          <li className="py-3 md:py-0 md:pb-4">
-            <Link href="/blog">
-              <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
-                Blog
-              </a>
-            </Link>
-          </li>
-          {sitePages.map((page) => (
-            <li key={page.url} className="py-3 md:py-0 md:pb-4">
-              <Link href={page.url!}>
-                <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
-                  {page.name}
-                </a>
-              </Link>
-            </li>
-          ))}
-        </ul>
-
-        <ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
-          {legalPages.map((page) => (
-            <li key={page.url} className="py-3 md:py-0 md:pb-4">
-              <Link href={page.url!}>
-                <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
-                  {page.name}
-                </a>
-              </Link>
-            </li>
-          ))}
-        </ul>
-
-        <div>
+        <div className="py-12 flex flex-row justify-between">
           <small className="text-white">
             &copy; 2020 ACME, Inc. All rights reserved.
           </small>
+          <div className="flex items-center text-accents-4">
+            Crafted by
+            <a href="https://vercel.com">
+              <img
+                src="/vercel.png"
+                alt="Vercel.com Logo"
+                className="inline-block h-6 ml-4"
+              />
+            </a>
+          </div>
         </div>
-      </footer>
-    </div>
+      </Container>
+    </footer>
   )
 }
 
diff --git a/components/icon/Github.tsx b/components/icon/Github.tsx
new file mode 100644
index 000000000..b8cc0c558
--- /dev/null
+++ b/components/icon/Github.tsx
@@ -0,0 +1,20 @@
+const Sun = ({ ...props }) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 0C5.37 0 0 5.50583 0 12.3035C0 17.7478 3.435 22.3463 8.205 23.9765C8.805 24.0842 9.03 23.715 9.03 23.3921C9.03 23.0999 9.015 22.131 9.015 21.1005C6 21.6696 5.22 20.347 4.98 19.6549C4.845 19.3012 4.26 18.2092 3.75 17.917C3.33 17.6863 2.73 17.1173 3.735 17.1019C4.68 17.0865 5.355 17.9939 5.58 18.363C6.66 20.2239 8.385 19.701 9.075 19.3781C9.18 18.5783 9.495 18.04 9.84 17.7325C7.17 17.4249 4.38 16.3637 4.38 11.6576C4.38 10.3196 4.845 9.21227 5.61 8.35102C5.49 8.04343 5.07 6.78232 5.73 5.09058C5.73 5.09058 6.735 4.76762 9.03 6.3517C9.99 6.07487 11.01 5.93645 12.03 5.93645C13.05 5.93645 14.07 6.07487 15.03 6.3517C17.325 4.75224 18.33 5.09058 18.33 5.09058C18.99 6.78232 18.57 8.04343 18.45 8.35102C19.215 9.21227 19.68 10.3042 19.68 11.6576C19.68 16.3791 16.875 17.4249 14.205 17.7325C14.64 18.1169 15.015 18.8552 15.015 20.0086C15.015 21.6542 15 22.9768 15 23.3921C15 23.715 15.225 24.0995 15.825 23.9765C18.2072 23.1519 20.2773 21.5822 21.7438 19.4882C23.2103 17.3942 23.9994 14.8814 24 12.3035C24 5.50583 18.63 0 12 0Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export default Sun
diff --git a/components/icon/index.ts b/components/icon/index.ts
index 929003d6f..399ae4f5b 100644
--- a/components/icon/index.ts
+++ b/components/icon/index.ts
@@ -8,3 +8,4 @@ export { default as Minus } from './Minus'
 export { default as Check } from './Check'
 export { default as Sun } from './Sun'
 export { default as Moon } from './Moon'
+export { default as Github } from './Github'
diff --git a/public/vercel.png b/public/vercel.png
new file mode 100644
index 000000000..659ca11d0
Binary files /dev/null and b/public/vercel.png differ