diff --git a/app/(app)/feedback/page.tsx b/app/(app)/feedback/page.tsx
new file mode 100644
index 0000000..2f300e4
--- /dev/null
+++ b/app/(app)/feedback/page.tsx
@@ -0,0 +1,27 @@
+import type { Metadata } from 'next'
+import { FeedbackForm } from '@/components/FeedbackForm'
+
+export const metadata: Metadata = {
+  title: 'Send Feedback — Battl Builders',
+  description:
+    'Report a bug, suggest a feature, or share a thought with the Battl Builders team.',
+}
+
+export default function FeedbackPage() {
+  return (
+    <main className="mx-auto max-w-4xl px-4 py-10">
+      <header className="mb-10">
+        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-zinc-500">
+          Battl Builders
+        </p>
+        <h1 className="mt-2 text-3xl font-semibold tracking-tight">
+          Send Feedback
+        </h1>
+        <p className="mt-2 text-sm text-zinc-400">
+          Bug, feature idea, or general thought — we read everything.
+        </p>
+      </header>
+      <FeedbackForm />
+    </main>
+  )
+}
diff --git a/app/page.tsx b/app/page.tsx
index cb3180a..bd0ef9d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -373,6 +373,9 @@ export default function HomePage() {
           <div className="mx-auto flex max-w-5xl items-center justify-between border-t border-zinc-900/60 px-4 py-4 text-[11px] text-zinc-700">
             <span>© {new Date().getFullYear()} BATTL BUILDERS™</span>
             <div className="flex gap-4">
+              <Link href="/feedback" className="hover:text-zinc-500">
+                Send Feedback
+              </Link>
               <Link href="/privacy" className="hover:text-zinc-500">
                 Privacy
               </Link>
diff --git a/components/TopNav.tsx b/components/TopNav.tsx
index 7165279..ab46241 100644
--- a/components/TopNav.tsx
+++ b/components/TopNav.tsx
@@ -3,9 +3,11 @@
 
 import Link from "next/link";
 import Image from "next/image";
+import { useState } from "react";
 import { usePathname } from "next/navigation";
 
 import { useAuth } from "@/context/AuthContext";
+import { FeedbackModal } from "@/components/FeedbackModal";
 
 function NavLink({
   href,
@@ -38,8 +40,10 @@ function NavLink({
 export function TopNav() {
   const { user, logout, loading } = useAuth();
   const isAuthenticated = !!user;
+  const [feedbackOpen, setFeedbackOpen] = useState(false);
 
   return (
+    <>
     <header className="border-b border-zinc-200 bg-white/95 dark:border-zinc-800 dark:bg-black/95 backdrop-blur">
       <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
         {/* Left: Brand / Home */}
@@ -65,6 +69,13 @@ export function TopNav() {
 
         {/* Right side actions */}
         <div className="flex items-center justify-end gap-3 sm:gap-4">
+          <button
+            type="button"
+            onClick={() => setFeedbackOpen(true)}
+            className="hidden text-xs font-medium text-zinc-500 hover:text-zinc-300 transition-colors sm:inline"
+          >
+            Send Feedback
+          </button>
           {loading ? (
             <span className="text-xs text-zinc-500">Checking session…</span>
           ) : isAuthenticated ? (
@@ -103,6 +114,8 @@ export function TopNav() {
         </div>
       </div>
     </header>
+    <FeedbackModal open={feedbackOpen} onClose={() => setFeedbackOpen(false)} />
+    </>
   );
 }
 export default TopNav;