diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 184f8bb1..39519518 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,6 +12,7 @@
         "@radix-ui/react-dialog": "^1.1.1",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-radio-group": "^1.2.0",
+        "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-slot": "^1.1.0",
         "calendar-link": "^2.7.0",
         "class-variance-authority": "^0.7.0",
@@ -24,13 +25,14 @@
         "react": "^18",
         "react-dom": "^18",
         "react-faq-component": "^1.3.4",
-        "react-hook-form": "^7.52.2",
+        "react-hook-form": "^7.53.0",
         "react-icons": "^5.2.1",
         "sanitize-html": "^2.13.0",
         "tailwind-merge": "^2.3.0",
         "tailwindcss-animate": "^1.0.7",
         "vaul": "^0.9.1",
-        "yup": "^1.4.0"
+        "yup": "^1.4.0",
+        "zod": "^3.23.8"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -134,6 +136,44 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz",
+      "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
+      "license": "MIT"
+    },
     "node_modules/@hookform/resolvers": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.0.tgz",
@@ -449,11 +489,40 @@
         "node": ">=14"
       }
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
+      "integrity": "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==",
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
       "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
     },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
+      "integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
@@ -659,6 +728,38 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
+      "integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-portal": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.1.tgz",
@@ -788,6 +889,49 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.1.tgz",
+      "integrity": "sha512-8iRDfyLtzxlprOo9IicnzvpsO1wNCkuwzzCM+Z5Rb5tNOpCdMvcc2AkzX0Fz+Tz9v6NJ5B/7EEgyZveo4FBRfQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-focus-guards": "1.1.0",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
@@ -881,6 +1025,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
+      "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-size": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
@@ -898,6 +1060,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz",
+      "integrity": "sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
+      "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==",
+      "license": "MIT"
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.10.3",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.3.tgz",
@@ -4683,9 +4874,9 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.52.2",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.52.2.tgz",
-      "integrity": "sha512-pqfPEbERnxxiNMPd0bzmt1tuaPcVccywFDpyk2uV5xCIBphHV5T8SVnX9/o3kplPE1zzKt77+YIoq+EMwJp56A==",
+      "version": "7.53.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.0.tgz",
+      "integrity": "sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==",
       "engines": {
         "node": ">=18.0.0"
       },
@@ -5960,6 +6151,14 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.23.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index 49aecb04..b8198b51 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,6 +13,7 @@
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "calendar-link": "^2.7.0",
     "class-variance-authority": "^0.7.0",
@@ -25,13 +26,14 @@
     "react": "^18",
     "react-dom": "^18",
     "react-faq-component": "^1.3.4",
-    "react-hook-form": "^7.52.2",
+    "react-hook-form": "^7.53.0",
     "react-icons": "^5.2.1",
     "sanitize-html": "^2.13.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.1",
-    "yup": "^1.4.0"
+    "yup": "^1.4.0",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@types/node": "^20",
diff --git a/frontend/src/components/Form/form.tsx b/frontend/src/components/Form/form.tsx
new file mode 100644
index 00000000..50a7d630
--- /dev/null
+++ b/frontend/src/components/Form/form.tsx
@@ -0,0 +1,178 @@
+'use client'
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { Slot } from '@radix-ui/react-slot'
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from 'react-hook-form'
+
+import { cn } from '@/lib/utils'
+import { Label } from '../Label'
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>')
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn('space-y-2', className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = 'FormItem'
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && 'text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = 'FormLabel'
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = 'FormControl'
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = 'FormDescription'
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn('text-sm font-medium text-destructive', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = 'FormMessage'
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/frontend/src/components/Form/index.ts b/frontend/src/components/Form/index.ts
new file mode 100644
index 00000000..54151771
--- /dev/null
+++ b/frontend/src/components/Form/index.ts
@@ -0,0 +1 @@
+export * from './form'
diff --git a/frontend/src/components/Select/index.ts b/frontend/src/components/Select/index.ts
new file mode 100644
index 00000000..211358f5
--- /dev/null
+++ b/frontend/src/components/Select/index.ts
@@ -0,0 +1 @@
+export * from './select'
diff --git a/frontend/src/components/Select/select.tsx b/frontend/src/components/Select/select.tsx
new file mode 100644
index 00000000..a3724268
--- /dev/null
+++ b/frontend/src/components/Select/select.tsx
@@ -0,0 +1,160 @@
+'use client'
+
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { Check, ChevronDown, ChevronUp } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex  px-5 py-4 w-full items-center justify-between rounded-md bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className='h-4 w-4 opacity-50' />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp className='h-4 w-4' />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className='h-4 w-4' />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+      <SelectPrimitive.ItemIndicator>
+        <Check className='h-4 w-4' />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index ae004655..67cef439 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -7,3 +7,5 @@ export * from './TextArea'
 export * from './Drawer'
 export * from './RadioGroup'
 export * from './Carousel'
+export * from './Select'
+export * from './Form'
diff --git a/frontend/src/constants/endpoints.ts b/frontend/src/constants/endpoints.ts
index 4fe371a6..d6dcac23 100644
--- a/frontend/src/constants/endpoints.ts
+++ b/frontend/src/constants/endpoints.ts
@@ -3,4 +3,5 @@ export const API_ENDPOINTS = {
   subscriber: '/subscriber',
   events: '/events',
   event: '/events/:id',
+  registerEvent: '/events/:id',
 }
diff --git a/frontend/src/constants/schema.tsx b/frontend/src/constants/schema.tsx
index 630ab303..834f1039 100644
--- a/frontend/src/constants/schema.tsx
+++ b/frontend/src/constants/schema.tsx
@@ -37,3 +37,59 @@ export const SUBSCRIBER_FORM_SCHEMA = yup.object({
     .email('Invalid email address')
     .required('Email is required'),
 })
+
+export const REGISTER_EVENT_FORM_SCHEMA = yup.object({
+  email: yup
+    .string()
+    .email('Please enter a valid email address')
+    .required('Email is required'),
+  first_name: yup
+    .string()
+    .min(2, 'First name must be at least 2 characters')
+    .max(50, 'First name cannot be more than 50 characters')
+    .required('First name is required'),
+  last_name: yup
+    .string()
+    .min(2, 'Last name must be at least 2 characters')
+    .max(50, 'Last name cannot be more than 50 characters')
+    .required('Last name is required'),
+  professional_status: yup
+    .string()
+    .oneOf(
+      ['working_professional', 'student', 'freelancer', 'other'],
+      'Please select a valid professional status',
+    )
+    .required('Professional status is required'),
+  gender: yup
+    .string()
+    .oneOf(['male', 'female', 'other'], 'Please select a valid gender')
+    .required('Gender is required'),
+  organization: yup
+    .string()
+    .min(2, 'Organization name must be at least 2 characters')
+    .max(100, 'Organization name cannot be more than 100 characters'),
+  description: yup
+    .string()
+    .max(500, 'Description cannot be more than 500 characters'),
+  linkedin: yup
+    .string()
+    .matches(
+      /^https?:\/\/(www\.)?linkedin\.com\/.*$/,
+      'Please enter a valid LinkedIn URL',
+    )
+    .required('LinkedIn URL is required'),
+  github: yup
+    .string()
+    .optional()
+    .matches(
+      /^https?:\/\/(www\.)?github\.com\/.*$/,
+      'Please enter a valid GitHub URL',
+    ),
+  twitter: yup
+    .string()
+    .optional()
+    .matches(
+      /^https?:\/\/(www\.)?twitter\.com\/.*$/,
+      'Please enter a valid Twitter URL',
+    ),
+})
diff --git a/frontend/src/containers/Event/Event.tsx b/frontend/src/containers/Event/Event.tsx
index 82017b5a..ac565fe8 100644
--- a/frontend/src/containers/Event/Event.tsx
+++ b/frontend/src/containers/Event/Event.tsx
@@ -15,11 +15,11 @@ import { google } from 'calendar-link'
 import type { Event } from '@/types'
 import Link from 'next/link'
 import { calculateDuration } from '@/utils'
-import sanitizeHtml from 'sanitize-html';
-
+import sanitizeHtml from 'sanitize-html'
 
 const EventContainer = async ({
   event: {
+    id,
     name,
     cover_image,
     venue,
@@ -37,9 +37,9 @@ const EventContainer = async ({
   const sanitizedDescription = sanitizeHtml(description, {
     allowedTags: ['b', 'i', 'em', 'strong', 'a', 'p', 'br'],
     allowedAttributes: {
-      a: ['href','target'],
+      a: ['href', 'target'],
     },
-  });
+  })
 
   const duration = calculateDuration(end_date, start_date)
 
@@ -66,17 +66,20 @@ const EventContainer = async ({
         </div>
         <div className='flex flex-col gap-2'>
           <h2 className='text-6xl font-bold'>{name}</h2>
-          <span>Starts {dayjs(start_date).format('DD MMMM, YYYY')} at {dayjs(start_date).format('hh:mm A')}</span>
+          <span>
+            Starts {dayjs(start_date).format('DD MMMM, YYYY')} at{' '}
+            {dayjs(start_date).format('hh:mm A')}
+          </span>
           {city && <span>City: {city}</span>}
-          <RegisterEvent />
+          <RegisterEvent eventId={id} />
           <div className='my-12 text-l flex flex-col gap-3'>
             <span className='flex items-center gap-2'>
               Hey Everyone <MdWavingHand className='text-amber-500' />
             </span>
             <div
-            className="prose"
-            dangerouslySetInnerHTML={{ __html: sanitizedDescription }}
-          />
+              className='prose'
+              dangerouslySetInnerHTML={{ __html: sanitizedDescription }}
+            />
           </div>
           <div className='my-10 flex flex-col gap-2'>
             <h4 className='text-2xl font-bold'>When</h4>
@@ -97,23 +100,27 @@ const EventContainer = async ({
               </Link>
             </Button>
           </div>
-          {venue && <div className='my-10 flex flex-col gap-2'>
-            <h4 className='text-2xl font-bold flex items-center gap-2'>
-              <CiLocationOn />
-              Where
-            </h4>
-            <p>{venue}</p>
-          </div>}
+          {venue && (
+            <div className='my-10 flex flex-col gap-2'>
+              <h4 className='text-2xl font-bold flex items-center gap-2'>
+                <CiLocationOn />
+                Where
+              </h4>
+              <p>{venue}</p>
+            </div>
+          )}
           <div>
-            {venue_map_link && <iframe
-              src={venue_map_link}
-              width='100%'
-              className='rounded-2xl w-full mx-auto shadow-xl'
-              height='450'
-              loading='lazy'
-              allowFullScreen
-              referrerPolicy='no-referrer-when-downgrade'
-            ></iframe>}
+            {venue_map_link && (
+              <iframe
+                src={venue_map_link}
+                width='100%'
+                className='rounded-2xl w-full mx-auto shadow-xl'
+                height='450'
+                loading='lazy'
+                allowFullScreen
+                referrerPolicy='no-referrer-when-downgrade'
+              ></iframe>
+            )}
           </div>
         </div>
       </div>
@@ -123,12 +130,16 @@ const EventContainer = async ({
         <h5 className='text-4xl	font-bold text-blue-900 text-center'>
           RSVP for this event now!
         </h5>
-        <span>Registration ends {dayjs(registration_end_date).format('DD MMMM, YYYY')} at {dayjs(registration_end_date).format('hh:mm A')}</span>
+        <span>
+          Registration ends{' '}
+          {dayjs(registration_end_date).format('DD MMMM, YYYY')} at{' '}
+          {dayjs(registration_end_date).format('hh:mm A')}
+        </span>
         <span className='flex items-center gap-2'>
           <CiLocationOn />
           {event_mode}
         </span>
-        <RegisterEvent />
+        <RegisterEvent eventId={id} />
       </div>
     </div>
   )
diff --git a/frontend/src/containers/RegisterEvent/RegisterEvent.config.ts b/frontend/src/containers/RegisterEvent/RegisterEvent.config.ts
new file mode 100644
index 00000000..41e09fc3
--- /dev/null
+++ b/frontend/src/containers/RegisterEvent/RegisterEvent.config.ts
@@ -0,0 +1,83 @@
+import { FieldType } from './RegisterEvent.types'
+
+export const REGISTER_FORM_FIELDS: (FieldType | Array<FieldType>)[] = [
+  [
+    {
+      name: 'first_name',
+      label: 'First Name',
+      placeholder: 'Enter your First Name',
+      type: 'text',
+    },
+    {
+      name: 'last_name',
+      label: 'Last Name',
+      placeholder: 'Enter your Last Name',
+      type: 'text',
+    },
+  ],
+  {
+    name: 'email',
+    label: 'Email',
+    placeholder: 'Email',
+    type: 'text',
+  },
+  [
+    {
+      name: 'professional_status',
+      label: 'Professional Status',
+      placeholder: 'Select Professional Status',
+      type: 'select',
+      options: [
+        { label: 'Working Professional', value: 'working_professional' },
+        { label: 'Student', value: 'student' },
+        { label: 'Freelancer', value: 'freelancer' },
+        { label: 'Other', value: 'other' },
+      ],
+    },
+    {
+      name: 'organization',
+      label: 'Organization',
+      placeholder: 'Enter your organization',
+      type: 'text',
+    },
+  ],
+  {
+    name: 'description',
+    label: 'About You',
+    placeholder: 'Eg. CEO of Google',
+    type: 'text',
+  },
+  [
+    {
+      name: 'gender',
+      label: 'Gender',
+      placeholder: 'Select gender',
+      type: 'select',
+      options: [
+        { label: 'Male', value: 'male' },
+        { label: 'Female', value: 'female' },
+        { label: 'Other', value: 'other' },
+      ],
+    },
+    {
+      name: 'linkedin',
+      label: 'LinkedIn URL',
+      placeholder: 'Your linkedIn profile',
+      type: 'text',
+    },
+  ],
+  [
+    {
+      name: 'github',
+      label: 'Github URL',
+      placeholder: 'Your github profile',
+      type: 'text',
+    },
+    {
+      name: 'twitter',
+      label: 'Twitter URL',
+      placeholder: 'Your twitter profile',
+      type: 'text',
+    },
+  ],
+]
diff --git a/frontend/src/containers/RegisterEvent/RegisterEvent.tsx b/frontend/src/containers/RegisterEvent/RegisterEvent.tsx
index 3b2ee85e..5e0f2b80 100644
--- a/frontend/src/containers/RegisterEvent/RegisterEvent.tsx
+++ b/frontend/src/containers/RegisterEvent/RegisterEvent.tsx
@@ -1,4 +1,8 @@
-import React from 'react'
+'use client'
+
+import React, { useState } from 'react'
+import { yupResolver } from '@hookform/resolvers/yup'
+
 import {
   Drawer,
   DrawerClose,
@@ -10,16 +14,73 @@ import {
   DrawerTrigger,
   Button,
   Input,
-  Label,
-  RadioGroup,
-  RadioGroupItem,
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+  Form,
 } from '@components'
+import { SubmitHandler, useForm } from 'react-hook-form'
+import { RegisterEventForm } from './RegisterEvent.types'
+import { API_ENDPOINTS, REGISTER_EVENT_FORM_SCHEMA } from '@constants'
+import { REGISTER_FORM_FIELDS } from './RegisterEvent.config'
+import { fetchData } from '@/utils'
+import { enqueueSnackbar } from 'notistack'
+
+export const RegisterEvent = ({ eventId }: { eventId: string }) => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const {
+    register,
+    control,
+    reset,
+    formState: { errors, ...restFormState },
+    handleSubmit,
+    ...rest
+  } = useForm<RegisterEventForm>({
+    resolver: yupResolver(REGISTER_EVENT_FORM_SCHEMA),
+    defaultValues: {
+      first_name: '',
+      last_name: '',
+      email: '',
+      linkedin: '',
+      organization: '',
+      description: '',
+    },
+  })
+
+  const onSubmit: SubmitHandler<RegisterEventForm> = async (data) => {
+    const res = await fetchData<{ message: string }>(
+      API_ENDPOINTS.registerEvent.replace(':id', eventId),
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          event: eventId,
+          ...data,
+        }),
+      },
+    )
+    if (res.statusCode === 200 || res.statusCode === 201) {
+      enqueueSnackbar(res?.data?.message, { variant: 'success' })
+    } else {
+      enqueueSnackbar(res?.error?.message, {
+        variant: 'error',
+      })
+    }
+    reset()
+    setIsOpen(false)
+  }
 
-export const RegisterEvent = () => {
   return (
-    <Drawer>
+    <Drawer open={isOpen} onOpenChange={setIsOpen}>
       <DrawerTrigger asChild>
-        <Button className='w-fit bg-blue-900' disabled>
+        <Button className='w-fit bg-blue-900' onClick={() => setIsOpen(true)}>
           Register
         </Button>
       </DrawerTrigger>
@@ -32,98 +93,134 @@ export const RegisterEvent = () => {
             Please fill the information carefully
           </DrawerDescription>
         </DrawerHeader>
-        <form className='w-2/4 flex flex-col mx-auto gap-6 mt-10'>
-          <div className='flex w-full justify-between gap-5'>
-            <div className='grid w-full items-center gap-1.5'>
-              <Label htmlFor='firstName'>First Name</Label>
-              <Input
-                type='text'
-                id='firstName'
-                placeholder='Enter your first Name'
-              />
-            </div>
-            <div className='grid w-full items-center gap-1.5'>
-              <Label htmlFor='lastName'>Last Name</Label>
-              <Input
-                type='text'
-                id='lastName'
-                placeholder='Enter your last Name'
-              />
-            </div>
-          </div>
-          <div className='grid w-full items-center gap-1.5'>
-            <Label htmlFor='email'>Email</Label>
-            <Input type='email' id='email' placeholder='Enter your email' />
-          </div>
-          <div className='flex w-full justify-between gap-5'>
-            <div className='grid w-full items-center'>
-              <RadioGroup className='flex items-center gap-10'>
-                <div className='flex items-center gap-2'>
-                  <RadioGroupItem value='male' id='r1' />
-                  <Label className='mb-0' htmlFor='r1'>
-                    Male
-                  </Label>
-                </div>
-                <div className='flex items-center gap-2'>
-                  <RadioGroupItem value='female' id='r2' />
-                  <Label className='mb-0' htmlFor='r2'>
-                    Female
-                  </Label>
+        <Form
+          register={register}
+          control={control}
+          reset={reset}
+          formState={{ errors, ...restFormState }}
+          handleSubmit={handleSubmit}
+          {...rest}
+        >
+          <form
+            className='w-2/4 flex flex-col mx-auto gap-6 mt-10'
+            onSubmit={handleSubmit(onSubmit)}
+          >
+            {REGISTER_FORM_FIELDS.map((item, i) =>
+              Array.isArray(item) ? (
+                <div
+                  className='flex w-full justify-between gap-5'
+                  key={`field-group-${i}`}
+                >
+                  {item.map(({ name, label, placeholder, type, options }) => (
+                    <div
+                      className='grid w-full items-center gap-1.5'
+                      key={name}
+                    >
+                      <FormField
+                        control={control}
+                        name={name}
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>{label}</FormLabel>
+                            {type === 'select' ? (
+                              <Select
+                                onValueChange={field.onChange}
+                                defaultValue={field.value}
+                              >
+                                <FormControl>
+                                  <SelectTrigger>
+                                    <SelectValue placeholder={placeholder} />
+                                  </SelectTrigger>
+                                </FormControl>
+                                <SelectContent>
+                                  {options.map(({ label, value }) => (
+                                    <SelectItem key={value} value={value}>
+                                      {label}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            ) : (
+                              <FormControl>
+                                <Input
+                                  type={type}
+                                  placeholder={placeholder}
+                                  {...field}
+                                />
+                              </FormControl>
+                            )}
+                            <FormMessage>
+                              {errors[name]?.message ?? ' '}
+                            </FormMessage>
+                          </FormItem>
+                        )}
+                      />
+                    </div>
+                  ))}
                 </div>
-                <div className='flex items-center gap-2'>
-                  <RadioGroupItem value='other' id='r3' />
-                  <Label className='mb-0' htmlFor='r3'>
-                    Other
-                  </Label>
+              ) : (
+                <div
+                  className='grid w-full items-center gap-1.5'
+                  key={item.name}
+                >
+                  <FormField
+                    control={control}
+                    name={item.name}
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{item.label}</FormLabel>
+                        {item.type === 'select' ? (
+                          <Select
+                            onValueChange={field.onChange}
+                            defaultValue={field.value}
+                          >
+                            <FormControl>
+                              <SelectTrigger>
+                                <SelectValue placeholder={item.placeholder} />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              {item.options.map(({ label, value }) => (
+                                <SelectItem key={value} value={value}>
+                                  {label}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        ) : (
+                          <FormControl>
+                            <Input
+                              type={item.type}
+                              placeholder={item.placeholder}
+                              {...field}
+                            />
+                          </FormControl>
+                        )}
+                        <FormMessage>
+                          {errors[item.name]?.message ?? ' '}
+                        </FormMessage>
+                      </FormItem>
+                    )}
+                  />
                 </div>
-              </RadioGroup>
-            </div>
-            <div className='grid w-full items-center gap-1.5'>
-              <Label htmlFor='mobile'>Mobile</Label>
-              <Input
-                type='number'
-                id='mobile'
-                placeholder='Enter your mobile'
-              />
-            </div>
-          </div>
-          <div className='grid w-full items-center gap-1.5'>
-            <Label htmlFor='Occupation'>Occupation</Label>
-            <Input
-              type='text'
-              id='Occupation'
-              placeholder='Enter your occupation'
-            />
-          </div>
-          <div className='grid w-full items-center gap-1.5'>
-            <Label htmlFor='linkedin'>LinkedIn</Label>
-            <Input
-              type='text'
-              id='linkedin'
-              placeholder='Enter your linkedin id'
-            />
-          </div>
-          <div className='flex w-full justify-between gap-5'>
-            <div className='grid w-full items-center gap-1.5'>
-              <Label htmlFor='github'>Github</Label>
-              <Input type='text' id='github' placeholder='Enter your github' />
-            </div>
-            <div className='grid w-full items-center gap-1.5'>
-              <Label htmlFor='twitter'>Twitter</Label>
-              <Input
-                type='text'
-                id='twitter'
-                placeholder='Enter your twitter'
-              />
-            </div>
-          </div>
-          <DrawerFooter className='flex flex-row gap-4 mx-auto'>
-            <Button>Register</Button>
-            <DrawerClose asChild>
-              <Button variant='outline'>Cancel</Button>
-            </DrawerClose>
-          </DrawerFooter>
-        </form>
+              ),
+            )}
+            <DrawerFooter className='flex flex-row gap-4 mx-auto'>
+              <Button type='submit'>Register</Button>
+              <DrawerClose asChild>
+                <Button
+                  variant='outline'
+                  onClick={() => {
+                    reset()
+                    setIsOpen(false)
+                  }}
+                >
+                  Cancel
+                </Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </form>
+        </Form>
       </DrawerContent>
     </Drawer>
   )
diff --git a/frontend/src/containers/RegisterEvent/RegisterEvent.types.ts b/frontend/src/containers/RegisterEvent/RegisterEvent.types.ts
new file mode 100644
index 00000000..1c8f8001
--- /dev/null
+++ b/frontend/src/containers/RegisterEvent/RegisterEvent.types.ts
@@ -0,0 +1,32 @@
+export type RegisterEventForm = {
+  email: string
+  first_name: string
+  last_name: string
+  professional_status:
+    | 'working_professional'
+    | 'student'
+    | 'freelancer'
+    | 'other'
+  gender: 'male' | 'female' | 'other'
+  organization?: string
+  description?: string
+  linkedin: string
+  github?: string
+  twitter?: string
+}
+
+type SelectField = {
+  type: 'select'
+  options: { label: string; value: string }[]
+}
+
+type InputField = {
+  type: 'text'
+  options?: never
+}
+
+export type FieldType = {
+  label: string
+  placeholder: string
+  name: keyof RegisterEventForm
+} & (SelectField | InputField)
diff --git a/frontend/src/sections/EventSection/EventCard.tsx b/frontend/src/sections/EventSection/EventCard.tsx
index 58a67078..a812ff7e 100644
--- a/frontend/src/sections/EventSection/EventCard.tsx
+++ b/frontend/src/sections/EventSection/EventCard.tsx
@@ -6,7 +6,6 @@ import dayjs from 'dayjs'
 import event2 from '../../../public/02.svg'
 import { useRouter } from 'next/navigation'
 
-
 interface EventProps {
   eventId: string
   title: string
@@ -24,7 +23,7 @@ const EventCard: React.FC<EventProps> = ({
   imageSrc,
   venue,
   time,
-  event_mode
+  event_mode,
 }) => {
   const router = useRouter()
 
@@ -66,12 +65,14 @@ const EventCard: React.FC<EventProps> = ({
             <span className='font-bold'>Mode: </span>
             {event_mode}
           </p>
-          {venue && <p className='text-gray-700 mb-2 line-clamp-4'>
-            <span className='font-bold'>Venue: </span>
-            <br />
-            {venue}
-          </p>}
-          <p className='text-gray-600'>{dayjs(time).format('hh:mm A')}</p>
+          {venue && (
+            <p className='text-gray-700 mb-2 line-clamp-4'>
+              <span className='font-bold'>Venue: </span>
+              <br />
+              {venue}
+            </p>
+          )}
+          {/* <p className='text-gray-600'>{dayjs(time).format('hh:mm A')}</p> */}
         </div>
       </div>
     </div>