diff --git a/app/layout.tsx b/app/layout.tsx
index f7fa87e..b3dd149 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import NavBar from "../components/NavBar";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -27,6 +28,7 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
+        <NavBar />
         {children}
       </body>
     </html>
diff --git a/components/NavBar.tsx b/components/NavBar.tsx
new file mode 100644
index 0000000..7aab809
--- /dev/null
+++ b/components/NavBar.tsx
@@ -0,0 +1,20 @@
+import Link from "next/link";
+
+export default function NavBar() {
+  return (
+    <nav className="p-4 border-b">
+      <div className="flex justify-between">
+        <Link href="/" className="hover:underline">
+          Home
+        </Link>
+        <Link
+          href="https://nextjs.org/docs"
+          target="_blank"
+          className="hover:underline"
+        >
+          Next.js Docs
+        </Link>
+      </div>
+    </nav>
+  );
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..32b77c7
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
