diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index c604bfb..ea0abc3 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -178,7 +178,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full text-muted-foreground cursor-default select-none items-center rounded py-2 pl-8 pr-2 text-xs outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full text-white cursor-default select-none items-center rounded py-2 pl-8 pr-2 text-xs outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
diff --git a/src/features/render/render-inputs/select/RenderSelect.tsx b/src/features/render/render-inputs/select/RenderSelect.tsx
index d713d53..085c016 100644
--- a/src/features/render/render-inputs/select/RenderSelect.tsx
+++ b/src/features/render/render-inputs/select/RenderSelect.tsx
@@ -11,6 +11,7 @@ import { Scene } from "../../project-settings/ProjectSettings.types"
 type FormRenderSchema = z.infer<typeof formRenderSchema>;
 type FieldName = keyof FormRenderSchema;
 
+
 interface RenderSelectProps {
     form: UseFormReturn<z.infer<typeof formRenderSchema>>
     fieldName: FieldName
@@ -36,7 +37,7 @@ const RenderSelect = ({ defaultValue, fieldName, form, label, options, isCustom,
 
         // detect if fieldName is camera_name and if "" then setformstateerror
 
-        if(fieldName === "camera_name") {
+        if (fieldName === "camera_name") {
             // console.log('camera name', value)
             if (value === "") {
                 form.setError('camera_name', {
@@ -97,6 +98,36 @@ const RenderSelect = ({ defaultValue, fieldName, form, label, options, isCustom,
         form.setValue(fieldName, value)
     }
 
+    const formatColorDepth: { [key: string]: number | number[] } = {
+        BMP: 8,
+        IRIS: [8, 16],
+        PNG: [8, 16],
+        JPEG: 8,
+        JPEG2000: [8, 12, 16],
+        TARGA: [8, 16],
+        TARGA_RAW: [8, 16],
+        CINEON: [8, 10, 12, 16],
+        DPX: [8, 10, 12, 16],
+        OPEN_EXR: [16, 32],
+        OPEN_EXR_MULTILAYER: [16, 32],
+        // HDR: [32],
+        TIFF: [8, 16, 32],
+        WEBP: [8],
+    };
+
+
+    const isOptionDisabled = (option: string) => {
+        const currentValue = form.watch(fieldName);
+        console.log('current value', currentValue)
+        // Example logic to disable options based on the current form value and file format
+        if ((fieldName === "output.color.color_depth" as any) && formatColorDepth[form.watch("output.output_format")]) {
+            const allowedDepths = formatColorDepth[form.watch("output.output_format")];
+            const depthsArray = Array.isArray(allowedDepths) ? allowedDepths : [allowedDepths];
+            return !depthsArray.includes(Number(option));
+        }
+        return false;
+    }
+
     return (
         <FormField
             control={form.control}
@@ -118,7 +149,7 @@ const RenderSelect = ({ defaultValue, fieldName, form, label, options, isCustom,
                         <SelectContent>
                             {options.map((option, index: number) => (
                                 <SelectItem key={index} value={option}
-                                    disabled={currentPathname === '/render-cpu' && option === 'OPTIX' ? true : false}
+                                    disabled={currentPathname === '/render-cpu' && option === 'OPTIX' ? true : false || isOptionDisabled(option)}
                                 >
                                     {option}
                                 </SelectItem>
diff --git a/src/features/render/render-settings/RenderFormFields.tsx b/src/features/render/render-settings/RenderFormFields.tsx
index 5f42c18..a55e66d 100644
--- a/src/features/render/render-settings/RenderFormFields.tsx
+++ b/src/features/render/render-settings/RenderFormFields.tsx
@@ -107,7 +107,7 @@ const RenderFormFields = ({ form, sectionType }: RenderFormFieldsProps) => {
                                 {renderSelectField("output.output_format", "Output Format", ['BMP', 'IRIS', 'PNG', 'JPEG', 'JPEG2000', 'TARGA', 'TARGA_RAW', 'CINEON', 'DPX', 'OPEN_EXR_MULTILAYER', 'OPEN_EXR', 'HDR', 'TIFF', 'WEBP'], scene.output.output_format)}
                                 {renderInputField("output.compression", "Compression (%)", "number", "Compression", scene.output.compression, 0, 100)}
                                 {renderSelectField("output.color.color_mode", "Color Mode", ['BW', 'RGB', 'RGBA'], scene.output.color.color_mode)}
-                                {renderSelectField("output.color.color_depth", "Color Depth", ["8", "16"], scene.output.color.color_depth)}
+                                {renderSelectField("output.color.color_depth", "Color Depth", ["8", "16", "32"], scene.output.color.color_depth)}
                                 {renderCheckboxField("use_compositor", "Use Compositor", scene.use_compositor)}
                                 {renderCheckboxField("use_sequencer", "Use Sequencer", scene.use_sequencer)}
                                 {renderCheckboxField("use_stamp", "Stamp Metadata", scene.use_stamp)}