diff --git a/src/components/TopNav.tsx b/src/components/TopNav.tsx
index d9369d0..0c4db48 100644
--- a/src/components/TopNav.tsx
+++ b/src/components/TopNav.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { useState, useCallback } from "react";
-import { Users, Share2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { Users, Share2, LogOut } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 
 interface TopNavProps {
@@ -10,6 +11,7 @@ interface TopNavProps {
 }
 
 export default function TopNav({ roomId, userCount }: TopNavProps) {
+  const router = useRouter();
   const [toast, setToast] = useState("");
 
   const showToast = useCallback((msg: string) => {
@@ -62,7 +64,7 @@ export default function TopNav({ roomId, userCount }: TopNavProps) {
           </span>
         </h1>
 
-        <div className="flex w-24 items-center justify-end gap-1.5 text-xs text-zinc-500">
+        <div className="flex items-center justify-end gap-1.5 text-xs text-zinc-500">
           <span className="rounded-full bg-zinc-100 px-2 py-0.5 font-medium">
             {roomId}
           </span>
@@ -70,6 +72,13 @@ export default function TopNav({ roomId, userCount }: TopNavProps) {
             <Users size={13} />
             <span className="font-semibold text-emerald-500">{userCount}</span>
           </div>
+          <button
+            onClick={() => router.push("/")}
+            className="ml-1 flex items-center justify-center rounded-full p-1 text-zinc-400 transition-colors active:bg-zinc-100 active:text-zinc-600"
+            aria-label="退出房间"
+          >
+            <LogOut size={15} />
+          </button>
         </div>
       </nav>