fixes

src/App.tsx

@@ -47,6 +47,8 @@ import { JsonView, allExpanded, darkStyles } from 'react-json-view-lite';
 import 'react-json-view-lite/dist/index.css';
 import HelpIcon from '@mui/icons-material/Help';
 import EngineeringIcon from '@mui/icons-material/Engineering';
+import WarningIcon from '@mui/icons-material/Warning';
+
 
 import {
   createAccount,
@@ -2792,6 +2794,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}>
@@ -2815,7 +2819,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

@@ -198,11 +198,13 @@ export const Wallets = ({ setExtState, setRawWallet, rawWallet }) => {
       {wallets?.length > 0 && (
          <List
          sx={{
-           width: "100%",
-           maxWidth: "500px",
-           bgcolor: "background.paper",
-           maxHeight: "60vh",
-           overflow: "auto",
+          width: "100%",
+          maxWidth: "500px",
+          maxHeight: "60vh",
+          overflowY: "auto",
+          overflowX: "hidden",
+          backgroundColor: "rgb(30 30 32 / 70%)",
+
          }}
        >
          {wallets?.map((wallet, idx) => {
@@ -371,33 +373,25 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
           setSelectedWallet(wallet);
         }}
         sx={{
-            width: '100%'
+            width: '100%',
+          padding: '10px'
         }}
       >
-        <ListItem
-        
-          secondaryAction={
-            <IconButton
-              onClick={(e) => {
-                e.stopPropagation();
-                setIsEdit(true);
-              }}
-              edge="end"
-              aria-label="edit"
-            >
-              <EditIcon
-                sx={{
-                  color: "white",
-                }}
-              />
-            </IconButton>
-          }
+       <ListItem
+          sx={{
+            bgcolor: "background.paper",
+            flexGrow: 1,
+            "&:hover": { backgroundColor: "secondary.main", transform: "scale(1.01)" },
+            transition: "all 0.1s ease-in-out",
+          }}
+
           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 +408,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,6 +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 +134,15 @@ useEffect(()=> {
                       poster: groupsImg
                     },
                   },
+                  {
+                    title: "4. Obtaining Qort",
+                    resource: {
+                      name: "a-test",
+                      service: "VIDEO",
+                      identifier: "obtaining-qort",
+                      poster: obtainingImg
+                    },
+                  },
                 ],
               });
             }