diff --git a/apps/web/src/components/layout/main/Header.tsx b/apps/web/src/components/layout/main/Header.tsx
index b3eff7a..8c9eb76 100644
--- a/apps/web/src/components/layout/main/Header.tsx
+++ b/apps/web/src/components/layout/main/Header.tsx
@@ -9,18 +9,13 @@ import logo from "@web/src/assets/logo.png";
 import { env } from "@web/src/env";
 import { Button } from "antd";
 import usePublicImage from "@web/src/hooks/usePublicImage";
+import { useUserAgent } from "@web/src/hooks/useUserAgent";
 export const Header = memo(function Header() {
 	const { isAuthenticated } = useAuth();
 	const navigate = useNavigate();
 	const { imageUrl } = usePublicImage("logo.png");
-	const userAgent = navigator.userAgent;
-	const previewMode = useMemo(() => {
-		return (
-			userAgent ===
-			"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:135.0) Gecko/20100101 Firefox/135.0"
-		);
-	}, [userAgent]);
 
+	const { previewMode } = useUserAgent();
 	return (
 		<header className="sticky top-0 z-50 shadow-lg bg-slate-50">
 			<div className="mx-auto px-4">