diff --git a/frontend/common/types/responses.ts b/frontend/common/types/responses.ts
index fc7a46f390c0..da429293fe81 100644
--- a/frontend/common/types/responses.ts
+++ b/frontend/common/types/responses.ts
@@ -34,6 +34,8 @@ export type Operator = {
   hideValue?: boolean
   warning?: string
   valuePlaceholder?: string
+  append?: string
+  type?: string
 }
 export type ChangeRequestSummary = {
   id: number
diff --git a/frontend/web/components/base/select/MultiSelect.tsx b/frontend/web/components/base/select/MultiSelect.tsx
deleted file mode 100644
index 1aa0438dc3c8..000000000000
--- a/frontend/web/components/base/select/MultiSelect.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import React from 'react'
-import { MultiValueProps } from 'react-select/lib/components/MultiValue'
-
-export interface MultiSelectOption {
-  label: string
-  value: string
-}
-
-export interface MultiSelectProps {
-  selectedValues: string[]
-  onSelectionChange: (selectedValues: string[]) => void
-  options: MultiSelectOption[]
-  colorMap?: Map<string, string>
-  label?: string
-  placeholder?: string
-  className?: string
-  disabled?: boolean
-  size?: 'small' | 'default' | 'large'
-}
-
-const CustomMultiValue = ({
-  color,
-  data,
-  removeProps,
-}: MultiValueProps<MultiSelectOption> & { color?: string }) => {
-  return (
-    <div
-      className='d-flex align-items-center'
-      style={{
-        backgroundColor: color,
-        borderRadius: '4px',
-        color: 'white',
-        fontSize: '12px',
-        maxWidth: '150px',
-        overflow: 'hidden',
-        padding: '2px 6px',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-      }}
-    >
-      <span
-        className='mr-1'
-        style={{
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-        }}
-      >
-        {data.label}
-      </span>
-      <span
-        onClick={() => removeProps?.onClick?.(data)}
-        style={{
-          cursor: 'pointer',
-          fontSize: '14px',
-          lineHeight: '1',
-        }}
-      >
-        ×
-      </span>
-    </div>
-  )
-}
-
-const CustomOption = ({
-  children,
-  color,
-  ...props
-}: any & { color?: string }) => {
-  return (
-    <div
-      {...props.innerProps}
-      className={`d-flex align-items-center p-2 ${
-        props.isFocused ? 'bg-light' : ''
-      }`}
-      style={{ cursor: 'pointer' }}
-    >
-      {color && (
-        <div
-          style={{
-            backgroundColor: color,
-            borderRadius: '2px',
-            flexShrink: 0,
-            height: '12px',
-            marginRight: '8px',
-            width: '12px',
-          }}
-        />
-      )}
-      <span>{children}</span>
-    </div>
-  )
-}
-
-const MultiSelect: React.FC<MultiSelectProps> = ({
-  className = '',
-  colorMap,
-  disabled = false,
-  label,
-  onSelectionChange,
-  options,
-  placeholder = 'Select options...',
-  selectedValues,
-  size = 'default',
-}) => {
-  return (
-    <div className={`${className} d-flex flex-column gap-2`}>
-      {label && <label>{label}</label>}
-      <Select
-        isMulti
-        closeMenuOnSelect={false}
-        placeholder={placeholder}
-        isDisabled={disabled}
-        size={size}
-        onChange={(selectedOptions: any) => {
-          const values = selectedOptions
-            ? selectedOptions.map((opt: any) => opt.value)
-            : []
-          onSelectionChange(values)
-        }}
-        components={{
-          MultiValue: (props: MultiValueProps<MultiSelectOption>) => (
-            <CustomMultiValue
-              {...props}
-              color={colorMap?.get(props.data.value) || '#5D6D7E'}
-            />
-          ),
-          Option: colorMap
-            ? (props: any) => (
-                <CustomOption
-                  {...props}
-                  color={colorMap.get(props.data.value)}
-                />
-              )
-            : undefined,
-        }}
-        value={selectedValues.map((value) => ({
-          label: options.find((opt) => opt.value === value)?.label || value,
-          value,
-        }))}
-        options={options}
-        className='react-select react-select__extensible cursor-pointer'
-        styles={{
-          container: (base: any) => ({
-            ...base,
-            cursor: 'pointer',
-            maxWidth: '100%',
-            minWidth: '300px',
-            width: 'fit-content',
-          }),
-          control: (base: any) => ({
-            ...base,
-            height: 'auto',
-            minHeight: '44px',
-            minWidth: '300px',
-            width: 'fit-content',
-          }),
-          multiValue: (base: any) => ({
-            ...base,
-            flexShrink: 0,
-            margin: '2px',
-          }),
-          valueContainer: (base: any) => ({
-            ...base,
-            flexWrap: 'wrap',
-            gap: '4px',
-            overflow: 'visible',
-            paddingBottom: '6px',
-            paddingTop: '6px',
-          }),
-        }}
-      />
-    </div>
-  )
-}
-
-export default MultiSelect
diff --git a/frontend/web/components/base/select/multi-select/CustomMultiValue.tsx b/frontend/web/components/base/select/multi-select/CustomMultiValue.tsx
new file mode 100644
index 000000000000..ff884b199fab
--- /dev/null
+++ b/frontend/web/components/base/select/multi-select/CustomMultiValue.tsx
@@ -0,0 +1,52 @@
+import { MultiValueProps } from 'react-select/lib/components/MultiValue'
+import { MultiSelectOption } from './MultiSelect'
+
+export const CustomMultiValue = ({
+    color,
+    data,
+    removeProps,
+  }: MultiValueProps<MultiSelectOption> & { color?: string }) => {
+    return (
+      <div
+        className='d-flex align-items-center'
+        style={{
+          backgroundColor: color,
+          borderRadius: '4px',
+          color: 'white',
+          fontSize: '12px',
+          maxWidth: '150px',
+          overflow: 'hidden',
+          padding: '2px 6px',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          maxHeight: '24px'
+        }}
+      >
+        <span
+          className='mr-1'
+          style={{
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {data.label}
+        </span>
+        <button
+            {...removeProps}
+            style={{
+            cursor: 'pointer',
+            fontSize: '14px',
+            lineHeight: '1',
+            backgroundColor: 'transparent',
+            border: 'none',
+            padding: 0,
+            margin: 0,
+            color: 'white',
+          }}
+        >
+          ×
+        </button>
+      </div>
+    )
+  }
\ No newline at end of file
diff --git a/frontend/web/components/base/select/multi-select/CustomOption.tsx b/frontend/web/components/base/select/multi-select/CustomOption.tsx
new file mode 100644
index 000000000000..498f5030d0cf
--- /dev/null
+++ b/frontend/web/components/base/select/multi-select/CustomOption.tsx
@@ -0,0 +1,33 @@
+
+import { OptionProps } from 'react-select/lib/components/Option'
+import { MultiSelectOption } from './MultiSelect'
+
+export const CustomOption = ({
+    children,
+    color,
+    ...props
+  }: OptionProps<MultiSelectOption> & { color?: string }) => {
+    return (
+      <div
+        {...props.innerProps}
+        className={`d-flex align-items-center p-2 ${
+          props.isFocused ? 'bg-light' : ''
+        }`}
+        style={{ cursor: 'pointer' }}
+      >
+        {color && (
+          <div
+            style={{
+              backgroundColor: color,
+              borderRadius: '2px',
+              flexShrink: 0,
+              height: '12px',
+              marginRight: '8px',
+              width: '12px',
+            }}
+          />
+        )}
+        <span>{children}</span>
+      </div>
+    )
+  }
\ No newline at end of file
diff --git a/frontend/web/components/base/select/multi-select/MultiSelect.tsx b/frontend/web/components/base/select/multi-select/MultiSelect.tsx
new file mode 100644
index 000000000000..39cc621bafa0
--- /dev/null
+++ b/frontend/web/components/base/select/multi-select/MultiSelect.tsx
@@ -0,0 +1,105 @@
+import classNames from 'classnames'
+import React, { FC } from 'react'
+import { MultiValueProps } from 'react-select/lib/components/MultiValue'
+import { OptionProps } from 'react-select/lib/components/Option'
+
+import { CustomMultiValue } from './CustomMultiValue'
+import { CustomOption } from './CustomOption'
+
+export interface MultiSelectOption {
+  label: string
+  value: string
+}
+
+export interface MultiSelectProps {
+  selectedValues: string[]
+  onSelectionChange: (selectedValues: string[]) => void
+  options: MultiSelectOption[]
+  colorMap?: Map<string, string>
+  label?: string
+  placeholder?: string
+  className?: string
+  disabled?: boolean
+  size?: 'small' | 'default' | 'large'
+  hideSelectedOptions?: boolean
+  inline?: boolean
+}
+
+export const MultiSelect: FC<MultiSelectProps> = ({
+  className = '',
+  colorMap,
+  disabled = false,
+  label,
+  onSelectionChange,
+  options,
+  placeholder = 'Select options...',
+  selectedValues,
+  size = 'default',
+  hideSelectedOptions = false,
+}) => {
+  return (
+    <div className={classNames(
+        className,
+        label ? `d-flex flex-column gap-2` : ''
+      )}>
+      {label && <label>{label}</label>}
+      <Select
+        isMulti
+        hideSelectedOptions={hideSelectedOptions}
+        closeMenuOnSelect={false}
+        placeholder={placeholder}
+        isDisabled={disabled}
+        size={size}
+        onChange={(selectedOptions: MultiSelectOption[]) => {
+          const values = selectedOptions
+            ? selectedOptions.map((opt: MultiSelectOption) => opt.value)
+            : []
+          onSelectionChange(values)
+        }}
+        components={{
+          MultiValue: (props: MultiValueProps<MultiSelectOption>) => (
+            <CustomMultiValue
+              {...props}
+              color={colorMap?.get(props.data.value) || '#5D6D7E'}
+            />
+          ),
+          ...(colorMap ? {Option: (props: OptionProps<MultiSelectOption>) => <CustomOption
+            {...props}
+            color={colorMap.get(props.data.value)}
+          />} : {}),
+        }}
+        value={selectedValues.map((value) => ({
+          label: options.find((opt) => opt.value === value)?.label || value,
+          value,
+        }))}
+        options={options}
+        className='react-select react-select__extensible w-100'
+        styles={{
+          control: (base: any) => ({
+            ...base,
+            cursor: 'pointer',
+          }),
+          multiValue: (base: any) => ({
+            ...base,
+            flexShrink: 0,
+            margin: '2px',
+          }),
+          valueContainer: (base: any) => ({
+            ...base,
+            flexWrap: 'nowrap',
+            gap: '2px',
+            paddingBottom: '6px',
+            paddingTop: '6px',
+            flex: 1
+          }),
+          input: (base: any) => ({
+            ...base,
+            margin: 0,
+            paddingBottom: 0,
+            paddingTop: 0,
+          }),
+        }}
+      />
+    </div>
+  )
+}
diff --git a/frontend/web/components/base/select/multi-select/index.ts b/frontend/web/components/base/select/multi-select/index.ts
new file mode 100644
index 000000000000..d22634c13fed
--- /dev/null
+++ b/frontend/web/components/base/select/multi-select/index.ts
@@ -0,0 +1 @@
+export { MultiSelect } from './MultiSelect'
diff --git a/frontend/web/components/modals/AssociatedSegmentOverrides.js b/frontend/web/components/modals/AssociatedSegmentOverrides.js
index 8a5b17c4bbba..fe81ab4fdba6 100644
--- a/frontend/web/components/modals/AssociatedSegmentOverrides.js
+++ b/frontend/web/components/modals/AssociatedSegmentOverrides.js
@@ -157,6 +157,7 @@ class TheComponent extends Component {
               />
               <div>
                 <InputGroup
+                  className="col-4"
                   component={
                     <EnvironmentSelect
                       projectId={this.props.projectId}
diff --git a/frontend/web/components/modals/CreateSegment.tsx b/frontend/web/components/modals/CreateSegment.tsx
index e638160cbd38..2f2715ae4a0e 100644
--- a/frontend/web/components/modals/CreateSegment.tsx
+++ b/frontend/web/components/modals/CreateSegment.tsx
@@ -498,7 +498,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
               </Row>
             }
           >
-            <div className='my-4 col-lg-8 mx-auto'>
+            <div className='my-4'>
               <CreateSegmentRulesTabForm
                 is4Eyes={is4Eyes}
                 onCreateChangeRequest={onCreateChangeRequest}
@@ -526,7 +526,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
             </div>
           </TabItem>
           <TabItem tabLabel='Features'>
-            <div className='my-4 col-lg-8 mx-auto'>
+            <div className='my-4'>
               <AssociatedSegmentOverrides
                 onUnsavedChange={() => {
                   setValueChanged(true)
@@ -539,7 +539,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
             </div>
           </TabItem>
           <TabItem tabLabel='Users'>
-            <div className='my-4 col-lg-8 mx-auto'>
+            <div className='my-4'>
               <CreateSegmentUsersTabContent
                 projectId={projectId}
                 environmentId={environmentId}
@@ -566,7 +566,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
                 </Row>
               }
             >
-              <div className='my-4 col-lg-8 mx-auto'>{MetadataTab}</div>
+              <div className='my-4 col-lg-8'>{MetadataTab}</div>
             </TabItem>
           )}
         </Tabs>
diff --git a/frontend/web/components/modals/CreateSegmentRulesTabForm.tsx b/frontend/web/components/modals/CreateSegmentRulesTabForm.tsx
index d088a56496e2..22a6d521e635 100644
--- a/frontend/web/components/modals/CreateSegmentRulesTabForm.tsx
+++ b/frontend/web/components/modals/CreateSegmentRulesTabForm.tsx
@@ -131,10 +131,9 @@ const CreateSegmentRulesTabForm: React.FC<CreateSegmentRulesTabFormProps> = ({
             Utils.displayLimitAlert('segments', segmentsLimitAlert.percentage)}
         </div>
       )}
-
-      <div className='mb-3'>
-        <label htmlFor='segmentID'>Name*</label>
-        <Flex>
+      <div className='d-flex flex-md-row flex-sm-column gap-2'> 
+        <div className='d-flex flex-column col-md-6'>
+          <label htmlFor='segmentID'>Name*</label>
           <Input
             data-test='segmentID'
             name='id'
@@ -153,27 +152,27 @@ const CreateSegmentRulesTabForm: React.FC<CreateSegmentRulesTabFormProps> = ({
             type='text'
             placeholder='E.g. power_users'
           />
-        </Flex>
+        </div>
+        {!condensed && (
+          <InputGroup
+            className='col-md-6'
+            value={description}
+            inputProps={{
+              className: 'full-width',
+              name: 'featureDesc',
+              readOnly: !!identity || readOnly,
+            }}
+            onChange={(e: InputEvent) => {
+              setValueChanged(true)
+              setDescription(Utils.safeParseEventValue(e))
+            }}
+            isValid={name && name.length}
+            type='text'
+            title='Description'
+            placeholder="e.g. 'People who have spent over $100' "
+          />
+        )}
       </div>
-      {!condensed && (
-        <InputGroup
-          className='mb-3'
-          value={description}
-          inputProps={{
-            className: 'full-width',
-            name: 'featureDesc',
-            readOnly: !!identity || readOnly,
-          }}
-          onChange={(e: InputEvent) => {
-            setValueChanged(true)
-            setDescription(Utils.safeParseEventValue(e))
-          }}
-          isValid={name && name.length}
-          type='text'
-          title='Description'
-          placeholder="e.g. 'People who have spent over $100' "
-        />
-      )}
 
       <div className='form-group '>
         <Row className='mb-3'>
diff --git a/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx b/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx
index 841eff433820..2ee99ba03ebd 100644
--- a/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx
+++ b/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx
@@ -98,6 +98,7 @@ const CreateSegmentUsersTabContent: React.FC<
         <FormGroup>
           <InputGroup
             title='Environment'
+            className="col-4"
             component={
               <EnvironmentSelect
                 projectId={`${projectId}`}
diff --git a/frontend/web/components/organisation-settings/usage/OrganisationUsageMetrics.container.tsx b/frontend/web/components/organisation-settings/usage/OrganisationUsageMetrics.container.tsx
index 149b484e7fe5..4b8a25d5cebc 100644
--- a/frontend/web/components/organisation-settings/usage/OrganisationUsageMetrics.container.tsx
+++ b/frontend/web/components/organisation-settings/usage/OrganisationUsageMetrics.container.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react'
 import { Res } from 'common/types/responses'
 import SingleSDKLabelsChart from './components/SingleSDKLabelsChart'
-import MultiSelect from 'components/base/select/MultiSelect'
+import { MultiSelect } from 'components/base/select/multi-select'
 
 export interface OrganisationUsageMetricsProps {
   data?: Res['organisationUsage']
diff --git a/frontend/web/components/segments/Rule/Rule.tsx b/frontend/web/components/segments/Rule/Rule.tsx
index 6dc10df6999f..5776c5075aef 100644
--- a/frontend/web/components/segments/Rule/Rule.tsx
+++ b/frontend/web/components/segments/Rule/Rule.tsx
@@ -76,15 +76,28 @@ const Rule: React.FC<RuleProps> = ({
       operator: operatorValue?.split(':')[0],
     }
 
-    if (newOperator?.hideValue) {
-      updates.value = null
-    }
-
+    // Handle append changes first
     if (prevOperator?.append !== newOperator?.append) {
-      const cleanValue = splitIfValue(condition?.value, prevOperator?.append)[0]
+      const conditionValue = typeof condition?.value === 'boolean' ? String(condition.value) : condition?.value
+      const cleanValue = splitIfValue(conditionValue, prevOperator?.append || '')[0]
       updates.value = cleanValue + (newOperator?.append || '')
     }
 
+    // Clear value when changing to or from IN operator (after append handling)
+    const isChangingToIn = operatorValue === 'IN'
+    const isChangingFromIn = condition?.operator === 'IN'
+    if (isChangingToIn || isChangingFromIn) {
+      updates.value = ''
+    }
+
+    // Set null for hideValue operators (takes precedence over everything)
+    if (newOperator?.hideValue) {
+      updates.value = null
+    } else if (prevOperator?.hideValue && !updates.hasOwnProperty('value')) {
+      // When changing FROM a hideValue operator, initialize value to empty string
+      updates.value = ''
+    }
+
     if (shouldAutoSetIdentityKey(operatorValue, condition.property)) {
       updates.property = RuleContextValues.IDENTITY_KEY
     }
diff --git a/frontend/web/components/segments/Rule/components/RuleConditionRow.tsx b/frontend/web/components/segments/Rule/components/RuleConditionRow.tsx
index 4c02181e2134..f71b524909f5 100644
--- a/frontend/web/components/segments/Rule/components/RuleConditionRow.tsx
+++ b/frontend/web/components/segments/Rule/components/RuleConditionRow.tsx
@@ -60,7 +60,7 @@ const RuleConditionRow: React.FC<RuleConditionRowProps> = ({
   const { displayValue, operator, operatorObj, valuePlaceholder } =
     useRuleOperator(rule, operators)
 
-  const { allowedContextValues, isValueFromContext, showEnvironmentDropdown } =
+  const { allowedContextValues, isValueFromContext } =
     useRuleContext(operator, rule.property)
 
   if (rule.delete) {
@@ -84,74 +84,81 @@ const RuleConditionRow: React.FC<RuleConditionRowProps> = ({
           <Flex className='or-divider__line' />
         </Row>
       )}
-      <Row
-        noWrap
-        className='rule align-items-center justify-content-between gap-1'
+      <div
+        className='d-flex flex-row align-items-center gap-1'
       >
-        <RuleConditionPropertySelect
-          dataTest={`${dataTest}-property-${ruleIndex}`}
-          ruleIndex={ruleIndex}
-          setRuleProperty={setRuleProperty}
-          propertyValue={rule.property}
-          operator={rule.operator}
-          allowedContextValues={allowedContextValues}
-          isValueFromContext={isValueFromContext}
-        />
-        {readOnly ? (
-          !!find(operators, { value: operator })?.label
-        ) : (
-          <Select
-            data-test={`${dataTest}-operator-${ruleIndex}`}
-            value={operator && find(operators, { value: operator })}
-            onChange={(value: { value: string }) => {
-              setRuleProperty(ruleIndex, 'operator', value)
+        <div
+          className='d-flex flex-1 flex-row rule align-items-center justify-content-between gap-1 col-md-10'
+        >
+          <div className='col-10 col-sm-4 col-md-4'>
+            <RuleConditionPropertySelect
+              dataTest={`${dataTest}-property-${ruleIndex}`}
+              ruleIndex={ruleIndex}
+              setRuleProperty={setRuleProperty}
+              propertyValue={rule.property}
+              operator={rule.operator}
+              allowedContextValues={allowedContextValues}
+              isValueFromContext={isValueFromContext}
+            />
+          </div>
+          {readOnly ? (
+            !!find(operators, { value: operator })?.label
+          ) : (
+            <Select
+              data-test={`${dataTest}-operator-${ruleIndex}`}
+              value={operator && find(operators, { value: operator })}
+              onChange={(value: { value: string }) => {
+                setRuleProperty(ruleIndex, 'operator', value)
+              }}
+              options={operators}
+              className="col-10 col-sm-3 col-md-3"
+            />
+          )}
+          <RuleConditionValueInput
+            readOnly={readOnly}
+            data-test={`${dataTest}-value-${ruleIndex}`}
+            value={displayValue || ''}
+            placeholder={valuePlaceholder}
+            disabled={operatorObj && operatorObj.hideValue}
+            projectId={projectId}
+            operator={operator}
+            property={rule.property}
+            onChange={(value: string) => {
+              setRuleProperty(ruleIndex, 'value', {
+                value:
+                  operatorObj && operatorObj.append
+                    ? `${value}${operatorObj.append}`
+                    : value,
+              })
             }}
-            options={operators}
-            style={{ width: '190px' }}
+            isValid={Utils.validateRule(rule) && !ruleErrors?.value}
+            className='col-10 col-sm-4 col-md-4'
           />
-        )}
-        <RuleConditionValueInput
-          readOnly={readOnly}
-          data-test={`${dataTest}-value-${ruleIndex}`}
-          value={displayValue || ''}
-          placeholder={valuePlaceholder}
-          disabled={operatorObj && operatorObj.hideValue}
-          style={{ width: '135px' }}
-          projectId={projectId}
-          showEnvironmentDropdown={showEnvironmentDropdown}
-          operator={operator}
-          onChange={(value: string) => {
-            setRuleProperty(ruleIndex, 'value', {
-              value:
-                operatorObj && operatorObj.append
-                  ? `${value}${operatorObj.append}`
-                  : value,
-            })
-          }}
-          isValid={Utils.validateRule(rule) && !ruleErrors?.value}
-        />
-        {isLastRule && !readOnly ? (
-          <Button
-            theme='outline'
-            data-test={`${dataTest}-or`}
+        </div>
+        <div className='d-flex flex-sm-column flex-md-row gap-2'>
+          {isLastRule && !readOnly ? (
+            <Button
+              theme='outline'
+              data-test={`${dataTest}-or`}
+              type='button'
+              onClick={addRule}
+            >
+              Or
+            </Button>
+          ) : (
+            <div style={{ width: 64 }} />
+          )}
+          <button
+            data-test={`${dataTest}-remove`}
             type='button'
-            onClick={addRule}
+            id='remove-feature'
+            onClick={() => removeRule(ruleIndex)}
+            className='btn btn-with-icon'
           >
-            Or
-          </Button>
-        ) : (
-          <div style={{ width: 64 }} />
-        )}
-        <button
-          data-test={`${dataTest}-remove`}
-          type='button'
-          id='remove-feature'
-          onClick={() => removeRule(ruleIndex)}
-          className='btn btn-with-icon'
-        >
-          <Icon name='trash-2' width={20} fill={'#656D7B'} />
-        </button>
-      </Row>
+            <Icon name='trash-2' width={20} fill={'#656D7B'} />
+          </button>
+        </div>
+      </div>
       {showDescription && (
         <Row noWrap className='rule'>
           <textarea
diff --git a/frontend/web/components/segments/Rule/components/RuleConditionValueInput.tsx b/frontend/web/components/segments/Rule/components/RuleConditionValueInput.tsx
index 94417b0709d0..a7dfb978c4e6 100644
--- a/frontend/web/components/segments/Rule/components/RuleConditionValueInput.tsx
+++ b/frontend/web/components/segments/Rule/components/RuleConditionValueInput.tsx
@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { useMemo } from 'react'
+import classNames from 'classnames'
 import Input from 'components/base/forms/Input'
 import Icon from 'components/Icon'
 import Utils from 'common/utils/utils'
@@ -7,6 +8,11 @@ import { getDarkMode } from 'project/darkMode'
 import EnvironmentSelectDropdown from './EnvironmentSelectDropdown'
 import TextAreaModal from './TextAreaModal'
 import { checkWhitespaceIssues } from 'components/segments/Rule/utils'
+import { MultiSelect } from 'components/base/select/multi-select'
+import { safeParseArray } from 'components/segments/Rule/utils/arrayUtils'
+import { useGetEnvironmentsQuery } from 'common/services/useEnvironment'
+import { useConditionInputType } from 'components/segments/Rule/hooks/useConditionInputType'
+import { OperatorValue } from 'common/types/rules.types'
 
 type RuleConditionValueInputProps = {
   'data-test'?: string
@@ -18,19 +24,67 @@ type RuleConditionValueInputProps = {
   readOnly?: boolean
   isValid?: boolean
   projectId?: number
-  showEnvironmentDropdown?: boolean
-  operator?: string
+  operator?: OperatorValue
+  property?: string
+  className?: string
 }
 
 const RuleConditionValueInput: React.FC<RuleConditionValueInputProps> = ({
   isValid,
   onChange,
   operator,
+  property,
   projectId,
-  showEnvironmentDropdown,
   value,
+  className,
   ...props
 }) => {
+  const { data } = useGetEnvironmentsQuery(
+    { projectId: projectId?.toString() || '' },
+    { skip: !projectId },
+  )
+  const environmentOptions = useMemo(
+    () =>
+      data?.results
+        ? data.results.map(({ name }) => ({ label: name, value: name }))
+        : [],
+    [data],
+  )
+
+  const { showMultiEnvironmentSelect, showSingleEnvironmentSelect } = useConditionInputType(
+    operator,
+    property,
+  )
+
+  if (showMultiEnvironmentSelect) {
+    return (
+      <div className={className}>
+        <MultiSelect
+          selectedValues={safeParseArray(value)}
+          onSelectionChange={(selectedValues: string[]) => {
+            onChange?.(JSON.stringify(selectedValues))
+          }}
+          placeholder='Select environments...'
+          options={environmentOptions}
+          className='w-100'
+        />
+      </div>
+    )
+  }
+
+  if (showSingleEnvironmentSelect && projectId) {
+    return (
+      <div className={className}>
+        <EnvironmentSelectDropdown
+          value={value}
+          onChange={(value: string) => onChange?.(value)}
+          projectId={projectId}
+          dataTest={props['data-test']}
+        />
+      </div>
+    )
+  }
+
   const whitespaceCheck = checkWhitespaceIssues(value, operator)
   const hasWarning = !!whitespaceCheck
   const isLongText = String(value).length >= 10
@@ -49,70 +103,60 @@ const RuleConditionValueInput: React.FC<RuleConditionValueInputProps> = ({
   const isDarkMode = getDarkMode()
 
   return (
-    <div className='relative'>
-      {showEnvironmentDropdown && projectId ? (
-        <EnvironmentSelectDropdown
-          value={value}
-          onChange={(value: string) => onChange?.(value)}
-          projectId={projectId}
-          dataTest={props['data-test']}
-        />
-      ) : (
-        <>
-          <Input
-            type='text'
-            data-test={props['data-test']}
-            name='rule-condition-value-input'
-            aria-label='Rule condition value input'
-            value={value}
-            inputClassName={
-              showIcon ? `pr-5 ${hasWarning ? 'border-warning' : ''}` : ''
-            }
-            style={{ width: '100%' }}
-            onChange={(e: InputEvent) => {
-              const value = Utils.safeParseEventValue(e)
-              onChange?.(value)
-            }}
-          />
-          {showIcon && (
-            <div style={{ position: 'absolute', right: 5, top: 9 }}>
-              <Tooltip
-                title={
-                  <div
-                    className={`rule-value-icon flex ${
-                      isDarkMode ? 'bg-white' : 'bg-black'
-                    } bg-opacity-10 rounded-2 p-1 cursor-pointer`}
-                    onClick={() => {
-                      openModal2(
-                        'Edit Value',
-                        <TextAreaModal
-                          value={value}
-                          onChange={onChange}
-                          operator={operator}
-                        />,
-                      )
-                    }}
-                  >
-                    <Icon
-                      name={hasWarning ? 'warning' : 'expand'}
-                      fill={
-                        hasWarning
-                          ? undefined
-                          : `${isDarkMode ? '#fff' : '#1A2634'}`
-                      }
-                      width={18}
-                      height={18}
-                    />
-                  </div>
-                }
-                place='top'
-                effect='solid'
+    <div className={classNames('relative', className)}>
+      <Input
+        type='text'
+        data-test={props['data-test']}
+        name='rule-condition-value-input'
+        aria-label='Rule condition value input'
+        value={value}
+        className='w-100'
+        inputClassName={
+          showIcon ? `pr-5 ${hasWarning ? 'border-warning' : ''}` : ''
+        }
+        style={{ width: '100%' }}
+        onChange={(e: InputEvent) => {
+          const value = Utils.safeParseEventValue(e)
+          onChange?.(value)
+        }}
+      />
+      {showIcon && (
+        <div style={{ position: 'absolute', right: 5, top: 9 }}>
+          <Tooltip
+            title={
+              <div
+                className={`rule-value-icon flex ${
+                  isDarkMode ? 'bg-white' : 'bg-black'
+                } bg-opacity-10 rounded-2 p-1 cursor-pointer`}
+                onClick={() => {
+                  openModal2(
+                    'Edit Value',
+                    <TextAreaModal
+                      value={value}
+                      onChange={onChange}
+                      operator={operator}
+                    />,
+                  )
+                }}
               >
-                {validate()}
-              </Tooltip>
-            </div>
-          )}
-        </>
+                <Icon
+                  name={hasWarning ? 'warning' : 'expand'}
+                  fill={
+                    hasWarning
+                      ? undefined
+                      : `${isDarkMode ? '#fff' : '#1A2634'}`
+                  }
+                  width={18}
+                  height={18}
+                />
+              </div>
+            }
+            place='top'
+            effect='solid'
+          >
+            {validate()}
+          </Tooltip>
+        </div>
       )}
     </div>
   )
diff --git a/frontend/web/components/segments/Rule/hooks/index.ts b/frontend/web/components/segments/Rule/hooks/index.ts
index 790dfc48ad99..5bc532c27a0f 100644
--- a/frontend/web/components/segments/Rule/hooks/index.ts
+++ b/frontend/web/components/segments/Rule/hooks/index.ts
@@ -1,2 +1,3 @@
 export { useRuleOperator } from './useRuleOperator'
 export { useRuleContext } from './useRuleContext'
+export { useConditionInputType } from './useConditionInputType'
diff --git a/frontend/web/components/segments/Rule/hooks/useConditionInputType.ts b/frontend/web/components/segments/Rule/hooks/useConditionInputType.ts
new file mode 100644
index 000000000000..ab8a54fb5ee4
--- /dev/null
+++ b/frontend/web/components/segments/Rule/hooks/useConditionInputType.ts
@@ -0,0 +1,18 @@
+import { OperatorValue, RuleContextValues } from 'common/types/rules.types'
+
+export const useConditionInputType = (
+  operator: OperatorValue | undefined,
+  property: string | undefined,
+) => {
+  const showMultiEnvironmentSelect =
+    operator === 'IN' && property === RuleContextValues.ENVIRONMENT_NAME
+
+  const showSingleEnvironmentSelect =
+    ['EQUAL', 'NOT_EQUAL'].includes(operator || '') &&
+    property === RuleContextValues.ENVIRONMENT_NAME
+
+  return {
+    showMultiEnvironmentSelect,
+    showSingleEnvironmentSelect,
+  }
+}
diff --git a/frontend/web/components/segments/Rule/hooks/useRuleContext.ts b/frontend/web/components/segments/Rule/hooks/useRuleContext.ts
index b26594c342c3..6829381effaf 100644
--- a/frontend/web/components/segments/Rule/hooks/useRuleContext.ts
+++ b/frontend/web/components/segments/Rule/hooks/useRuleContext.ts
@@ -1,4 +1,4 @@
-import { OperatorValue, RuleContextValues } from 'common/types/rules.types'
+import { OperatorValue } from 'common/types/rules.types'
 import { getAllowedContextValuesForDropdown } from 'components/segments/Rule/utils'
 
 export const useRuleContext = (operator: OperatorValue, property: string) => {
@@ -7,9 +7,6 @@ export const useRuleContext = (operator: OperatorValue, property: string) => {
   const isValueFromContext = allowedContextValues.some(
     (option) => option.value === property,
   )
-  const showEnvironmentDropdown =
-    ['EQUAL', 'NOT_EQUAL'].includes(operator) &&
-    property === RuleContextValues.ENVIRONMENT_NAME
 
-  return { allowedContextValues, isValueFromContext, showEnvironmentDropdown }
+  return { allowedContextValues, isValueFromContext }
 }
diff --git a/frontend/web/components/segments/Rule/utils/arrayUtils.ts b/frontend/web/components/segments/Rule/utils/arrayUtils.ts
new file mode 100644
index 000000000000..20da0da678f8
--- /dev/null
+++ b/frontend/web/components/segments/Rule/utils/arrayUtils.ts
@@ -0,0 +1,14 @@
+export const safeParseArray = (
+  value: string | number | boolean | null,
+): string[] => {
+  if (typeof value !== 'string') {
+    return []
+  }
+
+  try {
+    const parsed = JSON.parse(value)
+    return Array.isArray(parsed) ? parsed : []
+  } catch {
+    return []
+  }
+}
diff --git a/frontend/web/project/project-components.js b/frontend/web/project/project-components.js
index 59d76582c62a..29d1a696d8e2 100644
--- a/frontend/web/project/project-components.js
+++ b/frontend/web/project/project-components.js
@@ -118,7 +118,7 @@ global.Select = class extends PureComponent {
   }
 
   render() {
-    const props = this.props
+    const { className, ...props } = this.props
     return E2E ? (
       <div>
         <input
@@ -148,7 +148,7 @@ global.Select = class extends PureComponent {
       </div>
     ) : (
       <div
-        className={props.className}
+        className={className}
         onClick={(e) => {
           e.stopPropagation()
         }}
diff --git a/frontend/web/styles/project/_segments.scss b/frontend/web/styles/project/_segments.scss
index dd69918409b1..0c5f20a59a7f 100644
--- a/frontend/web/styles/project/_segments.scss
+++ b/frontend/web/styles/project/_segments.scss
@@ -3,7 +3,7 @@
   background-color: $bg-light200;
   .react-select {
     font-weight: normal;
-    width: 190px;
+    width: 100%;
     .react-select__input input {
       font-weight: normal;
     }