fixes

src/App.tsx

@@ -40,6 +40,7 @@ import { CopyToClipboard } from "react-copy-to-clipboard";
 import Download from "./assets/svgs/Download.svg";
 import Logout from "./assets/svgs/Logout.svg";
 import Return from "./assets/svgs/Return.svg";
+import WarningIcon from '@mui/icons-material/Warning';
 import Success from "./assets/svgs/Success.svg";
 import Info from "./assets/svgs/Info.svg";
 import CloseIcon from "@mui/icons-material/Close";
@@ -2784,6 +2785,8 @@ function App() {
                   setWalletToBeDownloadedPasswordConfirm(e.target.value)
                 }
               />
+               <Spacer height="5px" />
+              <Typography variant="body2">There is no minimum length requirement</Typography>
               <Spacer height="17px" />
 
               <CustomButton onClick={createAccountFunc}>
@@ -2807,7 +2810,17 @@ function App() {
               >
                 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

@@ -200,9 +200,11 @@ export const Wallets = ({ setExtState, setRawWallet, rawWallet }) => {
          sx={{
            width: "100%",
            maxWidth: "500px",
-           bgcolor: "background.paper",
            maxHeight: "60vh",
-           overflow: "auto",
+           overflowY: "auto",
+           overflowX: "hidden",
+           backgroundColor: "rgb(30 30 32 / 70%)",
+           
          }}
        >
          {wallets?.map((wallet, idx) => {
@@ -371,33 +373,26 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
           setSelectedWallet(wallet);
         }}
         sx={{
-            width: '100%'
+          width: '100%',
+          padding: '10px'
         }}
+
       >
         <ListItem
-        
+          sx={{
-          secondaryAction={
+            bgcolor: "background.paper",
-            <IconButton
+            flexGrow: 1,
-              onClick={(e) => {
+            "&:hover": { backgroundColor: "secondary.main", transform: "scale(1.01)" },
-                e.stopPropagation();
+            transition: "all 0.1s ease-in-out",
-                setIsEdit(true);
+          }}
-              }}
+
-              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 ? wallet.name : wallet?.filename ? parsefilenameQortal(wallet?.filename)  : "No name"}
             secondary={
               <Box
@@ -414,10 +409,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

src/components/Tutorials/useHandleTutorials.tsx

@@ -7,7 +7,7 @@ import importantImg from './img/important.webp'
 import navigationImg from './img/navigation.webp'
 import overviewImg from './img/overview.webp'
 import startedImg from './img/started.webp'
-
+import obtainingImg from './img/obtaining-qort.jpg'
 
 const checkIfGatewayIsOnline = async () => {
     try {
@@ -133,6 +133,15 @@ useEffect(()=> {
                         poster: groupsImg
                       },
                     },
+                    {
+                      title: "4. Obtaining Qort",
+                      resource: {
+                        name: "a-test",
+                        service: "VIDEO",
+                        identifier: "obtaining-qort",
+                        poster: obtainingImg
+                      },
+                    },
                   ],
                 });
               }