diff --git a/packages/web/components/elements/FormElements.tsx b/packages/web/components/elements/FormElements.tsx
index 89fe3623f..f7896089f 100644
--- a/packages/web/components/elements/FormElements.tsx
+++ b/packages/web/components/elements/FormElements.tsx
@@ -15,7 +15,7 @@ export interface FormInputProps {
   hidden?: boolean
   required?: boolean
   css?: any
-  labels?: string[]
+  options?: string[]
 }
 
 export const FormInput = styled('input', {
@@ -44,7 +44,7 @@ export function GeneralFormInput(props: FormInputProps): JSX.Element {
   if (props.type === 'checkbox') {
     return (
       <VStack>
-        {input.labels?.map((label, index) => (
+        {input.options?.map((label, index) => (
           <HStack key={index}>
             <StyledText>{label}</StyledText>
             <Box css={{ padding: '10px 0 0 10px' }}>
@@ -56,7 +56,7 @@ export function GeneralFormInput(props: FormInputProps): JSX.Element {
                   setInput(input)
                   props.onChange &&
                     props.onChange(
-                      input.labels?.filter((_, i) => input.value[i])
+                      input.options?.filter((_, i) => input.value[i])
                     )
                 }}
               ></Checkbox>
@@ -74,8 +74,7 @@ export function GeneralFormInput(props: FormInputProps): JSX.Element {
         placeholder={input.placeholder}
         onChange={(event) => {
           if (input.onChange) {
-            // input.value = event.target.value
-            setInput(input)
+            setInput({ ...input, value: event.target.value })
             input.onChange(event.target.value)
           }
         }}
diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx
index ed3dc98ca..a2fa8fedc 100644
--- a/packages/web/pages/settings/webhooks.tsx
+++ b/packages/web/pages/settings/webhooks.tsx
@@ -31,13 +31,11 @@ export default function Webhooks(): JSX.Element {
   const [addModelOpen, setAddModelOpen] = useState(false)
   const [onEditWebhook, setOnEditWebhook] = useState<Webhook | null>(null)
   const [url, setUrl] = useState('')
-  const [eventTypes, setEventTypes] = useState<WebhookEvent[]>([
-    'PAGE_CREATED',
-    'HIGHLIGHT_CREATED',
-  ])
+  const [eventTypes, setEventTypes] = useState<WebhookEvent[]>([])
   const [contentType, setContentType] = useState('application/json')
   const [method, setMethod] = useState('POST')
   const [formInputs, setFormInputs] = useState<FormInputProps[]>([])
+  const eventTypeOptions = ['PAGE_CREATED', 'HIGHLIGHT_CREATED']
 
   const headers = ['URL', 'Event Types', 'Method', 'Content Type']
   const rows = useMemo(() => {
@@ -148,7 +146,7 @@ export default function Webhooks(): JSX.Element {
               name: 'eventTypes',
               value: [true, true],
               onChange: setEventTypes,
-              labels: eventTypes,
+              options: eventTypeOptions,
               type: 'checkbox',
             },
             {
@@ -178,9 +176,12 @@ export default function Webhooks(): JSX.Element {
             {
               label: 'Event Types',
               name: 'eventTypes',
-              value: webhook?.eventTypes,
+              value: eventTypeOptions.map((option) =>
+                webhook?.eventTypes.includes(option)
+              ),
               onChange: setEventTypes,
-              disabled: true,
+              options: eventTypeOptions,
+              type: 'checkbox',
             },
             {
               label: 'Method',