diff --git a/cypress/e2e/explorer_latest_transaction_list_Xchain.cy.ts b/cypress/e2e/explorer_latest_transaction_list_Xchain.cy.ts
index 41745a1d..8e68ae2f 100644
--- a/cypress/e2e/explorer_latest_transaction_list_Xchain.cy.ts
+++ b/cypress/e2e/explorer_latest_transaction_list_Xchain.cy.ts
@@ -1,5 +1,3 @@
-import { expect } from 'chai'
-
 let transactionsBody = {
     transactions: [
         {
@@ -279,7 +277,7 @@ describe('latest transaction list Xchainet', { tags: ['@explorer', '@suite'] },
                 })
         })
         cy.wait('@transactions').then(() => {
-            cy.get('.css-1voxykv-MuiPaper-root').should('be.visible')
+            cy.get('[aria-label="transaction-list"]').should('be.visible')
             cy.get(
                 ':nth-child(1) > .MuiGrid-grid-md-4 > .MuiGrid-container > .MuiGrid-grid-xs-8 > a > .MuiTypography-root',
             )
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 9a350fdd..cef68612 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -82,12 +82,24 @@ Cypress.Commands.add('changeNetwork', (network: string = 'Kopernikus') => {
     cy.get('@txtSelectedNetwork')
         .invoke('text')
         .then(currentNetwork => {
-            cy.get('@btnNetworkSwitcher').click({ force: true }) // Network Switcher
-            cy.get(`[data-value="${network}"]`).click() // Select Network
-
-            // Waiting 'info.networkID', and 'info.getTxFee'
-            cy.wait('@getNetworkID').then(interceptNetworkInfo)
-            cy.wait('@getTxFee').then(interceptNetworkInfo)
+            if (currentNetwork !== network) {
+                // Only perform the switch if the current network is different
+                cy.get('@btnNetworkSwitcher').click({ force: true })
+                cy.get(`[data-value="${network}"]`).click()
+
+                // After switching, wait for the network requests
+                cy.wait('@getNetworkID').then(interceptNetworkInfo)
+                cy.wait('@getTxFee').then(interceptNetworkInfo)
+            } else {
+                cy.get('body').then($body => {
+                    if ($body.find(`[data-value="${network}"]`).length > 0) {
+                        cy.get(`[data-value="${network}"]`).click()
+                    } else {
+                        cy.log(`Network option '${network}' not found.`)
+                    }
+                })
+                cy.log(`Already on the '${network}' network, no switch needed.`)
+            }
 
             // increasing timeout to make sure the network is selected, especially on slowly local dev env
             cy.get('@txtSelectedNetwork', { timeout: 15000 }).should('have.text', network)
diff --git a/public/index.html b/public/index.html
index ea5bfd7b..b0dca7a1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="night">
+<html lang="en">
     <head>
         <meta charset="utf-8" />
-        <link rel="manifest"  href="/manifest.json"/>
+        <link rel="manifest" href="/manifest.json" />
         <link rel="icon" href="/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#000000" />
@@ -38,12 +38,12 @@
         <div id="app"></div>
     </body>
     <style>
-        html[data-theme='day'] {
+        html[data-theme='light'] {
             --background-color: #fff;
             --secondary-background-color: #f1f5f9;
             --text-color: #0f172a;
         }
-        html[data-theme='night'] {
+        html[data-theme='dark'] {
             --background-color: #0f172a;
             --secondary-background-color: #1e293b;
             --text-color: #ffffff;
@@ -94,13 +94,19 @@
         })
     </script>
 
-    <noscript
-        >Free cookie consent management tool by
-        <a href="https://www.termsfeed.com/privacy-policy-generator/"
-            >TermsFeed Free Privacy Policy Generator</a
-        ></noscript
-    >
+    <noscript>
+        Free cookie consent management tool by
+        <a href="https://www.termsfeed.com/privacy-policy-generator/">
+            TermsFeed Free Privacy Policy Generator
+        </a>
+    </noscript>
     <script>
+        // set data-theme based on localStorage
+        const theme = localStorage.getItem('theme')
+
+        if (theme) document.documentElement.setAttribute('data-theme', theme)
+        else document.documentElement.setAttribute('data-theme', 'light')
+
         let intervalId
 
         function checkAppLoading() {
diff --git a/src/components/Animate/DialogAnimate.tsx b/src/components/Animate/DialogAnimate.tsx
index 91ab18aa..f3f18a66 100644
--- a/src/components/Animate/DialogAnimate.tsx
+++ b/src/components/Animate/DialogAnimate.tsx
@@ -19,7 +19,7 @@ export default function DialogAnimate({
             {open && (
                 <Dialog
                     fullWidth
-                    maxWidth="xl"
+                    maxWidth="md"
                     open={open}
                     onClose={onClose}
                     PaperComponent={props => (
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index f597a2ed..34412c51 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -1,33 +1,35 @@
-import React from 'react'
 import {
     Box,
-    Grid,
-    Typography,
-    useTheme,
-    Divider,
     Container,
+    Divider,
+    Fade,
+    Grid,
     MenuItem,
     Tooltip,
-    Fade,
+    Typography,
+    useTheme,
 } from '@mui/material'
 import {
+    CAMINO,
+    DISCORD,
     DOCS,
-    TWITTER,
-    TELEGRAM_CAMINO,
-    TELEGRAM_ANNOUNCEMENTS,
-    MEDIUM,
     GITHUB,
-    DISCORD,
-    CAMINO,
+    MEDIUM,
     SUITE_RELEASES,
+    TELEGRAM_ANNOUNCEMENTS,
+    TELEGRAM_CAMINO,
+    TWITTER,
 } from '../../constants/route-paths'
-import { Link } from 'react-router-dom'
-import { mdiInformationOutline } from '@mdi/js'
+
 import Icon from '@mdi/react'
+import { Link } from 'react-router-dom'
+import React from 'react'
 import Version from './Version'
+import { mdiInformationOutline } from '@mdi/js'
 
 export default function Footer() {
     const theme = useTheme()
+    const year = new Date().getFullYear()
     return (
         <footer style={{ position: 'relative', marginTop: 'auto' }}>
             {theme.palette.mode !== 'light' && <Divider variant="fullWidth" />}
@@ -163,7 +165,7 @@ export default function Footer() {
                                     textAlign: { xs: 'center', md: 'left' },
                                 }}
                             >
-                                Camino Network Foundation &copy; 2023
+                                Camino Network Foundation &copy; {year}
                             </Typography>
                         </Grid>
                         <Grid item xs={12} md={6}>
diff --git a/src/components/LoadAccountMenu.tsx b/src/components/LoadAccountMenu.tsx
index 6b9f969d..5dfb8f4f 100644
--- a/src/components/LoadAccountMenu.tsx
+++ b/src/components/LoadAccountMenu.tsx
@@ -1,10 +1,11 @@
+import { Box } from '@mui/material'
+import { styled } from '@mui/material/styles'
 import React, { useRef } from 'react'
-import { useAppDispatch } from '../hooks/reduxHooks'
-import { updateAccount, updateNotificationStatus } from '../redux/slices/app-config'
 import { mountAccountMenu } from 'wallet/mountAccountMenu'
-import { styled } from '@mui/material/styles'
-import { Box } from '@mui/material'
+import { useAppDispatch } from '../hooks/reduxHooks'
 import { useEffectOnce } from '../hooks/useEffectOnce'
+import useWallet from '../hooks/useWallet'
+import { updateAccount, updateNotificationStatus } from '../redux/slices/app-config'
 
 const StyledBox = styled(Box)(({ theme }) => ({
     display: 'flex',
@@ -24,6 +25,7 @@ export const LoadAccountMenu = (props: {
     const ref = useRef(null)
     const dispatch = useAppDispatch()
     const setAccount = account => dispatch(updateAccount(account))
+    const { updateStore } = useWallet()
     const dispatchNotification = ({ message, type }) =>
         dispatch(updateNotificationStatus({ message, severity: type }))
     useEffectOnce(() => {
@@ -31,6 +33,8 @@ export const LoadAccountMenu = (props: {
             ...props,
             setAccount,
             dispatchNotification,
+
+            updateStore,
         })
     }) // eslint-disable-line react-hooks/exhaustive-deps
 
diff --git a/src/components/Navbar/Account.tsx b/src/components/Navbar/Account.tsx
index ebe36ae3..798100b0 100644
--- a/src/components/Navbar/Account.tsx
+++ b/src/components/Navbar/Account.tsx
@@ -4,13 +4,14 @@ import { Chip, MenuItem, MenuList, Select, Typography, useTheme } from '@mui/mat
 import React, { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import store from 'wallet/store'
-import {
-    getNameOfMultiSigWallet,
-    getPchainAddress,
-    isMultiSigWallet,
-} from '../../helpers/walletStore'
+import { getNameOfWallet, getPchainAddress } from '../../helpers/walletStore'
 import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks'
-import { changeActiveApp, getAccount, updateAccount } from '../../redux/slices/app-config'
+import {
+    changeActiveApp,
+    getAccount,
+    updateAccount,
+    updatePchainAddress,
+} from '../../redux/slices/app-config'
 import { updateAuthStatus } from '../../redux/slices/utils'
 import MHidden from '../@material-extend/MHidden'
 import { LoadAccountMenu } from '../LoadAccountMenu'
@@ -23,7 +24,6 @@ interface LoginIconProps {
 
 export default function Account({ handleCloseSidebar }: LoginIconProps) {
     const auth = useAppSelector(state => state.appConfig.isAuth)
-    const [_, setWalletName] = React.useState('')
     const dispatch = useAppDispatch()
     const navigate = useNavigate()
     const account = useAppSelector(getAccount)
@@ -42,11 +42,10 @@ export default function Account({ handleCloseSidebar }: LoginIconProps) {
         handleCloseSidebar()
     }
     useEffect(() => {
-        if (isMultiSigWallet()) {
-            setWalletName(getNameOfMultiSigWallet() || getPchainAddress())
-        } else setWalletName(getPchainAddress())
+        dispatch(
+            updatePchainAddress({ address: getPchainAddress(), walletName: getNameOfWallet() }),
+        )
     }, [auth])
-
     const handleKeyDown = e => {
         e.stopPropagation()
     }
diff --git a/src/components/Navbar/AddNewNetwork.tsx b/src/components/Navbar/AddNewNetwork.tsx
index d6edb707..d6851237 100644
--- a/src/components/Navbar/AddNewNetwork.tsx
+++ b/src/components/Navbar/AddNewNetwork.tsx
@@ -1,21 +1,23 @@
-import React from 'react'
 import * as Yup from 'yup'
-import { Network } from '../../@types/store'
-import { useAppDispatch } from '../../hooks/reduxHooks'
+
 import {
-    Typography,
-    TextField,
-    DialogContent,
-    DialogActions,
     CircularProgress,
+    DialogActions,
+    DialogContent,
+    TextField,
+    Typography,
 } from '@mui/material'
-import { useFormik, Form, FormikProvider } from 'formik'
-import { Button } from '@mui/material'
+import { Form, FormikProvider, useFormik } from 'formik'
+
 import { AvaNetwork } from 'wallet/AvaNetwork'
-import store from 'wallet/store'
+import { Button } from '@mui/material'
+import { Network } from '../../@types/store'
+import React from 'react'
 import { addNetworks } from '../../redux/slices/network'
-import { useStore } from 'Explorer/useStore'
 import axios from 'axios'
+import store from 'wallet/store'
+import { useAppDispatch } from '../../hooks/reduxHooks'
+import { useStore } from 'Explorer/useStore'
 
 export default function AddNewNetwork({
     networks,
@@ -52,47 +54,82 @@ export default function AddNewNetwork({
         return _newNetwork
     }
 
+    const isUniqueField = (field, value) => {
+        if (value === undefined || value === null) return true
+
+        const isFieldSpecific = ['url', 'magellanAddress', 'signavaultAddress'].includes(field)
+        const isHttps = value.startsWith('https://')
+
+        if (edit && selectedNetwork) {
+            return !networks.some(
+                network =>
+                    network[field] === value &&
+                    network.id !== selectedNetwork.id &&
+                    !network.predefined &&
+                    (!isFieldSpecific || isHttps || network[field].startsWith('https://')),
+            )
+        } else {
+            return !networks.some(
+                network =>
+                    network[field] === value &&
+                    !network.predefined &&
+                    (!isFieldSpecific || isHttps || network[field].startsWith('https://')),
+            )
+        }
+    }
+
+    const validatePort = value => {
+        if (!value) return true
+
+        const urlParts = value.split('://')
+        if (urlParts.length < 2) return false
+
+        const protocol = urlParts[0]
+        const address = urlParts[1]
+        if (protocol === 'https' && !address.includes(':')) return true
+        else if (
+            protocol === 'http' &&
+            (!address.includes(':') || isNaN(parseInt(address.split(':')[1])))
+        )
+            return false
+
+        return true
+    }
+
     const EventSchema = Yup.object().shape({
         id: Yup.string(),
-        displayName: Yup.string().required('This field is required').min(3, 'Too Short!'),
+        displayName: Yup.string()
+            .required('This field is required')
+            .min(3, 'Too Short!')
+            .test('unique-name', 'Network Name already exists', function (value) {
+                return isUniqueField('name', value)
+            }),
         url: Yup.string()
             .min(10, 'URL must be at least 10 characters')
+            .required('This field is required')
             .max(200, 'URL must be no more than 200 characters')
-            .test(
-                'validate http / https prefix',
-                'URLs require the appropriate HTTP/HTTPS prefix.',
-                function (value) {
-                    if (
-                        !value ||
-                        (value.substring(0, 7) !== 'http://' &&
-                            value.substring(0, 8) !== 'https://')
-                    ) {
-                        return false
-                    }
-                    return true
-                },
-            )
-            .test('validate base ip', 'Invalid URL.', function (value) {
-                let rest = value?.split('://')[1]
-                if (!rest || rest.length === 0) {
-                    return false
-                }
-                return true
-            })
-            .test('validate port', 'You must specify a valid port of the url.', function (value) {
-                let rest = value?.split('://')[1]
-                if (!rest || !rest.includes(':') || isNaN(parseInt(rest.split(':')[1])))
-                    return false
-                return true
+            .matches(/^https?:\/\/.+/, 'URL must start with http:// or https://')
+            .test('validate-port', 'Invalid port for the given protocol', validatePort)
+            .test('unique-url', 'URL already exists', function (value) {
+                return isUniqueField('url', value)
             }),
         magellanAddress: Yup.string()
             .min(10, 'URL must be at least 10 characters')
             .max(200, 'URL must be no more than 200 characters')
-            .matches(/^https?:\/\/.+/, 'URL must start with http:// or https://'),
+            .matches(/^https?:\/\/.+/, 'URL must start with http:// or https://')
+            .test('validate-port', 'Invalid port for the given protocol', validatePort)
+            .test('unique-magellan', 'Magellan Address already exists', function (value) {
+                return isUniqueField('explorerUrl', value)
+            }),
+
         signavaultAddress: Yup.string()
             .min(10, 'URL must be at least 10 characters')
             .max(200, 'URL must be no more than 200 characters')
-            .matches(/^https?:\/\/.+/, 'URL must start with http:// or https://'),
+            .matches(/^https?:\/\/.+/, 'URL must start with http:// or https://')
+            .test('validate-port', 'Invalid port for the given protocol', validatePort)
+            .test('unique-signavault', 'Signavault Address already exists', function (value) {
+                return isUniqueField('signavaultUrl', value)
+            }),
         predefined: Yup.boolean(),
     })
 
@@ -191,7 +228,7 @@ export default function AddNewNetwork({
         },
     })
 
-    const { errors, touched, handleSubmit, getFieldProps } = formik
+    const { errors, touched, handleSubmit, getFieldProps, isValid, dirty } = formik
     return (
         <FormikProvider value={formik}>
             <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
@@ -248,7 +285,12 @@ export default function AddNewNetwork({
                         pb: 0,
                     }}
                 >
-                    <NetworkButton isLoading={isLoading} edit={edit} />
+                    <NetworkButton
+                        isLoading={isLoading}
+                        edit={edit}
+                        isValid={isValid}
+                        dirty={dirty}
+                    />
                     <Button
                         variant="contained"
                         onClick={handleClose}
@@ -264,29 +306,27 @@ export default function AddNewNetwork({
     )
 }
 
-const AddNetworkButton = () => (
+const AddNetworkButton = ({ isValid, dirty }) => (
     <Button
         variant="outlined"
         type="submit"
         data-cy="btn-add-network"
         sx={{ py: '.75rem', width: '100%' }}
+        disabled={!isValid || !dirty}
     >
-        <Typography variant="body1" color="primary">
-            Add Network
-        </Typography>
+        <Typography variant="body1">Add Network</Typography>
     </Button>
 )
 
-const EditNetworkButton = () => (
+const EditNetworkButton = ({ isValid }) => (
     <Button
         variant="outlined"
         type="submit"
         data-cy="btn-edit-network"
         sx={{ py: '.75rem', width: '100%' }}
+        disabled={!isValid}
     >
-        <Typography variant="body1" color="primary">
-            Edit Network
-        </Typography>
+        <Typography variant="body1">Edit Network</Typography>
     </Button>
 )
 
@@ -302,12 +342,12 @@ const LoadingButton = () => (
     </Button>
 )
 
-const NetworkButton = ({ isLoading, edit }) => {
+const NetworkButton = ({ isLoading, edit, isValid, dirty }) => {
     if (isLoading) {
         return <LoadingButton />
     } else if (edit) {
-        return <EditNetworkButton />
+        return <EditNetworkButton isValid={isValid} />
     } else {
-        return <AddNetworkButton />
+        return <AddNetworkButton isValid={isValid} dirty={dirty} />
     }
 }
diff --git a/src/components/Navbar/LoadMyKeysComponent.tsx b/src/components/Navbar/LoadMyKeysComponent.tsx
index b6828948..46bd2a31 100644
--- a/src/components/Navbar/LoadMyKeysComponent.tsx
+++ b/src/components/Navbar/LoadMyKeysComponent.tsx
@@ -1,10 +1,11 @@
 import { Box } from '@mui/material'
 import { styled } from '@mui/system'
-import React, { useEffect, useRef } from 'react'
+import React, { useRef } from 'react'
 import { mountKyesComponent } from 'wallet/mountKyesComponent'
 import { useAppDispatch } from '../../hooks/reduxHooks'
 import { useEffectOnce } from '../../hooks/useEffectOnce'
-import { updateNotificationStatus, updatePchainAddress } from '../../redux/slices/app-config'
+import useWallet from '../../hooks/useWallet'
+import { updateNotificationStatus } from '../../redux/slices/app-config'
 
 const StyledBox = styled(Box)(({ theme }) => ({
     display: 'flex',
@@ -40,16 +41,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 }))
+    const { updateStore } = useWallet()
     useEffectOnce(() => {
-        mountKyesComponent(ref.current, { dispatchNotification, setWalletSwitched })
+        mountKyesComponent(ref.current, {
+            dispatchNotification,
+            updateStore,
+        })
     }) // 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
index 6834fac1..f3f06246 100644
--- a/src/components/Navbar/LoggedInAccount.tsx
+++ b/src/components/Navbar/LoggedInAccount.tsx
@@ -1,26 +1,21 @@
 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 React, { useEffect } from 'react'
+import { getNameOfWallet, getPchainAddress } from '../../helpers/walletStore'
+import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks'
+import { getWalletName, updatePchainAddress } 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 walletName = useAppSelector(getWalletName)
     const activeNetwork = useAppSelector(getActiveNetwork)
-
+    const dispatch = useAppDispatch()
     useEffect(() => {
-        if (isMultiSigWallet()) {
-            setWalletName(getNameOfMultiSigWallet() || getPchainAddress()[0])
-        } else setWalletName(getPchainAddress()[0])
-    }, [pChainAddress, activeNetwork])
+        dispatch(
+            updatePchainAddress({ address: getPchainAddress(), walletName: getNameOfWallet() }),
+        )
+    }, [activeNetwork])
     return (
         <>
             <Icon path={mdiWalletOutline} size={1} />
diff --git a/src/components/Navbar/NetworkSwitcher.tsx b/src/components/Navbar/NetworkSwitcher.tsx
index 7acd7a91..ef2c575f 100644
--- a/src/components/Navbar/NetworkSwitcher.tsx
+++ b/src/components/Navbar/NetworkSwitcher.tsx
@@ -1,9 +1,8 @@
-import { mdiDeleteOutline, mdiPencilOutline, mdiPlus } from '@mdi/js'
-import Icon from '@mdi/react'
 import {
     Box,
     Button,
     Chip,
+    CircularProgress,
     DialogTitle,
     MenuItem,
     MenuList,
@@ -12,13 +11,16 @@ import {
     Typography,
     useTheme,
 } from '@mui/material'
-import React from 'react'
-import useNetwork from '../../hooks/useNetwork'
+import { mdiDeleteOutline, mdiPencilOutline, mdiPlus } from '@mdi/js'
 import { networkStatusColor, networkStatusName } from '../../utils/networkUtils'
-import MHidden from '../@material-extend/MHidden'
-import DialogAnimate from '../Animate/DialogAnimate'
+
 import AddNewNetwork from './AddNewNetwork'
+import DialogAnimate from '../Animate/DialogAnimate'
+import Icon from '@mdi/react'
+import MHidden from '../@material-extend/MHidden'
+import React from 'react'
 import SelectedNetwork from './SelectNetwork'
+import useNetwork from '../../hooks/useNetwork'
 
 interface NetworkSwitcherProps {
     handleCloseSidebar?: () => void
@@ -89,8 +91,12 @@ export default function NetworkSwitcher({ handleCloseSidebar }: NetworkSwitcherP
                                 flexDirection: 'column',
                                 alignItems: 'baseline',
                                 color: theme.palette.text.primary,
+                                ...(network.name === activeNetwork.name && { cursor: 'auto' }),
+                            }}
+                            onClick={() => {
+                                if (network.name === activeNetwork.name) return
+                                changeNetwork(network.name)
                             }}
-                            onClick={() => changeNetwork(network.name)}
                         >
                             <Stack
                                 direction="row"
@@ -192,9 +198,14 @@ export default function NetworkSwitcher({ handleCloseSidebar }: NetworkSwitcherP
                             value={network.name}
                             divider
                             onClick={() => {
+                                if (network.name === activeNetwork.name) return
                                 handleChangeNetwork(network.name)
                             }}
-                            sx={{ gap: '.6rem', justifyContent: 'space-between' }}
+                            sx={{
+                                gap: '.6rem',
+                                justifyContent: 'space-between',
+                                ...(network.name === activeNetwork.name && { cursor: 'auto' }),
+                            }}
                             data-cy={`network-name-${network.name}`}
                         >
                             <Typography variant="body2" component="span" noWrap>
diff --git a/src/components/Navbar/ThemeSwitcher.tsx b/src/components/Navbar/ThemeSwitcher.tsx
index 335d52d2..778d0a8e 100644
--- a/src/components/Navbar/ThemeSwitcher.tsx
+++ b/src/components/Navbar/ThemeSwitcher.tsx
@@ -1,12 +1,13 @@
-import { mdiWhiteBalanceSunny } from '@mdi/js'
-import Icon from '@mdi/react'
 import { Button, Typography, useTheme } from '@mui/material'
-import { useStore } from 'Explorer/useStore'
+import { getTheme, toggleTheme } from '../../redux/slices/theme'
+import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks'
+
+import Icon from '@mdi/react'
 import React from 'react'
+import { mdiWhiteBalanceSunny } from '@mdi/js'
 import store from 'wallet/store'
-import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks'
+import { useStore } from 'Explorer/useStore'
 import useWidth from '../../hooks/useWidth'
-import { getTheme, toggleTheme } from '../../redux/slices/theme'
 
 export default function ThemeSwitcher() {
     const { isDesktop, isMobile } = useWidth()
@@ -15,17 +16,19 @@ export default function ThemeSwitcher() {
     const currentTheme = useAppSelector(getTheme)
     const { changeTheme } = useStore()
     const auth = useAppSelector(state => state.appConfig.isAuth)
+
+    const handleChangeTheme = () => {
+        if (currentTheme === 'light') document.documentElement.setAttribute('data-theme', 'dark')
+        else document.documentElement.setAttribute('data-theme', 'light')
+        changeTheme(currentTheme === 'light' ? 'dark' : 'light')
+        store.commit('updateTheme')
+        dispatch(toggleTheme())
+    }
+
     return (
         <Button
             variant="text"
-            onClick={() => {
-                if (currentTheme === 'light')
-                    document.documentElement.setAttribute('data-theme', 'night')
-                else document.documentElement.setAttribute('data-theme', 'day')
-                changeTheme(currentTheme === 'light' ? 'dark' : 'light')
-                store.commit('updateTheme')
-                dispatch(toggleTheme())
-            }}
+            onClick={handleChangeTheme}
             startIcon={<Icon path={mdiWhiteBalanceSunny} size={1} />}
             disableRipple
             sx={{
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index ef2c3f65..7b0708d1 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -1,5 +1,3 @@
-import { mdiClose, mdiMenu, mdiWalletOutline } from '@mdi/js'
-import Icon from '@mdi/react'
 import {
     AppBar,
     Box,
@@ -10,22 +8,25 @@ import {
     Typography,
     useTheme,
 } from '@mui/material'
-import React, { useState } from 'react'
-import { useIdleTimer } from 'react-idle-timer'
-import { useNavigate } from 'react-router-dom'
-import store from 'wallet/store'
 import { DRAWER_WIDTH, TIMEOUT_DURATION } from '../../constants/apps-consts'
+import React, { useState } from 'react'
+import { mdiClose, mdiMenu, mdiWalletOutline } from '@mdi/js'
 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 Icon from '@mdi/react'
 import LoggedInAccount from './LoggedInAccount'
+import MHidden from '../@material-extend/MHidden'
+import MIconButton from '../@material-extend/MIconButton'
 import NetworkSwitcher from './NetworkSwitcher'
+import PlatformSwitcher from '../PlatformSwitcher'
 import ThemeSwitcher from './ThemeSwitcher'
+import { getActiveNetwork } from '../../redux/slices/network'
+import store from 'wallet/store'
+import { updateAccount } from '../../redux/slices/app-config'
+import { updateAuthStatus } from '../../redux/slices/utils'
+import { useIdleTimer } from 'react-idle-timer'
+import { useNavigate } from 'react-router-dom'
 
 export default function Navbar() {
     const theme = useTheme()
@@ -67,7 +68,7 @@ export default function Navbar() {
                 display: 'flex',
                 alignItems: 'center',
                 minHeight: '65px',
-                px: '1.5rem',
+                px: '1.5rem !important',
             }}
             position="fixed"
         >
diff --git a/src/helpers/walletStore.ts b/src/helpers/walletStore.ts
index 4d907963..acef9593 100644
--- a/src/helpers/walletStore.ts
+++ b/src/helpers/walletStore.ts
@@ -53,7 +53,7 @@ export function getEthAddress() {
     return store.state.activeWallet.ethAddress
 }
 
-export function getNameOfMultiSigWallet() {
+export function getNameOfWallet() {
     return store.state.activeWallet?.name
 }
 
diff --git a/src/hooks/useNetwork.ts b/src/hooks/useNetwork.ts
index 323e4743..c24484e3 100644
--- a/src/hooks/useNetwork.ts
+++ b/src/hooks/useNetwork.ts
@@ -1,18 +1,20 @@
 import {
     addNetworks,
     changeActiveNetwork,
+    changeLoading,
     changeNetworkStatus,
     getActiveNetwork,
     getNetworks,
     selectNetworkStatus,
 } from '@/redux/slices/network'
-import { useStore } from 'Explorer/useStore'
+import { updateApps, updateNotificationStatus, updateShowButton } from '../redux/slices/app-config'
+import { useAppDispatch, useAppSelector } from './reduxHooks'
 import { useEffect, useState } from 'react'
+
 import { AvaNetwork } from 'wallet/AvaNetwork'
-import store from 'wallet/store'
 import { Status } from '../@types'
-import { updateApps, updateNotificationStatus, updateShowButton } from '../redux/slices/app-config'
-import { useAppDispatch, useAppSelector } from './reduxHooks'
+import store from 'wallet/store'
+import { useStore } from 'Explorer/useStore'
 
 const useNetwork = (): {
     handleChangeNetwork: (arg: string) => void
@@ -22,6 +24,7 @@ const useNetwork = (): {
     handleCloseModal: () => void
     switchNetwork: (network: AvaNetwork) => Promise<void>
     status: Status
+    loading: boolean
     networks: AvaNetwork[]
     open: boolean
     edit: boolean
@@ -39,18 +42,19 @@ const useNetwork = (): {
     const networks: AvaNetwork[] = useAppSelector(getNetworks)
     const activeNetwork = useAppSelector<AvaNetwork>(getActiveNetwork)
     const status: Status = useAppSelector(selectNetworkStatus)
+    const loading = useAppSelector(state => state.network.loading)
 
     const { changeNetworkExplorer } = useStore()
 
     useEffect(() => {
-        if (selectedNetwork) {
-            handleChangeEvent()
-        }
+        if (selectedNetwork) handleChangeEvent()
+
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedNetwork])
 
     const switchNetwork = async (network: AvaNetwork) => {
         try {
+            dispatch(changeLoading(true))
             dispatch(changeNetworkStatus(Status.LOADING))
             if (store.state.activeWallet?.type === 'multisig') {
                 await store.dispatch('activateWallet', store.state.wallets[0])
@@ -69,17 +73,20 @@ const useNetwork = (): {
                     severity: 'success',
                 }),
             )
+            localStorage.setItem('selectedNetwork', network.name.toLowerCase())
         } catch (e) {
             store.state.Network.selectedNetwork = null
             dispatch(updateNotificationStatus({ message: 'Disconnected', severity: 'error' }))
             store.state.Network.status = 'disconnected'
             dispatch(changeNetworkStatus(Status.FAILED))
+            dispatch(changeLoading(false))
         } finally {
             let newSelectedNetwork = store.state.Network.selectedNetwork
                 ? store.state.Network.selectedNetwork
                 : network
             dispatch(changeActiveNetwork(newSelectedNetwork))
             changeNetworkExplorer(newSelectedNetwork)
+            dispatch(changeLoading(false))
         }
     }
     const handleChangeNetwork = (selected: string) => {
@@ -146,6 +153,7 @@ const useNetwork = (): {
         handleCloseModal,
         switchNetwork,
         status,
+        loading,
         networks,
         open,
         edit,
diff --git a/src/hooks/useWallet.ts b/src/hooks/useWallet.ts
new file mode 100644
index 00000000..de5e5967
--- /dev/null
+++ b/src/hooks/useWallet.ts
@@ -0,0 +1,22 @@
+import { getNameOfWallet, getPchainAddress } from '../helpers/walletStore'
+import { updatePchainAddress } from '../redux/slices/app-config'
+import { useAppDispatch } from './reduxHooks'
+
+const useWallet = () => {
+    const dispatch = useAppDispatch()
+
+    const updateStore = (type, params) => {
+        switch (type) {
+            case 'updateName':
+                dispatch(
+                    updatePchainAddress({
+                        address: getPchainAddress(),
+                        walletName: getNameOfWallet(),
+                    }),
+                )
+        }
+    }
+    return { updateStore }
+}
+
+export default useWallet
diff --git a/src/index.css b/src/index.css
index 77162045..2124af84 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,15 +1,40 @@
 :root {
     --border-radius-lg: 12px;
-    --border-radius-sm: 7px;
+    --border-radius-sm: 6px;
+    --spacing-space-md: 12px;
+    --spacing-space-base: 16px;
     --primary-btn-border-color: #149ded;
     --secondary-color: #149ded;
     --primary-border: solid 1px var(--primary-border-color);
     --secondary-border: solid 1px var(--secondary-border-color);
     --box-shadow: rgb(0 0 0 / 10%) 0px 0px 5px;
     --tooltip-bg: rgba(51, 65, 85, 0.92);
+    --slate-600: #475569;
+    --negative-background: #e5431f;
+    --white: #fff;
+    --camino-slate-slate-300: #cbd4e2;
+    --camino-slate-slate-600: #475569;
+    --camino-slate-slate-700: #334155;
+    --camino-slate-slate-800: #1e293b;
+    --camino-slate-slate-950: #020617;
+    --camino-brand-too-blue-to-be-true: #0085ff;
+    --camino-brand-too-blue-to-be-true-100: rgba(0, 133, 255, 0.25);
+    --camino-brand-error: #e5431f;
+    --camino-brand-error-100: rgba(229, 67, 31, 0.25);
+    --primary-font: 'Inter', sans-serif;
+    --camino-brand-primary: linear-gradient(90deg, #0085ff 0%, #b440fc 100%);
+    --tailwind-slate-slate-200: #e2e7f0;
+    --tailwind-slate-slate-300: #cbd4e2;
+    --tailwind-slate-slate-600: #475569;
+    --tailwind-slate-slate-900: #0f182a;
+    --tailwind-slate-white: #fff;
+    --spacing-space-sm: 8px;
+    --spacing-space-md: 12px;
+    --spacing-space-base: 16px;
+    --spacing-space-lg: 24px;
 }
 
-html[data-theme='day'] {
+html[data-theme='light'] {
     --bg: #f1f5f9;
     --bg-1: 255, 255, 255;
     --bg-light: #e2e8f0;
@@ -24,7 +49,7 @@ html[data-theme='day'] {
     --info: #2c7490;
     --info-1: 44, 116, 144;
     --bg-wallet: #f5f6fa;
-    --warning: #f19d38;
+    --warning: #e5a21f;
     --bg-wallet-light: #ffffff;
     --primary-border-color: rgba(203, 213, 225, 0.12);
     --secondary-border-color: #e2e8f0;
@@ -35,9 +60,22 @@ html[data-theme='day'] {
     --sidebar-background: #fff;
     --icon-color: #0f172a;
     --icon-color-light: #334155;
+    --camino-slate-slate-white: #ffffff;
+    --camino-info-border: rgba(0, 133, 255, 0.5);
+    --camino-info-background: rgba(0, 133, 255, 0.05);
+    --camino-positive-border: rgba(9, 222, 107, 0.5);
+    --camino-positive-background: rgba(9, 222, 107, 0.05);
+    --camino-warning-border: rgba(229, 162, 31, 0.5);
+    --camino-warning-background: rgba(229, 162, 31, 0.05);
+    --camino-negative-border: rgba(229, 67, 31, 0.5);
+    --camino-negative-background: rgba(229, 67, 31, 0.05);
+    --camino-warning-color: #334155;
+    --camino-alert-color: #334155;
+    --camino-success-color: rgba(24, 183, 40, 1);
+    --camino-error-color: rgba(229, 67, 31, 1);
 }
 
-html[data-theme='night'] {
+html[data-theme='dark'] {
     --bg: #0f172a;
     --bg-1: 36, 39, 41;
     --bg-light: #1e293b;
@@ -63,6 +101,28 @@ html[data-theme='night'] {
     --sidebar-background: #1e293b;
     --icon-color: #ffffff;
     --icon-color--light: #ffffff;
+    --camino-brand-too-blue-to-be-true: #0085ff;
+    --camino-info-border: rgba(0, 133, 255, 0.3);
+    --camino-info-background: rgba(0, 133, 255, 0.05);
+    --camino-positive-border: rgba(9, 222, 107, 0.3);
+    --camino-positive-background: rgba(9, 222, 107, 0.05);
+    --camino-warning-border: rgba(229, 162, 31, 0.3);
+    --camino-warning-background: rgba(229, 162, 31, 0.05);
+    --camino-negative-border: rgba(229, 67, 31, 0.3);
+    --camino-negative-background: rgba(229, 67, 31, 0.05);
+    --camino-warning-color: #cbd4e2;
+    --camino-alert-color: #cbd4e2;
+    --camino-success-color: rgba(9, 222, 107, 1);
+    --camino-error-color: rgba(229, 67, 31, 1);
+    --camino-slate-slate-950: #020617;
+    --camino-slate-slate-600: #475569;
+}
+body {
+    overflow: auto;
+    background-color: var(--bg) !important;
+    height: auto;
+    font-size: 16px !important;
+    padding-right: 0 !important;
 }
 
 #app {
@@ -72,8 +132,7 @@ html[data-theme='night'] {
     -moz-osx-font-smoothing: grayscale;
     text-align: left;
     color: var(--primary-color);
-    background-color: var(--bg) !important;
     font-family: 'Rubik', sans-serif;
     transition-duration: 0.2s;
     width: 100%;
-}
+}
\ No newline at end of file
diff --git a/src/layout/MainLayout.tsx b/src/layout/MainLayout.tsx
index 58b007bf..93503274 100644
--- a/src/layout/MainLayout.tsx
+++ b/src/layout/MainLayout.tsx
@@ -1,25 +1,36 @@
+import { Backdrop, CircularProgress, Paper, Typography } from '@mui/material'
+import { Box, Toolbar, useTheme } from '@mui/material'
 import React, { useState } from 'react'
-import Navbar from '../components/Navbar'
+import {
+    addNetworks,
+    changeActiveNetwork,
+    changeLoading,
+    changeNetworkStatus,
+} from '../redux/slices/network'
+
 import Footer from '../components/Footer'
-import store from 'wallet/store'
+import Navbar from '../components/Navbar'
+import Notifications from '../components/Notification'
 import { Status } from '../@types'
-import { useAppDispatch } from '../hooks/reduxHooks'
-import { addNetworks, changeActiveNetwork, changeNetworkStatus } from '../redux/slices/network'
+import { changeActiveApp } from '../redux/slices/app-config'
 import { matchNetworkStatus } from '../utils/componentsUtils'
-import { Box, Toolbar, useTheme } from '@mui/material'
+import store from 'wallet/store'
+import { useAppDispatch } from '../hooks/reduxHooks'
+import { useEffect } from 'react'
+import { useEffectOnce } from '../hooks/useEffectOnce'
 import { useLocation } from 'react-router-dom'
-import { changeActiveApp } from '../redux/slices/app-config'
+import useNetwork from '../hooks/useNetwork'
 import { useStore } from 'Explorer/useStore'
-import Notifications from '../components/Notification'
-import { useEffectOnce } from '../hooks/useEffectOnce'
 
 const MainLayout = ({ children }) => {
     const [loadNetworks, setLoadNetworks] = useState(true)
     const theme = useTheme()
     const dispatch = useAppDispatch()
     const { updateNetworks, changeNetworkExplorer } = useStore()
+    const { loading } = useNetwork()
     const location = useLocation()
     const init = async () => {
+        dispatch(changeLoading(true))
         if (location.pathname.split('/')[1] === 'wallet') dispatch(changeActiveApp('Wallet'))
         else if (location.pathname.split('/')[1] === 'explorer')
             dispatch(changeActiveApp('Explorer'))
@@ -39,36 +50,97 @@ const MainLayout = ({ children }) => {
         updateNetworks(networks)
         changeNetworkExplorer(selectedNetwork)
         setLoadNetworks(false)
+        dispatch(changeLoading(false))
     }
     useEffectOnce(() => {
         init()
     })
+
+    useEffect(() => {
+        const html = document.documentElement
+        if (loading || loadNetworks) html.style.overflow = 'hidden'
+        else html.style.overflow = 'auto'
+    }, [loading, loadNetworks])
+
     return (
-        <Box sx={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
-            <Navbar />
-            <Notifications />
-            <Toolbar
-                sx={{
-                    minHeight: '65px !important',
-                    p: '0px !important',
-                    [theme.breakpoints.up('md')]: { minHeight: '69px !important' },
-                }}
-            />
-            <Box
-                sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    flex: 1,
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    minHeight: 'calc(80vh - 69px)',
-                    padding: '0 1.5rem',
-                }}
-            >
-                {!loadNetworks && <>{children}</>}
+        <>
+            <Box sx={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
+                <Navbar />
+                <Notifications />
+                <Toolbar
+                    sx={{
+                        minHeight: '65px !important',
+                        p: '0px !important',
+                        [theme.breakpoints.up('md')]: { minHeight: '69px !important' },
+                    }}
+                />
+                <Box
+                    sx={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        flex: 1,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        minHeight: 'calc(80vh - 69px)',
+                        padding: '0 1.5rem',
+                    }}
+                >
+                    {!loadNetworks && <>{children}</>}
+                </Box>
+                <Footer />
             </Box>
-            <Footer />
-        </Box>
+            {(loading || loadNetworks) && (
+                <Backdrop
+                    sx={{ color: '#fff', zIndex: theme => theme.zIndex.drawer + 1 }}
+                    open={true}
+                >
+                    <Paper
+                        sx={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            justifyContent: 'space-between',
+                            position: 'fixed',
+                            padding: '20px',
+                            marginLeft: '10px',
+                            marginRight: '10px',
+                            minHeight: '200px',
+                            maxWidth: '500px',
+                        }}
+                    >
+                        <Typography
+                            variant="h4"
+                            gutterBottom
+                            sx={{
+                                fontSize: '1.25rem !important',
+                                mb: theme => theme.spacing(3),
+                                textAlign: 'center',
+                            }}
+                        >
+                            {!loadNetworks
+                                ? `Connecting to a new network, please wait.`
+                                : `Loading networks, please wait.`}
+                        </Typography>
+                        <Typography variant="caption" gutterBottom sx={{ textAlign: 'center' }}>
+                            This will only take a few seconds. Please do not close the window.
+                        </Typography>
+                        <Box
+                            sx={{
+                                width: '100%',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                mt: theme => theme.spacing(4),
+                            }}
+                        >
+                            <CircularProgress
+                                size={50}
+                                thickness={2}
+                                sx={{ color: 'var(--camino-brand-too-blue-to-be-true)' }}
+                            />
+                        </Box>
+                    </Paper>
+                </Backdrop>
+            )}
+        </>
     )
 }
 
diff --git a/src/layout/RenderApp.tsx b/src/layout/RenderApp.tsx
index 7550eede..d4078264 100644
--- a/src/layout/RenderApp.tsx
+++ b/src/layout/RenderApp.tsx
@@ -1,13 +1,13 @@
+import ExplorerApp from './ExplorerApp'
 import React from 'react'
-import { useAppSelector } from '../hooks/reduxHooks'
 import { RootState } from '../redux/store'
-import ExplorerApp from './ExplorerApp'
 import Wallet from './WalletApp'
+import { useAppSelector } from '../hooks/reduxHooks'
 
 const RenderApp = () => {
     const activeApp = useAppSelector((state: RootState) => state.appConfig.activeApp)
-    if (activeApp === 'blockexplorer') return <ExplorerApp />
-    else if (activeApp === 'wallet') return <Wallet />
+    if (activeApp === 'Explorer') return <ExplorerApp />
+    else if (activeApp === 'Wallet') return <Wallet />
     return <div>Not Yet Implemented</div>
 }
 
diff --git a/src/layout/RoutesSuite.tsx b/src/layout/RoutesSuite.tsx
index 429481ac..4819a02c 100644
--- a/src/layout/RoutesSuite.tsx
+++ b/src/layout/RoutesSuite.tsx
@@ -1,29 +1,34 @@
-import React, { useEffect, useState } from 'react'
 import { Navigate, Route, Routes, useNavigate } from 'react-router-dom'
+import React, { useEffect, useState } from 'react'
 
-import { useAppSelector } from '../hooks/reduxHooks'
-import { getActiveNetwork } from '../redux/slices/network'
 import AccessLayout from '../views/access'
-import MountAccessComponent from '../views/access/MountAccessComponent'
 import Create from '../views/create/Create'
+import CreateDepositsLayout from './CreateDepositLayout'
 import ExplorerApp from '../views/explorer/ExplorerApp'
 import LandingPage from '../views/landing/LandingPage'
 import Legal from '../views/legal/Legal'
 import LoginPage from '../views/login/LoginPage'
-import Partners from '../views/partners'
+import MountAccessComponent from '../views/access/MountAccessComponent'
 import MultisigWallet from '../views/settings/MultisigWallet'
-import Settings from '../views/settings/index'
-import Wallet from '../views/wallet/WalletApp'
-import CreateDepositsLayout from './CreateDepositLayout'
+import Partners from '../views/partners'
 import Protected from './Protected'
+import Settings from '../views/settings/index'
 import SettingsLayout from './SettingsLayout'
+import Wallet from '../views/wallet/WalletApp'
+import { changeActiveApp } from '../redux/slices/app-config'
+import { getActiveNetwork } from '../redux/slices/network'
+import { useAppSelector } from '../hooks/reduxHooks'
+import { useDispatch } from 'react-redux'
+import { useLocation } from 'react-router-dom'
 
 export default function RoutesSuite() {
+    const dispatch = useDispatch()
     const navigate = useNavigate()
     const activeNetwork = useAppSelector(getActiveNetwork)
+    const location = useLocation()
 
     const [lastUrlWithNewNetwork, setLastUrlWithNewNetwork] = useState('')
-    const [networkAliasToUrl, setNetworkAliasToUrl] = useState<string>('')
+    const [networkAliasToUrl, setNetworkAliasToUrl] = useState<string>('camino')
 
     useEffect(() => {
         if (activeNetwork) {
@@ -48,6 +53,18 @@ export default function RoutesSuite() {
         }
     }, [networkAliasToUrl]) // eslint-disable-line react-hooks/exhaustive-deps
 
+    useEffect(() => {
+        if (location.pathname.split('/')[1] === 'explorer') dispatch(changeActiveApp('Explorer'))
+        else if (
+            location.pathname.split('/')[1] === 'wallet' ||
+            location.pathname.split('/')[1] === 'login'
+        )
+            dispatch(changeActiveApp('Wallet'))
+        console.log('location changed', location.pathname.split('/')[1])
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [location])
+
     return (
         <>
             <Routes>
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
index 49b9ce68..cf23ec75 100644
--- a/src/layout/index.tsx
+++ b/src/layout/index.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 import MainLayout from './MainLayout'
-import ScrollToTop from '../components/ScrollToTop'
+import React from 'react'
 import RoutesSuite from './RoutesSuite'
+import ScrollToTop from '../components/ScrollToTop'
 
 export default function Layout() {
     return (
diff --git a/src/redux/slices/app-config.ts b/src/redux/slices/app-config.ts
index 67f89d4c..b5443195 100644
--- a/src/redux/slices/app-config.ts
+++ b/src/redux/slices/app-config.ts
@@ -10,6 +10,7 @@ interface InitialStateAppConfigType {
     apps: SuitePlatforms[]
     activeApp: number
     status: Status
+    walletName: string
     notificationStatus: boolean
     notificationMessage: string
     notificationSeverity: NotificationSeverityType
@@ -22,6 +23,7 @@ interface InitialStateAppConfigType {
 
 let initialState: InitialStateAppConfigType = {
     pChainAddress: '',
+    walletName: '',
     apps: APPS_CONSTS,
     activeApp: 0,
     status: Status.IDLE,
@@ -45,7 +47,9 @@ const appConfigSlice = createSlice({
             state.walletStore = payload
         },
         updatePchainAddress(state, { payload }) {
-            state.pChainAddress = payload
+            state.pChainAddress = payload.address[0]
+            state.walletName =
+                payload.walletName !== 'Singleton Wallet' ? payload.walletName : payload.address[0]
         },
         updateAccount(state, { payload }) {
             state.account = payload
@@ -124,6 +128,9 @@ export const getShowButton = (state: RootState) => state.appConfig.showButton
 // get PChainAddress
 export const getPChainAddress = (state: RootState) => state.appConfig.pChainAddress
 
+// getWalletName
+export const getWalletName = (state: RootState) => state.appConfig.walletName
+
 export const {
     changeActiveApp,
     updateValues,
diff --git a/src/redux/slices/network.ts b/src/redux/slices/network.ts
index de7e8560..bd313afe 100644
--- a/src/redux/slices/network.ts
+++ b/src/redux/slices/network.ts
@@ -1,6 +1,6 @@
-import { createSlice } from '@reduxjs/toolkit'
 import { RootState } from '../store'
 import { Status } from '../../@types'
+import { createSlice } from '@reduxjs/toolkit'
 
 export enum NetworkID {
     MAINNET = 1000,
@@ -25,12 +25,14 @@ interface InitialStateNetworkSlice {
     activeNetwork?: NetworkType
     networks: NetworkType[]
     status: Status
+    loading: boolean
 }
 
 let initialState: InitialStateNetworkSlice = {
     activeNetwork: undefined,
     networks: [],
     status: Status.IDLE,
+    loading: false,
 }
 
 const appConfigSlice = createSlice({
@@ -46,6 +48,9 @@ const appConfigSlice = createSlice({
         changeActiveNetwork: (state, { payload }) => {
             state.activeNetwork = payload
         },
+        changeLoading: (state, { payload }) => {
+            state.loading = payload
+        },
     },
 })
 
@@ -55,6 +60,9 @@ export const getActiveNetwork = (state: RootState) => state.network.activeNetwor
 export const getNetworks = (state: RootState) => state.network.networks
 // Select Network Status
 export const selectNetworkStatus = (state: RootState) => state.network.status
+// Select Loading Status
+export const selectLoadingStatus = (state: RootState) => state.network.loading
 
-export const { addNetworks, changeNetworkStatus, changeActiveNetwork } = appConfigSlice.actions
+export const { addNetworks, changeNetworkStatus, changeActiveNetwork, changeLoading } =
+    appConfigSlice.actions
 export default appConfigSlice.reducer
diff --git a/src/redux/slices/theme.ts b/src/redux/slices/theme.ts
index ccafdab7..f351e20e 100644
--- a/src/redux/slices/theme.ts
+++ b/src/redux/slices/theme.ts
@@ -5,14 +5,13 @@ interface ITheme {
 }
 
 const getThemeFromLocalStorage = () => {
-    return 'dark'
-    // let theme = localStorage.getItem("theme") || undefined;
-
-    // if (theme) return theme;
-    // else {
-    //   localStorage.setItem("theme", JSON.stringify("light"));
-    //   return "light";
-    // }
+    let theme = localStorage.getItem('theme') || undefined
+
+    if (theme) return theme
+    else {
+        localStorage.setItem('theme', 'light')
+        return 'light'
+    }
 }
 
 let initialState: ITheme = {
diff --git a/src/views/create/Create.tsx b/src/views/create/Create.tsx
index f0f4bdb7..f05ab708 100644
--- a/src/views/create/Create.tsx
+++ b/src/views/create/Create.tsx
@@ -1,9 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+
+import { changeActiveApp } from '../../redux/slices/app-config'
 import { mountCreateWallet } from 'wallet/mountCreate'
-import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks'
-import { getActiveApp, selectAuthStatus, updateValues } from '../../redux/slices/app-config'
 import { updateAuthStatus } from '../../redux/slices/utils'
+import { updateValues } from '../../redux/slices/app-config'
+import { useAppDispatch } from '../../hooks/reduxHooks'
+import { useNavigate } from 'react-router-dom'
 
 const CreateWallet = () => {
     const ref = useRef(null)
@@ -14,6 +16,8 @@ const CreateWallet = () => {
         dispatch(updateValues(updateStore))
         if (updateStore?.isAuth) {
             dispatch(updateAuthStatus(updateStore?.isAuth))
+            dispatch(changeActiveApp('Wallet'))
+            navigate('/wallet')
         }
     }, [updateStore]) // eslint-disable-line react-hooks/exhaustive-deps
     useEffect(() => {
@@ -39,16 +43,6 @@ const CreateWallet = () => {
 }
 
 export default function Create() {
-    const app = useAppSelector(getActiveApp)
-    const auth = useAppSelector(selectAuthStatus)
-    const navigate = useNavigate()
-    useEffect(() => {
-        if (auth) {
-            if (app === 'wallet') {
-                navigate('/wallet')
-            } else navigate('/explorer')
-        }
-    }, [auth]) // eslint-disable-line react-hooks/exhaustive-deps
     return (
         <React.Suspense fallback={<div>Loading...</div>}>
             <CreateWallet />
diff --git a/src/views/landing/LandingPage.tsx b/src/views/landing/LandingPage.tsx
index 284197c2..6a494f01 100644
--- a/src/views/landing/LandingPage.tsx
+++ b/src/views/landing/LandingPage.tsx
@@ -1,11 +1,12 @@
 import { Box, Grid, Typography } from '@mui/material'
+import { changeActiveApp, getAllApps } from '../../redux/slices/app-config'
+
+import LandingPageAppWidget from './LandingPageAppWidget'
 import React from 'react'
+import { getActiveNetwork } from '../../redux/slices/network'
+import { useAppSelector } from '../../hooks/reduxHooks'
 import { useDispatch } from 'react-redux'
 import { useNavigate } from 'react-router'
-import { useAppSelector } from '../../hooks/reduxHooks'
-import { changeActiveApp, getAllApps } from '../../redux/slices/app-config'
-import { getActiveNetwork } from '../../redux/slices/network'
-import LandingPageAppWidget from './LandingPageAppWidget'
 
 export default function LandingPage() {
     const activeNetwork = useAppSelector(getActiveNetwork)
@@ -24,27 +25,26 @@ export default function LandingPage() {
     }
 
     return (
-        <Box>
+        <Box sx={{ py: 4 }}>
             <Box>
-                <Typography textAlign={'center'} variant="h2">
-                    {'Camino Application Suite'}
+                <Typography textAlign="center" variant="h2">
+                    Camino Application Suite
                 </Typography>
                 <Typography textAlign={'center'}>
-                    {
-                        'The Camino Application Suite unifies all network wide applications of the Camino Network'
-                    }
+                    The Camino Application Suite unifies all network wide applications of the Camino
+                    Network
                 </Typography>
             </Box>
 
             <Box mt={4}>
-                <Grid sx={{ flexGrow: 1 }} container alignItems={'stretch'} spacing={2}>
+                <Grid sx={{ flexGrow: 1 }} container alignItems="stretch" spacing={2}>
                     {allApps?.map((app, index) => {
                         if (
                             !app.hidden &&
                             (app.private === false || (app.name === 'Foundation' && isAuth))
                         )
                             return (
-                                <Grid item key={index} xs={12} sm={12} md>
+                                <Grid item key={index} xs={12} sm={6} md>
                                     <LandingPageAppWidget
                                         name={app.name}
                                         description={app.subText}
diff --git a/src/views/wallet/WalletApp.tsx b/src/views/wallet/WalletApp.tsx
index 250938ec..4ea15d85 100644
--- a/src/views/wallet/WalletApp.tsx
+++ b/src/views/wallet/WalletApp.tsx
@@ -4,6 +4,7 @@ import { mount } from 'wallet/mountApp'
 import { updateAssets } from '../../helpers/walletStore'
 import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks'
 import { useEffectOnce } from '../../hooks/useEffectOnce'
+import useWallet from '../../hooks/useWallet'
 import {
     updateAccount,
     updateNotificationStatus,
@@ -12,32 +13,33 @@ import {
 } from '../../redux/slices/app-config'
 import { updateAuthStatus } from '../../redux/slices/utils'
 const LoadWallet = () => {
-    const [updateStore, setUpdateStore] = useState(null)
+    const [walletStore, setUpdateStore] = useState(null)
     const [fetch, setFetch] = useState(false)
     const [logOut, setLogOut] = useState(false)
     const dispatch = useAppDispatch()
     const ref = useRef(null)
     const navigate = useNavigate()
-
     const dispatchNotification = ({ message, type }) =>
         dispatch(updateNotificationStatus({ message, severity: type }))
     const setAccount = account => dispatch(updateAccount(account))
     useEffect(() => {
-        dispatch(updateValues(updateStore))
-        if (updateStore) dispatch(updateAuthStatus(true))
-    }, [updateStore]) // eslint-disable-line react-hooks/exhaustive-deps
+        dispatch(updateValues(walletStore))
+        if (walletStore) dispatch(updateAuthStatus(true))
+    }, [walletStore]) // eslint-disable-line react-hooks/exhaustive-deps
 
     useEffect(() => {
-        dispatch(updateValues(updateStore))
+        dispatch(updateValues(walletStore))
     }, [logOut]) // eslint-disable-line react-hooks/exhaustive-deps
     const updateShowAlias = () => dispatch(updateShowButton())
     const fetchUTXOs = async () => {
         await updateAssets()
         setFetch(true)
     }
+    const { updateStore } = useWallet()
     useEffect(() => {
         if (fetch)
             mount(ref.current, {
+                updateStore,
                 setUpdateStore,
                 setLogOut,
                 setAccount,
