diff --git a/components/Group/Form/useGroupForm.jsx b/components/Group/Form/useGroupForm.jsx
index 96394719..cf5134fc 100644
--- a/components/Group/Form/useGroupForm.jsx
+++ b/components/Group/Form/useGroupForm.jsx
@@ -143,7 +143,13 @@ export default function useGroupForm() {
   };
 
   useEffect(() => {
-    if (notLogin) openLoginWindow();
+    let timer;
+    if (notLogin) {
+      timer = setTimeout(() => {
+        openLoginWindow();
+      }, 100);
+    }
+    return () => clearTimeout(timer);
   }, [notLogin]);
 
   return {
diff --git a/components/Group/detail/Contact/ContactPopup.jsx b/components/Group/detail/Contact/ContactPopup.jsx
new file mode 100644
index 00000000..491062db
--- /dev/null
+++ b/components/Group/detail/Contact/ContactPopup.jsx
@@ -0,0 +1,224 @@
+import { useId, useState } from 'react';
+import styled from '@emotion/styled';
+import {
+  Avatar,
+  Box,
+  Button,
+  Dialog,
+  DialogTitle,
+  IconButton,
+  Typography,
+  TextareaAutosize,
+  useMediaQuery,
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { ROLE } from '@/constants/member';
+import TransitionSlide from './TransitionSlide';
+
+const StyledTitle = styled.label`
+  display: block;
+  color: var(--black-white-gray-dark, #293a3d);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 140%; /* 22.4px */
+  margin-bottom: 11px;
+`;
+const StyledTextArea = styled(TextareaAutosize)`
+  display: block;
+  padding: 12px 16px;
+  background: var(--black-white-white, #fff);
+  border-radius: 8px;
+  border: 1px solid var(--black-white-gray-very-light, #dbdbdb);
+  width: 100%;
+  min-height: 128px;
+`;
+
+function ContactPopup({
+  open,
+  user,
+  label,
+  description,
+  descriptionPlaceholder,
+  isLoading,
+  onClose,
+  onSubmit,
+}) {
+  const isMobileScreen = useMediaQuery('(max-width: 560px)');
+  const [message, setMessage] = useState('');
+  const [contact, setContact] = useState('');
+  const id = useId();
+  const titleId = `modal-title-${id}`;
+  const descriptionId = `modal-description-${id}`;
+  const messageId = `message-${id}`;
+  const contactId = `contact-${id}`;
+  const role =
+    ROLE.find(({ key }) => user?.roleList?.includes(key))?.label || '暫無資料';
+
+  const handleClose = () => {
+    setMessage('');
+    setContact('');
+    onClose();
+  };
+
+  const handleSubmit = () => {
+    onSubmit({ message, contact });
+  };
+
+  return (
+    <Dialog
+      keepMounted
+      scroll="body"
+      fullScreen={isMobileScreen}
+      open={open}
+      onClose={handleClose}
+      aria-labelledby={titleId}
+      aria-describedby={descriptionId}
+      TransitionComponent={TransitionSlide}
+      sx={{
+        '.MuiPaper-root': {
+          marginTop: isMobileScreen ? '84px' : undefined,
+        },
+      }}
+      PaperProps={{
+        sx: {
+          p: '16px 40px 32px',
+          borderRadius: '16px',
+        },
+      }}
+    >
+      <DialogTitle
+        id={titleId}
+        sx={{
+          color: '#536166',
+          fontWeight: 700,
+          fontSize: '18px',
+          textAlign: 'center',
+        }}
+      >
+        {label}
+      </DialogTitle>
+      <IconButton
+        aria-label="close"
+        onClick={handleClose}
+        sx={{
+          position: 'absolute',
+          right: 32,
+          top: 24,
+          color: '#536166',
+        }}
+      >
+        <CloseIcon />
+      </IconButton>
+      <Box
+        sx={{
+          width: isMobileScreen ? '100%' : '400px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '16px',
+        }}
+      >
+        <Box
+          sx={{
+            p: '12px',
+            backgroundColor: '#DEF5F5',
+            display: 'flex',
+            borderRadius: '16px',
+            alignItems: 'center',
+            gap: '12px',
+          }}
+        >
+          <Avatar
+            src={user?.photoURL}
+            alt={`${user?.name} avatar`}
+            sx={{ width: '60px', height: '60px' }}
+          />
+          <div>
+            <Typography
+              sx={{
+                display: 'block',
+                color: ' #293A3D',
+                fontWeight: 500,
+                fontSize: '16px',
+                lineHeight: '140%',
+              }}
+            >
+              {user?.name || '名稱'}
+            </Typography>
+            <Typography
+              sx={{
+                display: 'block',
+                color: ' #536166',
+                fontWeight: 400,
+                fontSize: '14px',
+                lineHeight: '140%',
+              }}
+            >
+              {role}
+            </Typography>
+          </div>
+        </Box>
+
+        <div>
+          <StyledTitle id={descriptionId} htmlFor={messageId}>
+            {description}
+          </StyledTitle>
+          <StyledTextArea
+            id={messageId}
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            placeholder={descriptionPlaceholder}
+          />
+        </div>
+
+        <div>
+          <StyledTitle htmlFor={contactId}>聯絡資訊</StyledTitle>
+          <StyledTextArea
+            id={contactId}
+            value={contact}
+            onChange={(e) => setContact(e.target.value)}
+            placeholder="寫下您的聯絡資訊，初次聯繫建議提供「想公開的社群媒體帳號、email」即可。"
+          />
+        </div>
+
+        <Box
+          sx={{
+            display: 'flex',
+            gap: '16px',
+          }}
+        >
+          <Button
+            color="inherit"
+            sx={{
+              flex: 1,
+              borderRadius: '20px',
+              borderColor: 'transparent',
+              boxShadow: '0 4px 10px #C4C2C166',
+            }}
+            variant="outlined"
+            disabled={isLoading}
+            onClick={handleClose}
+          >
+            取消
+          </Button>
+          <Button
+            sx={{
+              flex: 1,
+              borderRadius: '20px',
+              color: '#ffff',
+              bgcolor: '#16B9B3',
+              boxShadow: '0 4px 10px #C4C2C166',
+            }}
+            variant="contained"
+            disabled={isLoading || !message || !contact}
+            onClick={handleSubmit}
+          >
+            送出
+          </Button>
+        </Box>
+      </Box>
+    </Dialog>
+  );
+}
+
+export default ContactPopup;
diff --git a/components/Group/detail/Contact/Feedback.jsx b/components/Group/detail/Contact/FeedbackPopup.jsx
similarity index 90%
rename from components/Group/detail/Contact/Feedback.jsx
rename to components/Group/detail/Contact/FeedbackPopup.jsx
index b4f8da99..c8282c33 100644
--- a/components/Group/detail/Contact/Feedback.jsx
+++ b/components/Group/detail/Contact/FeedbackPopup.jsx
@@ -1,21 +1,17 @@
-import { useId, forwardRef } from 'react';
+import { useId } from 'react';
 import {
   Box,
   Button,
   Dialog,
   DialogTitle,
-  Slide,
   Typography,
   useMediaQuery,
 } from '@mui/material';
 import contractDoneImg from '@/public/assets/contactdone.png';
 import contractErrorImg from '@/public/assets/contacterror.png';
+import TransitionSlide from './TransitionSlide';
 
-const Transition = forwardRef((props, ref) => {
-  return <Slide direction="up" ref={ref} {...props} />;
-});
-
-function Feedback({ type, onClose }) {
+function FeedbackPopup({ type, onClose }) {
   const id = useId();
   const isMobileScreen = useMediaQuery('(max-width: 560px)');
   const titleId = `modal-title-${id}`;
@@ -46,7 +42,7 @@ function Feedback({ type, onClose }) {
       onClose={onClose}
       aria-labelledby={titleId}
       aria-describedby={descriptionId}
-      TransitionComponent={Transition}
+      TransitionComponent={TransitionSlide}
       sx={{
         '.MuiPaper-root': {
           marginTop: isMobileScreen ? '84px' : undefined,
@@ -78,6 +74,7 @@ function Feedback({ type, onClose }) {
         {content.title}
       </DialogTitle>
       <Typography
+        id={descriptionId}
         sx={{
           display: 'block',
           textAlign: 'center',
@@ -107,4 +104,4 @@ function Feedback({ type, onClose }) {
   );
 }
 
-export default Feedback;
+export default FeedbackPopup;
diff --git a/components/Group/detail/Contact/LoginPopup.jsx b/components/Group/detail/Contact/LoginPopup.jsx
new file mode 100644
index 00000000..919a50ed
--- /dev/null
+++ b/components/Group/detail/Contact/LoginPopup.jsx
@@ -0,0 +1,117 @@
+import { useId } from 'react';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogTitle,
+  Typography,
+  useMediaQuery,
+} from '@mui/material';
+import partnerPopupImg from '@/public/assets/partner-popup.png';
+import openLoginWindow from '@/utils/openLoginWindow';
+import TransitionSlide from './TransitionSlide';
+
+function LoginPopup({ open, onClose }) {
+  const id = useId();
+  const isMobileScreen = useMediaQuery('(max-width: 560px)');
+  const titleId = `modal-title-${id}`;
+  const descriptionId = `modal-description-${id}`;
+
+  return (
+    <Dialog
+      keepMounted
+      scroll="body"
+      fullScreen={isMobileScreen}
+      open={open}
+      onClose={onClose}
+      aria-labelledby={titleId}
+      aria-describedby={descriptionId}
+      TransitionComponent={TransitionSlide}
+      sx={{
+        '.MuiPaper-root': {
+          marginTop: isMobileScreen ? 'calc(100vh - 430px)' : undefined,
+        },
+      }}
+      PaperProps={{
+        sx: {
+          p: '32px 24px',
+          maxWidth: '400px',
+          width: '100%',
+          borderRadius: '16px',
+        },
+      }}
+    >
+      <DialogTitle
+        id={titleId}
+        sx={{
+          p: 0,
+          mb: '8px',
+          color: '#536166',
+          fontWeight: 700,
+          fontSize: '22px',
+          textAlign: 'center',
+        }}
+      >
+        請先登入或註冊
+      </DialogTitle>
+      <Typography
+        variant="subtitle1"
+        id={descriptionId}
+        sx={{
+          mb: '16px',
+          color: '#536166',
+          fontWeight: 400,
+          fontSize: '14px',
+          textAlign: 'center',
+        }}
+      >
+        登入後才可以使用聯繫夥伴功能唷！
+      </Typography>
+      <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+        <img src={partnerPopupImg.src} alt="登入" height="224px" />
+      </Box>
+      <Box
+        sx={{
+          mt: '16px',
+          display: 'flex',
+          flexDirection: 'row-reverse',
+          gap: '8px',
+        }}
+      >
+        <Button
+          sx={{
+            borderRadius: '20px',
+            color: '#ffff',
+            bgcolor: '#16B9B3',
+            boxShadow: '0 4px 10px #C4C2C166',
+          }}
+          size="large"
+          variant="contained"
+          onClick={() => openLoginWindow()}
+          fullWidth
+        >
+          登入/註冊
+        </Button>
+        <Button
+          sx={{
+            borderRadius: '20px',
+            bgcolor: '#ffffff',
+            color: '#1f4645',
+            boxShadow: '0 4px 10px #C4C2C166',
+            '&:hover': {
+              bgcolor: '#dddddd',
+            },
+          }}
+          variant="contained"
+          size="large"
+          onClick={onClose}
+          fullWidth
+        >
+          取消
+        </Button>
+      </Box>
+    </Dialog>
+  );
+}
+
+export default LoginPopup;
diff --git a/components/Group/detail/Contact/TransitionSlide.jsx b/components/Group/detail/Contact/TransitionSlide.jsx
new file mode 100644
index 00000000..c596c872
--- /dev/null
+++ b/components/Group/detail/Contact/TransitionSlide.jsx
@@ -0,0 +1,8 @@
+import { forwardRef } from 'react';
+import { Slide } from '@mui/material';
+
+const TransitionSlide = forwardRef((props, ref) => {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
+
+export default TransitionSlide;
diff --git a/components/Group/detail/Contact/index.jsx b/components/Group/detail/Contact/index.jsx
index 5d8934ab..cdd778b5 100644
--- a/components/Group/detail/Contact/index.jsx
+++ b/components/Group/detail/Contact/index.jsx
@@ -1,28 +1,16 @@
-import { useId, useState, forwardRef, useEffect } from 'react';
-import { useRouter } from 'next/router';
+import { useState } from 'react';
 import { useSelector } from 'react-redux';
 import styled from '@emotion/styled';
-import {
-  Avatar,
-  Box,
-  Button,
-  Dialog,
-  DialogTitle,
-  IconButton,
-  Slide,
-  Typography,
-  TextareaAutosize,
-  useMediaQuery,
-} from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
+import { Button } from '@mui/material';
 import { ROLE } from '@/constants/member';
 import chatSvg from '@/public/assets/icons/chat.svg';
 import useMutation from '@/hooks/useMutation';
 import { mapToTable } from '@/utils/helper';
-import openLoginWindow from '@/utils/openLoginWindow';
-import Feedback from './Feedback';
+import ContactPopup from './ContactPopup';
+import FeedbackPopup from './FeedbackPopup';
+import LoginPopup from './LoginPopup';
 
-const ROLELIST = mapToTable(ROLE);
+const ROLE_LIST = mapToTable(ROLE);
 
 const StyledButton = styled(Button)`
   padding: 8px 36px;
@@ -37,41 +25,6 @@ const StyledButton = styled(Button)`
     opacity: 0.3;
   }
 `;
-const StyledTitle = styled.label`
-  display: block;
-  color: var(--black-white-gray-dark, #293a3d);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 140%; /* 22.4px */
-  margin-bottom: 11px;
-`;
-const StyledTextArea = styled(TextareaAutosize)`
-  display: block;
-  padding: 12px 16px;
-  background: var(--black-white-white, #fff);
-  border-radius: 8px;
-  border: 1px solid var(--black-white-gray-very-light, #dbdbdb);
-  width: 100%;
-  min-height: 128px;
-`;
-const StyledText = styled.div`
-  margin-top: 6px;
-  margin-left: 6px;
-  display: block;
-  color: black;
-  font-size: 12px;
-`;
-const StyledLink = styled.span`
-  padding: 0 2px;
-  color: #16b9b3;
-  text-decoration: underline;
-  cursor: pointer;
-`;
-
-const Transition = forwardRef((props, ref) => {
-  return <Slide direction="up" ref={ref} {...props} />;
-});
 
 function ContactButton({
   user,
@@ -81,26 +34,13 @@ function ContactButton({
   descriptionPlaceholder,
   isLoading,
 }) {
-  const id = useId();
-  const router = useRouter();
   const me = useSelector((state) => state.user);
   const [open, setOpen] = useState(false);
-  const [message, setMessage] = useState('');
-  const [contact, setContact] = useState('');
   const [feedback, setFeedback] = useState('');
-  const isMobileScreen = useMediaQuery('(max-width: 560px)');
-  const titleId = `modal-title-${id}`;
-  const descriptionId = `modal-description-${id}`;
-  const messageId = `message-${id}`;
-  const contactId = `contact-${id}`;
   const isLogin = !!me?._id;
-  const role =
-    ROLE.find(({ key }) => user?.roleList?.includes(key))?.label || '暫無資料';
 
   const handleClose = () => {
     setOpen(false);
-    setMessage('');
-    setContact('');
   };
   const { mutate } = useMutation(`/email`, {
     method: 'POST',
@@ -114,14 +54,14 @@ function ContactButton({
     },
   });
 
-  const handleSubmit = () => {
+  const handleSubmit = ({ message, contact }) => {
     mutate({
       userId: me._id,
       url: window.location.origin,
       name: me.name,
       roleList:
         me.roleList.length > 0
-          ? me.roleList.map((roleKey) => ROLELIST[roleKey])
+          ? me.roleList.map((roleKey) => ROLE_LIST[roleKey])
           : [''],
       photoUrl: me.photoURL,
       from: me.email,
@@ -134,17 +74,9 @@ function ContactButton({
     });
   };
 
-  useEffect(() => {
-    if (!me?._id && open) router.push('/login');
-  }, [me?._id, open, router]);
-
   return (
     <div>
-      <StyledButton
-        variant="contained"
-        disabled={!isLogin || isLoading}
-        onClick={() => setOpen(true)}
-      >
+      <StyledButton variant="contained" onClick={() => setOpen(true)}>
         <img
           src={chatSvg.src}
           alt="contact icon"
@@ -152,166 +84,21 @@ function ContactButton({
         />
         {label}
       </StyledButton>
-      {!isLogin && (
-        <StyledText>
-          <StyledLink onClick={() => router.push('/login')}>註冊</StyledLink>或
-          <StyledLink onClick={() => openLoginWindow()}>登入</StyledLink>
-          即可聯繫主揪！
-        </StyledText>
+      {isLogin ? (
+        <ContactPopup
+          open={open}
+          user={user}
+          label={label}
+          description={description}
+          descriptionPlaceholder={descriptionPlaceholder}
+          isLoading={isLoading}
+          onClose={handleClose}
+          onSubmit={handleSubmit}
+        />
+      ) : (
+        <LoginPopup open={open} onClose={() => setOpen(false)} />
       )}
-      <Dialog
-        keepMounted
-        scroll="body"
-        fullScreen={isMobileScreen}
-        open={open}
-        onClose={handleClose}
-        aria-labelledby={titleId}
-        aria-describedby={descriptionId}
-        TransitionComponent={Transition}
-        sx={{
-          '.MuiPaper-root': {
-            marginTop: isMobileScreen ? '84px' : undefined,
-          },
-        }}
-        PaperProps={{
-          sx: {
-            p: '16px 40px 32px',
-            borderRadius: '16px',
-          },
-        }}
-      >
-        <DialogTitle
-          id={titleId}
-          sx={{
-            color: '#536166',
-            fontWeight: 700,
-            fontSize: '18px',
-            textAlign: 'center',
-          }}
-        >
-          {label}
-        </DialogTitle>
-        <IconButton
-          aria-label="close"
-          onClick={handleClose}
-          sx={{
-            position: 'absolute',
-            right: 32,
-            top: 24,
-            color: '#536166',
-          }}
-        >
-          <CloseIcon />
-        </IconButton>
-        <Box
-          sx={{
-            width: isMobileScreen ? '100%' : '400px',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '16px',
-          }}
-        >
-          <Box
-            sx={{
-              p: '12px',
-              backgroundColor: '#DEF5F5',
-              display: 'flex',
-              borderRadius: '16px',
-              alignItems: 'center',
-              gap: '12px',
-            }}
-          >
-            <Avatar
-              src={user?.photoURL}
-              alt={`${user?.name} avatar`}
-              sx={{ width: '60px', height: '60px' }}
-            />
-            <div>
-              <Typography
-                sx={{
-                  display: 'block',
-                  color: ' #293A3D',
-                  fontWeight: 500,
-                  fontSize: '16px',
-                  lineHeight: '140%',
-                }}
-              >
-                {user?.name || '名稱'}
-              </Typography>
-              <Typography
-                sx={{
-                  display: 'block',
-                  color: ' #536166',
-                  fontWeight: 400,
-                  fontSize: '14px',
-                  lineHeight: '140%',
-                }}
-              >
-                {role}
-              </Typography>
-            </div>
-          </Box>
-
-          <div>
-            <StyledTitle id={descriptionId} htmlFor={messageId}>
-              {description}
-            </StyledTitle>
-            <StyledTextArea
-              id={messageId}
-              value={message}
-              onChange={(e) => setMessage(e.target.value)}
-              placeholder={descriptionPlaceholder}
-            />
-          </div>
-
-          <div>
-            <StyledTitle htmlFor={contactId}>聯絡資訊</StyledTitle>
-            <StyledTextArea
-              id={contactId}
-              value={contact}
-              onChange={(e) => setContact(e.target.value)}
-              placeholder="寫下您的聯絡資訊，初次聯繫建議提供「想公開的社群媒體帳號、email」即可。"
-            />
-          </div>
-
-          <Box
-            sx={{
-              display: 'flex',
-              gap: '16px',
-            }}
-          >
-            <Button
-              color="inherit"
-              sx={{
-                flex: 1,
-                borderRadius: '20px',
-                borderColor: 'transparent',
-                boxShadow: '0 4px 10px #C4C2C166',
-              }}
-              variant="outlined"
-              disabled={isLoading}
-              onClick={handleClose}
-            >
-              取消
-            </Button>
-            <Button
-              sx={{
-                flex: 1,
-                borderRadius: '20px',
-                color: '#ffff',
-                bgcolor: '#16B9B3',
-                boxShadow: '0 4px 10px #C4C2C166',
-              }}
-              variant="contained"
-              disabled={isLoading || !message || !contact}
-              onClick={handleSubmit}
-            >
-              送出
-            </Button>
-          </Box>
-        </Box>
-      </Dialog>
-      <Feedback type={feedback} onClose={() => setFeedback('')} />
+      <FeedbackPopup type={feedback} onClose={() => setFeedback('')} />
     </div>
   );
 }
diff --git a/components/Group/detail/index.jsx b/components/Group/detail/index.jsx
index 8f68da74..d333317e 100644
--- a/components/Group/detail/index.jsx
+++ b/components/Group/detail/index.jsx
@@ -22,7 +22,7 @@ import ShareButtonGroup from './ShareButtonGroup';
 function GroupDetail({ id, source, isLoading }) {
   const router = useRouter();
   const me = useSelector((state) => state.user);
-  const isMyGroup = source?.userId === me?._id;
+  const isMyGroup = source?.userId === me?._id && !!me?._id;
 
   return (
     <Box sx={{ background: '#f3fcfc', pb: '48px' }}>
diff --git a/pages/login/index.jsx b/pages/login/index.jsx
index 45f8e3cd..d272a23b 100644
--- a/pages/login/index.jsx
+++ b/pages/login/index.jsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import styled from '@emotion/styled';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
@@ -9,7 +9,7 @@ import Navigation from '@/shared/components/Navigation_v2';
 import Footer from '@/shared/components/Footer_v2';
 import { BASE_URL } from '@/constants/common';
 import openLoginWindow from '@/utils/openLoginWindow';
-// import sendDataToChromeExtension from '../../utils/sendDataToChromeExtension';
+import { useSelector } from 'react-redux';
 
 const HomePageWrapper = styled.div`
   --section-height: calc(100vh - 80px);
@@ -40,6 +40,7 @@ const ContentWrapper = styled.div`
 const LoginPage = () => {
   const LOGIN_PATH = `${BASE_URL}/auth/google`;
   const router = useRouter();
+  const me = useSelector((state) => state.user);
 
   const SEOData = useMemo(
     () => ({
@@ -55,6 +56,12 @@ const LoginPage = () => {
     [router?.asPath],
   );
 
+  useEffect(() => {
+    if (me?._id) {
+      router.push('/');
+    }
+  }, []);
+
   return (
     <HomePageWrapper>
       <Script src="https://meet.jit.si/external_api.js" />
@@ -104,6 +111,7 @@ const LoginPage = () => {
           <Button
             onClick={() => openLoginWindow('/', LOGIN_PATH)}
             sx={{
+              width: '100%',
               marginTop: '24px',
               borderRadius: '20px',
               color: '#fff',
diff --git a/pages/login/popup/index.jsx b/pages/login/popup/index.jsx
index c1a5786c..37c08df6 100644
--- a/pages/login/popup/index.jsx
+++ b/pages/login/popup/index.jsx
@@ -10,12 +10,6 @@ import { NavigationWrapper } from '@/shared/components/Navigation_v2';
 import { BASE_URL } from '@/constants/common';
 import Logo from '@/shared/components/Navigation_v2/MainNav/Logo';
 
-const HomePageWrapper = styled.div`
-  --section-height: calc(100vh - 80px);
-  --section-height-offset: 80px;
-  background: linear-gradient(0deg, #f3fcfc, #f3fcfc), #f7f8fa;
-`;
-
 const ContentWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -36,8 +30,17 @@ const ContentWrapper = styled.div`
   }
 `;
 
+const ExternalLink = styled.a`
+  display: inline-block;
+  padding: 0 4px;
+  color: #16b9b3;
+  font-weight: 700;
+  font-size: 14px;
+  text-decoration: underline;
+`;
+
 const LoginPage = () => {
-  const LOGINPATH = `${BASE_URL}/auth/google`;
+  const LOGIN_PATH = `${BASE_URL}/auth/google`;
   const router = useRouter();
 
   const SEOData = useMemo(
@@ -101,29 +104,31 @@ const LoginPage = () => {
             />
           }
         />
-        <Link href={LOGINPATH} rel="noreferrer noopener">
-          <Button
-            sx={{
-              marginTop: '24px',
-              width: '100%',
-              borderRadius: '20px',
-              color: '#fff',
-              bgcolor: '#16B9B3',
-              boxShadow: '0px 4px 10px rgba(89, 182, 178, 0.5)',
-            }}
-            variant="contained"
-          >
-            Google 登入 / 註冊
-          </Button>
-        </Link>
+        <Button
+          href={LOGIN_PATH}
+          rel="noreferrer noopener"
+          LinkComponent={Link}
+          sx={{
+            marginTop: '24px',
+            width: '100%',
+            borderRadius: '20px',
+            color: '#fff',
+            bgcolor: '#16B9B3',
+            boxShadow: '0px 4px 10px rgba(89, 182, 178, 0.5)',
+          }}
+          variant="contained"
+        >
+          Google 登入 / 註冊
+        </Button>
         <Box sx={{ marginTop: '24px' }}>
           <Typography sx={{ color: '#536166', fontSize: '14px' }}>
-            {`註冊即代表您同意島島阿學的 `}
-            <Typography
-              onClick={() => {
-                router.push('/privacypolicy');
-              }}
+            註冊即代表您同意島島阿學的
+            <ExternalLink
+              href="/privacypolicy"
+              target="_blank"
               sx={{
+                display: 'inline-block',
+                padding: '0 4px',
                 color: '#16B9B3',
                 fontWeight: 700,
                 fontSize: '14px',
@@ -132,13 +137,14 @@ const LoginPage = () => {
               }}
             >
               服務條款
-            </Typography>
-            {` 與 `}
-            <Typography
-              onClick={() => {
-                router.push('/privacypolicy');
-              }}
+            </ExternalLink>
+            與
+            <ExternalLink
+              href="/privacypolicy"
+              target="_blank"
               sx={{
+                display: 'inline-block',
+                padding: '0 4px',
                 color: '#16B9B3',
                 fontWeight: 700,
                 fontSize: '14px',
@@ -147,7 +153,7 @@ const LoginPage = () => {
               }}
             >
               隱私政策
-            </Typography>
+            </ExternalLink>
           </Typography>
         </Box>
       </ContentWrapper>
diff --git a/utils/openLoginWindow.js b/utils/openLoginWindow.js
index 3e0ea4c6..919adec3 100644
--- a/utils/openLoginWindow.js
+++ b/utils/openLoginWindow.js
@@ -1,5 +1,14 @@
 import { getRedirectionStorage } from './storage';
 
+const INTERVAL = 500;
+const TIMEOUT = 60 * 1000;
+
+/**
+ * 開啟登入視窗
+ * @param {string} redirection 登入後重定向的地址
+ * @param {string} target 目標地址，可以替換成 /?id=...&token=... 自動登入
+ * @returns {Promise} 視窗關閉後 resolve
+ */
 export default function openLoginWindow(
   redirection = '',
   target = '/login/popup',
@@ -9,16 +18,25 @@ export default function openLoginWindow(
   const left = (window.screen.width - width) / 2;
   const top = (window.screen.height - height) / 2;
   const features = `left=${left},top=${top},width=${width},height=${height}`;
-  const loginWindow = window.open('', '_blank', features);
+  const loginWindow = window.open('', 'loginWindow', features);
+  let times = 0;
+
   if (redirection) getRedirectionStorage().set(redirection);
   if (loginWindow) loginWindow.location = target;
 
-  return new Promise((resolve) => {
+  return new Promise((resolve, reject) => {
     const loop = setInterval(() => {
-      if (loginWindow.closed) {
+      if (times > TIMEOUT) {
+        clearInterval(loop);
+        // reject(new Error('登入視窗超時'));
+        loginWindow?.close();
+        return;
+      }
+      times += INTERVAL;
+      if (loginWindow?.closed) {
         clearInterval(loop);
         resolve();
       }
-    }, 500);
+    }, INTERVAL);
   });
 }