diff --git a/apps/frontend/components/auth/HeaderAuthPanel.tsx b/apps/frontend/components/auth/HeaderAuthPanel.tsx
index 49845165ad..728dd8286c 100644
--- a/apps/frontend/components/auth/HeaderAuthPanel.tsx
+++ b/apps/frontend/components/auth/HeaderAuthPanel.tsx
@@ -19,9 +19,7 @@ import { useAuthModalStore } from '@/stores/authModal'
 import type { Course } from '@/types/type'
 import { ContestRole, type UserContest } from '@generated/graphql'
 import { ChevronDown } from 'lucide-react'
-import type { Route } from 'next'
 import type { Session } from 'next-auth'
-import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { BiSolidUser } from 'react-icons/bi'
@@ -179,47 +177,49 @@ export function HeaderAuthPanel({
           </Dialog>
         </>
       ) : (
-        <>
-          <Dialog open={currentModal !== ''} onOpenChange={hideModal}>
-            <DialogTrigger asChild>
-              <Button
-                onClick={() => showSignIn()}
-                variant={'outline'}
-                className={cn(
-                  'border-primary text-primary mr-3 hidden bg-transparent px-5 py-1 text-sm font-semibold hover:bg-[#EAF3FF] active:bg-[#D7E5FE] lg:block',
-                  isEditor &&
-                    'h-8 border-none bg-[#EAF3FF] text-[11px] hover:bg-[#D7E5FE]'
-                )}
-              >
-                Log In
-              </Button>
-            </DialogTrigger>
-            <DialogContent
-              onOpenAutoFocus={(e) => {
-                e.preventDefault()
-              }}
-              onInteractOutside={(e) => {
-                e.preventDefault()
-              }}
-              className="!h-[620px] !w-[380px] rounded-[10px]"
+        <Dialog
+          open={currentModal !== ''}
+          onOpenChange={(open) => !open && hideModal()}
+        >
+          <DialogTrigger asChild>
+            <Button
+              onClick={() => showSignIn()}
+              variant={'outline'}
+              className={cn(
+                'border-primary text-primary mr-3 hidden bg-transparent px-5 py-1 text-sm font-semibold hover:bg-[#EAF3FF] active:bg-[#D7E5FE] lg:block',
+                isEditor &&
+                  'h-8 border-none bg-[#EAF3FF] text-[11px] hover:bg-[#D7E5FE]'
+              )}
             >
-              <DialogHeader className="hidden">
-                <DialogTitle />
-              </DialogHeader>
-              <AuthModal />
-            </DialogContent>
-          </Dialog>
-          <Link href={'/signup' as Route}>
+              Log In
+            </Button>
+          </DialogTrigger>
+          <DialogContent
+            onOpenAutoFocus={(e) => {
+              e.preventDefault()
+            }}
+            onInteractOutside={(e) => {
+              e.preventDefault()
+            }}
+            className="!h-[620px] !w-[380px] rounded-[10px]"
+          >
+            <DialogHeader className="hidden">
+              <DialogTitle />
+            </DialogHeader>
+            <AuthModal />
+          </DialogContent>
+          <DialogTrigger asChild>
             <Button
+              onClick={() => showSignUp()}
               className={cn(
-                'px-5 py-1 text-sm font-semibold',
+                'hidden px-5 py-1 text-sm font-semibold lg:block',
                 isEditor && 'h-8 text-[11px]'
               )}
             >
               Sign Up
             </Button>
-          </Link>
-        </>
+          </DialogTrigger>
+        </Dialog>
       )}
     </div>
   )