diff --git a/components/Profile/UserCard/Avator.jsx b/components/Profile/UserCard/Avator.jsx
new file mode 100644
index 00000000..15a7efd7
--- /dev/null
+++ b/components/Profile/UserCard/Avator.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+import { Skeleton } from '@mui/material';
+
+const Avator = ({ photoURL }) => {
+  return (
+    <LazyLoadImage
+      alt="login"
+      src={photoURL || ''}
+      height={80}
+      width={80}
+      effect="opacity"
+      style={{
+        borderRadius: '100%',
+        background: 'rgba(240, 240, 240, .8)',
+        objectFit: 'cover',
+        objectPosition: 'center',
+        minHeight: '80px',
+        minWidth: '80px',
+      }}
+      placeholder={
+        // eslint-disable-next-line react/jsx-wrap-multilines
+        <Skeleton
+          sx={{
+            height: '80px',
+            width: '80px',
+            background: 'rgba(240, 240, 240, .8)',
+            marginTop: '4px',
+          }}
+          variant="circular"
+          animation="wave"
+        />
+      }
+    />
+  );
+};
+
+export default Avator;
diff --git a/components/Profile/UserCard/SocialMediaItem.jsx b/components/Profile/UserCard/SocialMediaItem.jsx
new file mode 100644
index 00000000..5cfd273e
--- /dev/null
+++ b/components/Profile/UserCard/SocialMediaItem.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Box } from '@mui/material';
+
+const SocialMediaItem = ({ link, text, tag, iconComponent }) => {
+  return (
+    <Box as={tag || 'div'}>
+      {iconComponent}
+      <a target="_blank" rel="noreferrer" href={link}>
+        {text}
+      </a>
+    </Box>
+  );
+};
+
+export default SocialMediaItem;
diff --git a/components/Profile/UserCard/Tag.jsx b/components/Profile/UserCard/Tag.jsx
new file mode 100644
index 00000000..1a55daf1
--- /dev/null
+++ b/components/Profile/UserCard/Tag.jsx
@@ -0,0 +1,19 @@
+import { Chip } from '@mui/material';
+
+const Tag = ({ label }) => {
+  return (
+    <Chip
+      label={label}
+      value={label}
+      sx={{
+        margin: '5px',
+        whiteSpace: 'nowrap',
+        fontWeight: 400,
+        fontSize: '14px',
+        bgcolor: '#DEF5F5',
+      }}
+    />
+  );
+};
+
+export default Tag;
diff --git a/components/Profile/UserCard/UserCard.styled.jsx b/components/Profile/UserCard/UserCard.styled.jsx
new file mode 100644
index 00000000..8c822526
--- /dev/null
+++ b/components/Profile/UserCard/UserCard.styled.jsx
@@ -0,0 +1,120 @@
+import styled from '@emotion/styled';
+import { Box, Typography } from '@mui/material';
+
+export const StyledProfileWrapper = styled(Box)`
+  width: 100%;
+  padding: 30px;
+  background-color: #fff;
+  border-radius: 20px;
+  @media (max-width: 767px) {
+    width: 100%;
+    padding: 16px;
+  }
+`;
+
+export const StyledProfileBaseInfo = styled(Box)`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
+export const StyledProfileTitle = styled(Box)`
+  div {
+    display: flex;
+    align-items: center;
+  }
+  h2 {
+    color: #536166;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 120%;
+    margin-right: 10px;
+  }
+  span {
+    border-radius: 4px;
+    background: #f3f3f3;
+    padding: 3px 10px;
+  }
+  p {
+    color: #92989a;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 140%; /* 19.6px */
+  }
+`;
+
+export const StyledProfileLocation = styled(Typography)`
+  margin-top: 12px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  color: #536166;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 140%; /* 16.8px */
+`;
+
+export const StyledProfileTag = styled(Box)`
+  margin-top: 24px;
+  display: flex;
+  flex-wrap: wrap;
+`;
+
+export const StyledProfileOther = styled(Box)`
+  margin-top: 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  @media (max-width: 767px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+`;
+
+export const StyledProfileSocial = styled.ul`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
+  li {
+    align-items: center;
+    display: flex;
+    margin-right: 16px;
+    margin-bottom: 8px;
+  }
+  li:last-of-type {
+    margin-bottom: 0;
+  }
+  li svg {
+    color: #16b9b3;
+  }
+  li p,
+  li a {
+    margin-left: 5px;
+    color: #293a3d;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 140%;
+  }
+
+  li a {
+    color: #16b9b3;
+    cursor: pointer;
+    text-decoration: underline;
+  }
+`;
+
+export const StyledProfileDate = styled.p`
+  font-size: 12px;
+  color: #92989a;
+  font-weight: 400;
+  line-height: 140%;
+  @media (max-width: 767px) {
+    width: 100%;
+    text-align: right;
+  }
+`;
diff --git a/components/Profile/UserCard/index.jsx b/components/Profile/UserCard/index.jsx
index 6330c0f6..e10a8a37 100644
--- a/components/Profile/UserCard/index.jsx
+++ b/components/Profile/UserCard/index.jsx
@@ -1,13 +1,25 @@
-import styled from '@emotion/styled';
-import { Box, Chip, Button, Skeleton, Typography } from '@mui/material';
-import { LazyLoadImage } from 'react-lazy-load-image-component';
+import { BASE_URL } from '@/constants/common';
+import { useRouter } from 'next/router';
+import moment from 'moment';
+import { Box, Button } from '@mui/material';
 import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined';
 import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
-import moment from 'moment';
-import { useRouter } from 'next/router';
 import { RiInstagramFill } from 'react-icons/ri';
 import { FaFacebook, FaLine, FaDiscord } from 'react-icons/fa';
 import DropdownMenu from './Dropdown';
+import SocialMediaItem from './SocialMediaItem';
+import AvatorComponent from './Avator';
+import Tag from './Tag';
+import {
+  StyledProfileWrapper,
+  StyledProfileBaseInfo,
+  StyledProfileDate,
+  StyledProfileLocation,
+  StyledProfileOther,
+  StyledProfileSocial,
+  StyledProfileTag,
+  StyledProfileTitle,
+} from './UserCard.styled';
 
 const BottonEdit = {
   color: '#536166',
@@ -25,166 +37,6 @@ const BottonEdit = {
   },
 };
 
-const StyledProfileWrapper = styled(Box)`
-  width: 100%;
-  padding: 30px;
-  background-color: #fff;
-  border-radius: 20px;
-  @media (max-width: 767px) {
-    width: 100%;
-    padding: 16px;
-  }
-`;
-const StyledProfileBaseInfo = styled(Box)`
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-`;
-const StyledProfileTitle = styled(Box)`
-  div {
-    display: flex;
-    align-items: center;
-  }
-  h2 {
-    color: #536166;
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 120%;
-    margin-right: 10px;
-  }
-  span {
-    border-radius: 4px;
-    background: #f3f3f3;
-    padding: 3px 10px;
-  }
-  p {
-    color: #92989a;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 140%; /* 19.6px */
-  }
-`;
-const StyledProfileLocation = styled(Typography)`
-  margin-top: 12px;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  color: #536166;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 140%; /* 16.8px */
-`;
-const StyledProfileTag = styled(Box)`
-  margin-top: 24px;
-  display: flex;
-  flex-wrap: wrap;
-`;
-const StyledProfileOther = styled(Box)`
-  margin-top: 24px;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  @media (max-width: 767px) {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-`;
-const StyledProfileSocial = styled.ul`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  align-items: flex-start;
-  li {
-    align-items: center;
-    display: flex;
-    margin-right: 16px;
-    margin-bottom: 8px;
-  }
-  li:last-of-type {
-    margin-bottom: 0;
-  }
-  li svg {
-    color: #16b9b3;
-  }
-  li p,
-  li a {
-    margin-left: 5px;
-    color: #293a3d;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 140%;
-  }
-
-  li a {
-    color: #16b9b3;
-    cursor: pointer;
-    text-decoration: underline;
-  }
-`;
-const StyledProfileDate = styled.p`
-  font-size: 12px;
-  color: #92989a;
-  font-weight: 400;
-  line-height: 140%;
-  @media (max-width: 767px) {
-    width: 100%;
-    text-align: right;
-  }
-`;
-
-function Tag({ label }) {
-  return (
-    <Chip
-      label={label}
-      value={label}
-      sx={{
-        margin: '5px',
-        whiteSpace: 'nowrap',
-        fontWeight: 400,
-        fontSize: '14px',
-        bgcolor: '#DEF5F5',
-      }}
-    />
-  );
-}
-
-function Avator({ photoURL }) {
-  return (
-    <LazyLoadImage
-      alt="login"
-      src={photoURL || ''}
-      height={80}
-      width={80}
-      effect="opacity"
-      style={{
-        borderRadius: '100%',
-        background: 'rgba(240, 240, 240, .8)',
-        objectFit: 'cover',
-        objectPosition: 'center',
-        minHeight: '80px',
-        minWidth: '80px',
-      }}
-      placeholder={
-        // eslint-disable-next-line react/jsx-wrap-multilines
-        <Skeleton
-          sx={{
-            height: '80px',
-            width: '80px',
-            background: 'rgba(240, 240, 240, .8)',
-            marginTop: '4px',
-          }}
-          variant="circular"
-          animation="wave"
-        />
-      }
-    />
-  );
-}
-
 function UserCard({
   isLoginUser,
   tagList = [],
@@ -217,7 +69,7 @@ function UserCard({
       )}
 
       <StyledProfileBaseInfo>
-        <Avator photoURL={photoURL} />
+        <AvatorComponent photoURL={photoURL} />
         <Box sx={{ marginLeft: '12px' }}>
           <StyledProfileTitle>
             <div>
@@ -248,29 +100,32 @@ function UserCard({
 
       <StyledProfileOther>
         <StyledProfileSocial style={{ listStyle: 'none' }}>
-          {!!contactList.instagram && (
+          {!!contactList['聯繫方式'] && (
             <li>
-              <RiInstagramFill size="20px" />
               <a
+                href={`${BASE_URL}/auth/google`}
                 target="_blank"
                 rel="noreferrer"
-                href={`https://www.instagram.com/${contactList.instagram}`}
               >
-                {contactList.instagram}
+                {contactList['聯繫方式']}
               </a>
             </li>
           )}
+          {!!contactList.instagram && (
+            <SocialMediaItem
+              tag="li"
+              link={`https://www.instagram.com/${contactList.instagram}`}
+              text={contactList.instagram}
+              iconComponent={<RiInstagramFill size="20px" />}
+            />
+          )}
           {!!contactList.facebook && (
-            <li>
-              <FaFacebook size="20px" />
-              <a
-                target="_blank"
-                rel="noreferrer"
-                href={`https://www.facebook.com/${contactList.facebook}`}
-              >
-                {contactList.facebook}
-              </a>
-            </li>
+            <SocialMediaItem
+              tag="li"
+              link={`https://www.facebook.com/${contactList.facebook}`}
+              text={contactList.facebook}
+              iconComponent={<FaFacebook size="20px" />}
+            />
           )}
           {!!contactList.line && (
             <li>
diff --git a/pages/signin/index.jsx b/pages/signin/index.jsx
index f2dbf4e1..f57a16ad 100644
--- a/pages/signin/index.jsx
+++ b/pages/signin/index.jsx
@@ -63,7 +63,11 @@ function EditPage() {
   const router = useRouter();
   const dispatch = useDispatch();
 
+  const { id, token } = router.query;
+
   const {
+    _id: userId,
+    token: userToken,
     birthDay: userBirthDay,
     gender: userGender,
     roleList: userRoleList,
@@ -72,7 +76,6 @@ function EditPage() {
     createdDate,
     updatedDate,
   } = useSelector((state) => state?.user);
-  const { id } = router.query;
 
   const [isSubscribeEmail, setIsSubscribeEmail] = useState(false);
   const [birthDay, setBirthDay] = useState(dayjs());
@@ -80,14 +83,17 @@ function EditPage() {
   const [roleList, setRoleList] = useState([]);
 
   const fetchUser = async () => {
-    dispatch(fetchUserById(id));
+    if (!userId) {
+      dispatch(fetchUserById(id, token));
+    }
+    router.push(`/signin?id=${id}`);
   };
 
   useEffect(() => {
-    if (id) {
+    if (id || token) {
       fetchUser();
     }
-  }, [id]);
+  }, [id, token]);
 
   useEffect(() => {
     setBirthDay(userBirthDay ? dayjs(userBirthDay) : dayjs());
diff --git a/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx b/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx
index 604743f7..2b8c7138 100644
--- a/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx
+++ b/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx
@@ -15,7 +15,7 @@ const MenuWrapper = styled.div`
   flex-direction: column;
   background: white;
   transition: height 0.3s ease;
-  padding-bottom: ${(props) => (props.open ? '160px' : 0)};
+  padding-bottom: ${(props) => (props.open ? '180px' : 0)};
   z-index: 100;
   overflow: auto;
 `;