diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx
index 6e82062fa..254dbc022 100644
--- a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx
@@ -15,11 +15,12 @@ const ChatViewComponentTest = () => {
       <h2>Chat UI Test page</h2>
       {/* <CreateGroupModal onClose={()=>{console.log('in close')}} /> */}
       <ChatViewComponentCard>
-      {/* <CreateGroupModal onClose={()=>{console.log('in close')}}  modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} modalPositionType={MODAL_POSITION_TYPE.RELATIVE}/> */}
+      <CreateGroupModal onClose={()=>{console.log('in close')}}  modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} modalPositionType={MODAL_POSITION_TYPE.RELATIVE}/>
 
         <ChatView 
         onVerificationFail={() => console.log("BOIIII RETURNNNSSSSS")} 
-        chatId='0x99A08ac6254dcf7ccc37CeC662aeba8eFA666666' 
+        chatId='92ed5f3f3bcdf58976ce11395786398f6f9e3048d76dc7e6f53ea5d77092fdd6' 
+
         limit={10}
          isConnected={true} 
          groupInfoModalBackground={MODAL_BACKGROUND_TYPE.OVERLAY}
diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/AddWalletContent.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/AddWalletContent.tsx
index e99062b39..536548606 100644
--- a/packages/uiweb/src/lib/components/chat/ChatProfile/AddWalletContent.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatProfile/AddWalletContent.tsx
@@ -35,6 +35,8 @@ type AddWalletContentProps = {
   groupMembers: any;
   isLoading?: boolean;
   modalHeader: string;
+  title?: string;
+  submitButtonTitle?: string;
 };
 export const AddWalletContent = ({
   onSubmit,
@@ -44,6 +46,8 @@ export const AddWalletContent = ({
   handleMemberList,
   groupMembers,
   isLoading,
+  title,
+  submitButtonTitle,
 }: AddWalletContentProps) => {
   const theme = useContext(ThemeContext);
 
@@ -86,6 +90,10 @@ export const AddWalletContent = ({
 
   const addMemberToList = (member: User) => {
     let errorMessage = '';
+    const isMemberAlreadyAdded = memberList?.find(
+      (user: any) => user.wallets.toLowerCase() === member.wallets.toLowerCase()
+    );
+    console.log('member', member);
 
     errorMessage = addWalletValidation(
       member,
@@ -101,7 +109,7 @@ export const AddWalletContent = ({
         toastType: 'ERROR',
         getToastIcon: (size) => <MdError size={size} color="red" />,
       });
-    } else {
+    } else if(!isMemberAlreadyAdded) {
       handleMemberList((prev: any) => [...prev, { ...member, isAdmin: false }]);
     }
 
@@ -123,7 +131,7 @@ export const AddWalletContent = ({
       flexDirection="column"
       padding={isMobile ? '0px auto' : '0px 10px'}
     >
-      <ModalHeader title='Add More Wallets' handleClose={onClose} handlePrevious={handlePrevious} />
+      <ModalHeader title={title ? title : 'Add More Wallets'} handleClose={onClose} handlePrevious={handlePrevious} />
 
       <Section
         margin="50px 0 10px 0"
@@ -137,8 +145,8 @@ export const AddWalletContent = ({
 
         <Span fontSize="14px" color={theme.textColor?.modalSubHeadingText}>
           {groupMembers
-            ? `0${memberList?.length + groupMembers?.length} / 09 Members`
-            : `0${memberList?.length} / 09 Members`}
+            ? `0${memberList?.length + groupMembers?.length} / 5000 Members`
+            : `0${memberList?.length} / 5000 Members`}
         </Span>
       </Section>
 
@@ -162,7 +170,7 @@ export const AddWalletContent = ({
       ) }
 
       <MultipleMemberList>
-        {memberList?.map((member: any, index: any) => (
+        {memberList && memberList?.map((member: any, index: any) => (
           <MemberListContainer
             key={index}
             memberList={memberList}
@@ -176,12 +184,15 @@ export const AddWalletContent = ({
 
       <Section flex="1" alignSelf="center">
         <ModalConfirmButton
-          onClick={() => onSubmit()}
+          onClick={() => {
+            // console.log(groupMembers);
+            onSubmit()
+          }}
           isLoading={isLoading}
           memberListCount={memberList?.length > 0}
           theme={theme}
         >
-          {!isLoading && groupMembers ? 'Add To Group' : ''}
+          {!isLoading && groupMembers ? (submitButtonTitle ? submitButtonTitle : 'Add To Group'): ''}
           {isLoading && <Spinner size="30" color="#fff" />}
         </ModalConfirmButton>
       </Section>
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/AddWallets.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/AddWallets.tsx
new file mode 100644
index 000000000..db2a4f965
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/CreateGroup/AddWallets.tsx
@@ -0,0 +1,95 @@
+import React from "react";
+import { Section, Span } from "../../reusables";
+import { ModalHeader } from "../reusables";
+import { AddWalletContent } from "../ChatProfile/AddWalletContent";
+import { GrouInfoType as GroupInfoType } from "../../chat/types/index"
+import { ProfilePicture } from "../../../config";
+import { MdCheckCircle, MdError } from "react-icons/md";
+import { useCreateGatedGroup } from "../../../hooks/chat/useCreateGatedGroup";
+import useToast from "../reusables/NewToast";
+import { GroupInputDetailsType } from "./CreateGroupModal";
+
+interface AddWalletsInCreateGroupProps {
+    groupInputDetails: GroupInputDetailsType;
+    setGroupInputDetails: React.Dispatch<React.SetStateAction<GroupInputDetailsType>>;
+    groupMembers: string[];
+    setGroupMembers: React.Dispatch<React.SetStateAction<string[]>>;
+    groupAdmins: string[];
+    criteriaStateManager: any;
+    checked: boolean;
+    groupEncryptionType: string;
+    onClose: () => void;
+    handlePrevious: () => void;
+}
+
+const AddWalletsInCreateGroup = ({ handlePrevious, onClose,groupInputDetails, groupEncryptionType, checked, criteriaStateManager, groupMembers, setGroupMembers }: AddWalletsInCreateGroupProps) => {
+    const { createGatedGroup } = useCreateGatedGroup();
+    const groupInfoToast = useToast();
+    const getEncryptionType = () => {
+        if (groupEncryptionType === 'encrypted') {
+            return false;
+        }
+        return true;
+    };
+
+    const showError = (errorMessage: string) => {
+        groupInfoToast.showMessageToast({
+            toastTitle: 'Error',
+            toastMessage: errorMessage,
+            toastType: 'ERROR',
+            getToastIcon: (size) => <MdError size={size} color="red" />,
+        });
+    };
+
+    const createGroupService = async () => {
+        const groupInfo: GroupInfoType = {
+            groupName: groupInputDetails.groupName,
+            groupDescription: groupInputDetails.groupDescription,
+            groupImage: groupInputDetails.groupImage || ProfilePicture,
+            isPublic: getEncryptionType(),
+            members: groupInputDetails.groupMembers.filter((member: any) => !member.isAdmin).map((member: any) => member.wallets),
+            admins: groupInputDetails.groupMembers.filter((member: any) => member.isAdmin).map((member: any) => member.wallets),
+        };
+        const rules: any = checked ? criteriaStateManager.generateRule() : {};
+        const isSuccess = await createGatedGroup(groupInfo, rules);
+        if (isSuccess === true) {
+            groupInfoToast.showMessageToast({
+                toastTitle: 'Success',
+                toastMessage: 'Group created successfully',
+                toastType: 'SUCCESS',
+                getToastIcon: (size: string | number | undefined) => <MdCheckCircle size={size} color="green" />,
+            });
+            onClose();
+        } else {
+            showError('Group creation failed');
+        }
+    }
+
+    const verifyAndCreateGroup = async () => {
+        if (groupEncryptionType.trim() === '') {
+          showError('Group encryption type is not selected');
+          return;
+        }
+    
+        await createGroupService();
+      };
+
+    return (
+        <Section>
+            <AddWalletContent
+                title="Create Group"
+                submitButtonTitle="Create Group"
+                onSubmit={verifyAndCreateGroup}
+                onClose={onClose}
+                handlePrevious={handlePrevious}
+                memberList={groupMembers}
+                handleMemberList={setGroupMembers}
+                groupMembers={groupInputDetails.groupMembers}
+                isLoading={false}
+                modalHeader="Add Wallets"
+            />
+        </Section>
+    )
+}
+
+export default AddWalletsInCreateGroup;
\ No newline at end of file
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx
index 5c7252688..4054f61fd 100644
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx
+++ b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx
@@ -11,7 +11,7 @@ import { TextInput } from '../reusables/TextInput';
 import { TextArea } from '../reusables/TextArea';
 import { Section, Span } from '../../reusables';
 import { Button } from '../reusables';
-import { CreateGroupType } from './CreateGroupType';
+import { CreateGroupType, GROUP_TYPE_OPTIONS } from './CreateGroupType';
 import useToast from '../reusables/NewToast';
 import { CreateGroupModalProps, IChatTheme, MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE } from '../exportedTypes';
 import useMediaQuery from '../../../hooks/useMediaQuery';
@@ -28,21 +28,25 @@ import { Image } from '../../../config/styles';
 import { ProfilePicture, device } from '../../../config';
 import { CriteriaValidationErrorType } from '../types';
 import AutoImageClipper from './AutoImageClipper';
+import AddWalletsInCreateGroup from './AddWallets';
 
 export const CREATE_GROUP_STEP_KEYS = {
   INPUT_DETAILS: 1,
   GROUP_TYPE: 2,
   DEFINITE_CONDITION: 3,
   ADD_CRITERIA: 4,
+  ADD_MEMBERS: 5,
 } as const;
 
 export type CreateGroupStepKeys =
   typeof CREATE_GROUP_STEP_KEYS[keyof typeof CREATE_GROUP_STEP_KEYS];
 
-interface GroupInputDetailsType {
+export interface GroupInputDetailsType {
   groupName: string;
   groupDescription: string;
   groupImage: string;
+  groupMembers: string[];
+  groupAdmins: string[];
 }
 
 export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
@@ -58,6 +62,12 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
   const handleNext = () => {
     setActiveComponent((activeComponent + 1) as CreateGroupStepKeys);
   };
+  const handleAddWallets = () => {
+    setActiveComponent((activeComponent + 3) as CreateGroupStepKeys)
+  }
+  const handlePreviousfromAddWallets = () => {
+    setActiveComponent((activeComponent - 3) as CreateGroupStepKeys)
+  }
   const handlePrevious = () => {
     setActiveComponent((activeComponent - 1) as CreateGroupStepKeys);
   };
@@ -74,6 +84,12 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
   }, [activeComponent]);
 
   const useDummyGroupInfo = false;
+  const [groupMembers, setGroupMembers] = useState<string[]>([]);
+  const [groupAdmins, setGroupAdmins] = useState<string[]>([]);
+  const [checked, setChecked] = useState<boolean>(true);
+  const [groupEncryptionType, setGroupEncryptionType] = useState(
+    GROUP_TYPE_OPTIONS[0].value
+  );
   const [groupInputDetails, setGroupInputDetails] =
     useState<GroupInputDetailsType>({
       groupName: useDummyGroupInfo ? 'This is duumy group name' : '',
@@ -81,28 +97,47 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
         ? 'This is dummy group description for testing'
         : '',
       groupImage: useDummyGroupInfo ? ProfilePicture : '',
+      groupMembers: useDummyGroupInfo ? groupMembers : [],
+      groupAdmins: useDummyGroupInfo ? groupAdmins : [],
     });
+  const [isImageUploaded, setIsImageUploaded] = useState<boolean>(false);
+  
+    useEffect(() => {
+      setGroupInputDetails({
+        ...groupInputDetails,
+        groupMembers: groupMembers,
+      });
+    }, [groupMembers])
 
   const renderComponent = () => {
     switch (activeComponent) {
       case CREATE_GROUP_STEP_KEYS.INPUT_DETAILS:
         return (
           <CreateGroupDetail
+            checked={checked}
+            setChecked={setChecked}
             criteriaStateManager={criteriaStateManager}
             handleNext={handleNext}
             onClose={onClose}
             groupInputDetails={groupInputDetails}
             setGroupInputDetails={setGroupInputDetails}
+            isImageUploaded={isImageUploaded}
+            setIsImageUploaded={setIsImageUploaded}
           />
         );
       case CREATE_GROUP_STEP_KEYS.GROUP_TYPE:
         return (
           <CreateGroupType
+          groupEncryptionType={groupEncryptionType}
+          setGroupEncryptionType={setGroupEncryptionType}
+          checked={checked}
+          setChecked={setChecked}
             criteriaStateManager={criteriaStateManager}
             groupInputDetails={groupInputDetails}
             handleNext={handleNext}
             onClose={onClose}
             handlePrevious={handlePrevious}
+            handleAddWallets={handleAddWallets}
           />
         );
       case CREATE_GROUP_STEP_KEYS.DEFINITE_CONDITION:
@@ -122,6 +157,10 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
             onClose={onClose}
           />
         );
+      case CREATE_GROUP_STEP_KEYS.ADD_MEMBERS:
+        return (
+          <AddWalletsInCreateGroup handlePrevious={handlePreviousfromAddWallets} onClose={onClose} groupEncryptionType={groupEncryptionType} checked={checked} groupAdmins={groupAdmins} criteriaStateManager={criteriaStateManager} groupInputDetails={groupInputDetails} setGroupInputDetails={setGroupInputDetails} groupMembers={groupMembers} setGroupMembers={setGroupMembers} />
+        )
       default:
         return (
           <CreateGroupDetail
@@ -130,6 +169,8 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
             onClose={onClose}
             groupInputDetails={groupInputDetails}
             setGroupInputDetails={setGroupInputDetails}
+            isImageUploaded={isImageUploaded}
+            setIsImageUploaded={setIsImageUploaded}
           />
         );
     }
@@ -147,6 +188,13 @@ export interface ModalHeaderProps {
   handlePrevious?: () => void;
   onClose: () => void;
   criteriaStateManager: CriteriaStateManagerType;
+  checked?: boolean;
+  setChecked?: React.Dispatch<React.SetStateAction<boolean>>;
+  groupEncryptionType?: string;
+  setGroupEncryptionType?: React.Dispatch<React.SetStateAction<string>>;
+  handleAddWallets?: () => void;
+  isImageUploaded?: boolean;
+  setIsImageUploaded?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 interface GroupDetailState {
@@ -165,15 +213,15 @@ const CreateGroupDetail = ({
   onClose,
   groupInputDetails,
   setGroupInputDetails,
+  isImageUploaded,
+  setIsImageUploaded,
 }: ModalHeaderProps & GroupDetailState) => {
-  const groupInfoToast = useToast();
   const { groupName, groupDescription, groupImage } = groupInputDetails;
   const theme = useContext(ThemeContext);
   const [validationErrors, setValidationErrors] =
     useState<CriteriaValidationErrorType>({});
   const fileUploadInputRef = useRef<HTMLInputElement>(null);
   const isMobile = useMediaQuery(device.mobileL);
-  const [isImageUploaded, setIsImageUploaded] = useState<boolean>(false);
   const [imageSrc, setImageSrc] = useState<string | null>();
 
   const handleChange = (e: Event) => {
@@ -185,13 +233,16 @@ const CreateGroupDetail = ({
     }
     if (
       (e.target as HTMLInputElement).files &&
-      ((e.target as HTMLInputElement).files as FileList).length
+      ((e.target as HTMLInputElement).files as FileList).length &&
+      setIsImageUploaded
     ) {
       setIsImageUploaded(true);
       setGroupInputDetails({
         groupDescription,
         groupName,
         groupImage: '',
+        groupMembers: [],
+        groupAdmins: [],
       });
       const reader = new FileReader();
       reader.readAsDataURL(e.target.files[0]);
@@ -207,15 +258,6 @@ const CreateGroupDetail = ({
     }
   };
 
-  const showError = (errorMessage: string) => {
-    groupInfoToast.showMessageToast({
-      toastTitle: 'Error',
-      toastMessage: errorMessage,
-      toastType: 'ERROR',
-      getToastIcon: (size) => <MdError size={size} color="red" />,
-    });
-  };
-
   const verifyAndHandelNext = () => {
     const skipVerify = false;
 
@@ -247,7 +289,6 @@ const CreateGroupDetail = ({
       fileUploadInputRef.current.click();
     }
   };
-
   //groupImage and desccription is optional
   return (
     <Section
@@ -280,6 +321,8 @@ const CreateGroupDetail = ({
                   groupDescription,
                   groupName,
                   groupImage: croppedImage,
+                  groupMembers: [],
+                  groupAdmins: [],
                 })
               }
               width={undefined}
@@ -310,6 +353,8 @@ const CreateGroupDetail = ({
               groupDescription,
               groupName: e.target.value,
               groupImage,
+              groupMembers: [],
+              groupAdmins: [],
             })
           }
           error={!!validationErrors?.groupName}
@@ -328,6 +373,8 @@ const CreateGroupDetail = ({
               groupDescription: e.target.value,
               groupName,
               groupImage,
+              groupMembers: [],
+              groupAdmins: [],
             })
           }
           error={!!validationErrors?.groupDescription}
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx
index d7a21bdc1..55f3e33c4 100644
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx
+++ b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx
@@ -1,6 +1,5 @@
 import { useContext, useState } from 'react';
 
-import { MdCheckCircle, MdError } from 'react-icons/md';
 import styled from 'styled-components';
 
 import { ModalHeader } from '../reusables/Modal';
@@ -11,7 +10,6 @@ import { Button } from '../reusables';
 import {  ModalHeaderProps } from './CreateGroupModal';
 import { GroupTypeState } from './CreateGroupModal';
 import { ThemeContext } from '../theme/ThemeProvider';
-import useToast from '../reusables/NewToast';
 import {
   ConditionType,
   CriteriaStateType,
@@ -19,14 +17,11 @@ import {
 import ConditionsComponent from './ConditionsComponent';
 import { OperatorContainer } from './OperatorContainer';
 import { SelectedCriteria } from '../../../hooks/chat/useCriteriaState';
-import { useCreateGatedGroup } from '../../../hooks/chat/useCreateGatedGroup';
-import { GrouInfoType as GroupInfoType } from '../types';
 
 import { ACCESS_TYPE_TITLE } from '../constants';
 import { IChatTheme } from '../exportedTypes';
-import { ProfilePicture } from '../../../config';
 
-const GROUP_TYPE_OPTIONS: Array<OptionDescription> = [
+export const GROUP_TYPE_OPTIONS: Array<OptionDescription> = [
   {
     heading: 'Public',
     subHeading: 'Anyone can view chats, even without joining',
@@ -132,67 +127,18 @@ const AddConditionSection = ({
 export const CreateGroupType = ({
   onClose,
   handlePrevious,
-  groupInputDetails,
   handleNext,
   criteriaStateManager,
+  checked = false,
+  setChecked,
+  handleAddWallets,
 }: ModalHeaderProps & GroupTypeState) => {
-  const [checked, setChecked] = useState<boolean>(true);
   const [groupEncryptionType, setGroupEncryptionType] = useState(
     GROUP_TYPE_OPTIONS[0].value
   );
 
-  const { createGatedGroup, loading } = useCreateGatedGroup();
-  const groupInfoToast = useToast();
   const theme = useContext(ThemeContext);
-
-  const getEncryptionType = () => {
-    if (groupEncryptionType === 'encrypted') {
-      return false;
-    }
-    return true;
-  };
-
-  const createGroupService = async () => {
-    const groupInfo: GroupInfoType = {
-      groupName: groupInputDetails.groupName,
-      groupDescription: groupInputDetails.groupDescription,
-      groupImage: groupInputDetails.groupImage || ProfilePicture,
-      isPublic: getEncryptionType(),
-    };
-    const rules: any = checked ? criteriaStateManager.generateRule() : {};
-    const isSuccess = await createGatedGroup(groupInfo, rules);
-    if (isSuccess === true) {
-      groupInfoToast.showMessageToast({
-        toastTitle: 'Success',
-        toastMessage: 'Group created successfully',
-        toastType: 'SUCCESS',
-        getToastIcon: (size) => <MdCheckCircle size={size} color="green" />,
-      });
-    } else {
-      showError('Group creation failed');
-    }
-
-    onClose();
-  };
-
-  const verifyAndCreateGroup = async () => {
-    if (groupEncryptionType.trim() === '') {
-      showError('Group encryption type is not selected');
-      return;
-    }
-
-    await createGroupService();
-  };
-
-  const showError = (errorMessage: string) => {
-    groupInfoToast.showMessageToast({
-      toastTitle: 'Error',
-      toastMessage: errorMessage,
-      toastType: 'ERROR',
-      getToastIcon: (size) => <MdError size={size} color="red" />,
-    });
-  };
-
+  
   return (
     <Section flexDirection="column" gap="16px">
       <ModalHeader
@@ -220,7 +166,7 @@ export const CreateGroupType = ({
             labelHeading="Gated Group"
             labelSubHeading="Turn this on for Token/NFT gating options"
             checked={checked}
-            onToggle={() => setChecked(!checked)}
+            onToggle={() => setChecked ? setChecked(!checked) : null}
           />
 
           {checked && (
@@ -254,9 +200,8 @@ export const CreateGroupType = ({
         </Section>
       </ScrollSection>
       <Section gap="16px" flexDirection="column">
-        <Button width="197px" onClick={verifyAndCreateGroup}>
-          {!loading && 'Create Group'}
-          {loading && <Spinner size="20" color="#fff" />}
+        <Button width="197px" onClick={handleAddWallets}>
+          Next
         </Button>
         <InfoContainer label='Learn more about access gating rules' cta='https://push.org/docs/chat/build/conditional-rules-for-group/' />
       </Section>
diff --git a/packages/uiweb/src/lib/components/chat/types/index.ts b/packages/uiweb/src/lib/components/chat/types/index.ts
index 0f51020e9..2b696a180 100644
--- a/packages/uiweb/src/lib/components/chat/types/index.ts
+++ b/packages/uiweb/src/lib/components/chat/types/index.ts
@@ -5,6 +5,8 @@ export interface GrouInfoType{
   groupDescription:string;
   groupImage:string;
   isPublic: boolean;
+  members: string[];
+  admins: string[];
 }
 
 export const TYPE = {
diff --git a/packages/uiweb/src/lib/hooks/chat/useCreateGatedGroup.ts b/packages/uiweb/src/lib/hooks/chat/useCreateGatedGroup.ts
index 2753671d6..b575dd58a 100644
--- a/packages/uiweb/src/lib/hooks/chat/useCreateGatedGroup.ts
+++ b/packages/uiweb/src/lib/hooks/chat/useCreateGatedGroup.ts
@@ -17,8 +17,8 @@ export const useCreateGatedGroup = () => {
           groupDescription:groupInfoType.groupDescription,
           groupImage:groupInfoType.groupImage,
           isPublic: groupInfoType.isPublic,
-          members: [],
-          admins: [],
+          members: groupInfoType.members,
+          admins: groupInfoType.admins,
           account: account || undefined,
           env: env,
           pgpPrivateKey: pgpPrivateKey || undefined,
diff --git a/packages/uiweb/src/lib/types/index.ts b/packages/uiweb/src/lib/types/index.ts
index f345c9f2b..9375255bf 100644
--- a/packages/uiweb/src/lib/types/index.ts
+++ b/packages/uiweb/src/lib/types/index.ts
@@ -24,7 +24,7 @@ export interface IMessageIPFS {
   link: string | null;
   timestamp?: number;
   encType: string;
-  encryptedSecret: string;
+  encryptedSecret: string | null;
   icon?: ReactElement<string | any>;
 }