diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index 1eb3ccd8..419ed314 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -42,6 +42,7 @@ interface SelectInputBaseProps<T = OptionType> {
   optionComponent?: OptionComponent<T>;
   components?: Partial<typeof ReactSelectComponents>;
   isDisabled?: boolean;
+  readOnly?: boolean;
   isLoading?: boolean;
   isClearable?: boolean;
   isRtl?: boolean;
@@ -156,6 +157,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     closeMenuOnSelect,
     hideSelectedOptions,
     onMenuScrollToBottom,
+    readOnly,
   } = props;
 
   const [internalInputValue, setInternalInputValue] = useState('');
@@ -235,7 +237,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         onInputChange={internalInputChangeHandler}
         onMenuClose={() => setInternalInputValue('')}
         isMulti={isMulti}
-        isDisabled={isDisabled}
+        isDisabled={isDisabled || readOnly}
         isLoading={isLoading}
         isClearable={isClearable}
         isRtl={isRtl}
@@ -247,30 +249,37 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         classNames={{
           ...(!startAdornment && {
             control: ({ isFocused, isDisabled }) =>
-              cn(
-                'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer!',
-                {
-                  'border-red-500! ring-2 ring-red-200': isError,
-                  'border-indigo-500 ring-2 ring-indigo-200': isFocused,
-                  'border-base-content/10!': !isError && !isFocused,
-                  'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
-                }
-              ),
-            valueContainer: () => cn('flex-1 p-3! py-2! gap-1'),
+              cn('w-full rounded-lg! border bg-white transition-shadow', {
+                'cursor-pointer!': !readOnly && !isDisabled,
+                'border-red-500! ring-2 ring-red-200': isError,
+                'border-indigo-500 ring-2 ring-indigo-200': isFocused,
+                'border-base-content/10!': !isError && !isFocused,
+                'bg-gray-100 text-gray-400 cursor-not-allowed':
+                  isDisabled && !readOnly,
+                'bg-transparent! cursor-not-allowed!': readOnly,
+              }),
+            valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
           }),
           placeholder: () =>
-            cn({ 'text-gray-400': !isError, 'text-red-300!': isError }),
+            cn({
+              'text-gray-400 text-sm leading-tight': !isError,
+              'text-red-300!': isError,
+            }),
           singleValue: () =>
-            cn({ 'text-gray-900': !isError, 'text-error!': isError }),
-          input: () => cn('text-gray-900 m-0! p-0!'),
-          indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
+            cn({
+              'm-0! text-gray-900 text-sm leading-tight': !isError,
+              'text-error!': isError,
+              'text-gray-900!': readOnly,
+            }),
+          input: () => cn('text-gray-900 m-0! p-0! text-sm leading-tight'),
+          indicatorsContainer: () => cn('flex items-center gap-1 pr-3 py-2'),
           dropdownIndicator: ({ isFocused }) =>
-            cn('p-1! rounded hover:bg-gray-100', {
+            cn('p-0! rounded hover:bg-gray-100', {
               'text-gray-900': isFocused,
               'text-gray-500': !isFocused,
               'text-error!': isError,
             }),
-          clearIndicator: () => cn('p-1! rounded hover:bg-gray-100'),
+          clearIndicator: () => cn('p-0! rounded hover:bg-gray-100'),
           menu: () =>
             cn(
               'border border-base-content/5 rounded-xl! bg-base-100 shadow-lg! my-1.5!'