fixes

src/App.tsx

@@ -31,6 +31,8 @@ import { JsonView, allExpanded, darkStyles } from 'react-json-view-lite';
 import 'react-json-view-lite/dist/index.css';
 import { CountdownCircleTimer } from "react-countdown-circle-timer";
 import Logo1 from "./assets/svgs/Logo1.svg";
+import WarningIcon from '@mui/icons-material/Warning';
+
 import Logo1Dark from "./assets/svgs/Logo1Dark.svg";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import Logo2 from "./assets/svgs/Logo2.svg";
@@ -2822,6 +2824,8 @@ await showInfo({
                   setWalletToBeDownloadedPasswordConfirm(e.target.value)
                 }
               />
+                <Spacer height="5px" />
+                <Typography variant="body2">There is no minimum length requirement</Typography>
               <Spacer height="17px" />
 
               <CustomButton onClick={createAccountFunc}>
@@ -2845,7 +2849,17 @@ await showInfo({
               >
                 Congrats, you’re all set up!
               </TextP>
-              <Spacer height="100px" />
+              <Spacer height="50px"/>
+              <Box sx={{
+                display: 'flex',
+                gap: '15px',
+                alignItems: 'center',
+                padding: '10px'
+              }}>
+                <WarningIcon color="warning" />
+                <Typography>Save your account in a place where you will remember it!</Typography>
+              </Box>
+              <Spacer height="50px" />
               <CustomButton
                 onClick={async () => {
                   await saveFileToDiskFunc();

src/Wallets.tsx

@@ -285,10 +285,11 @@ export const Wallets = ({ setExtState, setRawWallet, rawWallet }) => {
         <List
           sx={{
             width: "100%",
-            maxWidth: "500px",
+          maxWidth: "500px",
-            bgcolor: "background.paper",
+          maxHeight: "60vh",
-            maxHeight: "60vh",
+          overflowY: "auto",
-            overflow: "auto",
+          overflowX: "hidden",
+          backgroundColor: "rgb(30 30 32 / 70%)"
           }}
         >
           {wallets?.map((wallet, idx) => {
@@ -443,38 +444,25 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
         }}
         sx={{
           width: "100%",
+            padding: '10px'
         }}
       >
         <ListItem
-          secondaryAction={
+          sx={{
-            <IconButton
+            bgcolor: "background.paper",
-              onClick={(e) => {
+            flexGrow: 1,
-                e.stopPropagation();
+            "&:hover": { backgroundColor: "secondary.main", transform: "scale(1.01)" },
-                setIsEdit(true);
+            transition: "all 0.1s ease-in-out",
-              }}
+          }}
-              edge="end"
+
-              aria-label="edit"
-            >
-              <EditIcon
-                sx={{
-                  color: "white",
-                }}
-              />
-            </IconButton>
-          }
           alignItems="flex-start"
         >
           <ListItemAvatar>
             <Avatar alt="" src="/static/images/avatar/1.jpg" />
           </ListItemAvatar>
           <ListItemText
-            primary={
+          
-              wallet?.name
+            primary={wallet?.name ? wallet.name : wallet?.filename ? parsefilenameQortal(wallet?.filename)  : "No name"}
-                ? wallet.name
-                : wallet?.filename
-                ? parsefilenameQortal(wallet?.filename)
-                : "No name"
-            }
             secondary={
               <Box
                 sx={{
@@ -490,10 +478,31 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
                   {wallet?.address0}
                 </Typography>
                 {wallet?.note}
+                <Typography sx={{
+                  textAlign: 'end',
+                  marginTop: '5px'
+                }}>Login</Typography>
               </Box>
             }
           />
         </ListItem>
+        <IconButton
+              sx={{
+                alignSelf: 'flex-start'
+              }}
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsEdit(true);
+              }}
+              edge="end"
+              aria-label="edit"
+            >
+              <EditIcon
+                sx={{
+                  color: "white",
+                }}
+              />
+            </IconButton>
       </ButtonBase>
       {isEdit && (
         <Box