diff --git a/components/layout/signin-box.tsx b/components/layout/signin-box.tsx
index 2cee5f7..004f8b7 100644
--- a/components/layout/signin-box.tsx
+++ b/components/layout/signin-box.tsx
@@ -61,10 +61,10 @@ export default function SigninPage() {
 
   if (isInitialLoading) {
     return (
-      <div className="mx-auto max-w-md space-y-6">
-        <Card className="bg-transparent border-0 shadow-none">
-          <CardContent className="flex items-center justify-center py-12">
-            <div className="flex items-center gap-2 text-muted-foreground">
+      <div data-alt="signin-container" className="mx-auto w-full max-w-sm space-y-6">
+        <Card data-alt="loading-card" className="bg-transparent border-0 shadow-none">
+          <CardContent data-alt="loading-content" className="flex items-center justify-center py-12">
+            <div data-alt="loading-indicator" className="flex items-center gap-2 text-muted-foreground">
               <div className="w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
               Loading...
             </div>
@@ -75,47 +75,53 @@ export default function SigninPage() {
   }
 
   return (
-    <div className="mx-auto max-w-md space-y-6">
+    <div data-alt="signin-container" className="mx-auto w-full max-w-sm space-y-6">
 
       {/* Signin status card */}
-      <Card className="bg-transparent border-0 shadow-none">
-        <CardHeader className="text-center pb-4 pt-0">
-            <h1 className="text-3xl font-bold text-balance bg-gradient-to-r from-custom-blue to-custom-purple bg-clip-text text-transparent">
+      <Card data-alt="signin-card" className="bg-transparent border-0 shadow-none">
+        <CardHeader data-alt="signin-header" className="text-center pb-4 pt-0">
+            <h1 data-alt="signin-title" className="text-2xl sm:text-3xl font-bold text-balance bg-gradient-to-r from-custom-blue to-custom-purple bg-clip-text text-transparent">
             Daily Sign-in
           </h1>
           <div className="flex items-center justify-center gap-2">
-            <p className="text-muted-foreground">Sign in to earn credits. Credits are valid for 7 days</p>
-            <div className="relative">
+            <p className="text-sm sm:text-base text-muted-foreground">Sign in to earn credits. Credits are valid for 7 days</p>
+            <div className="relative" data-alt="signin-help-wrapper">
               <button
+                data-alt="signin-help-button"
                 onMouseEnter={() => setShowTip(true)}
                 onMouseLeave={() => setShowTip(false)}
-                className="p-1 rounded-full hover:bg-muted/50 transition-colors"
+                onClick={() => setShowTip((v: boolean) => !v)}
+                className="p-2 rounded-full hover:bg-muted/50 transition-colors"
               >
                 <HelpCircle className="w-4 h-4 text-muted-foreground hover:text-foreground" />
               </button>
               {showTip && (
-                <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-80 p-3 bg-popover border rounded-lg shadow-lg z-10">
+                <div
+                  data-alt="signin-help-popover"
+                  className="fixed left-1/2 -translate-x-1/2 bottom-16 inset-x-4 sm:inset-auto sm:absolute sm:bottom-full sm:left-1/2 sm:-translate-x-1/2 sm:mb-2
+                  w-[92vw] max-w-sm sm:w-80 p-3 bg-popover border rounded-lg shadow-lg z-50 max-h-[60vh] overflow-auto"
+                >
                   <div className="text-sm space-y-1 text-left">
                     <p className="font-medium text-foreground">Sign-in Rules</p>
                     <p className="text-muted-foreground">• Daily sign-in earns 100 credits</p>
                     <p className="text-muted-foreground">• Credits are valid for 7 days</p>
                     <p className="text-muted-foreground">• Expired credits will be automatically cleared</p>
                   </div>
-                  <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-popover"></div>
+                  <div className="hidden sm:block absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-popover"></div>
                 </div>
               )}
             </div>
           </div>
         </CardHeader>
 
-        <CardContent className="space-y-6">
+        <CardContent data-alt="signin-content" className="space-y-6">
           <div className="grid grid-cols-1 gap-4">
-            <div className="text-center p-6 rounded-lg bg-gradient-to-br from-custom-blue/20 via-custom-purple/20 to-custom-blue/10 border border-custom-blue/30">
+            <div data-alt="credits-card" className="text-center p-4 sm:p-6 rounded-lg bg-gradient-to-br from-custom-blue/20 via-custom-purple/20 to-custom-blue/10 border border-custom-blue/30">
               <div className="flex items-center justify-center gap-2 mb-2">
                 <Coins className="w-6 h-6 text-primary" />
                 <span className="text-sm text-muted-foreground">Earned Credits</span>
               </div>
-              <div className="text-3xl font-bold bg-gradient-to-r from-custom-blue to-custom-purple bg-clip-text text-transparent">
+              <div className="text-3xl sm:text-4xl font-bold bg-gradient-to-r from-custom-blue to-custom-purple bg-clip-text text-transparent">
                 {signinData.credits || 0}
               </div>
             </div>
@@ -124,9 +130,10 @@ export default function SigninPage() {
 
           {/* Sign-in button */}
           <Button
+            data-alt="signin-button"
             onClick={handleSignin}
             disabled={signinData.has_signin || isLoading}
-            className="w-full h-12 text-lg font-semibold bg-gradient-to-r from-custom-blue to-custom-purple hover:from-custom-blue/90 hover:to-custom-purple/90 text-white"
+            className="w-full h-11 text-base sm:h-12 sm:text-lg font-semibold bg-gradient-to-r from-custom-blue to-custom-purple hover:from-custom-blue/90 hover:to-custom-purple/90 text-white"
             size="lg"
           >
             {isLoading ? (
diff --git a/components/layout/top-bar.tsx b/components/layout/top-bar.tsx
index 1225494..15baac4 100644
--- a/components/layout/top-bar.tsx
+++ b/components/layout/top-bar.tsx
@@ -568,10 +568,8 @@ export function TopBar({ collapsed, isDesktop=true }: { collapsed: boolean, isDe
           data-alt="signin-modal"
         >
           <DialogTitle></DialogTitle>
-          <div className="p-4">
-            <SigninBox />
-          </div>
-        </DialogContent>
+          <SigninBox />
+          </DialogContent>
       </Dialog>
     </div>
   );
diff --git a/components/ui/VideoCoverflow.tsx b/components/ui/VideoCoverflow.tsx
index 5f1bd1c..0fa17d8 100644
--- a/components/ui/VideoCoverflow.tsx
+++ b/components/ui/VideoCoverflow.tsx
@@ -121,7 +121,6 @@ const VideoCoverflow: React.FC<VideoCoverflowProps> = ({
                     modules={isMobile ? [Autoplay, EffectCards] : [Autoplay, EffectCoverflow]}
                     effect={isMobile ? 'cards' : 'coverflow'}
                     key={isMobile ? 'cards' : 'coverflow'}
-                    data-test={isMobile}
                     centeredSlides
                     slidesPerView={isMobile ? 1 : 2}
                     loop