diff --git a/app/auth/sign-in/page.tsx b/app/auth/sign-in/page.tsx
index 475924a..0a65abe 100644
--- a/app/auth/sign-in/page.tsx
+++ b/app/auth/sign-in/page.tsx
@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { SignInForm } from "@/components/auth/sign-in-form";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 
@@ -16,7 +17,9 @@ export default function SignInPage() {
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <SignInForm />
+        <Suspense fallback={null}>
+          <SignInForm />
+        </Suspense>
       </CardContent>
     </Card>
   );
diff --git a/app/layout.tsx b/app/layout.tsx
index eb9e0ba..f2fdee7 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -37,6 +37,11 @@ export const metadata: Metadata = {
     shortcut: "/favicon.png",
     apple: "/wulff-logo.png",
   },
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "default",
+    title: "Pulse",
+  },
 };
 
 export const viewport: Viewport = {
diff --git a/components/auth/sign-in-form.tsx b/components/auth/sign-in-form.tsx
index c8cbf9e..80e6fe4 100644
--- a/components/auth/sign-in-form.tsx
+++ b/components/auth/sign-in-form.tsx
@@ -1,16 +1,44 @@
 "use client";
 
+import { useEffect, useRef, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { Loader2 } from "lucide-react";
+import { authClient } from "@/lib/auth-client";
 import { MagicLinkForm } from "./magic-link-form";
 import { MicrosoftButton } from "./microsoft-button";
 import { Separator } from "@/components/ui/separator";
 
 export function SignInForm() {
+  const searchParams = useSearchParams();
+  const callbackUrl = searchParams.get("callbackUrl") || "/";
+  const isMobileFlow = callbackUrl.startsWith("/mobile");
+  const [autoRedirecting, setAutoRedirecting] = useState(isMobileFlow);
+  const triggered = useRef(false);
+
+  useEffect(() => {
+    if (!isMobileFlow || triggered.current) return;
+    triggered.current = true;
+    authClient.signIn
+      .social({ provider: "microsoft", callbackURL: callbackUrl })
+      .then((result) => {
+        if (result?.error) setAutoRedirecting(false);
+      })
+      .catch(() => setAutoRedirecting(false));
+  }, [isMobileFlow, callbackUrl]);
+
+  if (autoRedirecting) {
+    return (
+      <div className="flex flex-col items-center gap-3 py-8">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        <p className="text-sm text-muted-foreground">Signing you in with Microsoft 365…</p>
+      </div>
+    );
+  }
+
   return (
     <div className="space-y-6">
-      {/* Microsoft OAuth */}
-      <MicrosoftButton />
+      <MicrosoftButton callbackURL={callbackUrl} />
 
-      {/* Divider */}
       <div className="relative">
         <div className="absolute inset-0 flex items-center">
           <Separator className="w-full" />
@@ -22,7 +50,6 @@ export function SignInForm() {
         </div>
       </div>
 
-      {/* Magic Link */}
       <MagicLinkForm />
     </div>
   );