diff --git a/src/components/AddLeanerModal.tsx b/src/components/AddLeanerModal.tsx
index 1f4d9da8..e741885c 100644
--- a/src/components/AddLeanerModal.tsx
+++ b/src/components/AddLeanerModal.tsx
@@ -6,15 +6,16 @@ import {
 } from '@/components/GeneratedSchemas';
 import { IChangeEvent } from '@rjsf/core';
 import ISubmitEvent from '@rjsf/core';
-import { Box } from '@mui/material';
+import { Box, Button, useTheme } from '@mui/material';
 import { RJSFSchema } from '@rjsf/utils';
 import SendCredentialModal from '@/components/SendCredentialModal';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { getFormRead } from '@/services/CreateUserService';
+import { createUser, getFormRead } from '@/services/CreateUserService';
 import { FormData } from '@/utils/Interfaces';
 import { FormContext, FormContextType } from '@/utils/app.constant';
 import SimpleModal from '@/components/SimpleModal';
 import { useTranslation } from 'react-i18next';
+import { generateUsernameAndPassword } from '@/utils/Helper';
 
 interface AddLearnerModalProps {
   open: boolean;
@@ -23,7 +24,16 @@ interface AddLearnerModalProps {
 const AddLearnerModal: React.FC<AddLearnerModalProps> = ({ open, onClose }) => {
   const [schema, setSchema] = React.useState<any>();
   const [uiSchema, setUiSchema] = React.useState<any>();
+  const [credentials, setCredentials] = React.useState({ username: '', password: '' });
+  // const [learnerFormData, setLearnerFormData] = React.useState<any>();
   const { t } = useTranslation();
+  const theme = useTheme<any>();
+
+  const handleGenerateCredentials = () => {
+    const stateCode = 'MH';
+    const newCredentials = generateUsernameAndPassword(stateCode);
+    setCredentials(newCredentials);
+  };
 
   useEffect(() => {
     const getAddLearnerFormData = async () => {
@@ -71,12 +81,79 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({ open, onClose }) => {
 
   const handleChange = (event: IChangeEvent<any>) => {
     console.log('Form data changed:', event.formData);
+    // setFormData({
+    //   ...formData,
+    //   [event.target.name]: event.target.value
+    // });
   };
 
   const handleError = (errors: any) => {
     console.log('Form errors:', errors);
   };
 
+  const CustomSubmitButton: React.FC<{ onClose: () => void }> = ({ onClose }) => (
+    <div
+      style={{
+        marginTop: '16px',
+        display: 'flex',
+        justifyContent: 'space-between',
+      }}
+    >
+      <>
+        <Button
+          variant="outlined"
+          color="primary"
+          sx={{
+            '&.Mui-disabled': {
+              backgroundColor: theme?.palette?.primary?.main,
+            },
+            minWidth: '84px',
+            height: '2.5rem',
+            padding: theme.spacing(1),
+            fontWeight: '500',
+            width: '48%',
+          }}
+          onClick={onClose}
+        >
+          {t('COMMON.BACK')}
+        </Button>
+        <Button
+          variant="contained"
+          color="primary"
+          sx={{
+            '&.Mui-disabled': {
+              backgroundColor: theme?.palette?.primary?.main,
+            },
+            minWidth: '84px',
+            height: '2.5rem',
+            padding: theme.spacing(1),
+            fontWeight: '500',
+            width: '48%',
+          }}
+          onClick={secondaryActionHandler}
+        >
+          {t('COMMON.SUBMIT')}
+        </Button>
+      </>
+    </div>
+  );
+
+  const primaryActionHandler = () => {
+    onClose();
+  };
+
+  const secondaryActionHandler = async (e: React.FormEvent) => {
+    // console.log('Secondary action handler clicked');
+    e.preventDefault();
+    handleGenerateCredentials();
+    // try {
+    //   const response = await createUser(learnerFormData);
+    //   console.log('User created successfully', response);
+    // } catch (error) {
+    //   console.error('Error creating user', error);
+    // }
+  };
+
   return (
     <>
       <SimpleModal
@@ -95,8 +172,9 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({ open, onClose }) => {
             widgets={{}}
             showErrorList={true}
             customFields={customFields}
-            showTwoButtons={true} 
-          />
+          >
+            <CustomSubmitButton onClose={primaryActionHandler}/>
+            </DynamicForm>
         )}
       </SimpleModal>
     </>
diff --git a/src/components/DynamicForm.tsx b/src/components/DynamicForm.tsx
index c35c9dd0..962fc6c6 100644
--- a/src/components/DynamicForm.tsx
+++ b/src/components/DynamicForm.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { IChangeEvent } from '@rjsf/core';
 import validator from '@rjsf/validator-ajv8';
 import { Theme as MaterialUITheme } from '@rjsf/mui';
@@ -29,7 +29,7 @@ interface DynamicFormProps {
   customFields: {
     [key: string]: React.FC<RegistryFieldsType<any, RJSFSchema, any>>;
   };
-  showTwoButtons?: boolean;
+  children?: ReactNode
 }
 const DynamicForm: React.FC<DynamicFormProps> = ({
   schema,
@@ -39,15 +39,14 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
   onChange,
   onError,
   customFields,
-  showTwoButtons = false,
+  children
 }) => {
   const widgets = {
     MultiSelectCheckboxes: MultiSelectCheckboxes,
     CustomRadioWidget: CustomRadioWidget,
   };
-
   const { t } = useTranslation();
-  const theme = useTheme<any>();
+
 
   // console.log('CustomErrorList', CustomErrorList);
 
@@ -130,87 +129,6 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
     onChange(event);
   }
 
-  const primaryActionHandler = () => {
-    const formElement = document.getElementById(
-      'dynamic-form'
-    ) as HTMLFormElement;
-    if (formElement) {
-      formElement.dispatchEvent(
-        new Event('submit', { cancelable: true, bubbles: true })
-      );
-    }
-  };
-
-  const secondaryActionHandler = () => {
-    console.log('Secondary action handler clicked');
-  };
-
-  const CustomSubmitButton = () => (
-    <div
-      style={{
-        marginTop: '16px',
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      {showTwoButtons ? (
-        <>
-          <Button
-            variant="outlined"
-            color="primary"
-            sx={{
-              '&.Mui-disabled': {
-                backgroundColor: theme?.palette?.primary?.main,
-              },
-              minWidth: '84px',
-              height: '2.5rem',
-              padding: theme.spacing(1),
-              fontWeight: '500',
-              width: '48%',
-            }}
-            onClick={primaryActionHandler}
-          >
-          {t('COMMON.BACK')}
-          </Button>
-          <Button
-            variant="contained"
-            color="primary"
-            sx={{
-              '&.Mui-disabled': {
-                backgroundColor: theme?.palette?.primary?.main,
-              },
-              minWidth: '84px',
-              height: '2.5rem',
-              padding: theme.spacing(1),
-              fontWeight: '500',
-              width: '48%',
-            }}
-            onClick={secondaryActionHandler}
-          >
-            {t('COMMON.SUBMIT')}
-          </Button>
-        </>
-      ) : (
-        <Button
-          variant="contained"
-          color="primary"
-          sx={{
-            '&.Mui-disabled': {
-              backgroundColor: theme?.palette?.primary?.main,
-            },
-            minWidth: '84px',
-            height: '2.5rem',
-            padding: theme.spacing(1),
-            fontWeight: '500',
-            width: '100%',
-          }}
-          onClick={secondaryActionHandler}
-        >
-          Submit
-        </Button>
-      )}
-    </div>
-  );
 
   return (
     <div>
@@ -229,8 +147,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
         transformErrors={transformErrors}
         fields={customFields}
       >
-        <Divider />
-        <CustomSubmitButton />
+        {children}
       </FormWithMaterialUI>
     </div>
   );
diff --git a/src/utils/Helper.ts b/src/utils/Helper.ts
index b3af8d42..99791a9e 100644
--- a/src/utils/Helper.ts
+++ b/src/utils/Helper.ts
@@ -267,3 +267,13 @@ export const accessGranted = (
   }
   return false;
 };
+
+export const generateUsernameAndPassword = (stateCode: string) => {
+  const currentYear = new Date().getFullYear().toString().slice(-2);
+  const randomNum = Math.floor(10000 + Math.random() * 90000).toString(); 
+
+  const username = `SC${stateCode}${currentYear}${randomNum}`;
+  const password = randomNum;
+
+  return { username, password };
+};
diff --git a/src/utils/app.constant.ts b/src/utils/app.constant.ts
index 9426165b..dbd1a033 100644
--- a/src/utils/app.constant.ts
+++ b/src/utils/app.constant.ts
@@ -47,3 +47,10 @@ export enum FormContextType {
   TEACHER = 'TEACHER',
   TEAM_LEADER = 'TEAMLEADER',
 }
+
+export enum RoleId {
+  STUDENT = '493c04e2-a9db-47f2-b304-503da358d5f4',
+  TEACHER = '3bde0028-6900-4900-9d05-eeb608843718',
+  TEAM_LEADER = '9dd9328f-1bc7-444f-96e3-c5e1daa3514a',
+  ADMIN = 'ee482faf-8a41-45fe-9656-5533dd6a787c'
+}