diff --git a/packages/examples/sdk-frontend-react/src/app/app.tsx b/packages/examples/sdk-frontend-react/src/app/app.tsx
index 7f1db9f4c..c4fc798cd 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={lightChatTheme}>
+                <ChatUIProvider  env={env} theme={darkChatTheme}>
                   <SpacesUIProvider spaceUI={spaceUI} theme={customDarkTheme}>
                     <Routes>
                       <Route
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx
index 6198f5f4d..5b2222383 100644
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx
+++ b/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx
@@ -50,7 +50,7 @@ const MoreOptionsContainer = ({
 
   return (
     <Section onClick={() => handleMoreOptionsClick(row, col)}>
-      <MoreDarkIcon />
+      <MoreDarkIcon color={theme.iconColor?.groupSettings}/>
       {selectedIndex?.length && selectedIndex[0] === row && (
         <DropdownContainer
           ref={dropdownRef}
@@ -127,13 +127,9 @@ const ConditionsComponent = ({ conditionData,deleteFunction,updateFunction }: Cr
 
   useClickAway(dropdownRef, () => setSelectedIndex(null));
 
-
-  //fix the theming
-
   const handleMoreOptionsClick = (row: number, col: number) => {
     setSelectedIndex([row, col]);
   };
-// alert(JSON.stringify(conditionData))
 
   return (
     <Section flexDirection='column' >
@@ -146,7 +142,7 @@ const ConditionsComponent = ({ conditionData,deleteFunction,updateFunction }: Cr
                 <>
                   {singleCriteria.type && (
                     <Section
-                      borderRadius="12px"
+                      borderRadius={theme.borderRadius?.modalInnerComponents}
                       background={theme.backgroundColor?.modalHoverBackground}
                       padding="10px 4px 10px 12px"
                       justifyContent="space-between"
@@ -166,14 +162,13 @@ const ConditionsComponent = ({ conditionData,deleteFunction,updateFunction }: Cr
               ))}
 
             {criteria.length > 1 && (
-              <Section
+              <CriteriaGroup
+              theme={theme}
                 flexDirection="row"
-                borderWidth="1px"
                 justifyContent="space-between"
                 alignItems="center"
-                borderColor="#E6E7EE"
-                borderRadius="12px"
-                borderStyle="solid"
+           
+                borderRadius={theme.borderRadius?.modalInnerComponents}
                 padding="8px 0px 8px 8px"
                 gap="25px"
               >
@@ -183,7 +178,7 @@ const ConditionsComponent = ({ conditionData,deleteFunction,updateFunction }: Cr
                       {singleCriteria.type && (
                         <>
                           <Section
-                            borderRadius="12px"
+                            borderRadius={theme.borderRadius?.modalInnerComponents}
                             background={
                               theme.backgroundColor?.modalHoverBackground
                             }
@@ -217,7 +212,7 @@ const ConditionsComponent = ({ conditionData,deleteFunction,updateFunction }: Cr
                     selectedIndex={selectedIndex}
                   />
                 </Section>
-              </Section>
+              </CriteriaGroup>
             )}
             {conditionData &&
               row < conditionData.length - 2 &&
@@ -240,7 +235,8 @@ const DropdownContainer = styled.div`
   left: 48%;
   top: 69%;
   border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
-  padding: 14px 8px;
+ 
+  padding: 6px 32px 6px 12px;
   z-index: 999999999999 !important;
   display: flex;
   flex-direction: column !important;
@@ -258,9 +254,14 @@ const DropdownContainer = styled.div`
   }
 `;
 
-const OperatorSpan = styled.span<{ theme: IChatTheme }>`
+const OperatorSpan = styled(Span)<{ theme: IChatTheme }>`
   padding: 4px 8px;
   border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
   background: ${(props) => props.theme.backgroundColor.modalHoverBackground};
   color: ${(props) => props.theme.textColor?.modalSubHeadingText};
 `;
+
+const CriteriaGroup = styled(Section)<{ theme: IChatTheme }>`
+ 
+  border: ${(props) => props.theme.border?.modalInnerComponents};
+`;
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx
index 757eaae83..50fbec8ec 100644
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx
+++ b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx
@@ -16,7 +16,7 @@ import { MdError } from 'react-icons/md';
 
 import {Image} from "../../../config/styles"
 import { device } from '../../../config';
-import { CreateGroupModalProps } from '../exportedTypes';
+import { CreateGroupModalProps, IChatTheme } from '../exportedTypes';
 import useMediaQuery from '../../../hooks/useMediaQuery';
 import { DefineCondtion } from './DefineCondition';
 import AddCriteria from './AddCriteria';
@@ -120,7 +120,8 @@ const CreateGroupDetail = ({handleNext, onClose, groupInputDetails, setGroupInpu
 
   const groupInfoToast = useToast();
   const { groupName, groupDescription, groupImage } = groupInputDetails;
- 
+  const theme = useContext(ThemeContext);
+
   const fileUploadInputRef = useRef<HTMLInputElement>(null);
   const isMobile = useMediaQuery(device.mobileL);
   
@@ -194,8 +195,8 @@ const CreateGroupDetail = ({handleNext, onClose, groupInputDetails, setGroupInpu
 
       <UploadContainer onClick={handleUpload}>
         {!groupImage && (
-          <ImageContainer>
-            <AiTwotoneCamera fontSize={40} color="black" />
+          <ImageContainer theme={theme}>
+            <AiTwotoneCamera fontSize={40} color={'rgba(87, 93, 115, 1)'} />
           </ImageContainer>
         )}
         {groupImage && (
@@ -236,7 +237,7 @@ export const GatingRulesInformation = () => {
     const theme = useContext(ThemeContext);
     return (
       <Section gap="4px">
-        <SpamIcon />
+        <SpamIcon color={theme.textColor?.modalSubHeadingText}/>
         <Span color={theme.textColor?.modalSubHeadingText} fontSize="15px">
           Learn more about gating rules
         </Span>
@@ -253,12 +254,12 @@ const UploadContainer = styled.div`
   align-self: center;
 `;
 
-const ImageContainer = styled.div`
+const ImageContainer = styled.div<{theme:IChatTheme}>`
   margin-top: 10px;
   width: fit-content;
   cursor: pointer;
   border-radius: 32px;
-  background-color: #2f3137;
+  background: ${(props) => props.theme.backgroundColor.modalHoverBackground};
   padding: 40px;
 `;
 const UpdatedImageContainer = styled.div`
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/MultipleCriterias.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/MultipleCriterias.tsx
index 04c3c8f6a..f1f3386f3 100644
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/MultipleCriterias.tsx
+++ b/packages/uiweb/src/lib/components/chat/CreateGroup/MultipleCriterias.tsx
@@ -1,12 +1,13 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useRef, useState } from 'react';
 import { Section, Span } from '../../reusables';
 import { ThemeContext } from '../theme/ThemeProvider';
 import styled from 'styled-components';
 import { device } from '../../../config';
 import EditSvg from '../../../icons/EditSvg.svg';
 import RemoveSvg from '../../../icons/RemoveSvg.svg';
-import Criteria from './Criteria';
 import { ConditionType } from './Type';
+import Criteria from './ConditionsComponent';
+import { useClickAway } from '../../../hooks';
 
 export type CriteraValueType = {
   invertedIcon?: any;
@@ -30,6 +31,8 @@ const MultipleCriterias = ({
 }: CriteriaProps) => {
   const [selectedValue, setSelectedValue] = useState<number>(0);
   const [dropdownHeight, setDropdownHeight] = useState<number | undefined>(0);
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const dropdownRef = useRef<any>(null);
 
   const dropDownValues = [
     {
@@ -52,6 +55,7 @@ const MultipleCriterias = ({
 
   const [openDropdownId, setOpenDropdownId] = useState<number | null>(null);
 
+
   const toggleDropdown = (criteriaId: number) => {
     if (openDropdownId === criteriaId) {
       // Clicked on an already open dropdown, so close it
@@ -62,6 +66,8 @@ const MultipleCriterias = ({
     }
   };
 
+  useClickAway(dropdownRef, () => setSelectedIndex(null));
+
   return (
     <Section flexDirection="column" gap="8px">
       {
diff --git a/packages/uiweb/src/lib/components/chat/reusables/OptionButtons.tsx b/packages/uiweb/src/lib/components/chat/reusables/OptionButtons.tsx
index d97524be8..cdcdc3f53 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/OptionButtons.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/OptionButtons.tsx
@@ -35,7 +35,7 @@ const OptionDescripton = ({ heading, subHeading,value }: OptionDescription) => {
           // selectedValue === value?
           // theme.textColor?.modalHeadingText
           // :
-          theme.textColor?.modalSubHeadingText
+          theme.textColor?.modalHeadingText
         }
         fontSize="18px"
         fontWeight="500"
diff --git a/packages/uiweb/src/lib/components/chat/reusables/TextArea.tsx b/packages/uiweb/src/lib/components/chat/reusables/TextArea.tsx
index a96b75b1e..96385f883 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/TextArea.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/TextArea.tsx
@@ -69,6 +69,9 @@ const Input = styled.textarea<IChatTheme>`
 
     font-family: ${(props) => props.theme.fontFamily};
     font-size: 14px;
+    &:focus {
+        border: 1px solid #ffdbf0;
+      }
 `;
 
 const CharCounter = styled.div<IChatTheme>`
diff --git a/packages/uiweb/src/lib/components/chat/reusables/TextInput.tsx b/packages/uiweb/src/lib/components/chat/reusables/TextInput.tsx
index cfd92359c..1d5c54995 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/TextInput.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/TextInput.tsx
@@ -93,6 +93,10 @@ const Input = styled.input<IChatTheme & {customStyle:CustomStyleParamsType}>`
   [readonly='readonly'] {
     pointer-events: none;
   }
+  &:focus {
+    border: 1px solid #ffdbf0;
+  }
+ 
 `;
 
 const CharCounter = styled.div<IChatTheme>`
diff --git a/packages/uiweb/src/lib/components/chat/theme/index.ts b/packages/uiweb/src/lib/components/chat/theme/index.ts
index 345ebaa40..b1ccb2ca7 100644
--- a/packages/uiweb/src/lib/components/chat/theme/index.ts
+++ b/packages/uiweb/src/lib/components/chat/theme/index.ts
@@ -231,7 +231,7 @@ export const darkChatTheme: IChatTheme = {
     encryptionMessageBackground: 'rgb(64, 70, 80);',
     buttonBackground: 'rgb(202, 89, 155)',
     modalBackground:'rgb(47, 49, 55)',
-    modalInputBackground:'rgb(40, 42, 46)',
+    modalInputBackground:'transparent',
     modalHoverBackground:'rgb(64, 70, 80)',
     buttonDisableBackground:'#2F3137',
     toastSuccessBackground:
diff --git a/packages/uiweb/src/lib/icons/EditSvg.svg b/packages/uiweb/src/lib/icons/EditSvg.svg
index 7cb5620d0..421ac7e02 100644
--- a/packages/uiweb/src/lib/icons/EditSvg.svg
+++ b/packages/uiweb/src/lib/icons/EditSvg.svg
@@ -1,4 +1,4 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.00899 15H1.60869C1.44726 15 1.29243 14.9359 1.17828 14.8217C1.06413 14.7076 1 14.5527 1 14.3913V10.991C1.00007 10.8298 1.06411 10.6752 1.17804 10.5611L10.561 1.17814C10.6752 1.06407 10.8299 1 10.9913 1C11.1527 1 11.3074 1.06407 11.4216 1.17814L14.8219 4.57616C14.9359 4.6903 15 4.84506 15 5.00643C15 5.16779 14.9359 5.32256 14.8219 5.4367L5.43888 14.822C5.32482 14.9359 5.17021 14.9999 5.00899 15Z" stroke="#494D5F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8.30469 3.43481L12.5655 7.69565" stroke="#494D5F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.00899 15H1.60869C1.44726 15 1.29243 14.9359 1.17828 14.8217C1.06413 14.7076 1 14.5527 1 14.3913V10.991C1.00007 10.8298 1.06411 10.6752 1.17804 10.5611L10.561 1.17814C10.6752 1.06407 10.8299 1 10.9913 1C11.1527 1 11.3074 1.06407 11.4216 1.17814L14.8219 4.57616C14.9359 4.6903 15 4.84506 15 5.00643C15 5.16779 14.9359 5.32256 14.8219 5.4367L5.43888 14.822C5.32482 14.9359 5.17021 14.9999 5.00899 15Z" stroke="rgba(120, 126, 153, 1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.30469 3.43481L12.5655 7.69565" stroke="rgba(120, 126, 153, 1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/packages/uiweb/src/lib/icons/MoreDark.tsx b/packages/uiweb/src/lib/icons/MoreDark.tsx
index 3f20f22fd..68f70fead 100644
--- a/packages/uiweb/src/lib/icons/MoreDark.tsx
+++ b/packages/uiweb/src/lib/icons/MoreDark.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
-export const MoreDarkIcon = () => {
+export const MoreDarkIcon = ({color}:{color?:string}) => {
   return (
     <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" cursor="pointer">
-    <path d="M16 10C17.1046 10 18 9.10457 18 8C18 6.89543 17.1046 6 16 6C14.8954 6 14 6.89543 14 8C14 9.10457 14.8954 10 16 10Z" fill="#787E99"/>
-    <path d="M16 18C17.1046 18 18 17.1046 18 16C18 14.8954 17.1046 14 16 14C14.8954 14 14 14.8954 14 16C14 17.1046 14.8954 18 16 18Z" fill="#787E99"/>
-    <path d="M16 26C17.1046 26 18 25.1046 18 24C18 22.8954 17.1046 22 16 22C14.8954 22 14 22.8954 14 24C14 25.1046 14.8954 26 16 26Z" fill="#787E99"/>
+    <path d="M16 10C17.1046 10 18 9.10457 18 8C18 6.89543 17.1046 6 16 6C14.8954 6 14 6.89543 14 8C14 9.10457 14.8954 10 16 10Z" fill={color??"#787E99"}/>
+    <path d="M16 18C17.1046 18 18 17.1046 18 16C18 14.8954 17.1046 14 16 14C14.8954 14 14 14.8954 14 16C14 17.1046 14.8954 18 16 18Z" fill={color??"#787E99"}/>
+    <path d="M16 26C17.1046 26 18 25.1046 18 24C18 22.8954 17.1046 22 16 22C14.8954 22 14 22.8954 14 24C14 25.1046 14.8954 26 16 26Z" fill={color??"#787E99"}/>
     </svg>
   );
 };
diff --git a/packages/uiweb/src/lib/icons/RemoveSvg.svg b/packages/uiweb/src/lib/icons/RemoveSvg.svg
index 2d1e05afe..747fac136 100644
--- a/packages/uiweb/src/lib/icons/RemoveSvg.svg
+++ b/packages/uiweb/src/lib/icons/RemoveSvg.svg
@@ -1,4 +1,4 @@
 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 9H12" stroke="#494D5F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="#494D5F" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M6 9H12" stroke="rgba(120, 126, 153, 1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="rgba(120, 126, 153, 1)" stroke-width="2" stroke-miterlimit="10"/>
 </svg>
diff --git a/packages/uiweb/src/lib/icons/SpamIcon.tsx b/packages/uiweb/src/lib/icons/SpamIcon.tsx
index 5917b6e63..3e25d871e 100644
--- a/packages/uiweb/src/lib/icons/SpamIcon.tsx
+++ b/packages/uiweb/src/lib/icons/SpamIcon.tsx
@@ -1,8 +1,8 @@
-export const SpamIcon = () => {
+export const SpamIcon = ({ color }: { color?: string }) => {
     return (
         <svg width="16" height="16" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M8.15234 6.10618C8.15234 5.63757 8.53222 5.25769 9.00083 5.25769C9.46943 5.25769 9.84931 5.63757 9.84931 6.10618C9.84931 6.57478 9.46943 6.95466 9.00083 6.95466C8.53222 6.95466 8.15234 6.57478 8.15234 6.10618ZM8.15234 9.50011C8.15234 9.03151 8.53222 8.65163 9.00083 8.65163C9.46943 8.65163 9.84931 9.03151 9.84931 9.50011V12.8941C9.84931 13.3627 9.46943 13.7425 9.00083 13.7425C8.53222 13.7425 8.15234 13.3627 8.15234 12.8941V9.50011Z" fill="#575D73" />
-            <circle cx="9" cy="9.5" r="8" stroke="#575D73" stroke-width="1.5" />
+            <path d="M8.15234 6.10618C8.15234 5.63757 8.53222 5.25769 9.00083 5.25769C9.46943 5.25769 9.84931 5.63757 9.84931 6.10618C9.84931 6.57478 9.46943 6.95466 9.00083 6.95466C8.53222 6.95466 8.15234 6.57478 8.15234 6.10618ZM8.15234 9.50011C8.15234 9.03151 8.53222 8.65163 9.00083 8.65163C9.46943 8.65163 9.84931 9.03151 9.84931 9.50011V12.8941C9.84931 13.3627 9.46943 13.7425 9.00083 13.7425C8.53222 13.7425 8.15234 13.3627 8.15234 12.8941V9.50011Z" fill={color ? color : '#575D73'} />
+            <circle cx="9" cy="9.5" r="8" stroke={color ? color : '#575D73'} stroke-width="1.5" />
         </svg>
     )
 }
\ No newline at end of file