diff --git a/src/Components/HeaderMain.jsx b/src/Components/HeaderMain.jsx
index d227ea0..ecf352e 100644
--- a/src/Components/HeaderMain.jsx
+++ b/src/Components/HeaderMain.jsx
@@ -155,23 +155,24 @@ const HeaderMain = ({
                     </PopoverBody>
                   </Link> */}
                   <PopoverBody className="web-text-medium pointer ">
-                    <VStack>
-                      <Text color="#A0ABBB" fontSize={"small"} fontWeight={600}>
+                    <VStack  alignItems="flex-start">
+                      <Text color="#A0ABBB" textAlign="left"  fontSize={"x-small"} fontWeight={600}>
                         Switch Accounts
                       </Text>
                       {users.map((val) => {
                         return (
-                          <VStack
-                            className="web-text-medium pointer link"
-                            h="50px"
-                            pt={2}
-                            key={val.id}
-                            w="100%"
-                          >
+                          // <VStack
+                          //   className="web-text-medium pointer link"
+                          //   h="50px"
+                          //   pt={1}
+                          //   key={val.id}
+                          //   w="100%"
+                          // >
                             <HStack
                               alignItems="flex-start"
-                              justifyContent="space-evenly"
+                              gap={4}
                               w="100%"
+                              className="pointer link"
                             >
                               <Image
                                 src={womenpfp}
@@ -195,7 +196,7 @@ const HeaderMain = ({
                                 </Text>
                               </Text>
                             </HStack>
-                          </VStack>
+                          // </VStack>
                         );
                       })}
                     </VStack>
diff --git a/src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx b/src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx
index 9538f6c..9a0b46e 100644
--- a/src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx
+++ b/src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import {
   Box, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton, Text, Input, Select, Stack,
+  InputGroup,
+  InputLeftElement,
   HStack,
   Divider,
   Button
@@ -9,16 +11,19 @@ import {
   Step,
   StepIndicator,
   StepSeparator,
+  StepStatus,
   StepTitle,
   Stepper,
 } from '@chakra-ui/react';
-import { IoCheckmark } from "react-icons/io5";
-import PrimaryButton from "../../../../src/Components/Buttons/PrimaryButton";
+import { IoIosCheckmark } from "react-icons/io";
+import { MdCurrencyRupee } from "react-icons/md";
+import { HiOutlineExclamationCircle } from "react-icons/hi2";
+import PrimaryButton from "../../../../src/Components/Buttons/PrimaryButton"
 import RupeeSlider from '../../../Components/RupeeSlider/RupeeSlider';
 import BenifitStepOne from './BenifitStepOne';
-import BenifitStepTwo from './BenifitStepTwo';
-import BenifitStepThree from './BenifitStepThree';
-                        
+import SubmissionPolicy from './SubmissionPolicy';
+import DefineBudget from './DefineBudget';
+
 const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
   // Define steps
   const steps = [
@@ -52,66 +57,48 @@ const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
           <ModalHeader>Create Benefit Wallet</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
-            {/* Stepper Component with 130% width, custom scrollbar and horizontal scroll */}
-            <Box pb={4}
-              overflowX="auto"
-              sx={{
-                '&::-webkit-scrollbar': {
-                  height: '4px',
-                },
-                '&::-webkit-scrollbar-thumb': {
-                  background: '#3725EA', // Custom scrollbar thumb color
-                  borderRadius: '10px',
-                },
-                '&::-webkit-scrollbar-track': {
-                  background: '#e0e0e0', // Custom scrollbar track color
-                },
-              }}
-            >
-              <Box w="130%"> {/* Set the stepper width to 130% */}
-                <Stepper size="lg" index={activeStep} color={"#3725EA"} gap={1}>
-                  {steps.map((step, index) => (
-                    <Step key={index}>
-                      <StepIndicator w={6} h={6}>
-                        <Box
-                          borderRadius="full"
-                          bg={index < activeStep ? '#3725EA' : (index === activeStep ? '#3725EA' : 'gray.300')}
-                          color={index < activeStep || index === activeStep ? 'white' : 'gray.500'}
-                          w={4}
-                          h={4}
-                          display="flex"
-                          alignItems="center"
-                          justifyContent="center"
-                        >
-                          {index < activeStep ? (
-                            <IoCheckmark />
-                          ) : (
-                            <Text mb={0} fontSize={"sm"}>{index + 1}</Text>
-                          )}
-                        </Box>
-                      </StepIndicator>
-
-                      <Box flexShrink="0" ml={2}>
-                        <StepTitle mb={0} fontSize="sm" >
-                          <Text
-                            mb={0}
-                            fontSize="sm"
-                            fontWeight={500}
-                            color={index <= activeStep ? '#3725EA' : 'gray.500'}
-                          >
-                            {step.title}
-                          </Text>
-                        </StepTitle>
-                      </Box>
-
-                      {index !== steps.length - 1 && (
-                        <StepSeparator borderColor="gray.300" />
+            {/* Stepper Component */}
+            <Stepper size="lg" index={activeStep} color={"#3725EA"} gap={1}>
+              {steps.map((step, index) => (
+                <Step key={index}>
+                  <StepIndicator w={6} h={6} >
+                    <Box
+                      borderRadius="full"
+                      bg={index < activeStep ? '#3725EA' : (index === activeStep ? '#3725EA' : 'gray.300')}
+                      color={index < activeStep || index === activeStep ? 'white' : 'gray.500'}
+                      w={4}
+                      h={4}
+                      display="flex"
+                      alignItems="center"
+                      justifyContent="center"
+                    >
+                      {index < activeStep ? (
+                        <IoIosCheckmark boxSize={6} />
+                      ) : (
+                        <Text mb={0} fontSize={"sm"}>{index + 1}</Text>
                       )}
-                    </Step>
-                  ))}
-                </Stepper>
-              </Box>
-            </Box>
+                    </Box>
+                  </StepIndicator>
+
+                  <Box flexShrink="0" ml={2}>
+                    <StepTitle mb={0} fontSize="sm" >
+                      <Text
+                        mb={0}
+                        fontSize="sm"
+                        fontWeight={500}
+                        color={index <= activeStep ? '#3725EA' : 'gray.500'}
+                      >
+                        {step.title}
+                      </Text>
+                    </StepTitle>
+                  </Box>
+
+                  {index !== steps.length - 1 && (
+                    <StepSeparator borderColor="gray.300" />
+                  )}
+                </Step>
+              ))}
+            </Stepper>
             <Divider color={"#f6f1fc"} />
 
             {/* Conditionally render form fields based on active step */}
@@ -124,12 +111,17 @@ const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
 
                 {/* Step 2 Content: Approval Policy */}
                 {activeStep === 1 && (
-                  <BenifitStepTwo />
+                  <Box>
+                    <Text fontSize="sm" fontWeight="500" color={"#344054"} mb={0}>Approval Policy</Text>
+                    <Text>This is step 2 content.</Text>
+                  </Box>
                 )}
 
                 {/* Step 3 Content: Submission Policy */}
                 {activeStep === 2 && (
-                  <BenifitStepThree />
+                  <Box>
+                    <SubmissionPolicy/>
+                  </Box>
                 )}
 
                 {/* Step 4 Content: Define Budget */}
@@ -140,7 +132,7 @@ const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
                 )}
 
                 {/* Stepper Controls */}
-                <HStack justifyContent="center" my={4}>
+                <HStack justifyContent="center" pt={4}>
                   <Button
                     onClick={prevStep}
                     isDisabled={activeStep === 0}