diff --git a/pages/profile/index.jsx b/pages/profile/index.jsx
index 8bb5467b..4ccdb670 100644
--- a/pages/profile/index.jsx
+++ b/pages/profile/index.jsx
@@ -21,7 +21,7 @@ const HomePageWrapper = styled.div`
 `;
 
 const StyledTab = styled(Tab)(({ isActive, mobileScreen }) => ({
-  width: `${mobileScreen ? '50%' : '100%'}`,
+  width: `${mobileScreen ? '33%' : '100%'}`,
   color: '#536166',
   borderRadius: '8px',
   '&.Mui-selected': {
diff --git a/shared/components/Navigation_v2/MainNav/Hamberger/MenuItem.jsx b/shared/components/Navigation_v2/MainNav/Hamberger/MenuItem.jsx
index 64e5dbb2..6d158123 100644
--- a/shared/components/Navigation_v2/MainNav/Hamberger/MenuItem.jsx
+++ b/shared/components/Navigation_v2/MainNav/Hamberger/MenuItem.jsx
@@ -37,47 +37,32 @@ const MenuItemWrapper = styled.li`
 `;
 
 const ItemWrapper = styled.div`
-  font-size: 30px;
-  padding: 1rem 0;
-  margin: 0 5%;
+  font-size: 18px;
+  padding: 12px 24px;
+  border-radius: 8px;
   cursor: pointer;
-  color: #fafafa;
   transition: color 0.2s ease-in-out;
   animation: 0.5s ${slideInFrames} forwards;
+  color: #536166;
   ${(props) => css`
     animation-delay: ${props.delay};
   `}
   &:hover {
-    color: 'gray';
+    background-color: #def5f5;
+    font-weight: bold;
   }
 `;
 
-const LineStyle = styled.div`
-  width: '90%';
-  height: '1px';
-  background: '#fafafa';
-  margin: '0 auto';
-  animation: 0.5s ${shrinkFrames} forwards;
-  ${(props) => css`
-    animation-delay: ${props.delay};
-  `}
-`;
-
 const MenuItem = ({ delay, text, link, onClick }) => {
-  if (link) {
-    return (
-      <MenuItemWrapper delay={delay} onClick={onClick}>
-        <Link href={link} passHref>
-          <ItemWrapper delay={delay}>{text}</ItemWrapper>
-        </Link>
-        <LineStyle delay={delay} />
-      </MenuItemWrapper>
-    );
-  }
   return (
     <MenuItemWrapper delay={delay} onClick={onClick}>
-      <ItemWrapper delay={delay}>{text}</ItemWrapper>
-      <LineStyle delay={delay} />
+      {link ? (
+        <Link href={link} passHref color="gray">
+          <ItemWrapper delay={delay}>{text}</ItemWrapper>
+        </Link>
+      ) : (
+        <ItemWrapper delay={delay}>{text}</ItemWrapper>
+      )}
     </MenuItemWrapper>
   );
 };
diff --git a/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx b/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx
index add3b866..d0212b87 100644
--- a/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx
+++ b/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx
@@ -1,45 +1,55 @@
-// import { keyframes, css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Box } from '@mui/material';
 import { useRouter } from 'next/router';
 import MenuItem from './MenuItem';
 import UserAvatar from '../SubList/UserAvatar';
 import { useSelector } from 'react-redux';
+import { Button } from '@mui/material';
 
 const MenuWrapper = styled.div`
   position: fixed;
-  top: 0;
+  top: ${(props) => props.shiftTop};
   left: 0;
-  height: ${(props) => (props.open ? '100%' : 0)};
+  height: ${(props) => (props.open ? '100dvh' : 0)};
   width: 100vw;
   display: flex;
   flex-direction: column;
-  background: #16b9b3;
-  opacity: 0.95;
-  color: #fafafa;
+  background: white;
   transition: height 0.3s ease;
   z-index: 100;
   overflow: auto;
 `;
 
 const MenuListWrapper = styled.div`
-  padding: 3rem;
-  margin-top: 30px;
+  padding: 1rem;
   position: relative;
   z-index: 100;
+  height: inherit;
 `;
 
-const Menu = ({ open, list, onCloseMenu }) => {
-  const router = useRouter();
+const MenuDivider = styled.div`
+  height: 1px;
+  width: 100%;
+  background-color: #def5f5;
+  margin: 1rem 0;
+`;
 
+const LoginButton = styled(Button)`
+  width: 100%;
+  height: 40px;
+  padding: 5px 20px;
+  color: #536166;
+  font-size: 16px;
+  line-height: 1.4;
+  border-radius: 20px;
+  border: 1px solid #16b9b3;
+`;
 
+const Menu = ({ open, list, onCloseMenu, shiftTop = '80px' }) => {
   const user = useSelector((state) => state.user);
-  console.log("MenuList", user);
   return (
-    <MenuWrapper open={open}>
+    <MenuWrapper open={open} shiftTop={shiftTop}>
       {open && (
         <MenuListWrapper>
-          <UserAvatar user={user} />
           {list.map((value, index) => {
             return (
               <MenuItem
@@ -51,6 +61,12 @@ const Menu = ({ open, list, onCloseMenu }) => {
               />
             );
           })}
+          <MenuDivider />
+          {user._id ? (
+            <UserAvatar user={user} onCloseMenu={onCloseMenu} />
+          ) : (
+            <LoginButton href="/login">登入</LoginButton>
+          )}
         </MenuListWrapper>
       )}
     </MenuWrapper>
diff --git a/shared/components/Navigation_v2/MainNav/Hamberger/index.jsx b/shared/components/Navigation_v2/MainNav/Hamberger/index.jsx
index 7db6c736..ee6d8bc3 100644
--- a/shared/components/Navigation_v2/MainNav/Hamberger/index.jsx
+++ b/shared/components/Navigation_v2/MainNav/Hamberger/index.jsx
@@ -19,7 +19,10 @@ const MobileLinkListWrapper = styled.ul`
     li {
       flex: none;
       width: 100%;
-      border-bottom: solid 1px white;
+    }
+
+    li a {
+      color: #536166;
     }
 
     svg[type='menu']:checked + ul {
@@ -39,13 +42,14 @@ const MobileLinkListWrapper = styled.ul`
   }
 `;
 
-const MainNav = () => {
+const MainNav = ({ shiftTop = 0 }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const avatar = '';
   const isUserLogin = true;
   return (
     <MobileLinkListWrapper>
       <MenuList
+        shiftTop={shiftTop}
         isUserLogin={isUserLogin}
         avatar={avatar}
         open={isMenuOpen}
diff --git a/shared/components/Navigation_v2/MainNav/SubList/UserAvatar/index.jsx b/shared/components/Navigation_v2/MainNav/SubList/UserAvatar/index.jsx
index d23a0106..b5e36686 100644
--- a/shared/components/Navigation_v2/MainNav/SubList/UserAvatar/index.jsx
+++ b/shared/components/Navigation_v2/MainNav/SubList/UserAvatar/index.jsx
@@ -1,75 +1,114 @@
 import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
-import { Avatar, Box, IconButton, Menu, MenuItem } from '@mui/material';
-import { Group } from '@mui/icons-material';
+import { keyframes, css } from '@emotion/react';
+import styled from '@emotion/styled';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import { userLogout } from '@/redux/actions/user';
+import useMediaQuery from '@mui/material/useMediaQuery';
+
+import { Avatar, Box, MenuItem, Typography } from '@mui/material';
 import { useRouter } from 'next/router';
 
-const UserAvatar = () => {
+const slideInFrames = keyframes`
+  0% {
+    transform: translateX(-2%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+`;
+
+const StyledMenuItem = styled(MenuItem)`
+  animation: 0.5s ${slideInFrames} forwards;
+  transition: color 0.2s ease-in-out;
+  color: #536166;
+  border-radius: 4px;
+  ${(props) => css`
+    animation-delay: ${props.delay};
+    padding: ${props.isPadScreen} ? 12px : 12px 52px;
+    font-size: ${props.isPadScreen} ? 18px : 16px;
+    magrin: ${props.isPadScreen} ? 8px 0; : '0';
+    &:hover {
+      background-color: #DEF5F5;
+    }
+  `}
+`;
+
+const UserAvatar = ({ onCloseMenu = () => {}, user }) => {
+  const isPadScreen = useMediaQuery('(max-width: 767px)');
+
   const { push } = useRouter();
-  const user = useSelector((state) => state.user);
 
   const [isOpenMenu, setIsOpenMenu] = useState(null);
 
-  const handleSignOut = () => {
-    console.log('handleSignOut');
+  const logout = () => {
+    dispatch(userLogout());
+    setIsOpenMenu(false);
+    onCloseMenu();
+    push('/');
   };
 
-  if (!user._id) {
-    return (
-      <IconButton
-        sx={{ margin: '0 10px', fontSize: '16px', color: 'white' }}
-        onClick={() => {
-          push('/login');
-        }}
-      >
-        <Group sx={{ fontSize: '30px' }} />
-      </IconButton>
-    );
-  }
   return (
-    <IconButton sx={{ margin: '0 10px' }}>
-      <Avatar
-        alt={user?.displayName ?? ''}
-        src={user?.photoURL ?? ''}
-        // onClick={(event) => setIsOpenMenu(event.currentTarget)}
-        onClick={() => {
-          setIsOpenMenu(false);
-          push('/profile');
+    <Box sx={{ margin: '8px 32px', cursor: 'pointer', position: 'relative' }}>
+      <Box
+        sx={{ display: 'flex', alignItems: 'center' }}
+        onClick={() => setIsOpenMenu(!isOpenMenu)}
+      >
+        {user.name && (
+          <Avatar alt={user?.displayName ?? ''} src={user?.photoURL ?? ''} />
+        )}
+        {isPadScreen && (
+          <>
+            <Typography
+              sx={{
+                flexGrow: 1,
+                marginLeft: '12px',
+                fontWeight: 'bold',
+                fontSize: '18px',
+                color: '#536166',
+              }}
+            >
+              {user.name}
+            </Typography>
+            {isOpenMenu ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+          </>
+        )}
+      </Box>
+      <Box
+        sx={{
+          display: isOpenMenu ? 'block' : 'none',
+          position: isPadScreen ? 'relative' : 'absolute',
+          top: isPadScreen ? 0 : '60px',
+          borderRadius: '8px',
+          backgroundColor: 'white',
+          right: '0',
+          zIndex: 1,
         }}
-      />
-      <Menu
-        id="user-menu"
-        anchorEl={isOpenMenu}
-        open={Boolean(isOpenMenu)}
-        onClose={() => setIsOpenMenu(false)}
       >
-        <MenuItem
-          onClick={() => {
-            setIsOpenMenu(false);
-            push('/profile');
-          }}
-        >
-          個人頁面
-        </MenuItem>
-        <MenuItem
-          onClick={() => {
-            setIsOpenMenu(false);
-            push('/profile');
-          }}
-        >
-          帳號設定
-        </MenuItem>
-        <MenuItem
-          onClick={() => {
-            handleSignOut();
-            push('/');
-            setIsOpenMenu(false);
-          }}
-        >
-          登出
-        </MenuItem>
-      </Menu>
-    </IconButton>
+        <Box sx={{ padding: !isPadScreen && '12px' }}>
+          {[
+            { name: '個人資料', id: 'person-setting' },
+            { name: '我的揪團', id: 'my-group' },
+            { name: '帳號設定', id: 'account-setting' },
+          ].map((v, i) => (
+            <StyledMenuItem
+              key={v.id}
+              delay={`${i * 0.1}s`}
+              isPadScreen={isPadScreen}
+              onClick={() => {
+                setIsOpenMenu(false);
+                onCloseMenu();
+                push('/profile?id=' + v.id);
+              }}
+            >
+              {v.name}
+            </StyledMenuItem>
+          ))}
+
+          <StyledMenuItem onClick={logout}>登出</StyledMenuItem>
+        </Box>
+      </Box>
+    </Box>
   );
 };
 
diff --git a/shared/components/Navigation_v2/MainNav/SubList/index.jsx b/shared/components/Navigation_v2/MainNav/SubList/index.jsx
index cde450ff..a3ec13bd 100644
--- a/shared/components/Navigation_v2/MainNav/SubList/index.jsx
+++ b/shared/components/Navigation_v2/MainNav/SubList/index.jsx
@@ -1,14 +1,10 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import Link from 'next/link';
-import { Typography } from '@mui/material';
-import useFirebase from '../../../../../hooks/useFirebase';
 import UserAvatar from './UserAvatar';
-// import { useAuthState } from "react-firebase-hooks/auth";
-// import { signInWithPopup } from "firebase/auth";
-// import { useDispatch, useSelector } from "react-redux";
-// import { userLogin } from "../../../../../redux/actions/user";
-// import { useCollectionData } from "react-firebase-hooks/firestore";
+import { useSelector } from 'react-redux';
+import { Button } from '@mui/material';
+import { BASE_URL } from '@/constants/common';
 
 const LinkListWrapper = styled.ul`
   display: flex;
@@ -50,8 +46,7 @@ const SubListWrapper = styled.div`
 `;
 
 const SubList = () => {
-  // const dispatch = useDispatch();
-  const { auth, user } = useFirebase();
+  const user = useSelector((state) => state.user);
 
   return (
     <SubListWrapper>
@@ -64,7 +59,23 @@ const SubList = () => {
           </Link>
         </li>
         <li>
-          <UserAvatar user={user} />
+          {user._id ? (
+            <UserAvatar user={user} />
+          ) : (
+            <Button
+              href={`${BASE_URL}/auth/google`}
+              sx={{
+                height: '40px',
+                padding: '5px 20px',
+                color: '#fff',
+                borderRadius: '20px',
+                border: '1px solid #fff',
+                marginLeft: '40px',
+              }}
+            >
+              登入
+            </Button>
+          )}
         </li>
       </LinkListWrapper>
     </SubListWrapper>
diff --git a/shared/components/Navigation_v2/MainNav/index.jsx b/shared/components/Navigation_v2/MainNav/index.jsx
index 26b8731f..e929694f 100644
--- a/shared/components/Navigation_v2/MainNav/index.jsx
+++ b/shared/components/Navigation_v2/MainNav/index.jsx
@@ -24,7 +24,7 @@ const BoxWrapper = styled(Box)`
   }
 `;
 
-const MainNav = () => {
+const MainNav = ({ height }) => {
   return (
     <MainNavWrapper>
       <BoxWrapper sx={{ display: 'flex', justifyContent: 'flex-start' }}>
@@ -34,7 +34,7 @@ const MainNav = () => {
         {/* right list */}
         <SubList />
         {/* mobile only */}
-        <Hamberger />
+        <Hamberger shiftTop={height} />
       </BoxWrapper>
     </MainNavWrapper>
   );
diff --git a/shared/components/Navigation_v2/PromotionBar.jsx b/shared/components/Navigation_v2/PromotionBar.jsx
index 8320649a..20aa552b 100644
--- a/shared/components/Navigation_v2/PromotionBar.jsx
+++ b/shared/components/Navigation_v2/PromotionBar.jsx
@@ -2,6 +2,10 @@ import { useState, useEffect } from 'react';
 import styled from '@emotion/styled';
 
 const PromotionBarWrapper = styled.div`
+  width: 100%;
+  position: fixed;
+  top: 0;
+  padding-bottom: 20px;
   background-color: #f37b5f;
   color: #fff;
   padding: 7px;
@@ -46,25 +50,15 @@ const CloseButton = styled.span`
   }
 `;
 
-const PromotionBar = ({ link, text }) => {
-  const [show, setShow] = useState(undefined);
-
-  useEffect(() => {
-    setShow(true);
-  }, []);
-
-  const handleClose = () => {
-    setShow(false);
-  };
-
+const PromotionBar = ({ isShow, link, text, toggleAction }) => {
   return (
     <>
-      {show && (
+      {isShow && (
         <PromotionBarWrapper>
           <a href={link} target="_blank" rel="noreferrer">
             {text}
           </a>
-          <CloseButton onClick={handleClose} />
+          <CloseButton onClick={() => toggleAction(false)} />
         </PromotionBarWrapper>
       )}
     </>
diff --git a/shared/components/Navigation_v2/index.jsx b/shared/components/Navigation_v2/index.jsx
index ba84470c..942dedad 100644
--- a/shared/components/Navigation_v2/index.jsx
+++ b/shared/components/Navigation_v2/index.jsx
@@ -1,20 +1,23 @@
-import React from 'react';
+import { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import { AppBar } from '@mui/material';
 import MainNav from './MainNav';
 import PromotionBar from './PromotionBar';
 
-const NavigationWrapper = styled(AppBar)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 80px;
-  padding-left: 5%;
-  padding-right: 5%;
-  .MuiToolbar-root {
-    padding: 0;
-  }
-`;
+const NavigationWrapper = styled(AppBar)(({ hasPromote }) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '80px',
+  padding: '0 5%',
+  ...(hasPromote && {
+    padding: '38px 5% 0',
+    height: '118px',
+  }),
+  '.MuiToolbar-root': {
+    padding: '0',
+  },
+}));
 
 const donateTexts = [
   '✨島島阿學需要你的支持，讓人人都享有同等資源✨',
@@ -32,12 +35,19 @@ const buildRandomText = () => {
 // `;
 // 問卷 https://docs.google.com/forms/d/e/1FAIpQLSeyU9-Q-kIWp5uutcik3h-RO4o5VuG6oG0m-4u1Ua18EOu3aw/viewform
 const Navigation = () => {
+  const [showPromotetionBar, setShowPromotionBar] = useState(true);
+
   return (
     <>
-      <PromotionBar link="https://ocf.tw/p/daodao/" text={buildRandomText()} />
-      <NavigationWrapper position="sticky">
+      <NavigationWrapper position="sticky" hasPromote={showPromotetionBar}>
+        <PromotionBar
+          isShow={showPromotetionBar}
+          link="https://ocf.tw/p/daodao/"
+          text={buildRandomText()}
+          toggleAction={setShowPromotionBar}
+        />
         {/* <Toolbar> */}
-        <MainNav />
+        <MainNav height={showPromotetionBar ? '118px' : '80px'} />
         {/* </Toolbar> */}
       </NavigationWrapper>
     </>