diff --git a/app/public-area/components/footer.tsx b/app/public-area/components/footer.tsx
new file mode 100644
index 0000000..3990c04
--- /dev/null
+++ b/app/public-area/components/footer.tsx
@@ -0,0 +1,41 @@
+import type { FunctionComponent } from "react";
+import type { LinkProps } from "blitz";
+import { Link, Routes } from "blitz";
+
+export default function Footer() {
+	// TODO
+	const isDisabled = true;
+	if (isDisabled) {
+		// return null;
+	}
+
+	return (
+		<footer className="bg-white">
+			<div className="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
+				<nav className="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
+					<NavLink href={Routes.Roadmap()} name="Roadmap" />
+					<NavLink href={Routes.Roadmap()} name="Roadmap" />
+					<NavLink href={Routes.Roadmap()} name="Roadmap" />
+					<NavLink href={Routes.Roadmap()} name="Roadmap" />
+				</nav>
+				{/*<p className="mt-8 text-center text-base text-gray-400">&copy; 2021 Capsule Corp. Dev Pte. Ltd. All rights reserved.</p>*/}
+				<p className="mt-8 text-center text-base text-gray-400">
+					&copy; 2021 Mokhtar Mial All rights reserved.
+				</p>
+			</div>
+		</footer>
+	);
+}
+
+type Props = {
+	href: LinkProps["href"];
+	name: string;
+};
+
+const NavLink: FunctionComponent<Props> = ({ href, name }) => (
+	<div className="px-5 py-2">
+		<Link href={href}>
+			<a className="text-base text-gray-500 hover:text-gray-900">{name}</a>
+		</Link>
+	</div>
+);
diff --git a/app/public-area/components/header.tsx b/app/public-area/components/header.tsx
index 1e8d83a..2370e98 100644
--- a/app/public-area/components/header.tsx
+++ b/app/public-area/components/header.tsx
@@ -1,5 +1,5 @@
 import { Fragment, useState, useRef, useEffect } from "react";
-import type { LinkProps } from "next/link";
+import type { LinkProps } from "blitz";
 import { Link, Routes } from "blitz";
 import { Dialog, Transition } from "@headlessui/react";
 import { XIcon } from "@heroicons/react/outline";
diff --git a/app/public-area/components/referral-banner.tsx b/app/public-area/components/referral-banner.tsx
index a8c2fb9..31eeac1 100644
--- a/app/public-area/components/referral-banner.tsx
+++ b/app/public-area/components/referral-banner.tsx
@@ -1,6 +1,7 @@
 import { XIcon } from "@heroicons/react/outline";
 
 export default function ReferralBanner() {
+	// TODO
 	const isDisabled = true;
 	if (isDisabled) {
 		return null;
diff --git a/app/public-area/pages/index.tsx b/app/public-area/pages/index.tsx
index 7c2155c..9da4a3a 100644
--- a/app/public-area/pages/index.tsx
+++ b/app/public-area/pages/index.tsx
@@ -5,6 +5,7 @@ import Header from "../components/header";
 import ReferralBanner from "../components/referral-banner";
 import Hero from "../components/hero";
 import FAQs from "../components/faqs";
+import Footer from "../components/footer";
 
 const LandingPage: BlitzPage = () => {
 	return (
@@ -28,6 +29,8 @@ const LandingPage: BlitzPage = () => {
 						<Hero />
 						<FAQs />
 					</main>
+
+					<Footer />
 				</section>
 			</section>
 		</>
diff --git a/app/public-area/pages/open-metrics.tsx b/app/public-area/pages/open-metrics.tsx
index 19f9c21..757da56 100644
--- a/app/public-area/pages/open-metrics.tsx
+++ b/app/public-area/pages/open-metrics.tsx
@@ -4,6 +4,7 @@ import { Head, useQuery } from "blitz";
 import getMetrics from "../queries/get-metrics";
 
 import Header from "../components/header";
+import Footer from "../components/footer";
 
 const initialData = {
 	phoneNumbers: 0,
@@ -48,6 +49,8 @@ const OpenMetrics: BlitzPage = () => {
 							</div>
 						</section>
 					</main>
+
+					<Footer />
 				</section>
 			</section>
 		</>
diff --git a/app/public-area/pages/roadmap.tsx b/app/public-area/pages/roadmap.tsx
index b37ac95..e70fb02 100644
--- a/app/public-area/pages/roadmap.tsx
+++ b/app/public-area/pages/roadmap.tsx
@@ -4,6 +4,7 @@ import clsx from "clsx";
 import { CheckIcon, XIcon, TerminalIcon } from "@heroicons/react/solid";
 
 import Header from "../components/header";
+import Footer from "../components/footer";
 
 const Roadmap: BlitzPage = () => {
 	return (
@@ -97,6 +98,8 @@ const Roadmap: BlitzPage = () => {
 							</div>
 						</section>
 					</main>
+
+					<Footer />
 				</section>
 			</section>
 		</>