diff --git a/apps/shared/src/registrations/schemas.ts b/apps/shared/src/registrations/schemas.ts
index d8e9ca4..fd064cc 100644
--- a/apps/shared/src/registrations/schemas.ts
+++ b/apps/shared/src/registrations/schemas.ts
@@ -1,10 +1,7 @@
 import { z } from "zod";
 import { RegistrationStatus } from "./constants.js";
 
-export const RegistrationAnswerSchema = z.record(
-  z.string(),
-  z.string().or(z.array(z.string())).optional()
-);
+export const RegistrationAnswerSchema = z.record(z.string(), z.string());
 
 export const RegistrationContractSchema = z.object({
   answers: RegistrationAnswerSchema.optional().default({}),
diff --git a/apps/web/package.json b/apps/web/package.json
index a570719..094c220 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -16,6 +16,7 @@
     "@clerk/tanstack-react-start": "^0.27.8",
     "@clerk/themes": "^2.4.46",
     "@events.comp-soc.com/shared": "workspace:*",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",
diff --git a/apps/web/src/components/event-card.tsx b/apps/web/src/components/event-card.tsx
index e23fe3e..64d2a80 100644
--- a/apps/web/src/components/event-card.tsx
+++ b/apps/web/src/components/event-card.tsx
@@ -2,25 +2,14 @@ import { Link } from '@tanstack/react-router'
 import { ArrowUpRight, CalendarIcon, MapPin } from 'lucide-react'
 import type { Event } from '@events.comp-soc.com/shared'
 import { SigBadge } from '@/components/sigs-badge.tsx'
+import { formatEventDate } from '@/lib/utils.ts'
 
 interface EventCardProps {
   event: Event
 }
 
 function EventCard({ event }: EventCardProps) {
-  const dateObj = new Date(event.date)
-
-  const formattedDate = dateObj.toLocaleDateString('en-GB', {
-    weekday: 'short',
-    day: 'numeric',
-    month: 'short',
-  })
-
-  const formattedTime = dateObj.toLocaleTimeString('en-GB', {
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: false,
-  })
+  const { full: date } = formatEventDate(event.date)
 
   return (
     <Link
@@ -44,9 +33,7 @@ function EventCard({ event }: EventCardProps) {
         <div className="flex flex-col gap-1 sm:gap-1.5 mt-2 sm:mt-3 text-xs sm:text-sm text-neutral-400">
           <div className="flex items-center gap-1.5 sm:gap-2">
             <CalendarIcon className="w-3 h-3 sm:w-3.5 sm:h-3.5 shrink-0" />
-            <span className="truncate">
-              {formattedDate} - {formattedTime}
-            </span>
+            <span className="truncate">{date}</span>
           </div>
           <div className="flex items-center gap-1.5 sm:gap-2">
             <MapPin className="w-3 h-3 sm:w-3.5 sm:h-3.5 shrink-0" />
diff --git a/apps/web/src/components/forms/event-registration-form-dialog.tsx b/apps/web/src/components/forms/event-registration-form-dialog.tsx
new file mode 100644
index 0000000..8d40464
--- /dev/null
+++ b/apps/web/src/components/forms/event-registration-form-dialog.tsx
@@ -0,0 +1,278 @@
+import { useForm } from '@tanstack/react-form'
+
+import * as z from 'zod'
+
+import { RegistrationAnswerSchema } from '@events.comp-soc.com/shared'
+import type {
+  CustomField,
+  RegistrationFormAnswer,
+} from '@events.comp-soc.com/shared'
+
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from '@/components/ui/field.tsx'
+import { Input } from '@/components/ui/input.tsx'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select.tsx'
+import { Textarea } from '@/components/ui/textarea.tsx'
+import { Button } from '@/components/ui/button.tsx'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog.tsx'
+
+function buildRegistrationSchema(formStructure: Array<CustomField>) {
+  const schemaShape: Record<string, z.ZodTypeAny> = {}
+
+  formStructure.forEach((field) => {
+    let fieldSchema: z.ZodTypeAny
+
+    switch (field.type) {
+      case 'input':
+      case 'textarea':
+        fieldSchema = field.required
+          ? z.string().min(1, `${field.label} is required`)
+          : z.string().optional()
+        break
+      case 'select':
+        if (field.options && field.options.length > 0) {
+          fieldSchema = field.required
+            ? z.enum(field.options as [string, ...Array<string>], {
+                error: () => ({ message: `${field.label} is required` }),
+              })
+            : z.enum(field.options as [string, ...Array<string>]).optional()
+        } else {
+          fieldSchema = z.string().optional()
+        }
+        break
+      default:
+        fieldSchema = z.string().optional()
+    }
+
+    schemaShape[field.id] = fieldSchema
+  })
+
+  return z.object(schemaShape)
+}
+
+function buildDefaultValues(formStructure: Array<CustomField>) {
+  const defaultValues: Record<string, string> = {}
+
+  formStructure.forEach((field) => {
+    defaultValues[field.id] = ''
+  })
+
+  return defaultValues
+}
+
+function EventRegistrationFormDialog({
+  onFormSubmit,
+  formStructure,
+  isLoading = false,
+  isOpen,
+  onOpenChange,
+  eventTitle,
+}: {
+  onFormSubmit: (value: RegistrationFormAnswer) => void
+  formStructure: Array<CustomField>
+  isLoading?: boolean
+  isOpen: boolean
+  onOpenChange: () => void
+  eventTitle: string
+}) {
+  const RegistrationSchema = buildRegistrationSchema(formStructure)
+  const defaultValues: z.infer<typeof RegistrationSchema> =
+    buildDefaultValues(formStructure)
+
+  const form = useForm({
+    defaultValues: defaultValues,
+    validators: {
+      onSubmit: RegistrationSchema,
+    },
+    onSubmit: ({ value }) => {
+      const mappedData = RegistrationAnswerSchema.parse(value)
+      onFormSubmit(mappedData)
+    },
+  })
+
+  const renderField = (field: CustomField) => {
+    switch (field.type) {
+      case 'input':
+        return (
+          <form.Field
+            key={field.id}
+            name={field.id}
+            children={(formField) => {
+              const isInvalid =
+                formField.state.meta.isTouched && !formField.state.meta.isValid
+              return (
+                <Field data-invalid={isInvalid}>
+                  <FieldLabel htmlFor={formField.name}>
+                    {field.label}
+                    {field.required && (
+                      <span className="text-destructive">*</span>
+                    )}
+                  </FieldLabel>
+                  <Input
+                    id={formField.name}
+                    name={formField.name}
+                    disabled={isLoading}
+                    value={(formField.state.value as string) || ''}
+                    onBlur={formField.handleBlur}
+                    onChange={(e) => formField.handleChange(e.target.value)}
+                    aria-invalid={isInvalid}
+                    placeholder={`Enter ${field.label.toLowerCase()}`}
+                    autoComplete="off"
+                  />
+                  {isInvalid && (
+                    <FieldError errors={formField.state.meta.errors} />
+                  )}
+                </Field>
+              )
+            }}
+          />
+        )
+
+      case 'textarea':
+        return (
+          <form.Field
+            key={field.id}
+            name={field.id}
+            children={(formField) => {
+              const isInvalid =
+                formField.state.meta.isTouched && !formField.state.meta.isValid
+              return (
+                <Field data-invalid={isInvalid}>
+                  <FieldLabel htmlFor={formField.name}>
+                    {field.label}
+                    {field.required && (
+                      <span className="text-destructive">*</span>
+                    )}
+                  </FieldLabel>
+                  <Textarea
+                    id={formField.name}
+                    name={formField.name}
+                    disabled={isLoading}
+                    value={(formField.state.value as string) || ''}
+                    onBlur={formField.handleBlur}
+                    onChange={(e) => formField.handleChange(e.target.value)}
+                    aria-invalid={isInvalid}
+                    placeholder={`Enter ${field.label.toLowerCase()}`}
+                    rows={4}
+                  />
+                  {isInvalid && (
+                    <FieldError errors={formField.state.meta.errors} />
+                  )}
+                </Field>
+              )
+            }}
+          />
+        )
+
+      case 'select':
+        return (
+          <form.Field
+            key={field.id}
+            name={field.id}
+            children={(formField) => {
+              const isInvalid =
+                formField.state.meta.isTouched && !formField.state.meta.isValid
+              return (
+                <Field data-invalid={isInvalid}>
+                  <FieldLabel htmlFor={formField.name}>
+                    {field.label}
+                    {field.required && (
+                      <span className="text-destructive">*</span>
+                    )}
+                  </FieldLabel>
+                  <Select
+                    name={formField.name}
+                    disabled={isLoading}
+                    value={(formField.state.value as string) || ''}
+                    onValueChange={(value) => formField.handleChange(value)}
+                  >
+                    <SelectTrigger aria-invalid={isInvalid}>
+                      <SelectValue
+                        placeholder={`Select ${field.label.toLowerCase()}`}
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {field.options?.map((option) => (
+                        <SelectItem key={option} value={option}>
+                          {option}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  {isInvalid && (
+                    <FieldError errors={formField.state.meta.errors} />
+                  )}
+                </Field>
+              )
+            }}
+          />
+        )
+
+      default:
+        return null
+    }
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <form
+        id="registration-form"
+        onSubmit={(e) => {
+          e.preventDefault()
+          void form.handleSubmit()
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Register for {eventTitle}</DialogTitle>
+          </DialogHeader>
+          <DialogDescription>
+            Please fill out the additional details below to secure your spot.
+          </DialogDescription>
+          <div className="max-h-[65vh] overflow-auto py-5">
+            <FieldGroup>
+              {formStructure.length === 0 ? (
+                <div className="text-center py-8">
+                  <p className="text-sm text-muted-foreground">
+                    No registration fields configured for this event.
+                  </p>
+                </div>
+              ) : (
+                <>{formStructure.map((field) => renderField(field))}</>
+              )}
+            </FieldGroup>
+          </div>
+          <DialogFooter className="justify-start!">
+            <Button
+              type="submit"
+              form="registration-form"
+              className="w-full md:max-w-fit"
+              disabled={isLoading}
+            >
+              {isLoading ? 'Submitting...' : 'Submit Registration'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </form>
+    </Dialog>
+  )
+}
+
+export default EventRegistrationFormDialog
diff --git a/apps/web/src/components/forms/modify-event-form.tsx b/apps/web/src/components/forms/modify-event-form.tsx
index a7a2801..0450fc4 100644
--- a/apps/web/src/components/forms/modify-event-form.tsx
+++ b/apps/web/src/components/forms/modify-event-form.tsx
@@ -111,10 +111,12 @@ function ModifyEventForm({
   onFormSubmit,
   defaultValues,
   isModify = false,
+  isLoading = false,
 }: {
   onFormSubmit: (value: z.infer<typeof EventFormSchema>) => void
   defaultValues: z.infer<typeof EventFormSchema>
   isModify?: boolean
+  isLoading?: boolean
 }) {
   const [open, setOpen] = useState(false)
 
@@ -248,6 +250,7 @@ function ModifyEventForm({
                     <FieldLabel htmlFor={field.name}>Title</FieldLabel>
                     <Input
                       id={field.name}
+                      disabled={isLoading}
                       name={field.name}
                       value={field.state.value}
                       onBlur={field.handleBlur}
@@ -274,6 +277,7 @@ function ModifyEventForm({
                     <FieldLabel htmlFor={field.name}>Organiser</FieldLabel>
                     <Select
                       name={field.name}
+                      disabled={isLoading}
                       value={field.state.value}
                       onValueChange={(value) =>
                         field.handleChange(value as typeof field.state.value)
@@ -311,6 +315,7 @@ function ModifyEventForm({
                     <FieldLabel htmlFor={field.name}>Priority</FieldLabel>
                     <Select
                       name={field.name}
+                      disabled={isLoading}
                       value={field.state.value}
                       onValueChange={(value) =>
                         field.handleChange(value as typeof field.state.value)
@@ -349,6 +354,7 @@ function ModifyEventForm({
                     <Input
                       id={field.name}
                       name={field.name}
+                      disabled={isLoading}
                       value={field.state.value}
                       onBlur={field.handleBlur}
                       onChange={(e) => field.handleChange(e.target.value)}
@@ -379,6 +385,7 @@ function ModifyEventForm({
                       <PopoverTrigger asChild>
                         <Button
                           variant="outline"
+                          disabled={isLoading}
                           className="w-full justify-start"
                         >
                           {field.state.value.toLocaleDateString()}
@@ -419,6 +426,7 @@ function ModifyEventForm({
                       id={field.name}
                       name={field.name}
                       type="time"
+                      disabled={isLoading}
                       value={field.state.value}
                       onBlur={field.handleBlur}
                       onChange={(e) => field.handleChange(e.target.value)}
@@ -444,10 +452,12 @@ function ModifyEventForm({
                     <FieldLabel htmlFor={field.name}>About</FieldLabel>
                     <Tabs defaultValue="edit">
                       <TabsList>
-                        <TabsTrigger value="edit">Edit</TabsTrigger>
+                        <TabsTrigger value="edit" disabled={isLoading}>
+                          Edit
+                        </TabsTrigger>
                         <TabsTrigger
                           value="preview"
-                          disabled={field.state.value.length === 0}
+                          disabled={field.state.value.length === 0 || isLoading}
                         >
                           Preview
                         </TabsTrigger>
@@ -456,6 +466,7 @@ function ModifyEventForm({
                         <Textarea
                           id={field.name}
                           name={field.name}
+                          disabled={isLoading}
                           value={field.state.value}
                           onBlur={field.handleBlur}
                           onChange={(e) => field.handleChange(e.target.value)}
@@ -488,6 +499,7 @@ function ModifyEventForm({
                     <Input
                       id={field.name}
                       name={field.name}
+                      disabled={isLoading}
                       value={field.state.value}
                       onBlur={field.handleBlur}
                       onChange={(e) => field.handleChange(e.target.value)}
@@ -513,6 +525,7 @@ function ModifyEventForm({
                     <InputGroup>
                       <InputGroupInput
                         id={field.name}
+                        disabled={isLoading}
                         name={field.name}
                         value={field.state.value}
                         onBlur={field.handleBlur}
@@ -569,6 +582,7 @@ function ModifyEventForm({
                   <Field orientation="horizontal">
                     <Switch
                       id={field.name}
+                      disabled={isLoading}
                       checked={field.state.value}
                       onCheckedChange={(checked) => field.handleChange(checked)}
                     />
@@ -597,6 +611,7 @@ function ModifyEventForm({
                       <Button
                         type="button"
                         size="sm"
+                        disabled={isLoading}
                         variant="outline"
                         onClick={addDefaultFields}
                       >
@@ -606,6 +621,7 @@ function ModifyEventForm({
                         type="button"
                         variant="outline"
                         size="sm"
+                        disabled={isLoading}
                         onClick={addCustomField}
                       >
                         <PlusIcon className="mr-2 h-4 w-4" />
@@ -625,6 +641,7 @@ function ModifyEventForm({
                         <FieldLabel>Field Type</FieldLabel>
                         <Select
                           value={field.type}
+                          disabled={isLoading}
                           onValueChange={(value) =>
                             updateCustomField(field.id, {
                               type: value as CustomField['type'],
@@ -648,6 +665,7 @@ function ModifyEventForm({
                         <FieldLabel>Label</FieldLabel>
                         <Input
                           value={field.label}
+                          disabled={isLoading}
                           onChange={(e) =>
                             updateCustomField(field.id, {
                               label: e.target.value,
@@ -664,6 +682,7 @@ function ModifyEventForm({
                             <Button
                               type="button"
                               size="sm"
+                              disabled={isLoading}
                               variant="ghost"
                               onClick={() => addOption(field.id)}
                             >
@@ -676,6 +695,7 @@ function ModifyEventForm({
                               <div key={index} className="flex gap-2">
                                 <Input
                                   value={option}
+                                  disabled={isLoading}
                                   onChange={(e) =>
                                     updateOption(
                                       field.id,
@@ -689,6 +709,7 @@ function ModifyEventForm({
                                   type="button"
                                   variant="ghost"
                                   size="icon"
+                                  disabled={isLoading}
                                   onClick={() => removeOption(field.id, index)}
                                 >
                                   <XIcon className="h-4 w-4" />
@@ -708,6 +729,7 @@ function ModifyEventForm({
                       <Field orientation="horizontal">
                         <Switch
                           checked={field.required}
+                          disabled={isLoading}
                           onCheckedChange={(checked) =>
                             updateCustomField(field.id, {
                               required: checked,
@@ -719,6 +741,7 @@ function ModifyEventForm({
                         </FieldLabel>
                         <Button
                           type="button"
+                          disabled={isLoading}
                           variant="outline"
                           size="sm"
                           onClick={() => removeCustomField(field.id)}
@@ -751,22 +774,25 @@ function ModifyEventForm({
             <Button
               type="submit"
               form="event-form"
+              disabled={isLoading}
               className="w-full sm:w-auto"
             >
-              Update
+              {isLoading ? 'Updating' : 'Update'}
             </Button>
           ) : (
             <>
               <Button
                 type="submit"
                 form="event-form"
+                disabled={isLoading}
                 className="w-full sm:w-auto"
               >
-                Create
+                {isLoading ? 'Creating' : 'Create'}
               </Button>
               <Button
                 variant="outline"
                 type="button"
+                disabled={isLoading}
                 onClick={() => form.reset()}
                 className="w-full sm:w-auto"
               >
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..c52d716
--- /dev/null
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -0,0 +1,143 @@
+'use client'
+
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border p-6 shadow-lg duration-200 outline-none sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/apps/web/src/lib/hooks/use-create-event.tsx b/apps/web/src/lib/hooks/use-create-event.tsx
new file mode 100644
index 0000000..ba25754
--- /dev/null
+++ b/apps/web/src/lib/hooks/use-create-event.tsx
@@ -0,0 +1,25 @@
+import { useMutation } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import type { CreateEventRequest } from '@events.comp-soc.com/shared'
+import { createEvent } from '@/lib/data/event.ts'
+
+export function useCreateEvent() {
+  const { mutate, isPending } = useMutation({
+    mutationFn: (data: CreateEventRequest) => createEvent({ data }),
+    onSuccess: (event) => {
+      toast.success(event.title, {
+        description: 'Event has been created',
+      })
+    },
+    onError: (error) => {
+      toast.error('Failed to create event', {
+        description: error.message || 'Something went wrong',
+      })
+    },
+  })
+
+  return {
+    createEvent: mutate,
+    isCreating: isPending,
+  }
+}
diff --git a/apps/web/src/lib/hooks/use-publish-event.tsx b/apps/web/src/lib/hooks/use-publish-event.tsx
new file mode 100644
index 0000000..93c1a00
--- /dev/null
+++ b/apps/web/src/lib/hooks/use-publish-event.tsx
@@ -0,0 +1,31 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import { EventState } from '@events.comp-soc.com/shared'
+import { updateEvent } from '@/lib/data/event.ts'
+
+export function usePublishEvent(eventId: string) {
+  const queryClient = useQueryClient()
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: () =>
+      updateEvent({
+        data: { id: eventId, state: EventState.Published },
+      }),
+    onSuccess: (event) => {
+      void queryClient.invalidateQueries({ queryKey: ['events', eventId] })
+      toast.success(event.title, {
+        description: 'Event has been published',
+      })
+    },
+    onError: (error: Error) => {
+      toast.error('Publish failed', {
+        description: error.message || 'Something went wrong',
+      })
+    },
+  })
+
+  return {
+    publishEvent: mutate,
+    isPublishing: isPending,
+  }
+}
diff --git a/apps/web/src/lib/hooks/use-update-event.tsx b/apps/web/src/lib/hooks/use-update-event.tsx
new file mode 100644
index 0000000..367c346
--- /dev/null
+++ b/apps/web/src/lib/hooks/use-update-event.tsx
@@ -0,0 +1,31 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import type { UpdateEventRequest } from '@events.comp-soc.com/shared'
+import { updateEvent } from '@/lib/data/event.ts'
+
+export function useUpdateEvent(eventId: string) {
+  const queryClient = useQueryClient()
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: (data: UpdateEventRequest) =>
+      updateEvent({
+        data: { id: eventId, ...data },
+      }),
+    onSuccess: (event) => {
+      void queryClient.invalidateQueries({ queryKey: ['events', eventId] })
+      toast.success(event.title, {
+        description: 'Event has been updated',
+      })
+    },
+    onError: (error: Error) => {
+      toast.error('Update failed', {
+        description: error.message || 'Something went wrong',
+      })
+    },
+  })
+
+  return {
+    updateEvent: mutate,
+    isUpdating: isPending,
+  }
+}
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
index 914ec86..99ce9e8 100644
--- a/apps/web/src/lib/utils.ts
+++ b/apps/web/src/lib/utils.ts
@@ -5,3 +5,25 @@ import type { ClassValue } from 'clsx'
 export function cn(...inputs: Array<ClassValue>) {
   return twMerge(clsx(inputs))
 }
+
+export function formatEventDate(date: Date | string) {
+  const d = new Date(date)
+
+  const datePart = d.toLocaleDateString('en-GB', {
+    weekday: 'short',
+    day: 'numeric',
+    month: 'short',
+  })
+
+  const timePart = d.toLocaleTimeString('en-GB', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  })
+
+  return {
+    date: datePart,
+    time: timePart,
+    full: `${datePart} - ${timePart}`,
+  }
+}
diff --git a/apps/web/src/routes/events/$eventId/edit.tsx b/apps/web/src/routes/events/$eventId/edit.tsx
index 20039e4..b0d9453 100644
--- a/apps/web/src/routes/events/$eventId/edit.tsx
+++ b/apps/web/src/routes/events/$eventId/edit.tsx
@@ -1,9 +1,7 @@
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { ServerCrash } from 'lucide-react'
-import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
-import { toast } from 'sonner'
+import { useSuspenseQuery } from '@tanstack/react-query'
 import type { z } from 'zod'
-import type { Event, UpdateEventRequest } from '@events.comp-soc.com/shared'
 import ModifyEventForm, {
   EventFormSchema,
   FormToRequest,
@@ -12,8 +10,9 @@ import Window from '@/components/layout/window/window.tsx'
 import Sheet, { EmptySheet } from '@/components/layout/sheet.tsx'
 import { ProtectedRoute } from '@/components/layout/protected-route.tsx'
 import { Separator } from '@/components/ui/separator.tsx'
-import { eventQueryOption, updateEvent } from '@/lib/data/event.ts'
+import { eventQueryOption } from '@/lib/data/event.ts'
 import { StatusCard } from '@/components/ui/status-card.tsx'
+import { useUpdateEvent } from '@/lib/hooks/use-update-event.tsx'
 
 export const Route = createFileRoute('/events/$eventId/edit')({
   loader: async ({ context, params }) => {
@@ -39,29 +38,9 @@ export const Route = createFileRoute('/events/$eventId/edit')({
 function EditEventRoute() {
   const { eventId } = Route.useParams()
   const { data: event } = useSuspenseQuery(eventQueryOption(eventId))
-
-  const updateMutation = useMutation({
-    mutationFn: (data: UpdateEventRequest & Pick<Event, 'id'>) =>
-      updateEvent({ data }),
-    onSuccess: (event) => {
-      toast.success(event.title, {
-        description: 'Event has been updated',
-      })
-      void navigate({
-        to: '/events/$eventId',
-        params: {
-          eventId: event.id,
-        },
-      })
-    },
-    onError: (error) => {
-      toast.error('Failed to update event', {
-        description: error.message || 'Something went wrong',
-      })
-    },
-  })
-
+  const { updateEvent, isUpdating } = useUpdateEvent(eventId)
   const navigate = useNavigate({ from: '/events/$eventId/edit' })
+
   const defaultValues = EventFormSchema.parse({
     title: event.title,
     organiser: event.organiser,
@@ -83,9 +62,13 @@ function EditEventRoute() {
 
   const handleSubmit = (value: z.infer<typeof EventFormSchema>) => {
     const contractData = FormToRequest.parse(value)
-    updateMutation.mutate({
-      id: event.id,
-      ...contractData,
+    updateEvent(contractData, {
+      onSuccess: (newEvent) => {
+        void navigate({
+          to: '/events/$eventId',
+          params: { eventId: newEvent.id },
+        })
+      },
     })
   }
 
@@ -108,6 +91,7 @@ function EditEventRoute() {
           <ModifyEventForm
             defaultValues={defaultValues}
             isModify
+            isLoading={isUpdating}
             onFormSubmit={handleSubmit}
           />
         </Sheet>
diff --git a/apps/web/src/routes/events/$eventId/index.tsx b/apps/web/src/routes/events/$eventId/index.tsx
index f9874a9..940b366 100644
--- a/apps/web/src/routes/events/$eventId/index.tsx
+++ b/apps/web/src/routes/events/$eventId/index.tsx
@@ -1,12 +1,7 @@
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { ClockIcon, MapPin, ServerCrash, UserIcon } from 'lucide-react'
-import {
-  useMutation,
-  useQueryClient,
-  useSuspenseQuery,
-} from '@tanstack/react-query'
-import { EventState } from '@events.comp-soc.com/shared'
-import { toast } from 'sonner'
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { useState } from 'react'
 import Window from '@/components/layout/window/window.tsx'
 import Sheet, { EmptySheet } from '@/components/layout/sheet.tsx'
 import { Markdown } from '@/components/markdown.tsx'
@@ -14,9 +9,12 @@ import GoogleMaps from '@/components/google-maps.tsx'
 import { SigBadge } from '@/components/sigs-badge.tsx'
 import { Button } from '@/components/ui/button.tsx'
 import { StatusCard } from '@/components/ui/status-card.tsx'
-import { eventQueryOption, updateEvent } from '@/lib/data/event.ts'
+import { eventQueryOption } from '@/lib/data/event.ts'
 import DraftBadge from '@/components/draft-badge.tsx'
 import { useCommitteeAuth } from '@/lib/auth.ts'
+import { usePublishEvent } from '@/lib/hooks/use-publish-event.tsx'
+import { formatEventDate } from '@/lib/utils.ts'
+import EventRegistrationFormDialog from '@/components/forms/event-registration-form-dialog.tsx'
 
 export const Route = createFileRoute('/events/$eventId/')({
   loader: async ({ context, params }) => {
@@ -40,45 +38,14 @@ export const Route = createFileRoute('/events/$eventId/')({
 })
 
 function EventRoute() {
+  const [open, setOpen] = useState(false)
   const { eventId } = Route.useParams()
-  const queryClient = useQueryClient()
-  const { isCommittee } = useCommitteeAuth()
+  const { isCommittee, isAuthenticated } = useCommitteeAuth()
   const navigate = useNavigate({ from: '/events/$eventId' })
   const { data: event } = useSuspenseQuery(eventQueryOption(eventId))
-  const dateObj = new Date(event.date)
+  const { full: date } = formatEventDate(event.date)
 
-  const publishMutation = useMutation({
-    mutationFn: () =>
-      updateEvent({
-        data: {
-          id: eventId,
-          state: EventState.Published,
-        },
-      }),
-    onSuccess: (event) => {
-      queryClient.invalidateQueries({ queryKey: ['events', eventId] })
-      toast.success(event.title, {
-        description: 'Event has been published',
-      })
-    },
-    onError: (error) => {
-      toast.error('Failed to publish event', {
-        description: error.message || 'Something went wrong',
-      })
-    },
-  })
-
-  const formattedDate = dateObj.toLocaleDateString('en-GB', {
-    weekday: 'short',
-    day: 'numeric',
-    month: 'short',
-  })
-
-  const formattedTime = dateObj.toLocaleTimeString('en-GB', {
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: false,
-  })
+  const { publishEvent, isPublishing } = usePublishEvent(eventId)
 
   const isDraft = event.state === 'draft'
 
@@ -110,7 +77,7 @@ function EventRoute() {
               Date
             </div>
             <div className="font-semibold mt-1 sm:mt-2 ml-6 sm:ml-7 text-sm sm:text-base ">
-              {formattedDate} - {formattedTime}
+              {date}
             </div>
           </div>
           <div className="flex-1 sm:flex-none">
@@ -145,9 +112,13 @@ function EventRoute() {
 
         <div className="mt-6 flex flex-col sm:flex-row gap-3">
           {isDraft ? (
-            <Button onClick={() => publishMutation.mutate()}>Publish</Button>
+            <Button onClick={() => publishEvent()} disabled={isPublishing}>
+              {isPublishing ? 'Publishing...' : 'Publish'}
+            </Button>
           ) : (
-            <Button>Register Now</Button>
+            <Button onClick={() => setOpen(!open)} disabled={!isAuthenticated}>
+              Register Now
+            </Button>
           )}
           {isCommittee && (
             <Button
@@ -163,6 +134,15 @@ function EventRoute() {
           )}
         </div>
       </Sheet>
+      {event.form !== null && (
+        <EventRegistrationFormDialog
+          onFormSubmit={() => {}}
+          formStructure={event.form}
+          isOpen={open}
+          onOpenChange={() => setOpen(!open)}
+          eventTitle={event.title}
+        />
+      )}
     </Window>
   )
 }
diff --git a/apps/web/src/routes/events/create.tsx b/apps/web/src/routes/events/create.tsx
index 1b90b29..e426232 100644
--- a/apps/web/src/routes/events/create.tsx
+++ b/apps/web/src/routes/events/create.tsx
@@ -1,12 +1,7 @@
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
-import { useMutation } from '@tanstack/react-query'
-import { toast } from 'sonner'
 import { EventPriority, EventState, Sigs } from '@events.comp-soc.com/shared'
 import type { z } from 'zod'
-import type {
-  CreateEventRequest,
-  CustomField,
-} from '@events.comp-soc.com/shared'
+import type { CustomField } from '@events.comp-soc.com/shared'
 import type { EventFormSchema } from '@/components/forms/modify-event-form.tsx'
 import ModifyEventForm, {
   FormToRequest,
@@ -15,7 +10,7 @@ import Window from '@/components/layout/window/window.tsx'
 import Sheet from '@/components/layout/sheet.tsx'
 import { ProtectedRoute } from '@/components/layout/protected-route.tsx'
 import { Separator } from '@/components/ui/separator.tsx'
-import { createEvent } from '@/lib/data/event.ts'
+import { useCreateEvent } from '@/lib/hooks/use-create-event.tsx'
 
 export const Route = createFileRoute('/events/create')({
   component: CreateRoute,
@@ -23,26 +18,7 @@ export const Route = createFileRoute('/events/create')({
 
 function CreateRoute() {
   const navigate = useNavigate({ from: '/events/create' })
-
-  const createMutation = useMutation({
-    mutationFn: (data: CreateEventRequest) => createEvent({ data }),
-    onSuccess: (event) => {
-      toast.success(event.title, {
-        description: 'Event has been created',
-      })
-      void navigate({
-        to: '/events/$eventId',
-        params: {
-          eventId: event.id,
-        },
-      })
-    },
-    onError: (error) => {
-      toast.error('Failed to create event', {
-        description: error.message || 'Something went wrong',
-      })
-    },
-  })
+  const { createEvent, isCreating } = useCreateEvent()
 
   const defaultValues = {
     title: '',
@@ -61,7 +37,14 @@ function CreateRoute() {
 
   const handleSubmit = (value: z.infer<typeof EventFormSchema>) => {
     const contractData = FormToRequest.parse(value)
-    createMutation.mutate(contractData)
+    createEvent(contractData, {
+      onSuccess: (newEvent) => {
+        void navigate({
+          to: '/events/$eventId',
+          params: { eventId: newEvent.id },
+        })
+      },
+    })
   }
 
   return (
@@ -83,6 +66,7 @@ function CreateRoute() {
           <ModifyEventForm
             defaultValues={defaultValues}
             onFormSubmit={handleSubmit}
+            isLoading={isCreating}
           />
         </Sheet>
       </Window>
diff --git a/apps/web/src/routes/events/draft.tsx b/apps/web/src/routes/events/draft.tsx
index cb1a4a6..716e5d4 100644
--- a/apps/web/src/routes/events/draft.tsx
+++ b/apps/web/src/routes/events/draft.tsx
@@ -61,13 +61,8 @@ function DraftRoute() {
           )}
 
           <div className="mt-8 grid gap-4">
-            {events.length > 0 ? (
-              events.map((event) => <EventCard key={event.id} event={event} />)
-            ) : (
-              <div className="text-neutral-500 text-center py-8">
-                No draft events. Create a new event to get started.
-              </div>
-            )}
+            {events.length > 0 &&
+              events.map((event) => <EventCard key={event.id} event={event} />)}
           </div>
         </Sheet>
       </Window>
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 90989d1..dafd1bf 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -13,7 +13,7 @@
   --color-foreground: #e4e4e4;
   --color-muted: #262626;
   --color-muted-foreground: #737373;
-  --color-popover: #171717;
+  --color-popover: #1a1a1a;
   --color-popover-foreground: #e4e4e4;
   --color-border: #262626;
   --color-input: #262626;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 93a20af..77810d8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -108,6 +108,9 @@ importers:
       '@events.comp-soc.com/shared':
         specifier: workspace:*
         version: link:../shared
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-label':
         specifier: ^2.1.8
         version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -1325,6 +1328,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-dialog@1.1.15':
+    resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
+    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
+
   '@radix-ui/react-direction@1.1.1':
     resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
     peerDependencies:
@@ -5525,6 +5541,28 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      aria-hidden: 1.2.6
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-direction@1.1.1(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
       react: 19.2.3