diff --git a/src/components/LongString.tsx b/src/components/LongString.tsx
new file mode 100644
index 00000000..922e5756
--- /dev/null
+++ b/src/components/LongString.tsx
@@ -0,0 +1,16 @@
+import { Typography } from '@mui/material'
+import React from 'react'
+import { displayFirstPartLongString, displaySecondPartLongString } from '../utils/display-utils'
+const LongString = ({ value }) => {
+    const content =
+        value && value.length < 12 ? (
+            <Typography>{value}</Typography>
+        ) : (
+            <Typography>
+                {displayFirstPartLongString(value)}&hellip;
+                {displaySecondPartLongString(value)}
+            </Typography>
+        )
+    return <>{content}</>
+}
+export default LongString
diff --git a/src/components/Navbar/Account.tsx b/src/components/Navbar/Account.tsx
new file mode 100644
index 00000000..9ebfe9b8
--- /dev/null
+++ b/src/components/Navbar/Account.tsx
@@ -0,0 +1,195 @@
+import { mdiCogOutline, mdiLogout } from '@mdi/js'
+import Icon from '@mdi/react'
+import { Chip, IconButton, MenuItem, MenuList, Select, Typography, useTheme } from '@mui/material'
+import React, { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import store from 'wallet/store'
+import {
+    getNameOfMultiSigWallet,
+    getPchainAddress,
+    isMultiSigWallet,
+} from '../../helpers/walletStore'
+import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks'
+import { changeActiveApp, getAccount, updateAccount } from '../../redux/slices/app-config'
+import { updateAuthStatus } from '../../redux/slices/utils'
+import MHidden from '../@material-extend/MHidden'
+import { LoadAccountMenu } from '../LoadAccountMenu'
+import AliasPicker from './AliasPicker'
+import ThemeSwitcher from './ThemeSwitcher'
+
+interface LoginIconProps {
+    handleCloseSidebar: () => void
+}
+
+export default function Account({ handleCloseSidebar }: LoginIconProps) {
+    const auth = useAppSelector(state => state.appConfig.isAuth)
+    const [walletName, setWalletName] = React.useState('')
+    const dispatch = useAppDispatch()
+    const navigate = useNavigate()
+    const account = useAppSelector(getAccount)
+    const theme = useTheme()
+    const logout = async () => {
+        handleCloseSidebar()
+        await store.dispatch('logout')
+        dispatch(updateAccount(null))
+        dispatch(updateAuthStatus(false))
+        dispatch(changeActiveApp('Network'))
+        navigate('/')
+    }
+
+    const navigateToSettings = () => {
+        navigate('/settings')
+        handleCloseSidebar()
+    }
+    useEffect(() => {
+        if (isMultiSigWallet()) {
+            setWalletName(getNameOfMultiSigWallet() || getPchainAddress())
+        } else setWalletName(getPchainAddress())
+    }, [auth])
+
+    const handleKeyDown = e => {
+        e.stopPropagation()
+    }
+
+    return (
+        <>
+            <MHidden width="smUp">
+                <MenuList sx={{ backgroundColor: 'transparent' }}>
+                    <MenuItem onClick={navigateToSettings}>
+                        <IconButton>
+                            <Icon path={mdiCogOutline} size={0.8} />
+                        </IconButton>
+                        <Typography variant="body1">Settings</Typography>
+                    </MenuItem>
+                    {auth && <AliasPicker />}
+                    <MenuItem>
+                        <LoadAccountMenu type="kyc" />
+                    </MenuItem>
+                    <MenuItem sx={{ position: 'relative' }}>
+                        <LoadAccountMenu type="kyb" />
+                        <Chip
+                            color="secondary"
+                            size="small"
+                            sx={{
+                                position: 'absolute',
+                                fontSize: '12px',
+                                height: '16px',
+                                top: 0,
+                                right: { xs: '0.3rem', sm: 0 },
+                            }}
+                            label="beta"
+                        />
+                    </MenuItem>
+                    <MenuItem onClick={logout} sx={{ display: 'flex' }}>
+                        <IconButton>
+                            <Icon path={mdiLogout} size={0.8} />
+                        </IconButton>
+                        <Typography variant="body1">logout</Typography>
+                    </MenuItem>
+                </MenuList>
+            </MHidden>
+            <MHidden width="smDown">
+                <>
+                    {auth && (
+                        <Select
+                            value={
+                                !account ? (
+                                    <Typography>Account</Typography>
+                                ) : (
+                                    <LoadAccountMenu type="" />
+                                )
+                            }
+                            renderValue={() =>
+                                account ? (
+                                    <LoadAccountMenu type="" />
+                                ) : (
+                                    <Typography>Account</Typography>
+                                )
+                            }
+                            sx={{
+                                maxWidth: '13rem',
+                                '.MuiOutlinedInput-notchedOutline': { border: 'none' },
+                                '.MuiSvgIcon-root': { color: theme.palette.text.primary },
+                            }}
+                            onKeyDown={e => {
+                                handleKeyDown(e)
+                            }}
+                        >
+                            <MenuItem
+                                onKeyDown={e => {
+                                    handleKeyDown(e)
+                                }}
+                                sx={{ typography: 'body2', width: '100%', maxWidth: '326px' }}
+                            >
+                                <LoadAccountMenu type="kyc" />
+                            </MenuItem>
+                            <MenuItem
+                                onKeyDown={e => {
+                                    handleKeyDown(e)
+                                }}
+                                sx={{
+                                    typography: 'body1',
+                                    width: '100%',
+                                    maxWidth: '326px',
+                                    position: 'relative',
+                                }}
+                            >
+                                <Chip
+                                    color="secondary"
+                                    size="small"
+                                    sx={{
+                                        position: 'absolute',
+                                        fontSize: '12px',
+                                        height: '16px',
+                                        top: 0,
+                                        right: { xs: '0.3rem', sm: 0 },
+                                    }}
+                                    label="beta"
+                                />
+                                <LoadAccountMenu type="kyb" />
+                            </MenuItem>
+                            <MenuItem
+                                onClick={() => navigate('/settings')}
+                                onKeyDown={e => {
+                                    handleKeyDown(e)
+                                }}
+                                sx={{
+                                    typography: 'body2',
+                                    width: '100%',
+                                    maxWidth: '326px',
+                                    justifyContent: { xs: 'flex-end', sm: 'center' },
+                                }}
+                            >
+                                <IconButton>
+                                    <Icon path={mdiCogOutline} size={0.7} />
+                                </IconButton>
+                                <Typography variant="body1">Settings</Typography>
+                            </MenuItem>
+                            <AliasPicker />
+                            <MenuItem>
+                                <ThemeSwitcher />
+                            </MenuItem>
+                            <MenuItem
+                                onKeyDown={e => handleKeyDown(e)}
+                                onClick={logout}
+                                sx={{
+                                    typography: 'body2',
+                                    width: '100%',
+                                    maxWidth: '326px',
+                                    display: 'flex',
+                                    justifyContent: { xs: 'flex-end', sm: 'center' },
+                                    gap: '0.3rem',
+                                }}
+                            >
+                                <IconButton>
+                                    <Icon path={mdiLogout} size={0.7} />
+                                </IconButton>
+                                <Typography variant="body1">logout</Typography>
+                            </MenuItem>
+                        </Select>
+                    )}
+                </>
+            </MHidden>
+        </>
+    )
+}
diff --git a/src/components/Navbar/AliasPicker.tsx b/src/components/Navbar/AliasPicker.tsx
index 9e74e5d0..52a4aee8 100644
--- a/src/components/Navbar/AliasPicker.tsx
+++ b/src/components/Navbar/AliasPicker.tsx
@@ -1,13 +1,20 @@
-import { mdiClose } from '@mdi/js'
+import { mdiClose, mdiOpenInNew } from '@mdi/js'
 import Icon from '@mdi/react'
-import { Box, DialogContent, DialogTitle, Divider, Typography, IconButton } from '@mui/material'
+import {
+    Box,
+    DialogContent,
+    DialogTitle,
+    Divider,
+    IconButton,
+    MenuItem,
+    Typography,
+} from '@mui/material'
 import React, { useEffect, useState } from 'react'
 import store from 'wallet/store'
 import { getMultisigAliases } from '../../api'
 import { useAppSelector } from '../../hooks/reduxHooks'
 import { getShowButton } from '../../redux/slices/app-config'
 import DialogAnimate from '../Animate/DialogAnimate'
-import MainButton from '../MainButton'
 import LoadMyKeysComponent from './LoadMyKeysComponent'
 import LoadSaveKeysComponent from './LoadSaveKeysComponent'
 
@@ -31,14 +38,17 @@ const AliasPicker = () => {
     }, [showButtonState])
     if (!load) return <></>
     return (
-        <>
-            <MainButton
-                variant="outlined"
+        <MenuItem
+            sx={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '8px' }}
+        >
+            <Icon path={mdiOpenInNew} size={1} />
+            <Typography
+                variant="body2"
                 onClick={handleOpenModal}
-                style={{ width: '100%', whiteSpace: 'nowrap', padding: '0.5rem 1rem' }}
+                style={{ width: '100%', whiteSpace: 'nowrap' }}
             >
                 Switch Wallet
-            </MainButton>
+            </Typography>
             <DialogAnimate open={open} onClose={handleCloseModal}>
                 <DialogTitle sx={{ m: 0, p: 2 }}>
                     <Typography variant="h4" component="span">
@@ -74,7 +84,7 @@ const AliasPicker = () => {
                     <LoadMyKeysComponent />
                 </DialogContent>
             </DialogAnimate>
-        </>
+        </MenuItem>
     )
 }
 
diff --git a/src/components/Navbar/LoadMyKeysComponent.tsx b/src/components/Navbar/LoadMyKeysComponent.tsx
index f5b01f9f..b6828948 100644
--- a/src/components/Navbar/LoadMyKeysComponent.tsx
+++ b/src/components/Navbar/LoadMyKeysComponent.tsx
@@ -1,10 +1,10 @@
-import React, { useRef } from 'react'
+import { Box } from '@mui/material'
+import { styled } from '@mui/system'
+import React, { useEffect, useRef } from 'react'
 import { mountKyesComponent } from 'wallet/mountKyesComponent'
 import { useAppDispatch } from '../../hooks/reduxHooks'
-import { updateNotificationStatus } from '../../redux/slices/app-config'
 import { useEffectOnce } from '../../hooks/useEffectOnce'
-import { styled } from '@mui/system'
-import { Box } from '@mui/material'
+import { updateNotificationStatus, updatePchainAddress } from '../../redux/slices/app-config'
 
 const StyledBox = styled(Box)(({ theme }) => ({
     display: 'flex',
@@ -40,13 +40,16 @@ const StyledBox = styled(Box)(({ theme }) => ({
 const LoadMyKeysComponent = () => {
     const ref = useRef(null)
     const dispatch = useAppDispatch()
-
+    const [walletSwitched, setWalletSwitched] = React.useState('')
     const dispatchNotification = ({ message, type }) =>
         dispatch(updateNotificationStatus({ message, severity: type }))
     useEffectOnce(() => {
-        mountKyesComponent(ref.current, { dispatchNotification })
+        mountKyesComponent(ref.current, { dispatchNotification, setWalletSwitched })
     }) // eslint-disable-line react-hooks/exhaustive-deps
 
+    useEffect(() => {
+        dispatch(updatePchainAddress(walletSwitched))
+    }, [walletSwitched])
     return (
         <StyledBox>
             <div ref={ref} />
diff --git a/src/components/Navbar/LoggedInAccount.tsx b/src/components/Navbar/LoggedInAccount.tsx
new file mode 100644
index 00000000..6834fac1
--- /dev/null
+++ b/src/components/Navbar/LoggedInAccount.tsx
@@ -0,0 +1,31 @@
+import { mdiWalletOutline } from '@mdi/js'
+import Icon from '@mdi/react'
+import React, { useEffect, useState } from 'react'
+import {
+    getNameOfMultiSigWallet,
+    getPchainAddress,
+    isMultiSigWallet,
+} from '../../helpers/walletStore'
+import { useAppSelector } from '../../hooks/reduxHooks'
+import { getPChainAddress } from '../../redux/slices/app-config'
+import { getActiveNetwork } from '../../redux/slices/network'
+import LongString from '../LongString'
+
+const LoggedInAccount = () => {
+    const [walletName, setWalletName] = useState('')
+    const pChainAddress = useAppSelector(getPChainAddress)
+    const activeNetwork = useAppSelector(getActiveNetwork)
+
+    useEffect(() => {
+        if (isMultiSigWallet()) {
+            setWalletName(getNameOfMultiSigWallet() || getPchainAddress()[0])
+        } else setWalletName(getPchainAddress()[0])
+    }, [pChainAddress, activeNetwork])
+    return (
+        <>
+            <Icon path={mdiWalletOutline} size={1} />
+            <LongString value={walletName} />
+        </>
+    )
+}
+export default LoggedInAccount
diff --git a/src/components/Navbar/ThemeSwitcher.tsx b/src/components/Navbar/ThemeSwitcher.tsx
index a35929ec..c060fceb 100644
--- a/src/components/Navbar/ThemeSwitcher.tsx
+++ b/src/components/Navbar/ThemeSwitcher.tsx
@@ -1,13 +1,12 @@
-import React from 'react'
-import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks'
-import { toggleTheme } from '../../redux/slices/theme'
-import { Button, Typography, useTheme } from '@mui/material'
 import { mdiWeatherSunny } from '@mdi/js'
 import Icon from '@mdi/react'
-import useWidth from '../../hooks/useWidth'
+import { Button, Typography, useTheme } from '@mui/material'
 import { useStore } from 'Explorer/useStore'
-import { getTheme } from '../../redux/slices/theme'
+import React from 'react'
 import store from 'wallet/store'
+import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks'
+import useWidth from '../../hooks/useWidth'
+import { getTheme, toggleTheme } from '../../redux/slices/theme'
 
 export default function ThemeSwitcher() {
     const { isDesktop } = useWidth()
@@ -15,6 +14,7 @@ export default function ThemeSwitcher() {
     const theme = useTheme()
     const currentTheme = useAppSelector(getTheme)
     const { changeTheme } = useStore()
+    const auth = useAppSelector(state => state.appConfig.isAuth)
     return (
         <Button
             variant="text"
@@ -32,6 +32,7 @@ export default function ThemeSwitcher() {
                 minWidth: 'auto',
                 '&:hover': { backgroundColor: 'transparent' },
                 '.MuiButton-startIcon': { mr: isDesktop ? '0.5rem' : '0rem' },
+                ...(true && { width: '100%' }),
             }}
         >
             {isDesktop && <Typography variant="body2">{theme.palette.mode}</Typography>}
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index da081126..421341ce 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { mdiClose, mdiMenu, mdiWalletOutline } from '@mdi/js'
 import Icon from '@mdi/react'
 import {
     AppBar,
@@ -10,22 +10,23 @@ import {
     Typography,
     useTheme,
 } from '@mui/material'
+import React, { useState } from 'react'
 import { useIdleTimer } from 'react-idle-timer'
-import { mdiClose, mdiMenu, mdiWalletOutline } from '@mdi/js'
 import { useNavigate } from 'react-router-dom'
+import store from 'wallet/store'
+import { DRAWER_WIDTH, TIMEOUT_DURATION } from '../../constants/apps-consts'
 import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks'
+import { updateAccount } from '../../redux/slices/app-config'
 import { getActiveNetwork } from '../../redux/slices/network'
+import { updateAuthStatus } from '../../redux/slices/utils'
+import MHidden from '../@material-extend/MHidden'
+import MIconButton from '../@material-extend/MIconButton'
 import PlatformSwitcher from '../PlatformSwitcher'
+import Account from './Account'
+import LoggedInAccount from './LoggedInAccount'
+import LoginButton from './LoginButton'
 import NetworkSwitcher from './NetworkSwitcher'
 import ThemeSwitcher from './ThemeSwitcher'
-import LoginButton from './LoginButton'
-import MHidden from '../@material-extend/MHidden'
-import MIconButton from '../@material-extend/MIconButton'
-import { updateAccount } from '../../redux/slices/app-config'
-import store from 'wallet/store'
-import { TIMEOUT_DURATION, DRAWER_WIDTH } from '../../constants/apps-consts'
-import AliasPicker from './AliasPicker'
-import { updateAuthStatus } from '../../redux/slices/utils'
 
 export default function Navbar() {
     const theme = useTheme()
@@ -148,7 +149,7 @@ export default function Navbar() {
                     {/* Desktop */}
                     <MHidden width="smDown">
                         <>
-                            <ThemeSwitcher />
+                            {!auth && <ThemeSwitcher />}
                             {activeNetwork && <NetworkSwitcher />}
                             {!auth ? (
                                 <Box
@@ -167,8 +168,8 @@ export default function Navbar() {
                                 </Box>
                             ) : (
                                 <>
-                                    <AliasPicker />
-                                    <LoginButton handleCloseSidebar={handleCloseSidebar} />
+                                    <LoggedInAccount />
+                                    <Account handleCloseSidebar={handleCloseSidebar} />
                                 </>
                             )}
                         </>
diff --git a/src/helpers/walletStore.ts b/src/helpers/walletStore.ts
index e86733ee..4d907963 100644
--- a/src/helpers/walletStore.ts
+++ b/src/helpers/walletStore.ts
@@ -44,3 +44,19 @@ export async function updateAssets() {
     await updateUTXOs()
     await updateKycStatus()
 }
+
+export function isMultiSigWallet() {
+    return store.state.activeWallet.type === 'multisig'
+}
+
+export function getEthAddress() {
+    return store.state.activeWallet.ethAddress
+}
+
+export function getNameOfMultiSigWallet() {
+    return store.state.activeWallet?.name
+}
+
+export function getPchainAddress() {
+    return store.getters['staticAddresses']('P')
+}
diff --git a/src/redux/slices/app-config.ts b/src/redux/slices/app-config.ts
index 9b44cec7..67f89d4c 100644
--- a/src/redux/slices/app-config.ts
+++ b/src/redux/slices/app-config.ts
@@ -17,9 +17,11 @@ interface InitialStateAppConfigType {
     walletStore: any
     account: any
     showButton: boolean
+    pChainAddress: string
 }
 
 let initialState: InitialStateAppConfigType = {
+    pChainAddress: '',
     apps: APPS_CONSTS,
     activeApp: 0,
     status: Status.IDLE,
@@ -42,6 +44,9 @@ const appConfigSlice = createSlice({
         updateValues(state, { payload }) {
             state.walletStore = payload
         },
+        updatePchainAddress(state, { payload }) {
+            state.pChainAddress = payload
+        },
         updateAccount(state, { payload }) {
             state.account = payload
         },
@@ -116,6 +121,9 @@ export const getNotificationSeverity = (state: RootState) => state.appConfig.not
 // get selectedAlias
 export const getShowButton = (state: RootState) => state.appConfig.showButton
 
+// get PChainAddress
+export const getPChainAddress = (state: RootState) => state.appConfig.pChainAddress
+
 export const {
     changeActiveApp,
     updateValues,
@@ -123,5 +131,6 @@ export const {
     updateAccount,
     updateNotificationStatus,
     updateShowButton,
+    updatePchainAddress,
 } = appConfigSlice.actions
 export default appConfigSlice.reducer
diff --git a/src/utils/display-utils.ts b/src/utils/display-utils.ts
index cbb8498f..4369cfc2 100644
--- a/src/utils/display-utils.ts
+++ b/src/utils/display-utils.ts
@@ -1,60 +1,60 @@
-import { DateTime, Duration } from 'luxon'
-import { Timeframe } from 'types'
+// import { DateTime, Duration } from 'luxon'
+// import { Timeframe } from 'types'
 
 export interface Fund {
     address: string
     value?: number
 }
 
-export function getStartDate(endDate: DateTime, timeframe: string): DateTime {
-    switch (timeframe) {
-        case Timeframe.DAYS_7:
-            return endDate.minus({ weeks: 1 })
-        case Timeframe.HOURS_24:
-            return endDate.minus({ days: 1 })
-        case Timeframe.MONTHS_1:
-            return endDate.minus({ months: 1 })
-    }
-    return endDate.minus({ weeks: 1 })
-}
-// Todo: Update the getRelativeTime function
-export function getRelativeTime(timestamp: Date | number | string): string {
-    const time = getTime(timestamp)
-    if (!Number.isInteger(time)) {
-        return 'Unknown'
-    }
-    const duration = Duration.fromMillis(new Date().getTime() - time, {
-        locale: 'en-US',
-    }).shiftTo('seconds')
-    if (duration.seconds < 1) return '< 1 sec'
-    else if (duration.seconds >= 1 && duration.seconds < 2) {
-        return '1 sec'
-    } else if (duration.seconds < 60) {
-        return duration.seconds.toFixed(0) + ' secs'
-    } else if (duration.seconds >= 60 && duration.seconds < 120) {
-        return '1 min'
-    } else if (duration.seconds < 3600) {
-        return duration.shiftTo('minutes').minutes.toFixed(0) + ' mins'
-    } else if (duration.seconds >= 3600 && duration.seconds < 7200) {
-        return '1 hr'
-    } else if (duration.seconds < 86400) {
-        return duration.shiftTo('hours').hours.toFixed(0) + ' hrs'
-    } else if (duration.seconds >= 86400 && duration.seconds < 172800) {
-        return '1 day'
-    } else {
-        return duration.shiftTo('days').days.toFixed(0) + ' days'
-    }
-}
+// export function getStartDate(endDate: DateTime, timeframe: string): DateTime {
+//     switch (timeframe) {
+//         case Timeframe.DAYS_7:
+//             return endDate.minus({ weeks: 1 })
+//         case Timeframe.HOURS_24:
+//             return endDate.minus({ days: 1 })
+//         case Timeframe.MONTHS_1:
+//             return endDate.minus({ months: 1 })
+//     }
+//     return endDate.minus({ weeks: 1 })
+// }
+// // Todo: Update the getRelativeTime function
+// export function getRelativeTime(timestamp: Date | number | string): string {
+//     const time = getTime(timestamp)
+//     if (!Number.isInteger(time)) {
+//         return 'Unknown'
+//     }
+//     const duration = Duration.fromMillis(new Date().getTime() - time, {
+//         locale: 'en-US',
+//     }).shiftTo('seconds')
+//     if (duration.seconds < 1) return '< 1 sec'
+//     else if (duration.seconds >= 1 && duration.seconds < 2) {
+//         return '1 sec'
+//     } else if (duration.seconds < 60) {
+//         return duration.seconds.toFixed(0) + ' secs'
+//     } else if (duration.seconds >= 60 && duration.seconds < 120) {
+//         return '1 min'
+//     } else if (duration.seconds < 3600) {
+//         return duration.shiftTo('minutes').minutes.toFixed(0) + ' mins'
+//     } else if (duration.seconds >= 3600 && duration.seconds < 7200) {
+//         return '1 hr'
+//     } else if (duration.seconds < 86400) {
+//         return duration.shiftTo('hours').hours.toFixed(0) + ' hrs'
+//     } else if (duration.seconds >= 86400 && duration.seconds < 172800) {
+//         return '1 day'
+//     } else {
+//         return duration.shiftTo('days').days.toFixed(0) + ' days'
+//     }
+// }
 
-function getTime(timestamp: Date | number | string): number {
-    if (timestamp instanceof Date) {
-        return timestamp.getTime()
-    }
-    if (typeof timestamp === 'string') {
-        return new Date(timestamp).getTime()
-    }
-    return timestamp
-}
+// function getTime(timestamp: Date | number | string): number {
+//     if (timestamp instanceof Date) {
+//         return timestamp.getTime()
+//     }
+//     if (typeof timestamp === 'string') {
+//         return new Date(timestamp).getTime()
+//     }
+//     return timestamp
+// }
 
 export function displayLongString(val: string, maxLength = 12): string {
     if (!val) {