diff --git a/nym-wallet/src/pages/bonding/Bonding.tsx b/nym-wallet/src/pages/bonding/Bonding.tsx
new file mode 100644
index 0000000000..519b491b20
--- /dev/null
+++ b/nym-wallet/src/pages/bonding/Bonding.tsx
@@ -0,0 +1,255 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { FeeDetails } from '@nymproject/types';
+import { TPoolOption } from 'src/components';
+import { Bond } from 'src/components/Bonding/Bond';
+import { BondedMixnode } from 'src/components/Bonding/BondedMixnode';
+import { TBondedMixnodeActions } from 'src/components/Bonding/BondedMixnodeActions';
+import { BondGatewayModal } from 'src/components/Bonding/modals/BondGatewayModal';
+import { BondMixnodeModal } from 'src/components/Bonding/modals/BondMixnodeModal';
+import { ConfirmationDetailProps, ConfirmationDetailsModal } from 'src/components/Bonding/modals/ConfirmationModal';
+import { NodeSettings } from 'src/components/Bonding/modals/NodeSettingsModal';
+import { UnbondModal } from 'src/components/Bonding/modals/UnbondModal';
+import { ErrorModal } from 'src/components/Modals/ErrorModal';
+import { LoadingModal } from 'src/components/Modals/LoadingModal';
+import { AppContext, urls } from 'src/context/main';
+import { isGateway, isMixnode, TBondGatewayArgs, TBondMixNodeArgs } from 'src/types';
+import { BondedGateway } from 'src/components/Bonding/BondedGateway';
+import { RedeemRewardsModal } from 'src/components/Bonding/modals/RedeemRewardsModal';
+import { CompoundRewardsModal } from 'src/components/Bonding/modals/CompoundRewardsModal';
+import { BondingContextProvider, useBondingContext } from '../../context';
+import { Box, Button } from '@mui/material';
+
+const Bonding = () => {
+  const [showModal, setShowModal] = useState<
+    'bond-mixnode' | 'bond-gateway' | 'bond-more' | 'unbond' | 'redeem' | 'compound' | 'node-settings'
+  >();
+  const [confirmationDetails, setConfirmationDetails] = useState<ConfirmationDetailProps>();
+
+  const {
+    network,
+    clientDetails,
+    userBalance: { originalVesting },
+  } = useContext(AppContext);
+
+  const {
+    bondedNode,
+    bondMixnode,
+    bondGateway,
+    unbond,
+    updateMixnode,
+    redeemRewards,
+    compoundRewards,
+    isLoading,
+    checkOwnership,
+  } = useBondingContext();
+
+  const navigate = useNavigate();
+
+  const handleCloseModal = async () => {
+    setShowModal(undefined);
+    await checkOwnership();
+  };
+
+  const handleError = (error: string) => {
+    setShowModal(undefined);
+    setConfirmationDetails({
+      status: 'error',
+      title: 'An error occurred',
+      subtitle: error,
+    });
+  };
+
+  const handleBondMixnode = async (data: TBondMixNodeArgs, tokenPool: TPoolOption) => {
+    setShowModal(undefined);
+    const tx = await bondMixnode(data, tokenPool);
+    setConfirmationDetails({
+      status: 'success',
+      title: 'Bond successful',
+      txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`,
+    });
+    return undefined;
+  };
+
+  const handleBondGateway = async (data: TBondGatewayArgs, tokenPool: TPoolOption) => {
+    setShowModal(undefined);
+    const tx = await bondGateway(data, tokenPool);
+    setConfirmationDetails({
+      status: 'success',
+      title: 'Bond successful',
+      txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`,
+    });
+  };
+
+  const handleUnbond = async (fee?: FeeDetails) => {
+    setShowModal(undefined);
+    const tx = await unbond(fee);
+    setConfirmationDetails({
+      status: 'success',
+      title: 'Unbond successful',
+      txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`,
+    });
+  };
+
+  const handleUpdateProfitMargin = async (profitMargin: number, fee?: FeeDetails) => {
+    setShowModal(undefined);
+    const tx = await updateMixnode(profitMargin, fee);
+    setConfirmationDetails({
+      status: 'success',
+      title: 'Profit margin update successful',
+      txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`,
+    });
+  };
+
+  const handleRedeemReward = async (fee?: FeeDetails) => {
+    setShowModal(undefined);
+    const tx = await redeemRewards(fee);
+    setConfirmationDetails({
+      status: 'success',
+      title: 'Rewards redeemed successfully',
+      txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`,
+    });
+  };
+
+  const handleCompoundReward = async (fee?: FeeDetails) => {
+    setShowModal(undefined);
+    const tx = await compoundRewards(fee);
+    setConfirmationDetails({
+      status: 'success',
+      title: 'Rewards compounded successfully',
+      txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`,
+    });
+    return undefined;
+  };
+
+  const handleBondedMixnodeAction = (action: TBondedMixnodeActions) => {
+    switch (action) {
+      case 'bondMore': {
+        setShowModal('bond-more');
+        break;
+      }
+      case 'unbond': {
+        setShowModal('unbond');
+        break;
+      }
+      case 'redeem': {
+        setShowModal('redeem');
+        break;
+      }
+      case 'compound': {
+        setShowModal('compound');
+        break;
+      }
+      case 'nodeSettings': {
+        setShowModal('node-settings');
+        break;
+      }
+      default: {
+        return undefined;
+      }
+    }
+    return undefined;
+  };
+
+  return (
+    <Box sx={{ mt: 4 }}>
+      <Button onClick={() => navigate('/bonding/node-settings')}>Open Settings</Button>
+      {!bondedNode && <Bond disabled={isLoading} onBond={() => setShowModal('bond-mixnode')} />}
+
+      {bondedNode && isMixnode(bondedNode) && (
+        <BondedMixnode
+          mixnode={bondedNode}
+          network={network}
+          onActionSelect={(action) => handleBondedMixnodeAction(action)}
+        />
+      )}
+
+      {bondedNode && isGateway(bondedNode) && (
+        <BondedGateway gateway={bondedNode} onActionSelect={handleBondedMixnodeAction} network={network} />
+      )}
+      {showModal === 'bond-mixnode' && (
+        <BondMixnodeModal
+          denom={clientDetails?.display_mix_denom || 'nym'}
+          hasVestingTokens={Boolean(originalVesting)}
+          onBondMixnode={handleBondMixnode}
+          onSelectNodeType={() => setShowModal('bond-gateway')}
+          onClose={() => setShowModal(undefined)}
+          onError={handleError}
+        />
+      )}
+
+      {showModal === 'bond-gateway' && (
+        <BondGatewayModal
+          denom={clientDetails?.display_mix_denom || 'nym'}
+          hasVestingTokens={Boolean(originalVesting)}
+          onBondGateway={handleBondGateway}
+          onSelectNodeType={() => setShowModal('bond-mixnode')}
+          onClose={() => setShowModal(undefined)}
+          onError={handleError}
+        />
+      )}
+
+      {showModal === 'unbond' && bondedNode && (
+        <UnbondModal
+          node={bondedNode}
+          onClose={() => setShowModal(undefined)}
+          onConfirm={handleUnbond}
+          onError={handleError}
+        />
+      )}
+
+      {showModal === 'redeem' && bondedNode && isMixnode(bondedNode) && (
+        <RedeemRewardsModal
+          node={bondedNode}
+          onClose={() => setShowModal(undefined)}
+          onConfirm={handleRedeemReward}
+          onError={handleError}
+        />
+      )}
+
+      {showModal === 'compound' && bondedNode && isMixnode(bondedNode) && (
+        <CompoundRewardsModal
+          node={bondedNode}
+          onClose={() => setShowModal(undefined)}
+          onConfirm={handleCompoundReward}
+          onError={handleError}
+        />
+      )}
+
+      {showModal === 'node-settings' && bondedNode && isMixnode(bondedNode) && (
+        <NodeSettings
+          onConfirm={handleUpdateProfitMargin}
+          onClose={() => setShowModal(undefined)}
+          onError={handleError}
+          currentPm={bondedNode.profitMargin}
+          isVesting={Boolean(bondedNode.proxy)}
+        />
+      )}
+
+      {confirmationDetails && confirmationDetails.status === 'success' && (
+        <ConfirmationDetailsModal
+          title={confirmationDetails.title}
+          subtitle={confirmationDetails.subtitle || 'This operation can take up to one hour to process'}
+          status={confirmationDetails.status}
+          txUrl={confirmationDetails.txUrl}
+          onClose={() => {
+            setConfirmationDetails(undefined);
+            handleCloseModal();
+          }}
+        />
+      )}
+
+      {confirmationDetails && confirmationDetails.status === 'error' && (
+        <ErrorModal open message={confirmationDetails.subtitle} onClose={() => setConfirmationDetails(undefined)} />
+      )}
+
+      {isLoading && <LoadingModal />}
+    </Box>
+  );
+};
+
+export const BondingPage = () => (
+  <BondingContextProvider>
+    <Bonding />
+  </BondingContextProvider>
+);
diff --git a/nym-wallet/src/pages/bonding/BondingPage.stories.tsx b/nym-wallet/src/pages/bonding/BondingPage.stories.tsx
index ede7eaa20a..1a2caa1f2e 100644
--- a/nym-wallet/src/pages/bonding/BondingPage.stories.tsx
+++ b/nym-wallet/src/pages/bonding/BondingPage.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BondingPage } from './index';
+import { BondingPage } from './Bonding';
 import { MockBondingContextProvider } from '../../context/mocks/bonding';
 
 export default {
diff --git a/nym-wallet/src/pages/bonding/index.tsx b/nym-wallet/src/pages/bonding/index.tsx
index 519b491b20..1e98989887 100644
--- a/nym-wallet/src/pages/bonding/index.tsx
+++ b/nym-wallet/src/pages/bonding/index.tsx
@@ -1,255 +1,2 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { FeeDetails } from '@nymproject/types';
-import { TPoolOption } from 'src/components';
-import { Bond } from 'src/components/Bonding/Bond';
-import { BondedMixnode } from 'src/components/Bonding/BondedMixnode';
-import { TBondedMixnodeActions } from 'src/components/Bonding/BondedMixnodeActions';
-import { BondGatewayModal } from 'src/components/Bonding/modals/BondGatewayModal';
-import { BondMixnodeModal } from 'src/components/Bonding/modals/BondMixnodeModal';
-import { ConfirmationDetailProps, ConfirmationDetailsModal } from 'src/components/Bonding/modals/ConfirmationModal';
-import { NodeSettings } from 'src/components/Bonding/modals/NodeSettingsModal';
-import { UnbondModal } from 'src/components/Bonding/modals/UnbondModal';
-import { ErrorModal } from 'src/components/Modals/ErrorModal';
-import { LoadingModal } from 'src/components/Modals/LoadingModal';
-import { AppContext, urls } from 'src/context/main';
-import { isGateway, isMixnode, TBondGatewayArgs, TBondMixNodeArgs } from 'src/types';
-import { BondedGateway } from 'src/components/Bonding/BondedGateway';
-import { RedeemRewardsModal } from 'src/components/Bonding/modals/RedeemRewardsModal';
-import { CompoundRewardsModal } from 'src/components/Bonding/modals/CompoundRewardsModal';
-import { BondingContextProvider, useBondingContext } from '../../context';
-import { Box, Button } from '@mui/material';
-
-const Bonding = () => {
-  const [showModal, setShowModal] = useState<
-    'bond-mixnode' | 'bond-gateway' | 'bond-more' | 'unbond' | 'redeem' | 'compound' | 'node-settings'
-  >();
-  const [confirmationDetails, setConfirmationDetails] = useState<ConfirmationDetailProps>();
-
-  const {
-    network,
-    clientDetails,
-    userBalance: { originalVesting },
-  } = useContext(AppContext);
-
-  const {
-    bondedNode,
-    bondMixnode,
-    bondGateway,
-    unbond,
-    updateMixnode,
-    redeemRewards,
-    compoundRewards,
-    isLoading,
-    checkOwnership,
-  } = useBondingContext();
-
-  const navigate = useNavigate();
-
-  const handleCloseModal = async () => {
-    setShowModal(undefined);
-    await checkOwnership();
-  };
-
-  const handleError = (error: string) => {
-    setShowModal(undefined);
-    setConfirmationDetails({
-      status: 'error',
-      title: 'An error occurred',
-      subtitle: error,
-    });
-  };
-
-  const handleBondMixnode = async (data: TBondMixNodeArgs, tokenPool: TPoolOption) => {
-    setShowModal(undefined);
-    const tx = await bondMixnode(data, tokenPool);
-    setConfirmationDetails({
-      status: 'success',
-      title: 'Bond successful',
-      txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`,
-    });
-    return undefined;
-  };
-
-  const handleBondGateway = async (data: TBondGatewayArgs, tokenPool: TPoolOption) => {
-    setShowModal(undefined);
-    const tx = await bondGateway(data, tokenPool);
-    setConfirmationDetails({
-      status: 'success',
-      title: 'Bond successful',
-      txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`,
-    });
-  };
-
-  const handleUnbond = async (fee?: FeeDetails) => {
-    setShowModal(undefined);
-    const tx = await unbond(fee);
-    setConfirmationDetails({
-      status: 'success',
-      title: 'Unbond successful',
-      txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`,
-    });
-  };
-
-  const handleUpdateProfitMargin = async (profitMargin: number, fee?: FeeDetails) => {
-    setShowModal(undefined);
-    const tx = await updateMixnode(profitMargin, fee);
-    setConfirmationDetails({
-      status: 'success',
-      title: 'Profit margin update successful',
-      txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`,
-    });
-  };
-
-  const handleRedeemReward = async (fee?: FeeDetails) => {
-    setShowModal(undefined);
-    const tx = await redeemRewards(fee);
-    setConfirmationDetails({
-      status: 'success',
-      title: 'Rewards redeemed successfully',
-      txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`,
-    });
-  };
-
-  const handleCompoundReward = async (fee?: FeeDetails) => {
-    setShowModal(undefined);
-    const tx = await compoundRewards(fee);
-    setConfirmationDetails({
-      status: 'success',
-      title: 'Rewards compounded successfully',
-      txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`,
-    });
-    return undefined;
-  };
-
-  const handleBondedMixnodeAction = (action: TBondedMixnodeActions) => {
-    switch (action) {
-      case 'bondMore': {
-        setShowModal('bond-more');
-        break;
-      }
-      case 'unbond': {
-        setShowModal('unbond');
-        break;
-      }
-      case 'redeem': {
-        setShowModal('redeem');
-        break;
-      }
-      case 'compound': {
-        setShowModal('compound');
-        break;
-      }
-      case 'nodeSettings': {
-        setShowModal('node-settings');
-        break;
-      }
-      default: {
-        return undefined;
-      }
-    }
-    return undefined;
-  };
-
-  return (
-    <Box sx={{ mt: 4 }}>
-      <Button onClick={() => navigate('/bonding/node-settings')}>Open Settings</Button>
-      {!bondedNode && <Bond disabled={isLoading} onBond={() => setShowModal('bond-mixnode')} />}
-
-      {bondedNode && isMixnode(bondedNode) && (
-        <BondedMixnode
-          mixnode={bondedNode}
-          network={network}
-          onActionSelect={(action) => handleBondedMixnodeAction(action)}
-        />
-      )}
-
-      {bondedNode && isGateway(bondedNode) && (
-        <BondedGateway gateway={bondedNode} onActionSelect={handleBondedMixnodeAction} network={network} />
-      )}
-      {showModal === 'bond-mixnode' && (
-        <BondMixnodeModal
-          denom={clientDetails?.display_mix_denom || 'nym'}
-          hasVestingTokens={Boolean(originalVesting)}
-          onBondMixnode={handleBondMixnode}
-          onSelectNodeType={() => setShowModal('bond-gateway')}
-          onClose={() => setShowModal(undefined)}
-          onError={handleError}
-        />
-      )}
-
-      {showModal === 'bond-gateway' && (
-        <BondGatewayModal
-          denom={clientDetails?.display_mix_denom || 'nym'}
-          hasVestingTokens={Boolean(originalVesting)}
-          onBondGateway={handleBondGateway}
-          onSelectNodeType={() => setShowModal('bond-mixnode')}
-          onClose={() => setShowModal(undefined)}
-          onError={handleError}
-        />
-      )}
-
-      {showModal === 'unbond' && bondedNode && (
-        <UnbondModal
-          node={bondedNode}
-          onClose={() => setShowModal(undefined)}
-          onConfirm={handleUnbond}
-          onError={handleError}
-        />
-      )}
-
-      {showModal === 'redeem' && bondedNode && isMixnode(bondedNode) && (
-        <RedeemRewardsModal
-          node={bondedNode}
-          onClose={() => setShowModal(undefined)}
-          onConfirm={handleRedeemReward}
-          onError={handleError}
-        />
-      )}
-
-      {showModal === 'compound' && bondedNode && isMixnode(bondedNode) && (
-        <CompoundRewardsModal
-          node={bondedNode}
-          onClose={() => setShowModal(undefined)}
-          onConfirm={handleCompoundReward}
-          onError={handleError}
-        />
-      )}
-
-      {showModal === 'node-settings' && bondedNode && isMixnode(bondedNode) && (
-        <NodeSettings
-          onConfirm={handleUpdateProfitMargin}
-          onClose={() => setShowModal(undefined)}
-          onError={handleError}
-          currentPm={bondedNode.profitMargin}
-          isVesting={Boolean(bondedNode.proxy)}
-        />
-      )}
-
-      {confirmationDetails && confirmationDetails.status === 'success' && (
-        <ConfirmationDetailsModal
-          title={confirmationDetails.title}
-          subtitle={confirmationDetails.subtitle || 'This operation can take up to one hour to process'}
-          status={confirmationDetails.status}
-          txUrl={confirmationDetails.txUrl}
-          onClose={() => {
-            setConfirmationDetails(undefined);
-            handleCloseModal();
-          }}
-        />
-      )}
-
-      {confirmationDetails && confirmationDetails.status === 'error' && (
-        <ErrorModal open message={confirmationDetails.subtitle} onClose={() => setConfirmationDetails(undefined)} />
-      )}
-
-      {isLoading && <LoadingModal />}
-    </Box>
-  );
-};
-
-export const BondingPage = () => (
-  <BondingContextProvider>
-    <Bonding />
-  </BondingContextProvider>
-);
+export * from './Bonding';
+export * from './node-settings';
diff --git a/nym-wallet/src/pages/bonding/node-settings/general-settings/InfoSettings.tsx b/nym-wallet/src/pages/bonding/node-settings/general-settings/InfoSettings.tsx
new file mode 100644
index 0000000000..553912c52a
--- /dev/null
+++ b/nym-wallet/src/pages/bonding/node-settings/general-settings/InfoSettings.tsx
@@ -0,0 +1,96 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { Box, Button, Divider, Typography, TextField, Grid } from '@mui/material';
+
+const ModifiedTextField = ({ field }: { field: { id: string; title: string; value: string } }) => {
+  return (
+    <Box>
+      <Typography>{field.title}</Typography>
+      <TextField
+        type="input"
+        value={field.value}
+        onChange={(e) => console.log(`Field ${field.id} has change`, e.target.value)}
+        autoFocus
+        fullWidth
+      />
+    </Box>
+  );
+};
+
+export const InfoSettings = ({ onSaveChanges }: { onSaveChanges: () => void }) => {
+  const [valueChanged, setValueChanged] = useState<boolean>(false);
+  const [mixPortValue, setMixPortValue] = useState<string>('1789');
+
+  useEffect(() => {
+    console.log(Object.entries(portSettings));
+  }, []);
+  const portSettings = [
+    { id: 'mixPort', title: 'Mix port', value: '1789' },
+    { id: 'verlocPort', title: 'Verloc Port', value: '1790' },
+    { id: 'httpPort', title: 'HTTP Port', value: '8000' },
+  ];
+
+  const hostSettings = [{ id: 'host', title: 'Host', value: '95.216.92.229' }];
+  const versionSettings = [{ id: 'version', title: 'Version', value: '95.216.92.229' }];
+  return (
+    <Box sx={{ width: 0.78 }}>
+      <Grid container direction="column">
+        <Grid
+          item
+          container
+          direction="row"
+          alignItems="left"
+          justifyContent="space-between"
+          flexWrap="nowrap"
+          padding={3}
+        >
+          <Grid item direction="column">
+            <Typography>Port</Typography>
+            <Typography>Change profit margin of your node</Typography>
+          </Grid>
+          <Grid spacing={3} item container alignItems="center" maxWidth="320px">
+            {portSettings.map((item) => (
+              <Grid item width={1} spacing={3}>
+                <TextField
+                  type="input"
+                  label={item.title}
+                  value={item.value}
+                  onChange={(e) => console.log(`Field ${item.id} has change`, e.target.value)}
+                  autoFocus
+                  fullWidth
+                />
+              </Grid>
+            ))}
+          </Grid>
+        </Grid>
+        <Divider flexItem />
+        <Box display="flex">
+          <Box display="flex" flexDirection="column">
+            <Typography>Host</Typography>
+            <Typography>Lock wallet after certain time</Typography>
+          </Box>
+          <Box>
+            {hostSettings.map((item) => (
+              <ModifiedTextField field={item} />
+            ))}
+          </Box>
+        </Box>
+        <Divider flexItem />
+        <Box display="flex">
+          <Box display="flex" flexDirection="column">
+            <Typography>Version</Typography>
+            <Typography>Lock wallet after certain time</Typography>
+          </Box>
+          <Box>
+            {versionSettings.map((item) => (
+              <ModifiedTextField field={item} />
+            ))}
+          </Box>
+        </Box>
+        <Divider flexItem />
+        <Button variant="contained" disabled={!valueChanged} onClick={onSaveChanges}>
+          Save all changes
+        </Button>
+      </Grid>
+    </Box>
+  );
+};
diff --git a/nym-wallet/src/pages/bonding/node-settings/general-settings/ParametersSettings.tsx b/nym-wallet/src/pages/bonding/node-settings/general-settings/ParametersSettings.tsx
new file mode 100644
index 0000000000..dcce36bf27
--- /dev/null
+++ b/nym-wallet/src/pages/bonding/node-settings/general-settings/ParametersSettings.tsx
@@ -0,0 +1,62 @@
+import React, { useContext, useEffect } from 'react';
+import { Alert, Grid, Typography } from '@mui/material';
+import { Link } from '@nymproject/react/link/Link';
+import { NymCard, ClientAddress } from '../../../../components';
+import { AppContext, urls } from '../../../../context/main';
+
+export const ParametersSettings = ({
+  onChange,
+  onSaveChanges,
+}: {
+  onChange: () => void;
+  onSaveChanges: () => void;
+}) => {
+  const { userBalance, clientDetails, network } = useContext(AppContext);
+
+  useEffect(() => {
+    userBalance.fetchBalance();
+  }, []);
+
+  return (
+    <NymCard
+      title="Balance"
+      data-testid="check-balance"
+      borderless
+      Action={<ClientAddress withCopy showEntireAddress />}
+    >
+      <Grid container direction="column" spacing={2}>
+        <Grid item>
+          {userBalance.error && (
+            <Alert severity="error" data-testid="error-refresh" sx={{ p: 2 }}>
+              {userBalance.error}
+            </Alert>
+          )}
+          {!userBalance.error && (
+            <Typography
+              data-testid="refresh-success"
+              sx={{
+                color: 'text.primary',
+                textTransform: 'uppercase',
+                fontWeight: (theme) => (theme.palette.mode === 'light' ? '600' : '400'),
+                fontSize: 28,
+              }}
+              variant="h5"
+            >
+              {userBalance.balance?.printable_balance}
+            </Typography>
+          )}
+        </Grid>
+        {network && (
+          <Grid item>
+            <Link
+              href={`${urls(network).blockExplorer}/account/${clientDetails?.client_address}`}
+              target="_blank"
+              text="Last transactions"
+              fontSize={14}
+            />
+          </Grid>
+        )}
+      </Grid>
+    </NymCard>
+  );
+};
diff --git a/nym-wallet/src/pages/bonding/node-settings/general-settings/index.tsx b/nym-wallet/src/pages/bonding/node-settings/general-settings/index.tsx
new file mode 100644
index 0000000000..5abf66ba07
--- /dev/null
+++ b/nym-wallet/src/pages/bonding/node-settings/general-settings/index.tsx
@@ -0,0 +1,38 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { Box, Button, Divider, Grid } from '@mui/material';
+import { InfoSettings } from './InfoSettings';
+import { ParametersSettings } from './ParametersSettings';
+import { AppContext } from '../../../../context/main';
+
+const nodeGeneralNav = ['Info', 'Parameters'];
+
+export const NodeGeneralSettings = ({ onSaveChanges }: { onSaveChanges: () => void }) => {
+  const [settingsCard, setSettingsCard] = useState<string>(nodeGeneralNav[0]);
+
+  const { userBalance } = useContext(AppContext);
+
+  useEffect(() => {
+    console.log('a');
+  }, [userBalance]);
+
+  return (
+    <Box sx={{ pl: 3, pt: 3 }}>
+      <Grid container direction="row" spacing={3}>
+        <Grid item container direction="column" width={0.2}>
+          {nodeGeneralNav.map((item) => (
+            <Button
+              size="small"
+              sx={{ p: 0, mr: 2, color: 'inherit', justifyContent: 'start' }}
+              onClick={() => setSettingsCard(item)}
+            >
+              {item}
+            </Button>
+          ))}
+        </Grid>
+        <Divider orientation="vertical" flexItem />
+        {settingsCard === nodeGeneralNav[0] && <InfoSettings onSaveChanges={() => console.log('saving...')} />}
+        {settingsCard === nodeGeneralNav[1] && <h1>bye</h1>}
+      </Grid>
+    </Box>
+  );
+};
diff --git a/nym-wallet/src/pages/bonding/node-settings/index.tsx b/nym-wallet/src/pages/bonding/node-settings/index.tsx
new file mode 100644
index 0000000000..18245bb6ca
--- /dev/null
+++ b/nym-wallet/src/pages/bonding/node-settings/index.tsx
@@ -0,0 +1,71 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Box, Typography, Stack, IconButton, Toolbar, Button, Divider } from '@mui/material';
+import { Close } from '@mui/icons-material';
+import { Node as NodeIcon } from 'src/svg-icons/node';
+import { NymCard } from '../../../components';
+import { PageLayout } from '../../../layouts';
+// import { AppContext } from '../../context/main';
+
+import { NodeGeneralSettings } from './general-settings';
+// import { NodeParametersCard } from './InfoSettings';
+// import { UnbondModal } from '../../modals';
+
+const nodeSettingsNav = ['General', 'Unbond'];
+
+export const NodeSettingsPage = () => {
+  const [settingsCard, setSettingsCard] = useState<string>(nodeSettingsNav[0]);
+
+  const navigate = useNavigate();
+
+  return (
+    <PageLayout>
+      <NymCard
+        borderless
+        noPadding
+        title={
+          <Stack gap={2} sx={{ py: 0 }}>
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+              }}
+            >
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <NodeIcon />
+                <Typography variant="h6" fontWeight={600}>
+                  Node Settings
+                </Typography>
+              </Box>
+              <IconButton
+                onClick={() => navigate('/bonding')}
+                size="small"
+                sx={{
+                  color: 'text.primary',
+                }}
+              >
+                <Close />
+              </IconButton>
+            </Box>
+            <Toolbar disableGutters sx={{ height: '30px' }}>
+              {nodeSettingsNav.map((item) => (
+                <Button size="small" sx={{ p: 0, mr: 2, color: 'inherit' }} onClick={() => setSettingsCard(item)}>
+                  {item}
+                </Button>
+              ))}
+            </Toolbar>
+          </Stack>
+        }
+      >
+        <Divider />
+        {settingsCard === nodeSettingsNav[0] && (
+          <NodeGeneralSettings onSaveChanges={() => console.log('save changes')} />
+        )}
+        {settingsCard === nodeSettingsNav[1] && (
+          <NodeGeneralSettings onSaveChanges={() => console.log('save changes')} />
+        )}
+      </NymCard>
+    </PageLayout>
+  );
+};
diff --git a/nym-wallet/src/pages/index.ts b/nym-wallet/src/pages/index.ts
index 12cb6c092d..2976b7890a 100644
--- a/nym-wallet/src/pages/index.ts
+++ b/nym-wallet/src/pages/index.ts
@@ -5,4 +5,3 @@ export * from './bonding';
 export * from './delegation';
 export * from './internal-docs';
 export * from './unbond';
-export * from './settings';
diff --git a/nym-wallet/src/pages/settings/index.ts b/nym-wallet/src/pages/settings/index.ts
deleted file mode 100644
index 162957508f..0000000000
--- a/nym-wallet/src/pages/settings/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './node-settings';
diff --git a/nym-wallet/src/pages/settings/node-settings.tsx b/nym-wallet/src/pages/settings/node-settings.tsx
deleted file mode 100644
index 9830dbc0b4..0000000000
--- a/nym-wallet/src/pages/settings/node-settings.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Box, Button } from '@mui/material';
-import { AppContext } from '../../context/main';
-
-import { PageLayout } from '../../layouts';
-
-export const NodeSettingsPage = () => {
-  //   const [showTransferModal, setShowTransferModal] = useState(false);
-  //   const [showVestingCard, setShowVestingCard] = useState(false);
-
-  const { userBalance } = useContext(AppContext);
-
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    const { originalVesting, currentVestingPeriod, tokenAllocation } = userBalance;
-    // if (
-    //   originalVesting &&
-    //   currentVestingPeriod === 'After' &&
-    //   tokenAllocation?.locked === '0' &&
-    //   tokenAllocation?.vesting === '0' &&
-    //   tokenAllocation?.spendable === '0'
-    // ) {
-    //   setShowVestingCard(false);
-    // } else if (originalVesting) {
-    //   setShowVestingCard(true);
-    // }
-  }, [userBalance]);
-
-  const handleShowTransferModal = async () => {
-    await userBalance.refreshBalances();
-    // setShowTransferModal(true);
-  };
-
-  return (
-    <PageLayout>
-      <Box display="flex" flexDirection="column" gap={2}>
-        <h1>hello</h1>
-        <Button onClick={() => navigate('/bonding')}>exit</Button>
-      </Box>
-    </PageLayout>
-  );
-};