diff --git a/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariablesForm.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariablesForm.tsx
index e27d5ff3..aeaaedda 100644
--- a/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariablesForm.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariablesForm.tsx
@@ -1,11 +1,15 @@
 import { useEffect, useMemo } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 
+// TODO: Use custom checkbox component
+// Custom checkbox component does not work with react-hook-form
+import { Checkbox } from '@snowballtools/material-tailwind-react-fork';
+// import { Checkbox } from 'components/shared/Checkbox';
+
 import { Button } from 'components/shared/Button';
 import { InlineNotification } from 'components/shared/InlineNotification';
 import AddEnvironmentVariableRow from 'components/projects/project/settings/AddEnvironmentVariableRow';
 import { EnvironmentVariablesFormValues } from 'types/types';
-import { Checkbox } from 'components/shared/Checkbox';
 
 const EnvironmentVariablesForm = () => {
   const {
@@ -67,10 +71,19 @@ const EnvironmentVariablesForm = () => {
         />
       )}
       <div className="flex gap-2 p-2">
-        <Checkbox label="Production" {...register('environment.production')} />
-        <Checkbox label="Preview" {...register('environment.preview')} />
+        <Checkbox
+          label="Production"
+          labelProps={{ className: "text-gray-900 dark:text-white" }}
+          {...register('environment.production')}
+        />
+        <Checkbox
+          label="Preview"
+          labelProps={{ className: "text-gray-900 dark:text-white" }}
+          {...register('environment.preview')}
+        />
         <Checkbox
           label="Development"
+          labelProps={{ className: "text-gray-900 dark:text-white" }}
           {...register('environment.development')}
         />
       </div>