diff --git a/packages/ui/src/ImportScreen.tsx b/packages/ui/src/ImportScreen.tsx
index 4f7351b2..c35d04fa 100644
--- a/packages/ui/src/ImportScreen.tsx
+++ b/packages/ui/src/ImportScreen.tsx
@@ -233,26 +233,21 @@ export default function ImportScreen({
     <div>
       <Box
         sx={{
-          margin: 8,
+          margin: { xs: 2, sm: 3, md: 5 },
           display: "flex",
           flexDirection: "column",
           alignItems: "left"
         }}
       >
+        <Typography variant="h5" sx={{ marginBottom: 2, fontSize: { xs: 20, sm: 24 } }}>
+          <b>Import Validator Keystore(s)</b>
+        </Typography>
         <Card
           sx={{
-            padding: 4,
+            padding: { xs: 2, sm: 4 },
             borderRadius: 2
           }}
         >
-          <Typography
-            variant="h5"
-            sx={{
-              marginBottom: 4
-            }}
-          >
-            <b>Import Validator Keystore(s)</b>
-          </Typography>
           <Typography>Upload any keystore JSON file(s).</Typography>
 
           <SecondaryInfoTypography
@@ -264,162 +259,166 @@ export default function ImportScreen({
           <FileDrop callback={keystoreFilesCallback} />
 
           <SecondaryInfoTypography
-            sx={{ marginBottom: 2, marginTop: 4 }}
+            sx={{ marginTop: 4 }}
             text="Remember you need to introduce the password you set during
                 creation of the keystore files."
           />
+        </Card>
 
-          {acceptedFiles.length > 1 && (
-            <>
-              <FormGroup sx={{ marginTop: "6px" }}>
-                <FormControlLabel
-                  control={<Switch onChange={() => handleSwitchToggle("password")} />}
-                  label="Use same password for every file"
-                />
-                <FormControlLabel
-                  control={<Switch onChange={() => handleSwitchToggle("feerecipient")} />}
-                  label="Use same fee recipient for every file"
-                />
-                <FormControlLabel
-                  control={<Switch onChange={() => handleSwitchToggle("tag")} />}
-                  label="Use same tag for every file"
-                />
-              </FormGroup>
-              {(useSameTag || useSameFeerecipient || useSamePassword) && (
-                <FormControl sx={{ marginTop: 2, width: "100%" }}>
-                  {useSamePassword && (
-                    <>
-                      <TextField
-                        id={`outlined-password-input`}
-                        label="Keystore Password"
-                        type="password"
-                        sx={{ marginTop: 2 }}
-                        onChange={(e) => setPasswords(Array(acceptedFiles.length).fill(e.target.value))}
-                        helperText={"Password to decrypt the keystore(s)"}
-                      />
-                    </>
-                  )}
-                  {useSameTag && (
-                    <>
-                      <Select
-                        id="outlined-tag-input"
-                        label="Tag"
-                        value={tags[0]}
-                        type="text"
-                        sx={{ marginTop: 2 }}
-                        onChange={(e) => {
-                          setTags(Array(acceptedFiles.length).fill(e.target.value));
-                          if (!isFeeRecipientEditable(tags[0])) {
-                            setFeeRecipients(Array(acceptedFiles.length).fill(""));
-                          }
-                        }}
-                      >
-                        {tagSelectOptions.map((option) => (
-                          <MenuItem value={option.value}>{option.label}</MenuItem>
-                        ))}
-                      </Select>
-                      <FormHelperText>Staking protocol</FormHelperText>
-                    </>
-                  )}
-                  {useSameFeerecipient && (
-                    <>
-                      <TextField
-                        id={`outlined-fee-recipient-input`}
-                        label={
-                          tags[0] === undefined || isFeeRecipientEditable(tags[0])
-                            ? "Fee Recipient"
-                            : "For this protocol, fee recipient will be set automatically"
+        {acceptedFiles.length > 1 && (
+          <>
+            <FormGroup sx={{ marginTop: "6px" }}>
+              <FormControlLabel
+                control={<Switch onChange={() => handleSwitchToggle("password")} />}
+                label="Use same password for every file"
+              />
+              <FormControlLabel
+                control={<Switch onChange={() => handleSwitchToggle("feerecipient")} />}
+                label="Use same fee recipient for every file"
+              />
+              <FormControlLabel
+                control={<Switch onChange={() => handleSwitchToggle("tag")} />}
+                label="Use same tag for every file"
+              />
+            </FormGroup>
+            {(useSameTag || useSameFeerecipient || useSamePassword) && (
+              <FormControl sx={{ marginTop: 2, width: "100%" }}>
+                {useSamePassword && (
+                  <>
+                    <TextField
+                      id={`outlined-password-input`}
+                      label="Keystore Password"
+                      type="password"
+                      sx={{ marginTop: 2 }}
+                      onChange={(e) => setPasswords(Array(acceptedFiles.length).fill(e.target.value))}
+                      helperText={"Password to decrypt the keystore(s)"}
+                    />
+                  </>
+                )}
+                {useSameTag && (
+                  <>
+                    <Select
+                      id="outlined-tag-input"
+                      label="Tag"
+                      value={tags[0]}
+                      type="text"
+                      sx={{ marginTop: 2 }}
+                      onChange={(e) => {
+                        setTags(Array(acceptedFiles.length).fill(e.target.value));
+                        if (!isFeeRecipientEditable(tags[0])) {
+                          setFeeRecipients(Array(acceptedFiles.length).fill(""));
                         }
-                        type="text"
-                        sx={{ marginTop: 2 }}
-                        onChange={(e) => {
-                          setFeeRecipients(Array(acceptedFiles.length).fill(e.target.value));
-                        }}
-                        error={isFeeRecipientFieldWrong(0)}
-                        helperText={getFeeRecipientFieldHelperText(0)}
-                        value={feeRecipients[0]}
-                        disabled={!isFeeRecipientEditable(tags[0])}
-                      />
-                      {!areAllFeeRecipientsEditable(tags) && !useSameTag && (
-                        <Alert severity="info">This field will only apply to the editable fee recipients</Alert>
-                      )}
-                    </>
-                  )}
-                </FormControl>
-              )}
-            </>
-          )}
-
-          {FileCardList(
-            acceptedFiles,
-            setAcceptedFiles,
-            passwords,
-            setPasswords,
-            useSamePassword,
-            tags,
-            setTags,
-            useSameTag,
-            feeRecipients,
-            setFeeRecipients,
-            useSameFeerecipient,
-            getFeeRecipientFieldHelperText,
-            isFeeRecipientFieldWrong,
-            tagSelectOptions
-          )}
-
-          <Box
+                      }}
+                    >
+                      {tagSelectOptions.map((option) => (
+                        <MenuItem value={option.value}>{option.label}</MenuItem>
+                      ))}
+                    </Select>
+                    <FormHelperText>Staking protocol</FormHelperText>
+                  </>
+                )}
+                {useSameFeerecipient && (
+                  <>
+                    <TextField
+                      id={`outlined-fee-recipient-input`}
+                      label={
+                        tags[0] === undefined || isFeeRecipientEditable(tags[0])
+                          ? "Fee Recipient"
+                          : "For this protocol, fee recipient will be set automatically"
+                      }
+                      type="text"
+                      sx={{ marginTop: 2 }}
+                      onChange={(e) => {
+                        setFeeRecipients(Array(acceptedFiles.length).fill(e.target.value));
+                      }}
+                      error={isFeeRecipientFieldWrong(0)}
+                      helperText={getFeeRecipientFieldHelperText(0)}
+                      value={feeRecipients[0]}
+                      disabled={!isFeeRecipientEditable(tags[0])}
+                    />
+                    {!areAllFeeRecipientsEditable(tags) && !useSameTag && (
+                      <Alert severity="info">This field will only apply to the editable fee recipients</Alert>
+                    )}
+                  </>
+                )}
+              </FormControl>
+            )}
+          </>
+        )}
+
+        {FileCardList(
+          acceptedFiles,
+          setAcceptedFiles,
+          passwords,
+          setPasswords,
+          useSamePassword,
+          tags,
+          setTags,
+          useSameTag,
+          feeRecipients,
+          setFeeRecipients,
+          useSameFeerecipient,
+          getFeeRecipientFieldHelperText,
+          isFeeRecipientFieldWrong,
+          tagSelectOptions
+        )}
+
+        <Box
+          sx={{
+            marginTop: 8,
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "left"
+          }}
+        >
+          <Typography variant="h5" sx={{ marginBottom: 2, fontSize: { xs: 20, sm: 24 } }}>
+            <b>Import slashing protection data? (recommended)</b>
+          </Typography>
+          <Switch defaultChecked onChange={onSlashingChecked} />
+        </Box>
+        {slashingProtectionIncluded ? (
+          <Card
             sx={{
-              marginTop: 8,
-              marginBottom: 2,
-              display: "flex",
-              flexDirection: "row",
-              alignItems: "left"
+              padding: { xs: 2, sm: 4 },
+              borderRadius: 2
             }}
           >
-            <Typography variant="h5" sx={{ marginRight: 2 }}>
-              <b>Import slashing protection data? (recommended)</b>
-            </Typography>
-            <Switch defaultChecked onChange={onSlashingChecked} />
-          </Box>
-          {slashingProtectionIncluded ? (
-            <div>
-              <Typography>Upload your slashing protection file to protect your keystore(s).</Typography>
-
-              <SecondaryInfoTypography sx={{ marginBottom: 4 }} text="Only for previously-used keystores" />
-              {slashingFile ? (
-                <Card
-                  key={slashingFile.name}
-                  raised
+            <Typography>Upload your slashing protection file to protect your keystore(s).</Typography>
+
+            <SecondaryInfoTypography sx={{ marginBottom: 4 }} text="Only for previously-used keystores" />
+            {slashingFile ? (
+              <Card
+                key={slashingFile.name}
+                raised
+                sx={{
+                  padding: 2,
+                  marginTop: 4,
+                  borderRadius: 2
+                }}
+              >
+                <Box
                   sx={{
-                    padding: 2,
-                    marginTop: 4,
-                    borderRadius: 2
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "left",
+                    justifyContent: "space-between"
                   }}
                 >
-                  <Box
-                    sx={{
-                      display: "flex",
-                      flexDirection: "row",
-                      alignItems: "left",
-                      justifyContent: "space-between"
-                    }}
-                  >
-                    <Typography variant="h6">
-                      <b>✅ {slashingFile.name}</b>
-                      <br />
-                    </Typography>
-
-                    <button onClick={() => setSlashingFile(undefined)}>
-                      <CloseIcon color="action" />
-                    </button>
-                  </Box>
-                </Card>
-              ) : (
-                <FileDrop callback={slashingFilesCallback} />
-              )}
-            </div>
-          ) : null}
-        </Card>
+                  <Typography variant="h6">
+                    <b>✅ {slashingFile.name}</b>
+                    <br />
+                  </Typography>
+
+                  <button onClick={() => setSlashingFile(undefined)}>
+                    <CloseIcon color="action" />
+                  </button>
+                </Box>
+              </Card>
+            ) : (
+              <FileDrop callback={slashingFilesCallback} />
+            )}
+          </Card>
+        ) : null}
         {showMevWarning && (
           <Alert
             severity="warning"
@@ -451,14 +450,15 @@ export default function ImportScreen({
           sx={{
             marginTop: 4,
             display: "flex",
-            justifyContent: "space-between"
+            justifyContent: "space-between",
+            gap: 2
           }}
         >
           <Link to={{ pathname: "/", search: window.location.search }} style={{ textDecoration: "none" }}>
             <Button
               variant="outlined"
-              size="large"
-              sx={{ marginRight: 4, borderRadius: 2 }}
+              size="medium"
+              sx={{ borderRadius: 2 }}
               startIcon={<ArrowCircleLeftOutlinedIcon />}
             >
               Back to Accounts
@@ -467,11 +467,11 @@ export default function ImportScreen({
 
           <Button
             variant="contained"
-            size="large"
+            size="medium"
             endIcon={<BackupIcon />}
             disabled={isButtonDisabled}
             onClick={importKeystores}
-            sx={{ borderRadius: 3 }}
+            sx={{ borderRadius: 2 }}
           >
             Submit Keystores
           </Button>
diff --git a/packages/ui/src/components/Dialogs/EditFeesDialog.tsx b/packages/ui/src/components/Dialogs/EditFeesDialog.tsx
index 5b2d3d2f..89a0185d 100644
--- a/packages/ui/src/components/Dialogs/EditFeesDialog.tsx
+++ b/packages/ui/src/components/Dialogs/EditFeesDialog.tsx
@@ -39,6 +39,7 @@ import { SlideTransition } from "./Transitions";
 import { AlertType, NonEcdsaValidatorsData } from "../../types";
 import { getSmoothUrlByNetwork, getStakersLink } from "../../params";
 import { getSmoothAddressByNetwork } from "../../utils/addresses";
+import { useTheme, useMediaQuery } from "@mui/material";
 
 export default function FeeRecipientDialog({
   open,
@@ -65,6 +66,8 @@ export default function FeeRecipientDialog({
   const [nonEcdsaValidatorsData, setNonEcdsaValidatorsData] = useState<NonEcdsaValidatorsData[]>([]);
   const [smoothValidatorsPubkeys, setSmoothValidatorsPubkeys] = useState<string[]>([]);
   const [withdrawalAccessCheck, setWithdrawalAccessCheck] = useState(false);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   useEffect(() => {
     isAnyWithdrawalCredentialsDiff("ecdsa") && getNonEcdsaValidatorsData();
@@ -601,7 +604,8 @@ export default function FeeRecipientDialog({
     <Dialog
       disableEscapeKeyDown={true}
       open={open}
-      fullWidth={true}
+      fullScreen={isMobile}
+      fullWidth={!isMobile}
       onClose={(event, reason) => {
         if (!reason) {
           handleClose();
diff --git a/packages/ui/src/components/Dialogs/KeystoresDeleteDialog.tsx b/packages/ui/src/components/Dialogs/KeystoresDeleteDialog.tsx
index 39d04d3e..46d71fad 100644
--- a/packages/ui/src/components/Dialogs/KeystoresDeleteDialog.tsx
+++ b/packages/ui/src/components/Dialogs/KeystoresDeleteDialog.tsx
@@ -19,6 +19,7 @@ import { rpcClient } from "../../socket";
 import { SlideTransition } from "./Transitions";
 import { getEmoji } from "../../utils/dataUtils";
 import type { CustomValidatorGetResponse, Web3signerDeleteResponse } from "@stakingbrain/brain";
+import { useTheme, useMediaQuery } from "@mui/material";
 
 export default function KeystoresDeleteDialog({
   rows,
@@ -36,6 +37,8 @@ export default function KeystoresDeleteDialog({
   const [keystoresDelete, setKeystoresDelete] = useState<Web3signerDeleteResponse>();
   const [keystoresDeleteError, setKeystoresDeleteError] = useState<string>();
   const [loading, setLoading] = useState(false);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   async function deleteSelectedKeystores() {
     try {
@@ -62,7 +65,8 @@ export default function KeystoresDeleteDialog({
     <Dialog
       disableEscapeKeyDown={true}
       open={open}
-      fullWidth={true}
+      fullScreen={isMobile}
+      fullWidth={!isMobile}
       onClose={(event, reason) => {
         if (!reason) {
           handleClose();
diff --git a/packages/ui/src/components/Dialogs/KeystoresExitDialog.tsx b/packages/ui/src/components/Dialogs/KeystoresExitDialog.tsx
index dd2f21ce..7be69ad5 100644
--- a/packages/ui/src/components/Dialogs/KeystoresExitDialog.tsx
+++ b/packages/ui/src/components/Dialogs/KeystoresExitDialog.tsx
@@ -19,6 +19,7 @@ import { rpcClient } from "../../socket";
 import { SlideTransition } from "./Transitions";
 import { getEmoji } from "../../utils/dataUtils";
 import type { CustomValidatorGetResponse, ValidatorExitExecute } from "@stakingbrain/brain";
+import { useTheme, useMediaQuery } from "@mui/material";
 
 export default function KeystoresExitDialog({
   rows,
@@ -37,6 +38,8 @@ export default function KeystoresExitDialog({
   const [validatorsExitError, setValidatorsExitError] = useState<string>();
   const [loading, setLoading] = useState(false);
   const [userConfirmText, setUserConfirmText] = useState("");
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const exitConfirmationMessage = "I want to exit";
 
@@ -89,7 +92,8 @@ export default function KeystoresExitDialog({
     <Dialog
       disableEscapeKeyDown={true}
       open={open}
-      fullWidth={true}
+      fullScreen={isMobile}
+      fullWidth={!isMobile}
       onClose={(event, reason) => {
         if (!reason) {
           handleClose();
diff --git a/packages/ui/src/components/StakerConfig/StakerConfig.tsx b/packages/ui/src/components/StakerConfig/StakerConfig.tsx
index 53220bd5..7e85f688 100644
--- a/packages/ui/src/components/StakerConfig/StakerConfig.tsx
+++ b/packages/ui/src/components/StakerConfig/StakerConfig.tsx
@@ -36,10 +36,7 @@ export default function StakerConfig({ stakerConfig }: { stakerConfig: StakerCon
     >
       <Card
         sx={{
-          py: 1,
-          px: 3,
-          mt: 2,
-          mb: -5,
+          marginTop: { xs: 4, sm: 8 },
           border: "none",
           boxShadow: "none",
           backgroundColor: "transparent",
@@ -51,7 +48,7 @@ export default function StakerConfig({ stakerConfig }: { stakerConfig: StakerCon
             display: "flex",
             alignItems: "center",
             justifyContent: "space-evenly",
-            gap: 2
+            gap: { xs: 1, sm: 2 }
           }}
         >
           <Box
@@ -65,11 +62,11 @@ export default function StakerConfig({ stakerConfig }: { stakerConfig: StakerCon
               <Box
                 component="img"
                 sx={{
-                  height: 80,
-                  width: 80,
+                  height: { xs: 60, sm: 80 },
+                  width: { xs: 60, sm: 80 },
                   padding: 1
                 }}
-                alt="erigon-goerli"
+                alt="execution-client"
                 src={
                   Object.keys(images).includes(stakerConfig.executionClient)
                     ? images[stakerConfig.executionClient]
@@ -77,7 +74,7 @@ export default function StakerConfig({ stakerConfig }: { stakerConfig: StakerCon
                 }
               />
             </Card>
-            <Typography sx={{ fontWeight: "bold", mt: 2 }}>
+            <Typography sx={{ fontWeight: "bold", mt: 2, fontSize: { xs: "12px", sm: "16px" } }}>
               {prettyClientDnpName(stakerConfig.executionClient)}
             </Typography>
           </Box>
@@ -88,7 +85,7 @@ export default function StakerConfig({ stakerConfig }: { stakerConfig: StakerCon
               alignItems: "center"
             }}
           >
-            <SyncAltRoundedIcon sx={{ mb: 4, fontSize: 48 }} />
+            <SyncAltRoundedIcon sx={{ mb: 4, fontSize: { xs: 24, sm: 48 } }} />
           </Box>
 
           <Box
@@ -102,11 +99,11 @@ export default function StakerConfig({ stakerConfig }: { stakerConfig: StakerCon
               <Box
                 component="img"
                 sx={{
-                  height: 80,
-                  width: 80,
+                  height: { xs: 60, sm: 80 },
+                  width: { xs: 60, sm: 80 },
                   padding: 1
                 }}
-                alt="erigon-goerli"
+                alt="consensus-client"
                 src={
                   Object.keys(images).includes(stakerConfig.consensusClient)
                     ? images[stakerConfig.consensusClient]
@@ -114,7 +111,7 @@ export default function StakerConfig({ stakerConfig }: { stakerConfig: StakerCon
                 }
               />
             </Card>
-            <Typography sx={{ fontWeight: "bold", mt: 2 }}>
+            <Typography sx={{ fontWeight: "bold", mt: 2, fontSize: { xs: "12px", sm: "16px" } }}>
               {prettyClientDnpName(stakerConfig.consensusClient)}
             </Typography>
           </Box>
@@ -126,7 +123,7 @@ export default function StakerConfig({ stakerConfig }: { stakerConfig: StakerCon
               alignItems: "center"
             }}
           >
-            <TrendingFlatRoundedIcon sx={{ mb: 4, fontSize: 48 }} />
+            <TrendingFlatRoundedIcon sx={{ mb: 4, fontSize: { xs: 24, sm: 48 } }} />
           </Box>
 
           <Box
@@ -140,15 +137,15 @@ export default function StakerConfig({ stakerConfig }: { stakerConfig: StakerCon
               <Box
                 component="img"
                 sx={{
-                  height: 80,
-                  width: 80,
+                  height: { xs: 60, sm: 80 },
+                  width: { xs: 60, sm: 80 },
                   padding: 1
                 }}
                 alt="signer"
                 src={images["default"]}
               />
             </Card>
-            <Typography sx={{ fontWeight: "bold", mt: 2 }}>Signer</Typography>
+            <Typography sx={{ fontWeight: "bold", mt: 2, fontSize: { xs: "12px", sm: "16px" } }}>Signer</Typography>
           </Box>
         </Box>
       </Card>
diff --git a/packages/ui/src/components/TopBar/ToolBar.tsx b/packages/ui/src/components/TopBar/ToolBar.tsx
index 7c2ebb3c..a6d5a1a3 100644
--- a/packages/ui/src/components/TopBar/ToolBar.tsx
+++ b/packages/ui/src/components/TopBar/ToolBar.tsx
@@ -1,6 +1,6 @@
 import Toolbar from "@mui/material/Toolbar";
 import { HeaderTypography } from "../../Styles/Typographies";
-import { Box, Chip } from "@mui/material";
+import { Box, capitalize, Typography } from "@mui/material";
 import IconButton from "@mui/material/IconButton";
 import LightModeIcon from "@mui/icons-material/LightMode";
 import DarkModeIcon from "@mui/icons-material/DarkMode";
@@ -23,23 +23,37 @@ export default function ToolBar({
 }): JSX.Element {
   return (
     <Toolbar>
-      <div
-        style={{
+      <Box
+        sx={{
           alignItems: "center",
           display: "flex",
           justifyContent: "center",
           lineHeight: "50px"
         }}
       >
-        <img src="/assets/dappnode_logo.png" alt="logo" height={50} />
-        <HeaderTypography sx={{ flexGrow: 1, fontWeight: "bold" }} text={"Staking Brain"} />
-        {network && (
-          <>
-            &nbsp;&nbsp;
-            <Chip color="secondary" label={network} />
-          </>
-        )}
-      </div>
+        <img src="/assets/dappnode_logo_clean.png" alt="logo" height={50} style={{ marginRight: "5px" }} />
+
+        <Box
+          sx={{
+            flexGrow: 1,
+            display: "flex",
+            flexDirection: { xs: "column", sm: "row" },
+            alignItems: { xs: "flex-start", sm: "center" }
+          }}
+        >
+          <HeaderTypography
+            sx={{ flexGrow: 1, fontWeight: "bold", fontSize: { xs: "14px", sm: "20px" } }}
+            text={"Staking Brain"}
+          />
+          {network && (
+            <Typography
+              sx={{ fontStyle: "italic", fontSize: { xs: "14px", sm: "20px" }, marginLeft: { xs: 0, sm: 1 } }}
+            >
+              {capitalize(network)}
+            </Typography>
+          )}
+        </Box>
+      </Box>
       <div style={{ marginLeft: "auto" }}>
         <Box
           sx={{
diff --git a/packages/ui/src/components/ValidatorList/KeystoresDataGrid.tsx b/packages/ui/src/components/ValidatorList/KeystoresDataGrid.tsx
index 9983de8e..02cf2cd2 100644
--- a/packages/ui/src/components/ValidatorList/KeystoresDataGrid.tsx
+++ b/packages/ui/src/components/ValidatorList/KeystoresDataGrid.tsx
@@ -169,8 +169,9 @@ export default function KeystoresDataGrid({
       headerName: "Public Key",
       description: "Validating Public Key",
       disableColumnMenu: true,
+      headerClassName: "tableHeader",
       flex: 1,
-      headerClassName: "tableHeader"
+      minWidth: 120
     },
     {
       field: "feeRecipient",
@@ -183,7 +184,8 @@ export default function KeystoresDataGrid({
       align: "center",
       headerAlign: "center",
       headerClassName: "tableHeader",
-      width: 360
+      flex: 1,
+      minWidth: 120
     },
     // Only render Smooth column if mevSpFeeRecipient is not null (mainnet or hoodi)
     ...(mevSpFeeRecipient != null && (network === "mainnet" || network === "hoodi")
diff --git a/packages/ui/src/components/ValidatorList/ValidatorList.tsx b/packages/ui/src/components/ValidatorList/ValidatorList.tsx
index c3b1852e..169bee5f 100644
--- a/packages/ui/src/components/ValidatorList/ValidatorList.tsx
+++ b/packages/ui/src/components/ValidatorList/ValidatorList.tsx
@@ -1,7 +1,7 @@
 import KeystoresDataGrid from "./KeystoresDataGrid";
 import KeystoresDeleteDialog from "../Dialogs/KeystoresDeleteDialog";
 import EditFeesDialog from "../Dialogs/EditFeesDialog";
-import { Alert, Box, CircularProgress, Card } from "@mui/material";
+import { Alert, Box, CircularProgress } from "@mui/material";
 import { GridSelectionModel } from "@mui/x-data-grid";
 import { StakerConfig as StakerConfigType } from "@stakingbrain/common";
 import { useEffect, useState } from "react";
@@ -76,7 +76,7 @@ export default function ValidatorList({
       {userMode === "advanced" && <StakerConfig stakerConfig={stakerConfig} />}
       <Box
         sx={{
-          margin: 8,
+          margin: { xs: 2, sm: 3, md: 5 },
           display: "flex",
           flexDirection: "column",
           alignItems: "left"
@@ -84,12 +84,7 @@ export default function ValidatorList({
       >
         {(network === "hoodi" || network === "mainnet") && <SmoothBanner />}
 
-        <Card
-          sx={{
-            padding: 4,
-            borderRadius: 2
-          }}
-        >
+        <Box>
           {validatorsGetError ? (
             <Alert severity="error" sx={{ marginTop: 2 }} variant="filled">
               {validatorsGetError}
@@ -167,7 +162,7 @@ export default function ValidatorList({
               There are no keystores to display.
             </Alert>
           )}
-        </Card>
+        </Box>
       </Box>
     </div>
   );