diff --git a/src/components/HomeScreen.tsx b/src/components/HomeScreen.tsx
index 11fe9b7..25fc88a 100644
--- a/src/components/HomeScreen.tsx
+++ b/src/components/HomeScreen.tsx
@@ -84,16 +84,23 @@ export function HomeScreen() {
         <motion.div
           initial={{ opacity: 0, y: 16 }}
           animate={{ opacity: 1, y: 0 }}
-          className="flex flex-col items-center text-center mt-3 mb-4 sm:mt-5 sm:mb-6"
+          className="flex flex-col items-center mt-4 mb-5 sm:mt-6 sm:mb-7"
         >
-          <div className="size-12 sm:size-16 rounded-2xl gold-border flex items-center justify-center bg-navy-900 mb-2 sm:mb-3 shadow-lg">
-            <span className="gold-text text-3xl sm:text-4xl font-black leading-none">♠</span>
+          {/* logo + title on one row (no overflow); subtitle beneath the title */}
+          <div className="flex items-center gap-3">
+            <div className="size-12 sm:size-14 shrink-0 rounded-2xl gold-border flex items-center justify-center bg-navy-900 shadow-lg">
+              <span className="gold-text text-3xl font-black leading-none">♠</span>
+            </div>
+            <div className="text-start">
+              <h1 className="gold-text text-3xl sm:text-4xl font-black tracking-tight leading-none">
+                {t("app.title")}
+              </h1>
+              <p className="text-cream/60 mt-1.5 text-xs sm:text-sm leading-none">{t("app.subtitle")}</p>
+            </div>
+          </div>
+          <div className="mt-3">
+            <OnlinePlayers />
           </div>
-          <h1 className="gold-text text-4xl sm:text-5xl font-black tracking-tight">
-            {t("app.title")}
-          </h1>
-          <p className="text-cream/60 mt-1 text-sm">{t("app.subtitle")}</p>
-          <OnlinePlayers />
         </motion.div>
 
         {/* HERO: play online */}
diff --git a/src/components/screens/ProfileScreen.tsx b/src/components/screens/ProfileScreen.tsx
index 80e5c68..140b1af 100644
--- a/src/components/screens/ProfileScreen.tsx
+++ b/src/components/screens/ProfileScreen.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { Check, ChevronLeft, Crown, Eye, EyeOff, Lock, Music, Pencil, Star, Upload, Users, Volume2 } from "lucide-react";
+import { Check, ChevronLeft, Crown, Eye, EyeOff, Lock, LogOut, Music, Pencil, Star, Upload, Users, Volume2 } from "lucide-react";
 import { useRef, useState } from "react";
 import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
 import { RankBadge } from "@/components/online/RankBadge";
@@ -35,6 +35,8 @@ export function ProfileScreen() {
   const profile = useSessionStore((s) => s.profile);
   const updateProfile = useSessionStore((s) => s.updateProfile);
   const upgradePlan = useSessionStore((s) => s.upgradePlan);
+  const signOut = useSessionStore((s) => s.signOut);
+  const isAuthed = useSessionStore((s) => s.isAuthed);
   const go = useUIStore((st) => st.go);
   const fileRef = useRef<HTMLInputElement>(null);
   const [editing, setEditing] = useState(false);
@@ -346,6 +348,20 @@ export function ProfileScreen() {
           })}
         </div>
       </div>
+
+      {/* Sign out */}
+      {isAuthed && (
+        <button
+          onClick={() => {
+            signOut();
+            go("home");
+          }}
+          className="mt-6 w-full glass rounded-2xl py-3 flex items-center justify-center gap-2 text-rose-300 hover:bg-navy-800/80 transition"
+        >
+          <LogOut className="size-4" />
+          {t("menu.signOut")}
+        </button>
+      )}
     </ScreenShell>
   );
 }