diff --git a/packages/examples/sdk-frontend-react/src/app/app.tsx b/packages/examples/sdk-frontend-react/src/app/app.tsx
index 98a5bd2c7..e4e7d2303 100644
--- a/packages/examples/sdk-frontend-react/src/app/app.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/app.tsx
@@ -313,7 +313,7 @@ export function App() {
           <Web3Context.Provider value={{ account, active, library, chainId }}>
             <SocketContext.Provider value={socketData}>
               <AccountContext.Provider value={{ pgpPrivateKey, setSpaceId }}>
-                <ChatUIProvider  env={env} theme={darkChatTheme} account={account} pgpPrivateKey={pgpPrivateKey} signer={signer}>
+                <ChatUIProvider  env={env} theme={lightChatTheme} account={account} pgpPrivateKey={pgpPrivateKey} signer={signer}>
                   <SpacesUIProvider spaceUI={spaceUI} theme={customDarkTheme}>
                     <Routes>
                       <Route
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/AddCriteria.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/AddCriteria.tsx
index 8f9bbd0c2..400c87868 100644
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/AddCriteria.tsx
+++ b/packages/uiweb/src/lib/components/chat/CreateGroup/AddCriteria.tsx
@@ -1,5 +1,8 @@
 import { useContext, useEffect, useState } from 'react';
 
+import styled from 'styled-components';
+import { MdError } from 'react-icons/md';
+
 import {
   Button,
   DropDownInput,
@@ -7,7 +10,7 @@ import {
   ModalHeader,
   TextInput,
 } from '../reusables';
-import { Section, } from '../../reusables';
+import { Section, Span, Spinner } from '../../reusables';
 import useMediaQuery from '../../../hooks/useMediaQuery';
 import { GatingRulesInformation, ModalHeaderProps } from './CreateGroupModal';
 import { useChatData } from '../../../hooks';
@@ -32,21 +35,32 @@ import {
   TypeKeys,
   ReadonlyInputType,
 } from '../types';
-import { Data, GuildData, PushData, Rule } from '../types/tokenGatedGroupCreationType';
-
+import useToast from '../reusables/NewToast';
+import { tokenFetchHandler } from '../helpers/tokenHelpers';
+import {
+  CriteriaValidationErrorType,
+  Data,
+  GuildData,
+  PushData,
+  Rule,
+} from '../types/tokenGatedGroupCreationType';
+import { validationCriteria } from '../helpers';
 
 
 const AddCriteria = ({
   handlePrevious,
   handleNext,
   onClose,
-  criteriaStateManager
+  criteriaStateManager,
 }: ModalHeaderProps) => {
   const [selectedTypeValue, setSelectedTypeValue] = useState<number>(0);
+  const [validationErrors, setValidationErrors] =
+    useState<CriteriaValidationErrorType>({});
   const [selectedCategoryValue, setSelectedCategoryValue] = useState<number>(0);
   const [selectedSubCategoryValue, setSelectedSubCategoryValue] =
     useState<number>(0);
-    const [guildComparison, setGuildComparison] = useState('')
+  const [validationLoading, setValidationLoading] = useState<boolean>(false);
+  const [guildComparison, setGuildComparison] = useState('');
   const [selectedChainValue, setSelectedChainValue] = useState<number>(0);
   const [contract, setContract] = useState<string>('');
   const [inviteCheckboxes, setInviteCheckboxes] = useState<{
@@ -56,6 +70,8 @@ const AddCriteria = ({
   const [url, setUrl] = useState<string>('');
   const [guildId, setGuildId] = useState<string>('');
   const [specificRoleId, setSpecificRoleId] = useState<string>('');
+  const [unit, setUnit] = useState('TOKEN');
+  const [decimals, setDecimals] = useState(18);
 
   const [quantity, setQuantity] = useState<{ value: number; range: number }>({
     value: 0,
@@ -63,6 +79,7 @@ const AddCriteria = ({
   });
   const { env } = useChatData();
   const theme = useContext(ThemeContext);
+  const groupInfoToast = useToast();
 
   const isMobile = useMediaQuery(device.mobileL);
 
@@ -151,23 +168,15 @@ const AddCriteria = ({
     },
   };
 
-  const tokenCategoryValues = [
-    {
-      id: 0,
+  const dropdownSubCategoryValues: DropdownSubCategoryValuesType = {
+    ERC20: {
       value: SUBCATEGORY.HOLDER,
       title: 'Holder',
-      function: () => setSelectedSubCategoryValue(0),
     },
-    {
-      id: 1,
+    ERC721:{
       value: SUBCATEGORY.OWENER,
       title: 'Owner',
-      function: () => setSelectedSubCategoryValue(1),
     },
-  ];
-  const dropdownSubCategoryValues: DropdownSubCategoryValuesType = {
-    ERC20: tokenCategoryValues,
-    ERC721: tokenCategoryValues,
     INVITE: {
       value: SUBCATEGORY.DEFAULT,
       title: 'Default',
@@ -284,133 +293,207 @@ const AddCriteria = ({
     setQuantity({ ...quantity, value: e.target.value });
   };
 
-  const verifyAndDoNext = ()=>{
-    const _type = dropdownTypeValues[selectedTypeValue].value as 'PUSH' | 'GUILD'
-    const category:string = _type === "PUSH" ? (dropdownCategoryValues[_type] as DropdownValueType[])[
-      selectedCategoryValue
-    ].value || CATEGORY.ERC20 : "ROLES"
- 
-    let subCategory = "DEFAULT"
-    if(_type === "PUSH"){ 
-      if(category === CATEGORY.ERC20 || category === CATEGORY.ERC721){
-        subCategory = tokenCategoryValues[selectedSubCategoryValue].value
-      }else if(category === CATEGORY.CustomEndpoint){
-        subCategory = "GET"
-      } 
+  const verifyAndDoNext = async () => {
+    setValidationLoading(true);
+    const _type = dropdownTypeValues[selectedTypeValue].value as
+      | 'PUSH'
+      | 'GUILD';
+    const category: string =
+      _type === 'PUSH'
+        ? (dropdownCategoryValues[_type] as DropdownValueType[])[
+            selectedCategoryValue
+          ].value || CATEGORY.ERC20
+        : 'ROLES';
+
+    let subCategory = 'DEFAULT';
+    if (_type === 'PUSH') {
+      if (category === CATEGORY.ERC20 || category === CATEGORY.ERC721) {
+        subCategory = category === CATEGORY.ERC20 ? SUBCATEGORY.HOLDER :  SUBCATEGORY.OWENER
+      } else if (category === CATEGORY.CustomEndpoint) {
+        subCategory = 'GET';
+      }
     }
-    
-    const getData = (type:string, category:string):Data=>{
-      if(type === "PUSH"){
-        if(category === CATEGORY.ERC20 || category === CATEGORY.ERC721){
-          const selectedChain = dropdownChainsValues[selectedChainValue].value || 'eip155:1';
+
+    const getData = (type: string, category: string): Data => {
+      if (type === 'PUSH') {
+        if (category === CATEGORY.ERC20 || category === CATEGORY.ERC721) {
+          const selectedChain =
+            dropdownChainsValues[selectedChainValue].value || 'eip155:1';
           return {
             contract: `${selectedChain}:${contract}`,
             amount: quantity.value,
-            comparison:dropdownQuantityRangeValues[quantity.range].value,
-            decimals: 18,
-          }
-        }else if(category === CATEGORY.INVITE){
-          const _inviteRoles = []
-          if(inviteCheckboxes.admin){
-            _inviteRoles.push("ADMIN")
+            comparison: dropdownQuantityRangeValues[quantity.range].value,
+            decimals: category === CATEGORY.ERC20 ? decimals : undefined,
+            token: unit,
+          };
+        } else if (category === CATEGORY.INVITE) {
+          const _inviteRoles = [];
+          if (inviteCheckboxes.admin) {
+            _inviteRoles.push('ADMIN');
           }
-          if(inviteCheckboxes.owner){
-            _inviteRoles.push("OWNER")
+          if (inviteCheckboxes.owner) {
+            _inviteRoles.push('OWNER');
           }
 
-          return{
-            inviterRoles: _inviteRoles as ['OWNER' | 'ADMIN']
-          }
-        }else{
-          // CATEGORY.CustomEndpoint
-          // TODO: validate url
-          return{
-            url:url
-          }
+          return {
+            inviterRoles: _inviteRoles as ['OWNER' | 'ADMIN'],
+          };
+        } else {
+          return {
+            url: url,
+          };
         }
-      }else{
-        // GUILD type
+      } else {
         return {
-          id:guildId,
-          comparison:guildComparison,
-          role:guildComparison === 'specific' ? specificRoleId : "*",
-        }
+          id: guildId,
+          comparison: guildComparison === 'specific' ? '' : guildComparison,
+          role: guildComparison === 'specific' ? specificRoleId : '*',
+        };
       }
-    }
+    };
 
-    const rule:Rule = {
+    const rule: Rule = {
       type: _type,
       category: category,
       subcategory: subCategory,
       data: getData(_type, category),
+    };
+
+    //guild validation added
+    const errors = await validationCriteria(rule);
+    setValidationLoading(false);
+    if (Object.keys(errors).length) {
+      setValidationErrors(errors);
+    } else {
+      const isSuccess = criteriaState.addNewRule(rule);
+      if (!isSuccess) {
+        showError('Selected Criteria was already added');
+        return;
+      }
+      if (handlePrevious) {
+        handlePrevious();
+      }
     }
+  };
 
-    criteriaState.addNewRule(rule)
+  const criteriaState = criteriaStateManager.getSelectedCriteria();
 
-    if(handlePrevious){
-      handlePrevious()
-    }
+  // Autofill the form for the update
+  useEffect(() => {
+    if (criteriaState.isUpdateCriteriaEnabled()) {
+      //Load the states
+      const oldValue =
+        criteriaState.selectedRules[criteriaState.updateCriteriaIdx];
+
+      if (oldValue.type === 'PUSH') {
+        // category
+        setSelectedCategoryValue(
+          (dropdownCategoryValues.PUSH as DropdownValueType[]).findIndex(
+            (obj) => obj.value === oldValue.category
+          )
+        );
 
-  }
+        const pushData = oldValue.data as PushData;
 
-  const criteriaState = criteriaStateManager.getSelectedCriteria()
+        // sub category
+        if (
+          oldValue.category === CATEGORY.ERC20 ||
+          oldValue.category === CATEGORY.ERC721
+        ) {
+          
+          if(pushData.token){
+            setUnit(pushData.token)
+          }
 
+          if (pushData.decimals) {
+            setDecimals(decimals);
+          }
 
-  // Autofill the form for the update
-  useEffect(()=>{
-   if(criteriaState.isUpdateCriteriaEnabled()){
-    //Load the states
-    const oldValue = criteriaState.selectedRules[criteriaState.updateCriteriaIdx] 
-    
-    if(oldValue.type === 'PUSH'){
-      
-      // category
-      setSelectedCategoryValue(
-        (dropdownCategoryValues.PUSH as DropdownValueType[]).findIndex(obj => obj.value === oldValue.category) 
-      )
-
-      const pushData = oldValue.data as PushData
-
-      // sub category
-      if(oldValue.category === CATEGORY.ERC20 || oldValue.category === CATEGORY.ERC721){
-        setSelectedSubCategoryValue(
-          tokenCategoryValues.findIndex(obj => obj.value === oldValue.subcategory)
-        )
-
-        const contractAndChain:string[] = (pushData.contract || "eip155:1:0x").split(':')
-        setSelectedChainValue(
-          dropdownChainsValues.findIndex(
-            obj => obj.value === contractAndChain[0]+":"+contractAndChain[1]
-          ) 
-        )
-        setContract(contractAndChain.length === 3 ? contractAndChain[2]: "") 
-        setQuantity({
-          value:pushData.amount || 0, 
-          range:dropdownQuantityRangeValues.findIndex(
-            obj => obj.value === pushData.comparison
-          )
-        })
-      }else if(oldValue.category === CATEGORY.INVITE){
-        setInviteCheckboxes({
-          admin:true,
-          owner:true, 
-        })
-      }else{
-        // invite
-        setUrl(pushData.url || "") 
+          // TODO: make helper function for this
+          const contractAndChain: string[] = (
+            pushData.contract || 'eip155:1:0x'
+          ).split(':');
+          setSelectedChainValue(
+            dropdownChainsValues.findIndex(
+              (obj) =>
+                obj.value === contractAndChain[0] + ':' + contractAndChain[1]
+            )
+          );
+          setContract(contractAndChain.length === 3 ? contractAndChain[2] : '');
+          setQuantity({
+            value: pushData.amount || 0,
+            range: dropdownQuantityRangeValues.findIndex(
+              (obj) => obj.value === pushData.comparison
+            ),
+          });
+        } else if (oldValue.category === CATEGORY.INVITE) {
+          setInviteCheckboxes({
+            admin: true,
+            owner: true,
+          });
+        } else {
+          // invite
+          setUrl(pushData.url || '');
+        }
+      } else {
+        // guild condition
+        setGuildId((oldValue.data as GuildData).id);
+        setSpecificRoleId((oldValue.data as GuildData).role);
+        setGuildComparison(((oldValue.data as GuildData).comparison) || GUILD_COMPARISON_OPTIONS[2].value);
       }
-    }else{
-      // guild condition
-      setGuildId((oldValue.data as GuildData).id)
-      setSpecificRoleId((oldValue.data as GuildData).role)
-      setGuildComparison((oldValue.data as GuildData).comparison) 
+
+      setSelectedTypeValue(
+        dropdownTypeValues.findIndex((obj) => obj.value === oldValue.type)
+      );
     }
-    
-    setSelectedTypeValue(
-      dropdownTypeValues.findIndex(obj => obj.value === oldValue.type) 
-    )
-   } 
-  },[])
+  }, []);
+
+  const getSeletedType = () => {
+    return dropdownTypeValues[selectedTypeValue].value || 'PUSH';
+  };
+
+  const getSelectedCategory = () => {
+    const category: string =
+      (dropdownCategoryValues['PUSH'] as DropdownValueType[])[
+        selectedCategoryValue
+      ].value || CATEGORY.ERC20;
+
+    return category;
+  };
+
+  const getSelectedChain = () => {
+    return dropdownChainsValues[selectedChainValue].value || 'eip155:1';
+  };
+
+  // Fetch the contract info
+  useEffect(() => {
+    // TODO: optimize to reduce this call call when user is typing
+    (async()=>{
+      setValidationErrors(prev => ({...prev, tokenError:undefined})) 
+
+      const _type = getSeletedType();
+      const _category: string = getSelectedCategory();
+      const _chainInfo = getSelectedChain();
+
+      await tokenFetchHandler(
+        contract,
+        _type,
+        _category,
+        _chainInfo,
+        setUnit,
+        setDecimals
+      );
+    })();
+  }, [contract, selectedCategoryValue, selectedChainValue]);
+
+  const showError = (errorMessage: string) => {
+    groupInfoToast.showMessageToast({
+      toastTitle: 'Error',
+      toastMessage: errorMessage,
+      toastType: 'ERROR',
+      getToastIcon: (size) => <MdError size={size} color="red" />,
+    });
+  };
 
   return (
     <Section
@@ -422,7 +505,11 @@ const AddCriteria = ({
         <ModalHeader
           handleClose={onClose}
           handlePrevious={handlePrevious}
-          title={criteriaState.isUpdateCriteriaEnabled() ? "Update Criteria" : "Add Criteria"}
+          title={
+            criteriaState.isUpdateCriteriaEnabled()
+              ? 'Update Criteria'
+              : 'Add Criteria'
+          }
         />
       </Section>
       <DropDownInput
@@ -456,7 +543,9 @@ const AddCriteria = ({
       ) : (
         <TextInput
           labelName="Sub-category"
-          inputValue={(getSubCategoryDropdownValues()  as ReadonlyInputType)?.title}
+          inputValue={
+            (getSubCategoryDropdownValues() as ReadonlyInputType)?.title
+          }
           disabled={true}
           customStyle={{
             background: theme.backgroundColor?.modalHoverBackground,
@@ -471,30 +560,48 @@ const AddCriteria = ({
             selectedValue={selectedChainValue}
             dropdownValues={dropdownChainsValues}
           />
-          <TextInput
-            labelName="Contract"
-            inputValue={contract}
-            onInputChange={(e: any) => setContract(e.target.value)}
-            placeholder="e.g. 0x123..."
-          />
+          <Section gap="10px" flexDirection="column" alignItems="start">
+            <TextInput
+              labelName="Contract"
+              inputValue={contract}
+              onInputChange={(e: any) => setContract(e.target.value)}
+              placeholder="e.g. 0x123..."
+              error={!!validationErrors?.tokenError}
+            />
+            {!!validationErrors?.tokenError && (
+              <ErrorSpan>{validationErrors?.tokenError}</ErrorSpan>
+            )}
+          </Section>
+          <Section gap="10px" flexDirection="column" alignItems="start">
           <QuantityInput
             dropDownValues={dropdownQuantityRangeValues}
             labelName="Quantity"
             inputValue={quantity}
+            error={!!validationErrors?.tokenAmount}
             onInputChange={onQuantityChange}
             placeholder="e.g. 1.45678"
-            unit={'TOKEN'}
+            unit={unit}
           />
+          {!!validationErrors?.tokenAmount && (
+              <ErrorSpan>{validationErrors?.tokenAmount}</ErrorSpan>
+            )}
+          </Section>
         </>
       )}
 
       {checkIfCustomEndpoint() && (
+         <Section gap="10px" flexDirection="column" alignItems="start">
         <TextInput
           labelName="URL"
           inputValue={url}
           onInputChange={(e: any) => setUrl(e.target.value)}
           placeholder="e.g. abc.com"
+          error={!!validationErrors?.url}
         />
+           {!!validationErrors?.url && (
+              <ErrorSpan>{validationErrors?.url}</ErrorSpan>
+            )}
+        </Section>
       )}
       {checkIfPushInvite() && (
         <Section flexDirection="column" gap="10px">
@@ -505,8 +612,8 @@ const AddCriteria = ({
               }
               onToggle={() =>
                 setInviteCheckboxes({
-                  admin:true,
-                  owner:true
+                  admin: true,
+                  owner: true,
                 })
               }
               checked={
@@ -519,34 +626,52 @@ const AddCriteria = ({
 
       {checkIfGuild() && (
         <>
-          <TextInput
-            labelName="ID"
-            inputValue={guildId}
-            onInputChange={(e: any) => setGuildId(e.target.value)}
-            placeholder="e.g. 4687"
-          />
-          <OptionButtons
-            options={GUILD_COMPARISON_OPTIONS}
-            totalWidth="410px"
-            selectedValue={guildComparison}
-            handleClick={(newEl:string)=>{
-              setGuildComparison(newEl)}}
-          />
-
-          {guildComparison === "specific" && 
+          <Section gap="10px" flexDirection="column" alignItems="start">
             <TextInput
-              labelName="Specific Role"
-              inputValue={specificRoleId}
-              onInputChange={(e: any) => setSpecificRoleId(e.target.value)}
+              labelName="ID"
+              inputValue={guildId}
+              onInputChange={(e: any) => setGuildId(e.target.value)}
               placeholder="e.g. 4687"
+              error={!!validationErrors?.guildId}
             />
-          }
-
-          
+            {!!validationErrors?.guildId && (
+              <ErrorSpan>{validationErrors?.guildId}</ErrorSpan>
+            )}
+          </Section>
+          <Section gap="10px" flexDirection="column" alignItems="start">
+            <OptionButtons
+              options={GUILD_COMPARISON_OPTIONS}
+              totalWidth="410px"
+              selectedValue={guildComparison}
+              error={!!validationErrors?.guildComparison}
+              handleClick={(newEl: string) => {
+                setGuildComparison(newEl);
+              }}
+            />
+            {!!validationErrors?.guildComparison && (
+              <ErrorSpan>{validationErrors?.guildComparison}</ErrorSpan>
+            )}
+          </Section>
+          {guildComparison === 'specific' && (
+            <Section gap="10px" flexDirection="column" alignItems="start">
+              <TextInput
+                labelName="Specific Role"
+                inputValue={specificRoleId}
+                onInputChange={(e: any) => setSpecificRoleId(e.target.value)}
+                placeholder="e.g. 4687"
+                error={!!validationErrors?.guildRole}
+              />
+              {!!validationErrors?.guildRole && (
+                <ErrorSpan>{validationErrors?.guildRole}</ErrorSpan>
+              )}
+            </Section>
+          )}
         </>
       )}
       <Button width="197px" onClick={verifyAndDoNext}>
-        {criteriaState.isUpdateCriteriaEnabled() ? "Update" : "Add"}
+        {!validationLoading &&
+          (criteriaState.isUpdateCriteriaEnabled() ? 'Update' : 'Add')}
+        {validationLoading && <Spinner size="20" color="#fff" />}
       </Button>
       <GatingRulesInformation />
     </Section>
@@ -555,3 +680,8 @@ const AddCriteria = ({
 
 export default AddCriteria;
 
+const ErrorSpan = styled(Span)`
+  font-size: 12px;
+  font-weight: 500;
+  color: #ed5858;
+`;
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx
index 4efb0d594..db704210a 100644
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx
+++ b/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx
@@ -8,7 +8,7 @@ import { ThemeContext } from '../theme/ThemeProvider';
 import Dropdown, { DropdownValueType } from '../reusables/DropDown';
 import { ConditionArray, ConditionData, IChatTheme } from '../exportedTypes';
 import { useClickAway } from '../../../hooks';
-import { CATEGORY, CRITERIA_TYPE, CriteriaType, TOKEN_NFT_COMPARISION, TokenNftComparision } from '../types';
+import { CATEGORY, CRITERIA_TYPE, CriteriaType, PushData, TOKEN_NFT_COMPARISION, TokenNftComparision } from '../types';
 
 import EditSvg from '../../../icons/EditSvg.svg';
 import RemoveSvg from '../../../icons/RemoveSvg.svg';
@@ -86,14 +86,31 @@ const CriteriaSection = ({ criteria }: { criteria: ConditionData }) => {
   };
 
   const getGuildRole  = () =>{
+    console.log(criteria?.data?.['comparison'])
+    if(!criteria?.data?.['comparison'])
+    {
+      return 'SPECIFIC';
+    }
     return (GUILD_COMPARISON_OPTIONS.find(option => option.value === criteria?.data?.['comparison']))?.heading;
  
   }
+
+  const getTokenSymbol = (conditionData:ConditionData)=>{
+    if(conditionData.data){
+      const data:PushData = conditionData.data;
+      if(data.token){
+        return shortenText(data.token, 15)
+      }
+    }
+
+    return conditionData.category
+  }
+
   return (
     <Section gap="8px">
       <Span
         alignSelf="center"
-        background="#657795"
+        background={theme.backgroundColor?.criteriaLabelBackground}
         borderRadius="4px"
         fontSize="10px"
         color={theme.textColor?.buttonText}
@@ -107,7 +124,7 @@ const CriteriaSection = ({ criteria }: { criteria: ConditionData }) => {
             {getTokenNftComparisionLabel()}{' '}
           </Span>
           {/* need to fetch token symbol */}
-          {criteria?.data?.['amount']} {criteria.category}
+          {criteria?.data?.['amount']} {getTokenSymbol(criteria)}
         </Span>
       )}
       {criteria.category === CATEGORY.INVITE && (
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx
index 9b2ad7045..49add35d8 100644
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx
+++ b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx
@@ -26,6 +26,7 @@ import {
 
 import { Image } from '../../../config/styles';
 import { ProfilePicture, device } from '../../../config';
+import { CriteriaValidationErrorType } from '../types';
 
 export const CREATE_GROUP_STEP_KEYS = {
   INPUT_DETAILS: 1,
@@ -69,12 +70,12 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
     }
   }, [activeComponent]);
 
-  const [groupInputDetails, setGroupInputDetails] =
-    useState<GroupInputDetailsType>({
-      groupName: '',
-      groupDescription: '',
-      groupImage: '',
-    });
+  const useDummyGroupInfo = false;
+  const [groupInputDetails, setGroupInputDetails] = useState<GroupInputDetailsType>({
+    groupName: useDummyGroupInfo ? 'This is duumy group name' : '',
+    groupDescription: useDummyGroupInfo ? 'This is dummy group description for testing' : '',
+    groupImage: useDummyGroupInfo ? ProfilePicture : ''
+  })
 
   const renderComponent = () => {
     switch (activeComponent) {
@@ -162,7 +163,8 @@ const CreateGroupDetail = ({
   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);
 
@@ -205,21 +207,20 @@ const CreateGroupDetail = ({
     if (!skipVerify) {
       // verify name
       if (groupName.trim().length === 0) {
-        showError('Group Name is empty');
+        setValidationErrors({
+          groupName: 'Group name cannot be empty',
+        });
         return;
       }
 
       // verify description
       if (groupDescription.trim().length === 0) {
-        showError('Group Description is empty');
+        setValidationErrors({
+          groupDescription: 'Group Description is empty',
+        });
         return;
       }
 
-      // verify description
-      // if (!groupImage) {
-      //   showError("Group image can't be empty");
-      //   return;
-      // }
     }
 
     if (handleNext) {
@@ -268,31 +269,42 @@ const CreateGroupDetail = ({
           onChange={(e) => handleChange(e as unknown as Event)}
         />
       </UploadContainer>
-      <TextInput
-        labelName="Group Name"
-        charCount={30}
-        inputValue={groupName}
-        onInputChange={(e: any) =>
-          setGroupInputDetails({
-            groupDescription,
-            groupName: e.target.value,
-            groupImage,
-          })
-        }
-      />
-
-      <TextArea
-        labelName="Group Description"
-        charCount={80}
-        inputValue={groupDescription}
-        onInputChange={(e: any) =>
-          setGroupInputDetails({
-            groupDescription: e.target.value,
-            groupName,
-            groupImage,
-          })
-        }
-      />
+      <Section gap="10px" flexDirection="column" alignItems="start">
+        <TextInput
+          labelName="Group Name"
+          charCount={30}
+          inputValue={groupName}
+          onInputChange={(e: any) =>
+            setGroupInputDetails({
+              groupDescription,
+              groupName: e.target.value,
+              groupImage,
+            })
+          }
+          error={!!validationErrors?.groupName}
+        />
+        {!!validationErrors?.groupName && (
+          <ErrorSpan>{validationErrors?.groupName}</ErrorSpan>
+        )}
+      </Section>
+      <Section gap="10px" flexDirection="column" alignItems="start">
+        <TextArea
+          labelName="Group Description"
+          charCount={80}
+          inputValue={groupDescription}
+          onInputChange={(e: any) =>
+            setGroupInputDetails({
+              groupDescription: e.target.value,
+              groupName,
+              groupImage,
+            })
+          }
+          error={!!validationErrors?.groupDescription}
+        />
+        {!!validationErrors?.groupDescription && (
+          <ErrorSpan>{validationErrors?.groupDescription}</ErrorSpan>
+        )}
+      </Section>
       <Button width="197px" onClick={verifyAndHandelNext}>
         Next
       </Button>
@@ -339,3 +351,9 @@ const UpdatedImageContainer = styled.div`
 const FileInput = styled.input`
   display: none;
 `;
+
+const ErrorSpan = styled(Span)`
+  font-size: 12px;
+  font-weight: 500;
+  color: #ed5858;
+`;
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx
index 44ea24006..ba70ae396 100644
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx
+++ b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx
@@ -90,29 +90,22 @@ const AddConditionSection = ({
           />
         </Section>
       )}
-      <ConditionSection
-        width="100%"
-        overflow="hidden auto"
-        maxHeight="20rem"
-        theme={theme}
-        padding="5px 4px 5px 0"
-      >
-        <ConditionsComponent
-          conditionData={[
-            [{ operator: criteriaState.entryRootCondition }],
-            ...generateMapping(),
-          ]}
-          deleteFunction={(idx) => {
-            criteriaState.deleteEntryOptionsDataArray(idx);
-          }}
-          updateFunction={(idx) => {
-            criteriaState.selectEntryOptionsDataArrayForUpdate(idx);
-            if (handleNext) {
-              handleNext();
-            }
-          }}
-        />
-      </ConditionSection>
+   
+      <ConditionsComponent
+        conditionData={[
+          [{ operator: criteriaState.entryRootCondition }],
+          ...generateMapping(),
+        ]}
+        deleteFunction={(idx) => {
+          criteriaState.deleteEntryOptionsDataArray(idx);
+        }}
+        updateFunction={(idx) => {
+          criteriaState.selectEntryOptionsDataArrayForUpdate(idx);
+          if (handleNext) {
+            handleNext();
+          }
+        }}
+      />
 
       <Button
         onClick={() => {
@@ -150,34 +143,35 @@ export const CreateGroupType = ({
 
   const { createGatedGroup, loading } = useCreateGatedGroup();
   const groupInfoToast = useToast();
+  const theme = useContext(ThemeContext);
 
-  const getEncryptionType = () =>{
-    if(groupEncryptionType === "encrypted"){
-      return false
+  const getEncryptionType = () => {
+    if (groupEncryptionType === 'encrypted') {
+      return false;
     }
-    return true
-  }
+    return true;
+  };
 
   const createGroupService = async () => {
-    const groupInfo:GroupInfoType = {
-      groupName:groupInputDetails.groupName,
-      groupDescription:groupInputDetails.groupDescription,
-      groupImage:groupInputDetails.groupImage || ProfilePicture,
+    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){
+    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'); 
+    } else {
+      showError('Group creation failed');
     }
-    
+
     onClose();
   };
 
@@ -206,48 +200,59 @@ export const CreateGroupType = ({
         handleClose={onClose}
         handlePrevious={handlePrevious}
       />
-      <OptionButtons
-        options={GROUP_TYPE_OPTIONS}
-        selectedValue={groupEncryptionType}
-        handleClick={(newEl: string) => {
-          setGroupEncryptionType(newEl);
-        }}
-      />
-
-      <ToggleInput
-        labelHeading="Gated Group"
-        labelSubHeading="Turn this on for Token/NFT gating options"
-        checked={checked}
-        onToggle={() => setChecked(!checked)}
-      />
-
-      {checked && (
-        <Section flexDirection="column" gap="32px">
-          <AddConditionSection
-            criteriaState={criteriaStateManager.entryCriteria}
-            handleNext={() => {
-              if (handleNext) {
-                criteriaStateManager.setSelectedCriteria(
-                  SelectedCriteria.ENTRY
-                );
-                handleNext();
-              }
+      <ScrollSection
+        width="100%"
+        overflow="hidden auto"
+        maxHeight="calc(100vh - 16rem)"
+        theme={theme}
+        padding="5px 4px 5px 0"
+      >
+        <Section gap="32px" flexDirection="column" height="100%">
+          <OptionButtons
+            options={GROUP_TYPE_OPTIONS}
+            selectedValue={groupEncryptionType}
+            handleClick={(newEl: string) => {
+              setGroupEncryptionType(newEl);
             }}
-            {...ACCESS_TYPE_TITLE.ENTRY}
           />
-          <AddConditionSection
-            handleNext={() => {
-              if (handleNext) {
-                criteriaStateManager.setSelectedCriteria(SelectedCriteria.CHAT);
-                handleNext();
-              }
-            }}
-            criteriaState={criteriaStateManager.chatCriteria}
-            {...ACCESS_TYPE_TITLE.CHAT}
+
+          <ToggleInput
+            labelHeading="Gated Group"
+            labelSubHeading="Turn this on for Token/NFT gating options"
+            checked={checked}
+            onToggle={() => setChecked(!checked)}
           />
-        </Section>
-      )}
 
+          {checked && (
+            <Section flexDirection="column" gap="32px">
+              <AddConditionSection
+                criteriaState={criteriaStateManager.entryCriteria}
+                handleNext={() => {
+                  if (handleNext) {
+                    criteriaStateManager.setSelectedCriteria(
+                      SelectedCriteria.ENTRY
+                    );
+                    handleNext();
+                  }
+                }}
+                {...ACCESS_TYPE_TITLE.ENTRY}
+              />
+              <AddConditionSection
+                handleNext={() => {
+                  if (handleNext) {
+                    criteriaStateManager.setSelectedCriteria(
+                      SelectedCriteria.CHAT
+                    );
+                    handleNext();
+                  }
+                }}
+                criteriaState={criteriaStateManager.chatCriteria}
+                {...ACCESS_TYPE_TITLE.CHAT}
+              />
+            </Section>
+          )}
+        </Section>
+      </ScrollSection>
       <Section gap="20px" flexDirection="column">
         <Button width="197px" onClick={verifyAndCreateGroup}>
           {!loading && 'Create Group'}
@@ -260,7 +265,7 @@ export const CreateGroupType = ({
 };
 
 //styles
-const ConditionSection = styled(Section)<{ theme: IChatTheme }>`
+const ScrollSection = styled(Section)<{ theme: IChatTheme }>`
   &::-webkit-scrollbar-thumb {
     background: ${(props) => props.theme.scrollbarColor};
     border-radius: 10px;
diff --git a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx
index d9b9f091a..29b048620 100644
--- a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx
+++ b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx
@@ -230,7 +230,6 @@ export const MessageInput: React.FC<MessageInputProps> = ({
     console.log(chatFeed)
     if (!account && !env && !chatId) return;
     if (account && env && chatId && chatFeed && chatFeed?.groupInformation) {
-      console.log('inside condition')
       setIsMember(checkIfMember(chatFeed, account));
       setIsRules(checkIfAccessVerifiedGroup(chatFeed));
     }
diff --git a/packages/uiweb/src/lib/components/chat/helpers/tokenGatedGroup.ts b/packages/uiweb/src/lib/components/chat/helpers/tokenGatedGroup.ts
index bbdd56109..047bc76e8 100644
--- a/packages/uiweb/src/lib/components/chat/helpers/tokenGatedGroup.ts
+++ b/packages/uiweb/src/lib/components/chat/helpers/tokenGatedGroup.ts
@@ -1,5 +1,17 @@
 import axios from 'axios';
-import { CriteriaStateType, Data, GuildData, Rule } from '../types';
+import { ethers } from "ethers";
+
+import { fetchERC20Info, fetchERC721nfo } from './tokenHelpers';
+import {
+  CATEGORY,
+  CriteriaStateType,
+  CriteriaValidationErrorType,
+  Data,
+  GuildData,
+  PushData,
+  Rule,
+  TYPE,
+} from '../types';
 
 const handleDefineCondition = (
   entryCriteria: CriteriaStateType,
@@ -18,13 +30,58 @@ const handleDefineCondition = (
   }
 };
 
-const validateGUILDData = async (condition: Rule): Promise<string[]> => {
+const validateCustomEndpointData = async (
+  condition: Rule
+): Promise<CriteriaValidationErrorType> => {
+  const { data, type, subcategory } = condition;
+  let errors: CriteriaValidationErrorType = {};
+
+  if (!(data as PushData).url) {
+    return { url: 'URL is missing' };
+  } else {
+    // Protocol Validation
+    if (
+      !(data as PushData)?.url!.startsWith('http://') &&
+      !(data as PushData).url!.startsWith('https://')
+    ) {
+      return {
+        url: 'Invalid URL protocol. Only "http://" and "https://" are allowed.',
+      };
+    }
+    // URL Length Check
+    if ((data as PushData)?.url!.length > 2083) {
+      return { url: 'URL is too long.' };
+    }
+
+    // Check for GET and Template
+    if (subcategory === 'GET') {
+      if (!(data as PushData)?.url!.includes('{{user_address}}')) {
+        return {
+          url: `GET request URL should have the '{{user_address}}' template.`,
+        };
+      }
+
+      // Ensure proper number of expected templates
+      const matches = (data as PushData)?.url!.match(/{{user_address}}/g) || [];
+      if (matches.length > 1) {
+        return {
+          url: `GET request URL should not have multiple '{{user_address}}' templates.`,
+        };
+      }
+    }
+  }
+  return {};
+};
+
+const validateGUILDData = async (
+  condition: Rule
+): Promise<CriteriaValidationErrorType> => {
   const { data } = condition;
-  const errors: string[] = [];
+  let errors: CriteriaValidationErrorType = {};
 
   // Check for guild ID presence
   if (!(data as GuildData).id) {
-    errors.push('Guild ID is missing');
+    return { ...errors, guildId: 'Guild ID is missing' };
   } else {
     try {
       const response = await axios.get(
@@ -32,12 +89,12 @@ const validateGUILDData = async (condition: Rule): Promise<string[]> => {
       );
 
       if (response.status !== 200) {
-        errors.push('Invalid Guild ID');
+        return { ...errors, guildId: 'Guild ID is missing' };
       } else {
         // Validate the role values
         if ((data as GuildData).role === '*') {
           if (data.comparison !== 'all' && data.comparison !== 'any') {
-            errors.push('Invalid comparison value');
+            return { ...errors, guildComparison: 'Invalid comparison value' };
           }
         } else if ((data as GuildData).role) {
           const roleExists = response.data.roles.some(
@@ -45,23 +102,73 @@ const validateGUILDData = async (condition: Rule): Promise<string[]> => {
               role.id.toString() === (data as GuildData).role
           );
           if (!roleExists) {
-            errors.push('Invalid Guild Role ID');
+            return { ...errors, guildRole: 'Invalid Guild Role ID' };
           }
 
           // For specific role, comparison can be null or empty
           if (data.comparison) {
-            errors.push('Comparison should be empty for specific role');
+            return {
+              ...errors,
+              guildComparison: 'Comparison should be empty for specific role',
+            };
           }
         } else {
-          errors.push('Invalid role value');
+          return { ...errors, guildRole: 'Invalid role value' };
         }
       }
     } catch (error) {
-      errors.push('Error validating Guild ID');
+      return { ...errors, guildId: 'Error validating Guild ID' };
     }
   }
 
-  return errors;
+  return {};
 };
 
-export { handleDefineCondition, validateGUILDData };
+const validateTokenData = async (condition:Rule):Promise<CriteriaValidationErrorType> =>{
+  const data:PushData = condition.data;
+  const _contract = data.contract || ""
+  const _eip155Format = _contract.split(":")
+
+  if(_eip155Format.length !==3){
+    return {tokenError:"Invalid contract address"}
+  }
+
+  const [chainId, address] = [parseInt(_eip155Format[1]), _eip155Format[2]]
+
+  if(!ethers.utils.isAddress(address)){
+    return {tokenError:`Invalid contract address`}
+  }
+
+  const [err] = condition.category === CATEGORY.ERC721 ? 
+    await fetchERC721nfo(address, chainId) : await fetchERC20Info(address, chainId);
+
+  if(err){
+   return {tokenError:`Invalid ${condition.category} contract`} 
+  }
+  if(!data.amount){
+    return {tokenAmount:`Amount cannot be 0`}
+  }
+  return {}  
+}
+
+const validationCriteria =  async (condition: Rule):Promise<CriteriaValidationErrorType> => {
+ if(condition.type === TYPE.GUILD)
+ {
+  return validateGUILDData(condition);
+ }else{
+  if(condition.category === CATEGORY.INVITE){
+    return {}
+  }else  if (condition.category === CATEGORY.CustomEndpoint){
+  return validateCustomEndpointData(condition);
+  }else{
+    return validateTokenData(condition)
+  }
+ }
+
+}
+
+export {
+  handleDefineCondition,
+  validationCriteria,
+  validateCustomEndpointData,
+};
diff --git a/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/abi.ts b/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/abi.ts
new file mode 100644
index 000000000..d941608ab
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/abi.ts
@@ -0,0 +1,32 @@
+const NFTContractABI = [
+  {
+    inputs: [],
+    name: 'name',
+    outputs: [{ internalType: 'string', name: '', type: 'string' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+];
+
+const TokenContractABI = [
+  {
+    constant: true,
+    inputs: [],
+    name: 'symbol',
+    outputs: [{ internalType: 'string', name: '', type: 'string' }],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'decimals',
+    outputs: [{ internalType: 'uint8', name: '', type: 'uint8' }],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function',
+  },
+];
+
+export { NFTContractABI, TokenContractABI };
diff --git a/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/chain.ts b/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/chain.ts
new file mode 100644
index 000000000..c6ee73e31
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/chain.ts
@@ -0,0 +1,33 @@
+import { InfuraAPIKey } from "packages/uiweb/src/lib/config";
+
+const getInfuraUrlFor = (network: string, key: string) =>
+  `https://${network}.infura.io/v3/${key}`;
+
+const getRpcURL = (network: string, key: string) => {
+  return getInfuraUrlFor(network, key);
+};
+
+export const getChainRPC = (chainId: number): string => {
+  const key = InfuraAPIKey; 
+  
+  switch (chainId) {
+    case 1:
+      return getRpcURL("mainnet", key);
+    case 137:
+      return getRpcURL("polygon-mainnet", key);
+    case 10:
+      return getRpcURL("optimism-mainnet", key);
+    case 56:
+      return "https://bsc-dataseed.binance.org/";
+    case 5:
+      return getRpcURL("goerli", key);
+    case 420:
+      return getRpcURL("optimism-goerli", key);
+    case 80001:
+      return getRpcURL("polygon-mumbai", key);
+    case 97:
+      return "https://data-seed-prebsc-1-s1.binance.org:8545";
+    default:
+      return getRpcURL("mainnet", key);
+  }
+};
diff --git a/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/fetch.ts b/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/fetch.ts
new file mode 100644
index 000000000..0031f06c0
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/fetch.ts
@@ -0,0 +1,114 @@
+import { ethers } from "ethers";
+import { getChainRPC } from "./chain";
+import { NFTContractABI, TokenContractABI } from "./abi";
+import { CATEGORY } from "../../types";
+
+interface ERC20InfoType {
+  symbol: string;
+  decimals: number;
+}
+
+export const tokenFetchHandler = async (
+  contract: string,
+  type: string,
+  category: string,
+  chainInfo: string,
+  setUnit: (value: React.SetStateAction<string>) => void,
+  setDecimals: (value: React.SetStateAction<number>) => void
+): Promise<[boolean, string]> => {
+  const isValid = ethers.utils.isAddress(contract);
+
+  if (type === 'GUILD') {
+    return [false, ''];
+  }
+
+  if (!isValid) {
+    if(category === CATEGORY.ERC20){
+      setUnit('TOKEN');
+    }else{
+      setUnit('NFT');
+    }
+    return [true, `${contract} is invalid invalid contract address`];
+  }
+
+  const _chainId = parseInt(chainInfo.split(':')[1]);
+
+  if (category === CATEGORY.ERC20) {
+    // erc 20 logic
+    const [isErr, tokenInfo] = await fetchERC20Info(contract, _chainId);
+    if (isErr) {
+      // handle error
+      const errMessage = `${contract} is invalid ERC20 on chain ${_chainId}`;
+      setUnit('TOKEN');
+      setDecimals(18);
+
+      return [true, errMessage];
+    } else {
+      // set the token info
+      setUnit(tokenInfo.symbol);
+      setDecimals(tokenInfo.decimals);
+
+      return [false, ''];
+    }
+  } else {
+    // erc 721 logic
+    const [isErr, tokenInfo] = await fetchERC721nfo(contract, _chainId);
+    if (isErr) {
+      // handle error
+      const errMessage = `${contract} is invalid ERC721 on chain ${_chainId}`;
+      setUnit('NFT');
+      setDecimals(18);
+      return [true, errMessage];
+    } else {
+      // set the token info
+      setUnit(tokenInfo);
+      return [false, ''];
+    }
+  }
+};
+
+
+export const fetchERC20Info = async (
+  contractAddress: string,
+  chainId: number
+): Promise<[boolean, ERC20InfoType]> => {
+  try {
+    const rpcURL = getChainRPC(chainId);
+    const provider = new ethers.providers.JsonRpcProvider(rpcURL);
+    const contract:any = new ethers.Contract(
+      contractAddress,
+      TokenContractABI,
+      provider
+    );
+
+    const [symbol, decimals] = await Promise.all([
+      contract.symbol(),
+      contract.decimals(),
+    ]);
+
+    return [false, { symbol: symbol, decimals: decimals }];
+  } catch {
+    return [true, { symbol: "", decimals: 0 }];
+  }
+};
+
+export const fetchERC721nfo = async (
+  contractAddress: string,
+  chainId: number
+): Promise<[boolean, string]> => {
+  try {
+    const rpcURL = getChainRPC(chainId);
+    const provider = new ethers.providers.JsonRpcProvider(rpcURL);
+    
+    const contract:any = new ethers.Contract(
+      contractAddress,
+      NFTContractABI,
+      provider
+    );
+
+    const name = await contract.name();
+    return [false, name];
+  } catch {
+    return [true, ""];
+  }
+};
diff --git a/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/index.ts b/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/index.ts
new file mode 100644
index 000000000..385aa3373
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/index.ts
@@ -0,0 +1,3 @@
+export * from './abi';
+export * from './fetch';
+export * from './chain';
diff --git a/packages/uiweb/src/lib/components/chat/reusables/DropDownInput.tsx b/packages/uiweb/src/lib/components/chat/reusables/DropDownInput.tsx
index 247510ce9..2a59626b9 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/DropDownInput.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/DropDownInput.tsx
@@ -13,6 +13,7 @@ export interface IDropDownInputProps {
   selectedValue: number;
   labelName?: string;
   dropdownValues: DropdownValueType[];
+  error?:boolean;
 }
 
 export const DropDownInput = (props: IDropDownInputProps) => {
@@ -20,15 +21,13 @@ export const DropDownInput = (props: IDropDownInputProps) => {
   const [showDropdown, setshowDropdown] = useState<boolean>(false);
   const dropdownRef = useRef<any>(null);
 
-  const { selectedValue, dropdownValues, labelName } = props;
+  const { selectedValue, dropdownValues, labelName ,error} = props;
 
   // useClickAway(dropdownRef, ()=> setshowDropdown(!showDropdown));
 
   const closeDropdown = () => {
     setshowDropdown(!showDropdown);
   };
-  console.log(dropdownValues);
-  console.log(selectedValue);
   return (
     <ThemeProvider theme={theme}>
       <DropdownContainer >
@@ -36,7 +35,7 @@ export const DropDownInput = (props: IDropDownInputProps) => {
           <label>{props.labelName}</label>
         </LabelContainer>
     
-            <DropdownDiv ref={dropdownRef} onClick={closeDropdown}>
+            <DropdownDiv ref={dropdownRef} onClick={closeDropdown} error= {error || false} >
               <Span margin="0 7px 0 0">
                 {dropdownValues[selectedValue].title}{' '}
               </Span>
@@ -78,20 +77,20 @@ const LabelContainer = styled.div`
   color: ${(props) => props.theme.textColor?.modalHeadingText ?? '#000'};
 `;
 
-const DropdownDiv = styled(Section)<IChatTheme>`
+const DropdownDiv = styled(Section)<IChatTheme & {error:boolean}>`
   padding: 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 
   background: ${(props) => props.theme.backgroundColor.modalInputBackground};
-  border: ${(props) => props.theme.border.modalInnerComponents};
+  border: ${(props) => props.error?' 1px solid #ED5858':props.theme.border.modalInnerComponents};
   border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
 
   font-family: ${(props) => props.theme.fontFamily};
   font-size: 16px;
   span {
-    text-wrap: nowrap;
+    white-space: nowrap;
   }
   font-weight: 500;
 `;
diff --git a/packages/uiweb/src/lib/components/chat/reusables/OptionButtons.tsx b/packages/uiweb/src/lib/components/chat/reusables/OptionButtons.tsx
index cdcdc3f53..54762aeaf 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/OptionButtons.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/OptionButtons.tsx
@@ -15,6 +15,7 @@ interface OptionButtonsProps {
   totalWidth?:string;
   selectedValue: string;
   handleClick: (el:string)=>void;
+  error?:boolean;
 }
 
 interface ButtonSectionProps {
@@ -23,6 +24,7 @@ interface ButtonSectionProps {
   borderColor: string;
   totalWidth:string;
   noOfOptions:number;
+  error:boolean;
   // background:string;
 }
 
@@ -54,7 +56,7 @@ const OptionDescripton = ({ heading, subHeading,value }: OptionDescription) => {
 };
 
 
-export const OptionButtons = ({ options,selectedValue,handleClick,  totalWidth = '400px',}: OptionButtonsProps) => {
+export const OptionButtons = ({ options,selectedValue,handleClick,  totalWidth = '400px',error}: OptionButtonsProps) => {
   const theme = useContext(ThemeContext);
 
 const getBorderWidth = (index:number) =>{
@@ -84,6 +86,7 @@ const getBorderRadius = (index:number) =>{
             borderRadius={
               getBorderRadius(index)
             }
+            error={error || false}
             borderColor={theme.border!.modalInnerComponents!}
             borderWidth={getBorderWidth(index)}
             background={selectedValue === option.value ? theme.backgroundColor?.modalHoverBackground : 'none'}
@@ -114,6 +117,8 @@ const ButtonSection = styled(Section)<ButtonSectionProps>`
   }
   padding: 10px;
   border: ${(props) => props.borderColor};
+  border: ${(props) => props.error?'  #ED5858':props.borderColor};
+
   // background: ${(props) => props.background};
   border-width: ${(props) => props.borderWidth};
   border-style: solid;
diff --git a/packages/uiweb/src/lib/components/chat/reusables/QuantityInput.tsx b/packages/uiweb/src/lib/components/chat/reusables/QuantityInput.tsx
index 727a933fe..ac3e134cf 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/QuantityInput.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/QuantityInput.tsx
@@ -7,6 +7,7 @@ import { DropdownValueType } from './DropDown';
 import { Div, Section, Span } from '../../reusables';
 import { DropDownInput } from './DropDownInput';
 import { device } from '../../../config';
+import { shortenText } from '../../../helpers';
 
 export type InputType = { value: number; range: number };
 export interface IQuantityInputProps {
@@ -16,6 +17,7 @@ export interface IQuantityInputProps {
   unit: string;
   onInputChange: any;
   dropDownValues: DropdownValueType[];
+  error?:boolean;
 }
 
 export const QuantityInput = (props: IQuantityInputProps) => {
@@ -41,6 +43,7 @@ export const QuantityInput = (props: IQuantityInputProps) => {
           <Section alignItems="baseline" width='fit-content'>
             <Input
               type="number"
+              error={props.error ||false}
               theme={theme}
               value={props.inputValue.value}
               onChange={handleChange}
@@ -51,10 +54,11 @@ export const QuantityInput = (props: IQuantityInputProps) => {
               background={theme.backgroundColor?.modalHoverBackground}
               width='fit-content'
               height='fit-content'
+              error={props.error ||false}
              
             >
               <Span>
-              {props.unit}
+              {shortenText(props.unit,15)}
               </Span>
             </Unit>
           </Section>
@@ -81,13 +85,13 @@ const LabelContainer = styled.div`
   font-size: 16px;
   color: ${(props) => props.theme.textColor?.modalHeadingText ?? '#000'};
 `;
-const Input = styled.input<IChatTheme>`
+const Input = styled.input<IChatTheme &{error:boolean}>`
   padding: 16px;
   margin-top: 8px;
   color: ${(props) => props.theme.textColor?.modalHeadingText ?? '#000'};
 
   background: ${(props) => props.theme.backgroundColor.modalInputBackground};
-  border: ${(props) => props.theme.border.modalInnerComponents};
+  border: ${(props) => props.error?' 1px solid #ED5858':props.theme.border.modalInnerComponents};
   border-width: 1px 0px 1px 1px;
   border-radius: 12px 0 0 12px;
   font-family: ${(props) => props.theme.fontFamily};
@@ -96,18 +100,19 @@ const Input = styled.input<IChatTheme>`
   font-weight: 500;
 `;
 
-const Unit = styled(Section)<IChatTheme>`
+const Unit = styled(Section)<IChatTheme&{error:boolean}>`
 span{
   font-size:14px;
   font-weight:700;
+  text-wrap: nowrap;
 }
 border-radius:0 12px 12px 0;
 
-padding:17.2px;
-border: ${(props) => props.theme.border.modalInnerComponents};
+padding:18.2px 17.2px 17.2px 17.2px;
+border: ${(props) => props.error?' 1px solid #ED5858':props.theme.border.modalInnerComponents};
 @media ${device.mobileL} {
 
-  padding:19.5px 5px;
+  padding:21.5px 5px 18px 5px;
   span{
     font-size: 10px;
     font-weight:400
diff --git a/packages/uiweb/src/lib/components/chat/reusables/TextArea.tsx b/packages/uiweb/src/lib/components/chat/reusables/TextArea.tsx
index 96385f883..37373bdee 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/TextArea.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/TextArea.tsx
@@ -9,6 +9,7 @@ export interface ITextAreaProps {
     labelName?: string;
     inputValue: string;
     onInputChange: any;
+    error?:boolean;
 
 }
 
@@ -31,7 +32,7 @@ export const TextArea = (props: ITextAreaProps) => {
             <label>{props.labelName}</label>
             <CharCounter theme={theme}>{props.inputValue.length} / {props.charCount}</CharCounter>
         </LabelContainer>
-        <Input  theme={theme} value={props.inputValue} onChange={handleChange} />
+        <Input error={props.error || false} theme={theme} value={props.inputValue} onChange={handleChange} />
         </InputContainer>
     </ThemeProvider>
   )
@@ -55,7 +56,7 @@ const LabelContainer = styled.div`
     color: ${(props) => props.theme.textColor?.modalHeadingText ?? '#000'};
 `;
 
-const Input = styled.textarea<IChatTheme>`
+const Input = styled.textarea<IChatTheme & {error:boolean}>`
     padding: 16px;
     margin-top: 8px;
 
@@ -64,7 +65,7 @@ const Input = styled.textarea<IChatTheme>`
     color: ${(props) => props.theme.textColor?.modalHeadingText ?? '#000'};
 
     background: ${(props) => props.theme.backgroundColor.modalInputBackground};
-    border: ${(props) => props.theme.border.modalInnerComponents};
+    border: ${(props) => props.error?' 1px solid #ED5858':props.theme.border.modalInnerComponents};
     border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
 
     font-family: ${(props) => props.theme.fontFamily};
diff --git a/packages/uiweb/src/lib/components/chat/reusables/TextInput.tsx b/packages/uiweb/src/lib/components/chat/reusables/TextInput.tsx
index 1d5c54995..8543214f0 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/TextInput.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/TextInput.tsx
@@ -12,6 +12,7 @@ export interface ITextInputProps {
   onInputChange?: any;
   disabled?: boolean;
   customStyle?: CustomStyleParamsType;
+  error?:boolean;
 }
 type CustomStyleParamsType = {
   background?: string;
@@ -48,6 +49,7 @@ export const TextInput = (props: ITextInputProps) => {
           customStyle={props.customStyle!}
           disabled={!!props.disabled}
           theme={theme}
+          error={props.error || false}
           value={props.inputValue}
           onChange={handleChange}
           placeholder={props.placeholder}
@@ -75,7 +77,7 @@ const LabelContainer = styled.div`
   color: ${(props) => props.theme.textColor?.modalHeadingText ?? '#000'};
 `;
 
-const Input = styled.input<IChatTheme & {customStyle:CustomStyleParamsType}>`
+const Input = styled.input<IChatTheme & {customStyle:CustomStyleParamsType,error:boolean}>`
   padding: 16px;
   margin-top: 8px;
   color: ${(props) => props.theme.textColor?.modalHeadingText ?? '#000'};
@@ -83,7 +85,7 @@ const Input = styled.input<IChatTheme & {customStyle:CustomStyleParamsType}>`
     props.customStyle?.background
       ? props.customStyle.background
       : props.theme.backgroundColor.modalInputBackground};
-  border: ${(props) => props.theme.border.modalInnerComponents};
+  border: ${(props) => props.error?' 1px solid #ED5858':props.theme.border.modalInnerComponents};
   border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
 
   font-family: ${(props) => props.theme.fontFamily};
diff --git a/packages/uiweb/src/lib/components/chat/theme/index.ts b/packages/uiweb/src/lib/components/chat/theme/index.ts
index de2b3b886..e703dbc29 100644
--- a/packages/uiweb/src/lib/components/chat/theme/index.ts
+++ b/packages/uiweb/src/lib/components/chat/theme/index.ts
@@ -36,6 +36,7 @@ interface IBackgroundColor {
   toastSuccessBackground?: string;
   toastErrorBackground?: string;
   toastShadowBackground?: string;
+  criteriaLabelBackground?:string;
 }
 
 interface ITextColor {
@@ -138,6 +139,7 @@ export const lightChatTheme: IChatTheme = {
   toastErrorBackground:
     'linear-gradient(90.15deg, #FF2070 -125.65%, #FF2D79 -125.63%, #FFF9FB 42.81%)',
   toastShadowBackground: '#ccc',
+  criteriaLabelBackground: '#657795'
   },
 
   fontSize: {
@@ -226,6 +228,7 @@ export const darkChatTheme: IChatTheme = {
     encryptionMessageBackground: 'rgb(64, 70, 80);',
     buttonBackground: 'rgb(202, 89, 155)',
     modalBackground:'rgb(47, 49, 55)',
+    criteriaLabelBackground: 'rgb(47, 49, 55)',
     modalInputBackground:'transparent',
     modalHoverBackground:'rgb(64, 70, 80)',
     buttonDisableBackground:'#787E99',
diff --git a/packages/uiweb/src/lib/components/chat/types/tokenGatedGroupCreationType.ts b/packages/uiweb/src/lib/components/chat/types/tokenGatedGroupCreationType.ts
index 07344afbf..4a91e8ec4 100644
--- a/packages/uiweb/src/lib/components/chat/types/tokenGatedGroupCreationType.ts
+++ b/packages/uiweb/src/lib/components/chat/types/tokenGatedGroupCreationType.ts
@@ -5,6 +5,7 @@ export interface PushData {
   inviterRoles?: string[];
   comparison?:string;
   url?: string;
+  token?:string;
 }
 
 export interface GuildData {
@@ -62,7 +63,7 @@ export interface CriteriaStateType {
   selectedRules: Rule[];
   setSelectedRule: React.Dispatch<React.SetStateAction<Rule[]>>;
   addNewCondtion: () => void;
-  addNewRule: (newRule: Rule) => void;
+  addNewRule: (newRule: Rule) => boolean;
   deleteRule: (idx: number) => void;
   deleteEntryOptionsDataArray: (idx: number) => void;
   selectEntryOptionsDataArrayForUpdate: (idx: number) => void;
@@ -73,3 +74,19 @@ export interface CriteriaStateType {
   setUpdateCriteriaIdx: React.Dispatch<React.SetStateAction<number>>;
   isUpdateCriteriaEnabled: () => boolean;
 }
+
+
+export type CriteriaValidationErrorType = {
+  //guild error
+  guildId?:string,
+  guildComparison?:string;
+  guildRole?:string;
+  groupName?:string;
+  groupDescription?:string;
+
+  //token error
+  tokenError?:string
+  tokenAmount?:string;
+  //custom endpoint errors
+  url?:string;
+}
diff --git a/packages/uiweb/src/lib/hooks/chat/useCreateGatedGroup.ts b/packages/uiweb/src/lib/hooks/chat/useCreateGatedGroup.ts
index 2ac3701f1..2753671d6 100644
--- a/packages/uiweb/src/lib/hooks/chat/useCreateGatedGroup.ts
+++ b/packages/uiweb/src/lib/hooks/chat/useCreateGatedGroup.ts
@@ -19,13 +19,14 @@ export const useCreateGatedGroup = () => {
           isPublic: groupInfoType.isPublic,
           members: [],
           admins: [],
-          account: account || '',
+          account: account || undefined,
           env: env,
-          pgpPrivateKey: pgpPrivateKey,
+          pgpPrivateKey: pgpPrivateKey || undefined,
           rules: rules,
         };
         const response = await PushAPI.chat.createGroup(payload);
         setLoading(false);
+        console.log(response)
         if (!response) {
           return false;
         }
diff --git a/packages/uiweb/src/lib/hooks/chat/useCriteriaState.ts b/packages/uiweb/src/lib/hooks/chat/useCriteriaState.ts
index e677f4251..1a31b8e82 100644
--- a/packages/uiweb/src/lib/hooks/chat/useCriteriaState.ts
+++ b/packages/uiweb/src/lib/hooks/chat/useCriteriaState.ts
@@ -30,7 +30,40 @@ export const useCriteriaState = (
     useState(-1);
   const [updateCriteriaIdx, setUpdateCriteriaIdx] = useState(-1);
 
+  
+  const isDuplicateRule = (rule:Rule)=>{
+    const newRule = JSON.stringify(rule)
+
+    // check on current conditions
+    for(let i=0; i<selectedRules.length;i++){
+      const selectedRule = JSON.stringify(selectedRules[i])
+      if (newRule === selectedRule){
+        console.log(newRule, " equals ", selectedRule);
+        
+        return true
+      }
+    }
+
+    // check on already selected condtions
+    for (let i = 0; i < entryOptionsDataArray.length; i++) {
+      const _rules = entryOptionsDataArray[i]
+      for (let j = 0;  j < _rules.length; j++) {
+        const selectedRule = JSON.stringify(_rules[j])
+        if (newRule === selectedRule){
+          console.log(newRule, " equals ", selectedRule);
+          return true
+        }
+      }
+    }    
+
+    return false
+  }
+
   const addNewRule = (newRule: Rule) => {
+    if(isDuplicateRule(newRule)){
+      return false
+    }
+
     if (selectedCriteria === -1) {
       setSelectedCriteria(entryOptionTypeArray.length);
     }
@@ -44,6 +77,8 @@ export const useCriteriaState = (
       // add new
       setSelectedRule((prev) => [...prev, newRule]);
     }
+
+    return true
   };
 
   const deleteRule = (idx: number) => {