diff --git a/src/views/Home/components/NewUserForm/CreatePin.tsx b/src/views/Home/components/NewUserForm/CreatePin.tsx
new file mode 100644
index 0000000..ed97535
--- /dev/null
+++ b/src/views/Home/components/NewUserForm/CreatePin.tsx
@@ -0,0 +1,14 @@
+import React, { ChangeEvent } from 'react';
+import { Input } from '@chakra-ui/react';
+interface CreatePinProps {
+    setPin: React.Dispatch<React.SetStateAction<string>>;
+}
+function CreatePin({ setPin }: CreatePinProps) {
+    const handlePinChange = (event: ChangeEvent<HTMLInputElement>) => {
+        setPin(event.target.value);
+    }
+    return (
+        <Input placeholder='Type your pin' onChange={handlePinChange} />
+    );
+}
+export default CreatePin;
\ No newline at end of file
diff --git a/src/views/Home/components/NewUserForm/CreateWallet.tsx b/src/views/Home/components/NewUserForm/CreateWallet.tsx
index f0ae9b4..13a3a45 100644
--- a/src/views/Home/components/NewUserForm/CreateWallet.tsx
+++ b/src/views/Home/components/NewUserForm/CreateWallet.tsx
@@ -10,9 +10,9 @@ import { TransactionActionsEnum } from "@multiversx/sdk-dapp/types";
 
 
 
-export default function CreateWallet({formData, email, handleReset, userGid}: {formData: any, email: string, handleReset: any, userGid: string}) {
+export default function CreateWallet({pin, email, handleReset, userGid}: {pin: string, email: string, handleReset: any, userGid: string}) {
 
-    const [encryptionKey, setEncryptionKey] = useState(createEncryptionKey(formData.pin, userGid));
+    const [encryptionKey, setEncryptionKey] = useState(createEncryptionKey(pin, userGid));
     const [walletCreationHash, setWalletCreationHash] = useState("");
     const [txDetails, setTxDetails] = useState('');
 
diff --git a/src/views/Home/components/NewUserForm/NewUserForm.tsx b/src/views/Home/components/NewUserForm/NewUserForm.tsx
index 3020290..07e1605 100644
--- a/src/views/Home/components/NewUserForm/NewUserForm.tsx
+++ b/src/views/Home/components/NewUserForm/NewUserForm.tsx
@@ -13,10 +13,16 @@ import {
     CSSReset,
     Box,
     Flex,
+    Heading
 } from '@chakra-ui/react';
 import { createUser } from "../../services/calls";
 import CreateWallet from "./CreateWallet";
 import { createEncryptionKey } from "@/utils/functions/cryptography";
+import { useColorModeValue } from "@chakra-ui/color-mode";
+import { Step, Steps, useSteps } from "chakra-ui-steps";
+import CreatePin from "./CreatePin";
+const steps = [{ label: "Step 1" }, { label: "Step 2" }, { label: "Step 3" }];
+
 
 interface Step1Props {
     pinData: {
@@ -26,102 +32,164 @@ interface Step1Props {
     onNext: (data: { pin: string }) => void;
 }
 
-function Step1({ pinData, onPrevious, onNext }: Step1Props) {
-    const [pin, setPin] = useState(pinData.pin || '');
+// function Step1({ pinData, onPrevious, onNext }: Step1Props) {
+//     const [pin, setPin] = useState(pinData.pin || '');
 
-    const handlePrevious = () => {
-        onPrevious();
-    };
+//     const handlePrevious = () => {
+//         onPrevious();
+//     };
 
-    const handleNext = () => {
-        onNext({ pin });
-    };
+//     const handleNext = () => {
+//         onNext({ pin });
+//     };
 
-    const handlePinChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const value = e.target.value;
-        if (value.length <= 4 && /^\d*$/.test(value)) {
-            setPin(value);
-        }
-    };
+//     const handlePinChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+//         const value = e.target.value;
+//         if (value.length <= 4 && /^\d*$/.test(value)) {
+//             setPin(value);
+//         }
+//     };
 
-    return (
-        <VStack spacing={4}>
-            <Text fontSize="xl">Create PIN</Text>
-            <Text>
-                This is the most important part.
-            </Text>
-            <Text>
-                Your PIN (alongside your email) will be used to encrypt your 24 secret words in the SC. The encryption key will be created from a combination of your email and your PIN using a hashing algorithm.
-            </Text>
-            <Text>
-                In order to maintain the security of your wallet, PIN will never be saved anywhere. Thus, if you forget your PIN, you lose access to your wallet. This is irreversible since nobody else can recover the PIN for you.
-            </Text>
-            <Text>
-                Notice that you will need to enter your PIN every time you want to connect in a dApp using xLogin.
-            </Text>
-            <FormControl maxW={'250px'}>
-                <Input
-                    type="text"
-                    placeholder="PIN"
-                    value={pin}
-                    onChange={handlePinChange}
-                    maxLength={4}
-                />
-            </FormControl>
-            <Text>
-                *only 4 digits
-            </Text>
-            <Stack direction="row">
-                <Button colorScheme="gray" onClick={handlePrevious}>
-                    Previous
-                </Button>
-                <Button colorScheme="blue" onClick={handleNext}>
-                    Next
-                </Button>
-            </Stack>
-        </VStack>
-    );
-}
+//     return (
+//         <VStack spacing={4}>
+//             <Text fontSize="xl">Create PIN</Text>
+//             <Text>
+//                 This is the most important part.
+//             </Text>
+//             <Text>
+//                 Your PIN (alongside your email) will be used to encrypt your 24 secret words in the SC. The encryption key will be created from a combination of your email and your PIN using a hashing algorithm.
+//             </Text>
+//             <Text>
+//                 In order to maintain the security of your wallet, PIN will never be saved anywhere. Thus, if you forget your PIN, you lose access to your wallet. This is irreversible since nobody else can recover the PIN for you.
+//             </Text>
+//             <Text>
+//                 Notice that you will need to enter your PIN every time you want to connect in a dApp using xLogin.
+//             </Text>
+//             <FormControl maxW={'250px'}>
+//                 <Input
+//                     type="text"
+//                     placeholder="PIN"
+//                     value={pin}
+//                     onChange={handlePinChange}
+//                     maxLength={4}
+//                 />
+//             </FormControl>
+//             <Text>
+//                 *only 4 digits
+//             </Text>
+//             <Stack direction="row">
+//                 <Button colorScheme="gray" onClick={handlePrevious}>
+//                     Previous
+//                 </Button>
+//                 <Button colorScheme="blue" onClick={handleNext}>
+//                     Next
+//                 </Button>
+//             </Stack>
+//         </VStack>
+//     );
+// }
 
-interface FormData {
-    pin?: string;
-}
+// interface FormData {
+//     pin?: string;
+// }
 
 function NewUserForm({ email, userGid }: { email: string; userGid: string; }) {
-    const [step, setStep] = useState(1);
-    const [formData, setFormData] = useState<FormData>({});
 
-    const handleNext = (data: SetStateAction<{}>) => {
-        setFormData({ ...formData, ...data });
-        setStep(step + 1);
-    };
+    const [pin, setPin] = useState("");
 
-    const handlePrevious = () => {
-        setStep(step - 1);
-    };
+    const { nextStep, prevStep, reset, activeStep } = useSteps({
+        initialStep: 0,
+    });
+
+    const isLastStep = activeStep === steps.length - 1;
+    const hasCompletedAllSteps = activeStep === steps.length;
+    const bg = useColorModeValue("gray.200", "gray.700");
+    // const [step, setStep] = useState(1);
+    // const [formData, setFormData] = useState<FormData>({});
+
+    // const handleNext = (data: SetStateAction<{}>) => {
+    //     setFormData({ ...formData, ...data });
+    //     setStep(step + 1);
+    // };
+
+    // const handlePrevious = () => {
+    //     setStep(step - 1);
+    // };
 
     const handleReset = () => {
-        setStep(1);
-        setFormData({});
+        setPin("");
+        reset();
     }
 
     return (
-        <Container
-            minW="800px"
-            minH="800px"
-            border="1px solid black"
-            display="flex"
-            justifyContent="center"
+        // <Container
+        //     minW="800px"
+        //     minH="800px"
+        //     border="1px solid black"
+        //     display="flex"
+        //     justifyContent="center"
+        // >
+        //     {step === 1 && (
+        //         <Step1 pinData={formData} onPrevious={handlePrevious} onNext={handleNext} />
+        //     )}
+        //     {step == 2 &&
+        //         <VStack>
+        //             <CreateWallet formData={formData} email={email} handleReset={handleReset} userGid={userGid} />
+        //         </VStack>
+        //     }
+        // </Container>
+        <Box
+            px={20}
+            marginTop={'100px'}
         >
-            {step === 1 && (
-                <Step1 pinData={formData} onPrevious={handlePrevious} onNext={handleNext} />
-            )}
-            {step == 2 &&
-                <VStack>
-                    <CreateWallet formData={formData} email={email} handleReset={handleReset} userGid={userGid} />
-                </VStack>
-            }
-        </Container>
+            <Flex flexDir="column" width="100%">
+                <Steps colorScheme="blue" activeStep={activeStep}>
+                    {steps.map(({ label }, index) => (
+                        <Step label={label} key={label}
+                            description={index === 0 ? "Create pin" : index === 1 ? "Create wallet" : "Create account"}
+                        >
+                            <Box sx={{ p: 8, bg, my: 8, rounded: "md" }}>
+                                <Heading fontSize="xl" textAlign="center">
+                                    {index === 0 ? (
+                                        <CreatePin setPin={setPin} />
+                                    ) : index === 1 ? (
+                                        <CreateWallet pin={pin} email={email} handleReset={handleReset} userGid={userGid}/>
+                                    ) : "Create your account"}
+                                </Heading>
+                            </Box>
+                        </Step>
+                    ))}
+                </Steps>
+                {hasCompletedAllSteps && (
+                    <Box sx={{ bg, my: 8, p: 8, rounded: "md" }}>
+                        <Heading fontSize="xl" textAlign={"center"}>
+                            Woohoo! All steps completed! 🎉
+                        </Heading>
+                    </Box>
+                )}
+                <Flex width="100%" justify="flex-end" gap={4}>
+                    {hasCompletedAllSteps ? (
+                        <Button size="sm" onClick={reset}>
+                            Reset
+                        </Button>
+                    ) : (
+                        <>
+                            <Button
+                                isDisabled={activeStep === 0}
+                                onClick={prevStep}
+                                size="sm"
+                                variant="ghost"
+                            >
+                                Prev
+                            </Button>
+                            <Button size="sm" onClick={nextStep}>
+                                {isLastStep ? "Finish" : "Next"}
+                            </Button>
+                        </>
+                    )}
+                </Flex>
+            </Flex>
+        </Box>
     );
 }