diff --git a/nym-wallet/src/components/Nav.tsx b/nym-wallet/src/components/Nav.tsx
index ccb1dcd10d..8d28658443 100644
--- a/nym-wallet/src/components/Nav.tsx
+++ b/nym-wallet/src/components/Nav.tsx
@@ -28,18 +28,18 @@ export const Nav = () => {
       Icon: ArrowBack,
       onClick: handleShowReceiveModal,
     },
-    {
-      label: 'Bonding',
-      route: '/bonding',
-      Icon: Bonding,
-      onClick: () => navigate('/bonding'),
-    },
     {
       label: 'Delegation',
       route: '/delegation',
       Icon: Delegate,
       onClick: () => navigate('/delegation'),
     },
+    {
+      label: 'Bonding',
+      route: '/bonding',
+      Icon: Bonding,
+      onClick: () => navigate('/bonding'),
+    },
     {
       label: 'Docs',
       route: '/admin',
diff --git a/nym-wallet/src/layouts/AppLayout.tsx b/nym-wallet/src/layouts/AppLayout.tsx
index 481acd00ca..0f2b77a5cb 100644
--- a/nym-wallet/src/layouts/AppLayout.tsx
+++ b/nym-wallet/src/layouts/AppLayout.tsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { NymWordmark } from '@nymproject/react/logo/NymWordmark';
-import { Box, Container } from '@mui/material';
+import { Box, Container, Typography } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { AppContext } from 'src/context';
 import { AppBar, LoadingPage, Nav } from '../components';
@@ -39,9 +39,9 @@ export const ApplicationLayout: React.FC = ({ children }) => {
             <Nav />
           </Box>
           {appVersion && (
-            <Box color="#888" ml={5} mt={8}>
+            <Typography sx={{ color: (t) => t.palette.grey[500], fontSize: 14, ml: 5, mt: 8 }}>
               Version {appVersion}
-            </Box>
+            </Typography>
           )}
         </Box>
         <Container maxWidth="xl">