diff --git a/src/components/StakeMaskStatusCard/index.tsx b/src/components/StakeMaskStatusCard/index.tsx
index 4817c33..5c873d8 100644
--- a/src/components/StakeMaskStatusCard/index.tsx
+++ b/src/components/StakeMaskStatusCard/index.tsx
@@ -170,7 +170,7 @@ export const StakeMaskStatusCard: FC<StakeMaskStatusCardProps> = ({ ...props })
             spacing={6}
           >
             {pool?.apr ? (
-              <Tooltip label={formatNumber(+pool.apr * 100, 18)}>
+              <Tooltip label={`${formatNumber(+pool.apr * 100, 18)}%`}>
                 <Box
                   h="56px"
                   fontSize="32px"
diff --git a/src/components/TextOverflowTooltip.tsx b/src/components/TextOverflowTooltip.tsx
new file mode 100644
index 0000000..1d4a7ee
--- /dev/null
+++ b/src/components/TextOverflowTooltip.tsx
@@ -0,0 +1,19 @@
+import { cloneElement, memo, type ReactElement } from 'react'
+import { Tooltip, TooltipProps } from '@chakra-ui/react'
+import { useDetectOverflow } from '../hooks/useDetectOverflow'
+
+interface TextOverflowTooltipProps extends TooltipProps {
+  children: ReactElement
+}
+
+export const TextOverflowTooltip = memo(({ children, ...rest }: TextOverflowTooltipProps) => {
+  const [overflow, ref] = useDetectOverflow()
+
+  return (
+    <Tooltip {...rest} label={overflow ? rest.label : ''}>
+      {cloneElement(children, { ...children.props, ref })}
+    </Tooltip>
+  )
+})
+
+TextOverflowTooltip.displayName = 'TextOverflowTooltip'
diff --git a/src/components/UserStatus/UserTotalPoint.tsx b/src/components/UserStatus/UserTotalPoint.tsx
index de55711..3d96309 100644
--- a/src/components/UserStatus/UserTotalPoint.tsx
+++ b/src/components/UserStatus/UserTotalPoint.tsx
@@ -1,6 +1,7 @@
 import { Image, VStack, Text, Box, StackProps } from '@chakra-ui/react'
 import { t } from '@lingui/macro'
 import { UserInfo } from '../../types/api'
+import { TextOverflowTooltip } from '../TextOverflowTooltip'
 
 interface Props extends StackProps {
   user: UserInfo
@@ -8,26 +9,40 @@ interface Props extends StackProps {
 
 export function UserTotalPoints({ user, ...props }: Props) {
   return (
-    <VStack {...props}>
-      <Box flexDir="row" w="100%">
+    <VStack overflow="hidden" {...props}>
+      <Box flexDir="row" w="100%" pl="100px" pos="relative">
         <Image
           position="absolute"
+          left={0}
           width={100}
           height={100}
+          border="2px solid"
+          borderColor="gradient.purple"
           borderRadius="50%"
           objectFit="cover"
           draggable={false}
           userSelect="none"
-          src={user.twitter_image || new URL('../../assets/default-avatar.svg', import.meta.url).href}
+          src={user.twitter_image}
+          fallbackSrc={new URL('../../assets/default-avatar.svg', import.meta.url).href}
           alt="user name"
         />
-        <Text fontSize="xx-large" textAlign="right" fontWeight="bold">
-          {user.twitter_display_name || 'N/A'}
-        </Text>
+        <TextOverflowTooltip label={user.twitter_display_name} hasArrow placement="top">
+          <Text
+            fontSize="xx-large"
+            textAlign="right"
+            fontWeight="bold"
+            textOverflow="ellipsis"
+            whiteSpace="nowrap"
+            overflow="hidden"
+          >
+            {user.twitter_display_name || 'N/A'}
+          </Text>
+        </TextOverflowTooltip>
       </Box>
       <Box
         w="100%"
-        h="120px"
+        h="132px"
+        mt="14px"
         boxSizing="border-box"
         flexDir="column"
         rounded={16}
diff --git a/src/components/UserStatus/index.tsx b/src/components/UserStatus/index.tsx
index 8e667e4..2e9fbd4 100644
--- a/src/components/UserStatus/index.tsx
+++ b/src/components/UserStatus/index.tsx
@@ -12,9 +12,9 @@ export interface UserStatusProps extends GridProps {}
 export function UserStatus(props: UserStatusProps) {
   const { address } = useAccount()
   const store = usePoolStore()
-  const { data } = useUserInfo(address, store.poolId)
+  const { data: userInfo } = useUserInfo(address, store.poolId)
 
-  if (!data)
+  if (!userInfo)
     return (
       <Grid
         gap={6}
@@ -46,10 +46,10 @@ export function UserStatus(props: UserStatusProps) {
       maxW="maxW"
       {...props}
     >
-      <UserTotalPoints flexGrow={1} flexBasis={0} user={data.data} />
-      <StakedMask alignSelf="stretch" flexGrow={1} flexBasis={0} />
-      <RewardCard alignSelf="stretch" title={t`Estimated Rewards`} flexGrow={1} flexBasis={0} />
-      <RewardCard alignSelf="stretch" title={t`Estimated Rewards`} flexGrow={1} flexBasis={0} />
+      <UserTotalPoints user={userInfo} />
+      <StakedMask alignSelf="stretch" />
+      <RewardCard alignSelf="stretch" title={t`Estimated Rewards`} />
+      <RewardCard alignSelf="stretch" title={t`Estimated Rewards`} />
     </Grid>
   )
 }
diff --git a/src/hooks/useDetectOverflow.ts b/src/hooks/useDetectOverflow.ts
new file mode 100644
index 0000000..e9319c9
--- /dev/null
+++ b/src/hooks/useDetectOverflow.ts
@@ -0,0 +1,10 @@
+import { useState, useCallback } from 'react'
+
+export function useDetectOverflow<T extends HTMLDivElement>(): [overflow: boolean, ref: (node: T | null) => void] {
+  const [overflow, setOverflow] = useState(false)
+  const ref = useCallback((node: T | null) => {
+    if (node) setOverflow(node.offsetWidth !== node.scrollWidth)
+  }, [])
+
+  return [overflow, ref]
+}
diff --git a/src/hooks/useUserInfo.ts b/src/hooks/useUserInfo.ts
index 31e609a..6565ac6 100644
--- a/src/hooks/useUserInfo.ts
+++ b/src/hooks/useUserInfo.ts
@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import { fetchJSON } from '../helpers/fetchJSON'
 import { FIREFLY_API_ROOT } from '../constants/api'
-import { UserInfoResponse } from '../types/api'
+import { UserInfo, UserInfoResponse } from '../types/api'
 import urlcat from 'urlcat'
 
 export function useUserInfo(address: string | undefined, pool_id: number | null) {
@@ -15,5 +15,12 @@ export function useUserInfo(address: string | undefined, pool_id: number | null)
       })
       return fetchJSON<UserInfoResponse>(url)
     },
+    select(res) {
+      if (!res.data) return res.data
+      return {
+        ...res.data,
+        twitter_image: res.data.twitter_image.replace(/_normal.(jpe?g|png|gif|bmp)/, '_400x400.$1'),
+      } as UserInfo
+    },
   })
 }
diff --git a/src/modals/BaseModal.tsx b/src/modals/BaseModal.tsx
index 66ee20d..cea5929 100644
--- a/src/modals/BaseModal.tsx
+++ b/src/modals/BaseModal.tsx
@@ -27,7 +27,6 @@ interface Props extends ModalProps {
 }
 export function BaseModal({ title, width, height, ...rest }: Props) {
   const isMobile = useBreakpointValue({ base: true, md: false })
-  console.log({ isMobile })
   const header = (
     <>
       <Text fontSize="32px">{title}</Text>
diff --git a/src/modals/CookiePolicyModal.tsx b/src/modals/CookiePolicyModal.tsx
index 65a3b98..a7721b1 100644
--- a/src/modals/CookiePolicyModal.tsx
+++ b/src/modals/CookiePolicyModal.tsx
@@ -10,14 +10,14 @@ const CookiePolicyContent = () => (
       <br />
       {t`Cookies are small text files that are stored on your computer or mobile device when you visit a website. They are used to store information about you and your internet usage habits to improve your online experience. Cookies enable websites to recognize your device and remember some information about your preferences.`}
     </p>
-    <p>
+    <div>
       {t`Types of Cookies We Use`}
       <ul>
         <li>{t`Session Cookies: These cookies exist only during your visit to the website and are automatically deleted when you close your browser. They are used to maintain session state, such as storing the contents of your shopping cart.`}</li>
         <li>{t`Persistent Cookies: These cookies are stored on your device until they reach their expiration date or are manually deleted. They are used to remember your preferences and provide a personalized experience when you revisit the website.`}</li>
         <li>{t`Third-Party Cookies: The Site may use cookies from third-party service providers for traffic analysis and user behavior tracking, as well as to display ads relevant to your interests.`}</li>
       </ul>
-    </p>
+    </div>
     <p>
       {t`How to Control Cookies`}
       <br />
diff --git a/src/modals/StakeModal.tsx b/src/modals/StakeModal.tsx
index 4db9b4b..8efe022 100644
--- a/src/modals/StakeModal.tsx
+++ b/src/modals/StakeModal.tsx
@@ -17,22 +17,24 @@ import {
   VStack,
 } from '@chakra-ui/react'
 import { Trans, t } from '@lingui/macro'
+import { useConnectModal } from '@rainbow-me/rainbowkit'
 import dayjs from 'dayjs'
 import { useState } from 'react'
 import { useAccount, useBalance } from 'wagmi'
 import { StepIcon } from '../components/StepIcon'
 import { TokenIcon } from '../components/TokenIcon'
+import { Tooltip } from '../components/Tooltip.tsx'
 import { formatNumber } from '../helpers/formatNumber'
 import { useLinkTwitter } from '../hooks/useLinkTwitter'
 import { usePoolInfo } from '../hooks/usePoolInfo'
 import { usePoolStore } from '../store/poolStore'
-import { Tooltip } from '../components/Tooltip.tsx'
 import { BaseModal } from './BaseModal'
 
 interface Props extends ModalProps {}
 
 export function StakeModal(props: Props) {
   const account = useAccount()
+  const { openConnectModal } = useConnectModal()
   const { data: pool } = usePoolInfo()
   const { maskTokenAddress } = usePoolStore()
   const [amount, setAmount] = useState('')
@@ -55,6 +57,9 @@ export function StakeModal(props: Props) {
                 ml="auto"
                 fontSize={14}
                 rounded={24}
+                onClick={() => {
+                  openConnectModal?.()
+                }}
               >{t`Connect Wallet`}</Button>
             )}
           </ListItem>