diff --git a/web/.env.example b/web/.env.example
index a64bebe..015618d 100644
--- a/web/.env.example
+++ b/web/.env.example
@@ -1,6 +1,9 @@
 DATABASE_URL="postgresql://kycnot:kycnot@localhost:3399/kycnot?schema=public"
 REDIS_URL="redis://localhost:6379"
 SOURCE_CODE_URL="https://github.com"
+DATABASE_UI_URL="http://localhost:5555"
 SITE_URL="https://localhost:4321"
 ONION_ADDRESS="http://kycnotmezdiftahfmc34pqbpicxlnx3jbf5p7jypge7gdvduu7i6qjqd.onion"
 I2P_ADDRESS="http://nti3rj4j4disjcm2kvp4eno7otcejbbxv3ggxwr5tpfk4jucah7q.b32.i2p"
+RELEASE_NUMBER=123
+RELEASE_DATE="2025-05-23T19:00:00.000Z"
diff --git a/web/astro.config.mjs b/web/astro.config.mjs
index d7f293a..afa4e31 100644
--- a/web/astro.config.mjs
+++ b/web/astro.config.mjs
@@ -170,6 +170,25 @@ export default defineConfig({
         url: true,
         optional: false,
       }),
+
+      DATABASE_UI_URL: envField.string({
+        context: 'server',
+        access: 'secret',
+        url: true,
+        optional: false,
+      }),
+
+      RELEASE_NUMBER: envField.number({
+        context: 'server',
+        access: 'public',
+        int: true,
+        optional: true,
+      }),
+      RELEASE_DATE: envField.string({
+        context: 'server',
+        access: 'public',
+        optional: true,
+      }),
     },
   },
 })
diff --git a/web/src/components/Button.astro b/web/src/components/Button.astro
index 74af12e..f3ad4d1 100644
--- a/web/src/components/Button.astro
+++ b/web/src/components/Button.astro
@@ -58,27 +58,17 @@ const button = tv({
       },
     },
     color: {
-      black: {
-        base: 'border-night-500 bg-night-800 hover:bg-night-900 hover:text-day-200 focus-visible:bg-night-500 text-white/50 focus-visible:text-white focus-visible:ring-white',
-      },
-      white: {
-        base: 'border-day-300 bg-day-100 hover:bg-day-200 text-black focus-visible:ring-green-500',
-      },
-      gray: {
-        base: 'border-day-500 bg-day-400 hover:bg-day-500 text-black focus-visible:ring-white',
-      },
-      success: {
-        base: 'border-green-600 bg-green-500 text-black hover:bg-green-600',
-      },
-      error: {
-        base: 'border-red-600 bg-red-500 text-white hover:bg-red-600',
-      },
-      warning: {
-        base: 'border-yellow-600 bg-yellow-500 text-white hover:bg-yellow-600',
-      },
-      info: {
-        base: 'border-blue-600 bg-blue-500 text-white hover:bg-blue-600',
-      },
+      black: '',
+      white: '',
+      gray: '',
+      success: '',
+      danger: '',
+      warning: '',
+      info: '',
+    },
+    variant: {
+      solid: '',
+      faded: '',
     },
     shadow: {
       true: {
@@ -92,6 +82,107 @@ const button = tv({
     },
   },
   compoundVariants: [
+    // Color variants - solid
+    {
+      color: 'black',
+      variant: 'solid',
+      class: {
+        base: 'border-night-500 bg-night-800 hover:bg-night-900 hover:text-day-200 focus-visible:bg-night-500 text-white/50 focus-visible:text-white focus-visible:ring-white',
+      },
+    },
+    {
+      color: 'white',
+      variant: 'solid',
+      class: {
+        base: 'border-day-300 bg-day-100 hover:bg-day-200 text-black focus-visible:ring-green-500',
+      },
+    },
+    {
+      color: 'gray',
+      variant: 'solid',
+      class: {
+        base: 'border-day-500 bg-day-400 hover:bg-day-500 text-black focus-visible:ring-white',
+      },
+    },
+    {
+      color: 'success',
+      variant: 'solid',
+      class: {
+        base: 'border-green-600 bg-green-500 text-black hover:bg-green-600',
+      },
+    },
+    {
+      color: 'danger',
+      variant: 'solid',
+      class: {
+        base: 'border-red-600 bg-red-500 text-white hover:bg-red-600',
+      },
+    },
+    {
+      color: 'warning',
+      variant: 'solid',
+      class: {
+        base: 'border-yellow-600 bg-yellow-500 text-white hover:bg-yellow-600',
+      },
+    },
+    {
+      color: 'info',
+      variant: 'solid',
+      class: {
+        base: 'border-blue-600 bg-blue-500 text-white hover:bg-blue-600',
+      },
+    },
+    // Color variants - faded
+    {
+      color: 'black',
+      variant: 'faded',
+      class: {
+        base: 'border-night-300/30 bg-night-800/30 hover:bg-night-700/50 text-white/70 hover:text-white/90 focus-visible:ring-white/50',
+      },
+    },
+    {
+      color: 'white',
+      variant: 'faded',
+      class: {
+        base: 'border-day-300/30 bg-day-100/30 hover:bg-day-200/50 text-white/70 hover:text-white/90 focus-visible:ring-white/50',
+      },
+    },
+    {
+      color: 'gray',
+      variant: 'faded',
+      class: {
+        base: 'border-day-500/30 bg-day-400/30 hover:bg-day-500/50 text-day-300 hover:text-day-100 focus-visible:ring-white/50',
+      },
+    },
+    {
+      color: 'success',
+      variant: 'faded',
+      class: {
+        base: 'border-green-600/30 bg-green-500/30 text-green-300 hover:bg-green-500/50 hover:text-green-100',
+      },
+    },
+    {
+      color: 'danger',
+      variant: 'faded',
+      class: {
+        base: 'border-red-600/30 bg-red-500/30 text-red-300 hover:bg-red-500/50 hover:text-red-100',
+      },
+    },
+    {
+      color: 'warning',
+      variant: 'faded',
+      class: {
+        base: 'border-yellow-600/30 bg-yellow-500/30 text-yellow-300 hover:bg-yellow-500/50 hover:text-yellow-100',
+      },
+    },
+    {
+      color: 'info',
+      variant: 'faded',
+      class: {
+        base: 'border-blue-600/30 bg-blue-500/30 text-blue-300 hover:bg-blue-500/50 hover:text-blue-100',
+      },
+    },
+    // Shadow variants
     {
       color: 'black',
       shadow: true,
@@ -113,7 +204,7 @@ const button = tv({
       class: 'shadow-green-500/30',
     },
     {
-      color: 'error',
+      color: 'danger',
       shadow: true,
       class: 'shadow-red-500/30',
     },
@@ -127,6 +218,7 @@ const button = tv({
       shadow: true,
       class: 'shadow-blue-500/30',
     },
+    // Icon only variants
     {
       iconOnly: true,
       size: 'sm',
@@ -146,6 +238,7 @@ const button = tv({
   defaultVariants: {
     size: 'md',
     color: 'black',
+    variant: 'solid',
     shadow: false,
     disabled: false,
     iconOnly: false,
@@ -159,6 +252,7 @@ const {
   endIcon,
   size,
   color,
+  variant,
   shadow,
   class: className,
   classNames,
@@ -174,7 +268,7 @@ const {
   icon: iconSlot,
   label: labelSlot,
   endIcon: endIconSlot,
-} = button({ size, color, shadow, disabled, iconOnly: !label && !(!!icon && !!endIcon) })
+} = button({ size, color, variant, shadow, disabled, iconOnly: !label && !(!!icon && !!endIcon) })
 
 const ActualTag = disabled && Tag === 'a' ? 'span' : Tag
 ---
diff --git a/web/src/components/FormSection.astro b/web/src/components/FormSection.astro
new file mode 100644
index 0000000..b369ad5
--- /dev/null
+++ b/web/src/components/FormSection.astro
@@ -0,0 +1,24 @@
+---
+import { cn } from '../lib/cn'
+
+import type { AstroChildren } from '../lib/astro'
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = HTMLAttributes<'section'> & {
+  title: string
+  subtitle?: string
+  heading?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  children: AstroChildren
+}
+
+const { title, subtitle, class: className, heading = 'h2', ...props } = Astro.props
+
+const HeadingTag = heading
+---
+
+<section class={cn('mt-24 space-y-2 first:mt-0', className)} {...props}>
+  <HeadingTag class="font-title text-center text-3xl leading-none font-bold">{title}</HeadingTag>
+  {subtitle && <p class="text-day-400 text-center">{subtitle}</p>}
+
+  <slot />
+</section>
diff --git a/web/src/components/FormSubSection.astro b/web/src/components/FormSubSection.astro
new file mode 100644
index 0000000..2f7a9c0
--- /dev/null
+++ b/web/src/components/FormSubSection.astro
@@ -0,0 +1,24 @@
+---
+import { cn } from '../lib/cn'
+
+import type { AstroChildren } from '../lib/astro'
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = HTMLAttributes<'section'> & {
+  title: string
+  subtitle?: string
+  heading?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  children: AstroChildren
+}
+
+const { title, subtitle, class: className, heading = 'h3', ...props } = Astro.props
+
+const HeadingTag = heading
+---
+
+<section class={cn('mt-6 space-y-2 first:mt-0', className)} {...props}>
+  <HeadingTag class="font-title text-day-400 text-center text-lg font-medium">{title}</HeadingTag>
+  {subtitle && <p class="text-day-400 text-center">{subtitle}</p>}
+
+  <slot />
+</section>
diff --git a/web/src/components/InputCheckboxGroup.astro b/web/src/components/InputCheckboxGroup.astro
index 9a860de..a39d262 100644
--- a/web/src/components/InputCheckboxGroup.astro
+++ b/web/src/components/InputCheckboxGroup.astro
@@ -12,13 +12,15 @@ type Props = Omit<ComponentProps<typeof InputWrapper>, 'children' | 'inputId'> &
   options: {
     label: string
     value: string
-    icon?: string
+    icon?: string[] | string
+    iconClassName?: string[] | string
   }[]
   disabled?: boolean
   selectedValues?: string[]
+  size?: 'lg' | 'md'
 }
 
-const { options, disabled, selectedValues = [], ...wrapperProps } = Astro.props
+const { options, disabled, selectedValues = [], size = 'md', ...wrapperProps } = Astro.props
 
 const inputId = Astro.locals.makeId(`input-${wrapperProps.name}`)
 const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
@@ -26,23 +28,38 @@ const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
 
 <InputWrapper inputId={inputId} {...wrapperProps}>
   <div class={cn(baseInputClassNames.div, hasError && baseInputClassNames.error)}>
-    <div class="h-48 overflow-y-auto mask-y-from-[calc(100%-var(--spacing)*8)] py-5">
+    <div
+      class={cn('h-48 overflow-y-auto mask-y-from-[calc(100%-var(--spacing)*8)] py-5', {
+        'h-96': size === 'lg',
+        'h-48': size === 'md',
+      })}
+    >
       {
-        options.map((option) => (
-          <label class="hover:bg-night-500 flex cursor-pointer items-center gap-2 px-5 py-1">
-            <input
-              transition:persist
-              type="checkbox"
-              name={wrapperProps.name}
-              value={option.value}
-              checked={selectedValues.includes(option.value)}
-              class={cn(hasError && baseInputClassNames.error, disabled && baseInputClassNames.disabled)}
-              disabled={disabled}
-            />
-            {option.icon && <Icon name={option.icon} class="size-4" />}
-            <span class="text-sm leading-none">{option.label}</span>
-          </label>
-        ))
+        options.map((option) => {
+          const icons = option.icon ? (Array.isArray(option.icon) ? option.icon : [option.icon]) : []
+          const iconClassName = option.iconClassName
+            ? Array.isArray(option.iconClassName)
+              ? option.iconClassName
+              : Array.from({ length: icons.length }, () => option.iconClassName)
+            : []
+          return (
+            <label class="hover:bg-night-500 flex cursor-pointer items-center gap-2 px-5 py-1">
+              <input
+                transition:persist
+                type="checkbox"
+                name={wrapperProps.name}
+                value={option.value}
+                checked={selectedValues.includes(option.value)}
+                class={cn(hasError && baseInputClassNames.error, disabled && baseInputClassNames.disabled)}
+                disabled={disabled}
+              />
+              {icons.map((icon, index) => (
+                <Icon name={icon} class={cn('size-4', iconClassName[index])} />
+              ))}
+              <span class="text-sm leading-none">{option.label}</span>
+            </label>
+          )
+        })
       }
     </div>
   </div>
diff --git a/web/src/components/InputTextArea.astro b/web/src/components/InputTextArea.astro
index ade06ed..451feb3 100644
--- a/web/src/components/InputTextArea.astro
+++ b/web/src/components/InputTextArea.astro
@@ -10,7 +10,7 @@ import type { ComponentProps, HTMLAttributes } from 'astro/types'
 
 type Props = Omit<ComponentProps<typeof InputWrapper>, 'children' | 'inputId' | 'required'> & {
   inputProps?: Omit<HTMLAttributes<'textarea'>, 'name'>
-  value?: string
+  value?: string | null | undefined
 }
 
 const { inputProps, value, ...wrapperProps } = Astro.props
diff --git a/web/src/constants/eventTypes.ts b/web/src/constants/eventTypes.ts
index 7a5350d..f7af342 100644
--- a/web/src/constants/eventTypes.ts
+++ b/web/src/constants/eventTypes.ts
@@ -1,7 +1,9 @@
 import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
 import { transformCase } from '../lib/strings'
 
+import type BadgeSmall from '../components/BadgeSmall.astro'
 import type { EventType } from '@prisma/client'
+import type { ComponentProps } from 'astro/types'
 
 type EventTypeInfo<T extends string | null | undefined = string> = {
   id: T
@@ -12,6 +14,7 @@ type EventTypeInfo<T extends string | null | undefined = string> = {
     dot: string
   }
   icon: string
+  color: ComponentProps<typeof BadgeSmall>['color']
 }
 
 export const {
@@ -32,6 +35,7 @@ export const {
       dot: 'bg-zinc-700 text-zinc-300 ring-zinc-700/50',
     },
     icon: 'ri:question-fill',
+    color: 'gray',
   }),
   [
     {
@@ -43,6 +47,7 @@ export const {
         dot: 'bg-amber-900 text-amber-300 ring-amber-900/50',
       },
       icon: 'ri:error-warning-fill',
+      color: 'yellow',
     },
     {
       id: 'WARNING_SOLVED',
@@ -53,6 +58,7 @@ export const {
         dot: 'bg-green-900 text-green-300 ring-green-900/50',
       },
       icon: 'ri:check-fill',
+      color: 'green',
     },
     {
       id: 'ALERT',
@@ -63,6 +69,7 @@ export const {
         dot: 'bg-red-900 text-red-300 ring-red-900/50',
       },
       icon: 'ri:alert-fill',
+      color: 'red',
     },
     {
       id: 'ALERT_SOLVED',
@@ -73,6 +80,7 @@ export const {
         dot: 'bg-green-900 text-green-300 ring-green-900/50',
       },
       icon: 'ri:check-fill',
+      color: 'green',
     },
     {
       id: 'INFO',
@@ -83,6 +91,7 @@ export const {
         dot: 'bg-blue-900 text-blue-300 ring-blue-900/50',
       },
       icon: 'ri:information-fill',
+      color: 'sky',
     },
     {
       id: 'NORMAL',
@@ -93,6 +102,7 @@ export const {
         dot: 'bg-zinc-700 text-zinc-300 ring-zinc-700/50',
       },
       icon: 'ri:notification-fill',
+      color: 'green',
     },
     {
       id: 'UPDATE',
@@ -103,6 +113,7 @@ export const {
         dot: 'bg-sky-900 text-sky-300 ring-sky-900/50',
       },
       icon: 'ri:pencil-fill',
+      color: 'sky',
     },
   ] as const satisfies EventTypeInfo<EventType>[]
 )
diff --git a/web/src/constants/verificationStepStatus.ts b/web/src/constants/verificationStepStatus.ts
new file mode 100644
index 0000000..f7434a2
--- /dev/null
+++ b/web/src/constants/verificationStepStatus.ts
@@ -0,0 +1,53 @@
+import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
+import { transformCase } from '../lib/strings'
+
+import type BadgeSmall from '../components/BadgeSmall.astro'
+import type { VerificationStepStatus } from '@prisma/client'
+import type { ComponentProps } from 'astro/types'
+
+type VerificationStepStatusInfo<T extends string | null | undefined = string> = {
+  value: T
+  label: string
+  icon: string
+  color: ComponentProps<typeof BadgeSmall>['color']
+}
+
+export const {
+  dataArray: verificationStepStatuses,
+  dataObject: verificationStepStatusesByValue,
+  getFn: getVerificationStepStatusInfo,
+} = makeHelpersForOptions(
+  'value',
+  (value): VerificationStepStatusInfo<typeof value> => ({
+    value,
+    label: value ? transformCase(value, 'title') : String(value),
+    icon: 'ri:question-line',
+    color: 'gray',
+  }),
+  [
+    {
+      value: 'PASSED',
+      label: 'Passed',
+      icon: 'ri:verified-badge-fill',
+      color: 'green',
+    },
+    {
+      value: 'IN_PROGRESS',
+      label: 'In Progress',
+      icon: 'ri:loader-line',
+      color: 'yellow',
+    },
+    {
+      value: 'FAILED',
+      label: 'Failed',
+      icon: 'ri:alert-line',
+      color: 'red',
+    },
+    {
+      value: 'PENDING',
+      label: 'Pending',
+      icon: 'ri:time-line',
+      color: 'sky',
+    },
+  ] as const satisfies VerificationStepStatusInfo<VerificationStepStatus>[]
+)
diff --git a/web/src/layouts/MiniLayout.astro b/web/src/layouts/MiniLayout.astro
index 5cf11b0..646ac18 100644
--- a/web/src/layouts/MiniLayout.astro
+++ b/web/src/layouts/MiniLayout.astro
@@ -8,7 +8,7 @@ import BaseLayout from './BaseLayout.astro'
 import type { ComponentProps } from 'astro/types'
 
 type Props = Omit<ComponentProps<typeof BaseLayout>, 'widthClassName'> & {
-  layoutHeader: { icon: string; title: string; subtitle: string }
+  layoutHeader: { icon: string; title: string; subtitle?: string }
 }
 
 const { layoutHeader, ...baseLayoutProps } = Astro.props
@@ -28,10 +28,19 @@ const { layoutHeader, ...baseLayoutProps } = Astro.props
       <Icon name={layoutHeader.icon} class="text-night-800 size-8" />
     </div>
 
-    <h1 class="font-title text-day-200 mt-1 text-center text-3xl font-semibold">
+    <h1
+      class={cn(
+        'font-title text-day-200 mt-1 text-center text-3xl font-semibold',
+        !layoutHeader.subtitle && 'xs:mb-8 mb-6'
+      )}
+    >
       {layoutHeader.title}
     </h1>
-    <p class="text-day-500 xs:mb-8 mt-1 mb-6 text-center">{layoutHeader.subtitle}</p>
+    {
+      !!layoutHeader.subtitle && (
+        <p class="text-day-500 xs:mb-8 mt-1 mb-6 text-center">{layoutHeader.subtitle}</p>
+      )
+    }
 
     <slot />
   </div>
diff --git a/web/src/pages/admin/index.astro b/web/src/pages/admin/index.astro
index 151a152..e7cebeb 100644
--- a/web/src/pages/admin/index.astro
+++ b/web/src/pages/admin/index.astro
@@ -1,7 +1,9 @@
 ---
 import { Icon } from 'astro-icon/components'
+import { DATABASE_UI_URL } from 'astro:env/server'
 
 import BaseLayout from '../../layouts/BaseLayout.astro'
+import { cn } from '../../lib/cn'
 
 import type { ComponentProps } from 'astro/types'
 
@@ -9,6 +11,9 @@ type AdminLink = {
   icon: ComponentProps<typeof Icon>['name']
   title: string
   href: string
+  classNames: {
+    base?: string
+  }
 }
 
 const adminLinks: AdminLink[] = [
@@ -16,59 +21,98 @@ const adminLinks: AdminLink[] = [
     icon: 'ri:box-3-line',
     title: 'Services',
     href: '/admin/services',
-  },
-  {
-    icon: 'ri:file-list-3-line',
-    title: 'Attributes',
-    href: '/admin/attributes',
+    classNames: {
+      base: 'text-green-300',
+    },
   },
   {
     icon: 'ri:user-3-line',
     title: 'Users',
     href: '/admin/users',
+    classNames: {
+      base: 'text-red-300',
+    },
   },
   {
-    icon: 'ri:chat-settings-line',
+    icon: 'ri:chat-4-line',
     title: 'Comments',
     href: '/admin/comments',
+    classNames: {
+      base: 'text-yellow-300',
+    },
   },
   {
     icon: 'ri:lightbulb-line',
-    title: 'Service suggestions',
+    title: 'Suggestions',
     href: '/admin/service-suggestions',
+    classNames: {
+      base: 'text-purple-300',
+    },
+  },
+  {
+    icon: 'ri:price-tag-3-line',
+    title: 'Attributes',
+    href: '/admin/attributes',
+    classNames: {
+      base: 'text-blue-300',
+    },
   },
   {
     icon: 'ri:megaphone-line',
     title: 'Announcements',
     href: '/admin/announcements',
+    classNames: {
+      base: 'text-pink-300',
+    },
+  },
+  {
+    icon: 'ri:rocket-2-line',
+    title: 'Releases',
+    href: '/admin/releases',
+    classNames: {
+      base: 'text-orange-300',
+    },
   },
   {
     icon: 'ri:database-2-line',
     title: 'Database',
-    href: 'https://db.kycnot.me',
+    href: DATABASE_UI_URL,
+    classNames: {
+      base: 'text-gray-300',
+    },
   },
 ]
 ---
 
 <BaseLayout pageTitle="Admin Dashboard" widthClassName="max-w-screen-xl">
-  <h1 class="font-title mb-8 text-3xl font-bold text-zinc-100">
+  <h1 class="font-title text-day-100 mb-8 text-3xl font-bold">
     <Icon name="ri:home-gear-line" class="me-1 inline-block size-10 align-[-0.35em]" />
     Admin Dashboard
   </h1>
 
-  <div class="grid grid-cols-[repeat(auto-fill,minmax(calc(var(--spacing)*40),1fr))] gap-4">
-    {
-      adminLinks.map((link) => (
-        <a
-          href={link.href}
-          class="group flex flex-col items-center justify-evenly rounded-lg border border-zinc-800 bg-gradient-to-br from-zinc-900/90 to-zinc-900/50 py-3 text-center shadow-lg backdrop-blur-xs transition-all duration-300 hover:-translate-y-0.5 hover:from-zinc-800/90 hover:to-zinc-800/50 hover:shadow-xl hover:shadow-zinc-900/20"
-        >
-          <Icon name={link.icon} class="size-8 text-zinc-400 transition-colors group-hover:text-green-400" />
-          <span class="font-title text-xl leading-none font-semibold text-zinc-100 transition-colors group-hover:text-green-400">
-            {link.title}
-          </span>
-        </a>
-      ))
-    }
-  </div>
+  <nav>
+    <ol class="grid grid-cols-[repeat(auto-fill,minmax(calc(var(--spacing)*40),1fr))] gap-4">
+      {
+        adminLinks.map((link) => (
+          <li
+            class={cn(
+              'group ease-out-back transition-transform duration-250 hover:-translate-y-0.5 hover:scale-105',
+              link.classNames.base
+            )}
+          >
+            <a
+              href={link.href}
+              class="flex min-h-24 flex-col items-center justify-around rounded-lg border border-current/4 bg-current/3 py-3 text-center transition-all duration-250 group-hover:border-current/10 group-hover:bg-current/10 group-hover:shadow-xl"
+            >
+              <Icon
+                name={link.icon}
+                class="size-8 text-current opacity-50 transition-opacity duration-250 group-hover:opacity-100"
+              />
+              <span class="font-title text-xl leading-none font-semibold text-current">{link.title}</span>
+            </a>
+          </li>
+        ))
+      }
+    </ol>
+  </nav>
 </BaseLayout>
diff --git a/web/src/pages/admin/releases.astro b/web/src/pages/admin/releases.astro
new file mode 100644
index 0000000..9c25637
--- /dev/null
+++ b/web/src/pages/admin/releases.astro
@@ -0,0 +1,44 @@
+---
+import { RELEASE_DATE, RELEASE_NUMBER } from 'astro:env/server'
+
+import TimeFormatted from '../../components/TimeFormatted.astro'
+import MiniLayout from '../../layouts/MiniLayout.astro'
+
+const releaseDate =
+  RELEASE_DATE && !isNaN(new Date(RELEASE_DATE).getTime()) ? new Date(RELEASE_DATE) : undefined
+---
+
+<MiniLayout
+  pageTitle="Releases"
+  description="Manage releases"
+  layoutHeader={{
+    icon: 'ri:rocket-2-line',
+    title: 'Releases',
+    subtitle: 'Current release',
+  }}
+  className={{
+    main: 'flex flex-col items-center justify-center text-center',
+  }}
+>
+  <p class="text-day-200 font-title text-center text-6xl font-medium tracking-wider">
+    {RELEASE_NUMBER ? `#${RELEASE_NUMBER}` : '???'}
+  </p>
+  <time class="text-day-400 mt-4 block text-center text-xl" datetime={releaseDate?.toISOString()}>
+    {
+      releaseDate?.toLocaleString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      }) ?? 'Unknown release date'
+    }
+  </time>
+  {
+    !!releaseDate && (
+      <p class="text-day-500 mt-2">
+        (<TimeFormatted date={releaseDate} hourPrecision daysUntilDate={Infinity} />)
+      </p>
+    )
+  }
+</MiniLayout>
diff --git a/web/src/pages/admin/services/[slug]/edit.astro b/web/src/pages/admin/services/[slug]/edit.astro
index cd25269..521254b 100644
--- a/web/src/pages/admin/services/[slug]/edit.astro
+++ b/web/src/pages/admin/services/[slug]/edit.astro
@@ -1,22 +1,35 @@
 ---
-import { EventType, VerificationStepStatus } from '@prisma/client'
 import { Icon } from 'astro-icon/components'
 import { actions, isInputError } from 'astro:actions'
+import { orderBy } from 'lodash-es'
 
+import BadgeSmall from '../../../../components/BadgeSmall.astro'
+import Button from '../../../../components/Button.astro'
+import FormSection from '../../../../components/FormSection.astro'
+import FormSubSection from '../../../../components/FormSubSection.astro'
 import InputCardGroup from '../../../../components/InputCardGroup.astro'
 import InputCheckboxGroup from '../../../../components/InputCheckboxGroup.astro'
 import InputImageFile from '../../../../components/InputImageFile.astro'
+import InputSelect from '../../../../components/InputSelect.astro'
 import InputSubmitButton from '../../../../components/InputSubmitButton.astro'
 import InputText from '../../../../components/InputText.astro'
 import InputTextArea from '../../../../components/InputTextArea.astro'
+import MyPicture from '../../../../components/MyPicture.astro'
+import ServiceCard from '../../../../components/ServiceCard.astro'
+import TimeFormatted from '../../../../components/TimeFormatted.astro'
+import Tooltip from '../../../../components/Tooltip.astro'
 import UserBadge from '../../../../components/UserBadge.astro'
+import { getAttributeCategoryInfo } from '../../../../constants/attributeCategories'
+import { getAttributeTypeInfo } from '../../../../constants/attributeTypes'
 import { formatContactMethod } from '../../../../constants/contactMethods'
 import { currencies } from '../../../../constants/currencies'
+import { eventTypes, getEventTypeInfo } from '../../../../constants/eventTypes'
 import { kycLevels } from '../../../../constants/kycLevels'
 import { serviceVisibilities } from '../../../../constants/serviceVisibility'
 import { verificationStatuses } from '../../../../constants/verificationStatus'
+import { getVerificationStepStatusInfo } from '../../../../constants/verificationStepStatus'
 import BaseLayout from '../../../../layouts/BaseLayout.astro'
-import { cn } from '../../../../lib/cn'
+import { pluralize } from '../../../../lib/pluralize'
 import { prisma } from '../../../../lib/prisma'
 
 const { slug } = Astro.params
@@ -55,136 +68,136 @@ const verificationStepUpdateInputErrors = isInputError(verificationStepUpdateRes
 
 if (!slug) return Astro.rewrite('/404')
 
-const service = await Astro.locals.banners.try('Error fetching service', () =>
-  prisma.service.findUnique({
-    where: { slug },
-    include: {
-      attributes: {
-        select: {
-          attribute: {
+const [service, categories, attributes] = await Astro.locals.banners.tryMany([
+  [
+    'Error fetching service',
+    () =>
+      prisma.service.findUnique({
+        where: { slug },
+        include: {
+          attributes: {
+            select: {
+              attribute: {
+                select: {
+                  id: true,
+                },
+              },
+            },
+          },
+          categories: {
             select: {
               id: true,
-            },
-          },
-        },
-      },
-      categories: {
-        select: {
-          id: true,
-        },
-      },
-      events: {
-        orderBy: {
-          startedAt: 'desc',
-        },
-      },
-      verificationRequests: {
-        select: {
-          id: true,
-          user: {
-            select: {
               name: true,
-              displayName: true,
-              picture: true,
+              icon: true,
+            },
+          },
+          events: {
+            orderBy: {
+              startedAt: 'desc',
+            },
+          },
+          verificationRequests: {
+            select: {
+              id: true,
+              user: {
+                select: {
+                  name: true,
+                  displayName: true,
+                  picture: true,
+                },
+              },
+              createdAt: true,
+            },
+            orderBy: {
+              createdAt: 'desc',
+            },
+          },
+          verificationSteps: {
+            orderBy: {
+              createdAt: 'desc',
+            },
+          },
+          contactMethods: {
+            orderBy: {
+              label: 'asc',
+            },
+          },
+          _count: {
+            select: {
+              verificationRequests: true,
             },
           },
-          createdAt: true,
         },
-        orderBy: {
-          createdAt: 'desc',
-        },
-      },
-      verificationSteps: {
-        orderBy: {
-          createdAt: 'desc',
-        },
-      },
-      contactMethods: {
-        orderBy: {
-          label: 'asc',
-        },
-      },
-      _count: {
-        select: {
-          verificationRequests: true,
-        },
-      },
-    },
-  })
-)
+      }),
+  ],
+  [
+    'Error fetching categories',
+    () =>
+      prisma.category.findMany({
+        orderBy: { name: 'asc' },
+      }),
+    [] as [],
+  ],
+  [
+    'Error fetching attributes',
+    () =>
+      prisma.attribute.findMany({
+        orderBy: { category: 'asc' },
+      }),
+    [] as [],
+  ],
+])
 
 if (!service) return Astro.rewrite('/404')
-
-const categories = await Astro.locals.banners.try(
-  'Error fetching categories',
-  () =>
-    prisma.category.findMany({
-      orderBy: { name: 'asc' },
-    }),
-  []
-)
-
-const attributes = await Astro.locals.banners.try(
-  'Error fetching attributes',
-  () =>
-    prisma.attribute.findMany({
-      orderBy: { category: 'asc' },
-    }),
-  []
-)
-
-// Button style constants for admin sections (Events, etc.)
-const buttonPrimaryClasses =
-  'inline-flex items-center justify-center rounded-md border border-transparent bg-sky-600 px-3 py-1.5 text-sm font-medium text-white shadow-sm hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-zinc-900'
-
-const buttonSmallBaseClasses = 'rounded-md px-2 py-1 text-xs font-medium'
-const buttonSmallPrimaryClasses = cn(
-  buttonSmallBaseClasses,
-  'text-sky-400 hover:bg-sky-700/30 hover:text-sky-300'
-)
-const buttonSmallSecondaryClasses = cn(
-  buttonSmallBaseClasses,
-  'text-zinc-400 hover:bg-zinc-700/50 hover:text-zinc-300'
-)
-const buttonSmallDestructiveClasses = cn(
-  buttonSmallBaseClasses,
-  'text-red-400 hover:bg-red-700/30 hover:text-red-300'
-)
-const buttonSmallWarningClasses = cn(
-  buttonSmallBaseClasses,
-  'text-yellow-400 hover:bg-yellow-700/30 hover:text-yellow-300'
-)
-
-// Legacy classes for existing admin forms (Events, Verification Steps, Contact Methods)
-const inputBaseClasses =
-  'w-full rounded-md border-zinc-600 bg-zinc-700/80 p-2 text-zinc-200 placeholder-zinc-400 focus:border-sky-500 focus:ring-1 focus:ring-sky-500 text-sm'
-const labelBaseClasses = 'block text-sm font-medium text-zinc-300 mb-1'
-const errorTextClasses = 'mt-1 text-xs text-red-400'
 ---
 
 <BaseLayout pageTitle={`Edit Service: ${service.name}`}>
-  <div class="mx-auto max-w-3xl space-y-8">
-    <div class="mb-6 flex items-center justify-between border-b border-zinc-700 pb-3">
-      <h1 class="font-title text-2xl text-zinc-100">
-        Editing <span class="font-semibold text-yellow-500">{service.name}</span> [{service.id}]
-      </h1>
-      <a
-        href={`/service/${service.slug}`}
-        class="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm text-sky-400 hover:text-sky-300 hover:underline focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
-      >
-        <Icon name="ri:external-link-line" class="size-4" />
-        View Service Page
-      </a>
+  <div class="mx-auto max-w-3xl space-y-24">
+    <div class="mt-12 flex flex-wrap items-center justify-center gap-6">
+      <div class="grow-1">
+        {
+          !!service.imageUrl && (
+            <MyPicture
+              src={service.imageUrl}
+              alt=""
+              width={80}
+              height={80}
+              class="mx-auto mb-2 block size-20 rounded-xl"
+            />
+          )
+        }
+        <h1 class="font-title mb-2 flex items-center justify-center gap-2 text-center text-3xl font-bold">
+          {service.name}
+        </h1>
+
+        <div class="flex justify-center gap-2">
+          <Button
+            as="a"
+            href={`/service/${service.slug}`}
+            icon="ri:external-link-line"
+            color="success"
+            shadow
+            size="sm"
+            label="View"
+          />
+          <Button
+            as="a"
+            href="/admin/services"
+            icon="ri:arrow-left-line"
+            color="gray"
+            size="sm"
+            label="Back"
+          />
+        </div>
+      </div>
+      <ServiceCard service={service} class="flex-1 grow-2 basis-64" withoutLink />
     </div>
 
-    <section>
-      <h2 class="font-title mb-4 border-b border-zinc-700 pb-2 text-xl font-semibold text-zinc-100">
-        Service Details
-      </h2>
+    <FormSection title="Service Details">
       <form
         method="POST"
         action={actions.admin.service.update}
-        class="space-y-6 rounded-lg border border-zinc-700/80 bg-zinc-800/60 p-6 shadow-lg backdrop-blur-sm"
+        class="space-y-6"
         enctype="multipart/form-data"
       >
         <input type="hidden" name="id" value={service.id} />
@@ -210,7 +223,8 @@ const errorTextClasses = 'mt-1 text-xs text-red-400'
         />
 
         <InputText
-          label="Slug (auto-generated if empty)"
+          label="Slug"
+          description="Auto-generated if empty"
           name="slug"
           inputProps={{
             value: service.slug,
@@ -220,9 +234,10 @@ const errorTextClasses = 'mt-1 text-xs text-red-400'
           class="font-title"
         />
 
-        <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+        <div class="grid grid-cols-1 gap-x-4 gap-y-6 md:grid-cols-2">
           <InputTextArea
-            label="Service URLs (one per line)"
+            label="Service URLs"
+            description="One per line"
             name="serviceUrls"
             inputProps={{
               rows: 3,
@@ -232,7 +247,8 @@ const errorTextClasses = 'mt-1 text-xs text-red-400'
             error={serviceInputErrors.serviceUrls}
           />
           <InputTextArea
-            label="ToS URLs (one per line)"
+            label="ToS URLs"
+            description="One per line"
             name="tosUrls"
             inputProps={{
               rows: 3,
@@ -242,7 +258,8 @@ const errorTextClasses = 'mt-1 text-xs text-red-400'
             error={serviceInputErrors.tosUrls}
           />
           <InputTextArea
-            label="Onion URLs (one per line)"
+            label="Onion URLs"
+            description="One per line"
             name="onionUrls"
             inputProps={{
               rows: 3,
@@ -252,7 +269,8 @@ const errorTextClasses = 'mt-1 text-xs text-red-400'
             error={serviceInputErrors.onionUrls}
           />
           <InputTextArea
-            label="I2P URLs (one per line)"
+            label="I2P URLs"
+            description="One per line"
             name="i2pUrls"
             inputProps={{
               rows: 3,
@@ -262,21 +280,30 @@ const errorTextClasses = 'mt-1 text-xs text-red-400'
           />
         </div>
 
-        <div>
-          <InputImageFile
-            label="Service Image"
-            name="imageFile"
-            description="Square image. At least 192x192px. Transparency supported. Leave empty to keep current image."
-            error={serviceInputErrors.imageFile}
-            square
-            value={service.imageUrl}
-          />
-        </div>
+        <InputText
+          label="Referral Code/Link"
+          name="referral"
+          inputProps={{
+            value: service.referral ?? undefined,
+            placeholder: 'e.g., REFCODE123 or https://example.com?ref=123',
+          }}
+          error={serviceInputErrors.referral}
+        />
 
-        <div>
+        <InputImageFile
+          label="Image"
+          name="imageFile"
+          description="Square image. At least 192x192px. Transparency supported. Leave empty to keep current image."
+          error={serviceInputErrors.imageFile}
+          square
+          value={service.imageUrl}
+        />
+
+        <div class="grid grid-cols-1 items-stretch gap-x-4 gap-y-6 sm:grid-cols-[1fr_2fr]">
           <InputCheckboxGroup
             name="categories"
             label="Categories"
+            size="lg"
             required
             options={categories.map((category) => ({
               label: category.name,
@@ -286,77 +313,82 @@ const errorTextClasses = 'mt-1 text-xs text-red-400'
             selectedValues={service.categories.map((c) => c.id.toString())}
             error={serviceInputErrors.categories}
           />
-        </div>
 
-        <div>
-          <InputCardGroup
-            name="kycLevel"
-            label="KYC Level"
-            options={kycLevels.map((kycLevel) => ({
-              label: `${kycLevel.name} (${kycLevel.value}/4)`,
-              value: kycLevel.id.toString(),
-              icon: kycLevel.icon,
-              description: kycLevel.description,
-            }))}
-            selectedValue={service.kycLevel.toString()}
-            iconSize="md"
-            cardSize="md"
-            error={serviceInputErrors.kycLevel}
-            class="[&>div]:grid-cols-2 [&>div]:[--card-min-size:16rem]"
-          />
-        </div>
-
-        <div>
           <InputCheckboxGroup
             name="attributes"
             label="Attributes"
-            options={attributes.map((attribute) => ({
-              label: `${attribute.title} (${attribute.category})`,
-              value: attribute.id.toString(),
-            }))}
+            size="lg"
+            options={orderBy(
+              attributes.map((attribute) => ({
+                ...attribute,
+                categoryInfo: getAttributeCategoryInfo(attribute.category),
+                typeInfo: getAttributeTypeInfo(attribute.type),
+              })),
+              ['categoryInfo.order', 'typeInfo.order']
+            ).map((attribute) => {
+              return {
+                label: attribute.title,
+                value: attribute.id.toString(),
+                icon: [attribute.categoryInfo.icon, attribute.typeInfo.icon],
+                iconClassName: [attribute.categoryInfo.classNames.icon, attribute.typeInfo.classNames.icon],
+              }
+            })}
             selectedValues={service.attributes.map((a) => a.attribute.id.toString())}
             error={serviceInputErrors.attributes}
           />
         </div>
 
-        <div>
-          <InputCardGroup
-            name="verificationStatus"
-            label="Verification Status"
-            options={verificationStatuses.map((status) => ({
-              label: status.label,
-              value: status.value,
-              icon: status.icon,
-              iconClass: status.classNames.icon,
-              description: status.description,
-            }))}
-            selectedValue={service.verificationStatus}
-            error={serviceInputErrors.verificationStatus}
-            cardSize="md"
-            iconSize="md"
-            class="[&>div]:grid-cols-2 [&>div]:[--card-min-size:16rem]"
-          />
-        </div>
+        <InputCardGroup
+          name="kycLevel"
+          label="KYC Level"
+          options={kycLevels.map((kycLevel) => ({
+            label: `${kycLevel.name} (${kycLevel.value}/4)`,
+            value: kycLevel.id.toString(),
+            icon: kycLevel.icon,
+            description: kycLevel.description,
+          }))}
+          selectedValue={service.kycLevel.toString()}
+          iconSize="md"
+          cardSize="md"
+          error={serviceInputErrors.kycLevel}
+          class="[&>div]:grid-cols-2 [&>div]:[--card-min-size:16rem]"
+        />
 
-        <div>
-          <InputCardGroup
-            name="acceptedCurrencies"
-            label="Accepted Currencies"
-            options={currencies.map((currency) => ({
-              label: currency.name,
-              value: currency.id,
-              icon: currency.icon,
-            }))}
-            selectedValue={service.acceptedCurrencies}
-            error={serviceInputErrors.acceptedCurrencies}
-            required
-            multiple
-          />
-        </div>
+        <InputCardGroup
+          name="verificationStatus"
+          label="Verification Status"
+          options={verificationStatuses.map((status) => ({
+            label: status.label,
+            value: status.value,
+            icon: status.icon,
+            iconClass: status.classNames.icon,
+            description: status.description,
+          }))}
+          selectedValue={service.verificationStatus}
+          error={serviceInputErrors.verificationStatus}
+          cardSize="sm"
+          iconSize="sm"
+          class="[&>div]:grid-cols-2 [&>div]:[--card-min-size:16rem]"
+        />
 
-        <div>
+        <InputCardGroup
+          name="acceptedCurrencies"
+          label="Accepted Currencies"
+          options={currencies.map((currency) => ({
+            label: currency.name,
+            value: currency.id,
+            icon: currency.icon,
+          }))}
+          selectedValue={service.acceptedCurrencies}
+          error={serviceInputErrors.acceptedCurrencies}
+          required
+          multiple
+        />
+
+        <div class="grid grid-cols-1 gap-x-4 gap-y-6 md:grid-cols-[2fr_3fr]">
           <InputTextArea
-            label="Verification Summary (Markdown)"
+            label="Verification Summary"
+            description="Markdown supported"
             name="verificationSummary"
             inputProps={{
               rows: 4,
@@ -364,11 +396,10 @@ const errorTextClasses = 'mt-1 text-xs text-red-400'
             value={service.verificationSummary ?? undefined}
             error={serviceInputErrors.verificationSummary}
           />
-        </div>
 
-        <div>
           <InputTextArea
-            label="Verification Proof (Markdown)"
+            label="Verification Proof"
+            description="Markdown supported"
             name="verificationProofMd"
             inputProps={{
               rows: 8,
@@ -378,668 +409,447 @@ const errorTextClasses = 'mt-1 text-xs text-red-400'
           />
         </div>
 
-        <div>
-          <InputText
-            label="Referral Code/Link (Optional)"
-            name="referral"
-            inputProps={{
-              value: service.referral ?? undefined,
-              placeholder: 'e.g., REFCODE123 or https://example.com?ref=123',
-            }}
-            error={serviceInputErrors.referral}
-          />
-        </div>
+        <InputCardGroup
+          name="serviceVisibility"
+          label="Service Visibility"
+          options={serviceVisibilities.map((visibility) => ({
+            label: visibility.label,
+            value: visibility.value,
+            icon: visibility.icon,
+            iconClass: visibility.iconClass,
+            description: visibility.description,
+          }))}
+          selectedValue={service.serviceVisibility}
+          error={serviceInputErrors.serviceVisibility}
+          cardSize="sm"
+        />
 
-        <div>
-          <InputCardGroup
-            name="serviceVisibility"
-            label="Service Visibility"
-            options={serviceVisibilities.map((visibility) => ({
-              label: visibility.label,
-              value: visibility.value,
-              icon: visibility.icon,
-              iconClass: visibility.iconClass,
-              description: visibility.description,
-            }))}
-            selectedValue={service.serviceVisibility}
-            error={serviceInputErrors.serviceVisibility}
-            cardSize="sm"
-          />
-        </div>
-
-        <InputSubmitButton label="Update Service" />
+        <InputSubmitButton label="Update" icon="ri:save-line" hideCancel />
       </form>
-    </section>
+    </FormSection>
 
-    <!-- Events Section -->
-    <section>
-      <h2 class="font-title mb-4 border-b border-zinc-700 pb-2 text-xl font-semibold text-zinc-100">
-        Events
-      </h2>
-      <div
-        class="space-y-6 rounded-lg border border-zinc-700/80 bg-zinc-800/60 p-6 shadow-lg backdrop-blur-sm"
-      >
-        <!-- Existing Events List -->
+    <FormSection title="Events">
+      <FormSubSection title="Existing Events">
         {
-          service.events.length > 0 && (
-            <div class="space-y-3">
-              <h3 class="font-title mb-2 text-lg font-medium text-zinc-200">Existing Events</h3>
-              {service.events.map((event) => (
-                <div class="rounded-md border border-zinc-700 bg-zinc-700/30 p-3">
-                  <div class="flex items-start justify-between gap-3">
-                    <div class="flex-grow space-y-1">
-                      <div class="flex flex-wrap items-center gap-2">
-                        <span class="text-md font-semibold text-zinc-100">{event.title}</span>
-                        <span
-                          class={cn(
-                            'rounded-full border px-2 py-0.5 text-xs font-medium',
-                            // Matching status badge styles from service/[slug].astro
-                            {
-                              'border-yellow-500/60 bg-yellow-500/20 text-yellow-300':
-                                event.type === 'WARNING',
-                              'border-red-500/60 bg-red-500/20 text-red-300': event.type === 'ALERT',
-                              'border-sky-500/60 bg-sky-500/20 text-sky-300': event.type === 'INFO',
-                              'border-green-500/60 bg-green-500/20 text-green-300':
-                                event.type === 'NORMAL' || event.type === 'UPDATE',
-                              'border-teal-500/60 bg-teal-500/20 text-teal-300':
-                                event.type === 'WARNING_SOLVED' || event.type === 'ALERT_SOLVED',
-                            }
-                          )}
-                        >
-                          {event.type}
-                        </span>
-                        {!event.visible && (
-                          <span class="rounded-full border border-zinc-600 bg-zinc-500/20 px-2 py-0.5 text-xs font-medium text-zinc-400">
-                            Hidden
-                          </span>
-                        )}
-                      </div>
-                      <p class="text-sm text-pretty text-zinc-400">{event.content}</p>
-                      <div class="flex flex-wrap items-center gap-3 text-xs text-zinc-500">
-                        <span>Started: {new Date(event.startedAt).toLocaleDateString()}</span>
-                        <span>
-                          Ended:
-                          {event.endedAt
-                            ? event.endedAt === event.startedAt
-                              ? '1-time event'
-                              : new Date(event.endedAt).toLocaleDateString()
-                            : 'Ongoing'}
-                        </span>
-                        {event.source && <span>Source: {event.source}</span>}
-                      </div>
-                    </div>
-                    <div class="flex shrink-0 gap-1.5">
-                      <form method="POST" action={actions.admin.event.toggle} class="inline">
-                        <input type="hidden" name="eventId" value={event.id} />
-                        <button
-                          type="submit"
-                          class={buttonSmallWarningClasses}
-                          title={event.visible ? 'Hide Event' : 'Show Event'}
-                        >
-                          <Icon name={event.visible ? 'ri:eye-off-line' : 'ri:eye-line'} class="size-4" />
-                        </button>
-                      </form>
-                      <button
-                        type="button"
-                        class={buttonSmallPrimaryClasses}
-                        title="Edit Event"
-                        onclick={`document.getElementById('edit-event-${event.id}')?.classList.toggle('hidden')`}
-                      >
-                        <Icon name="ri:pencil-line" class="size-4" />
-                      </button>
-                      <form method="POST" action={actions.admin.event.delete} class="inline">
-                        <input type="hidden" name="eventId" value={event.id} />
-                        <button type="submit" class={buttonSmallDestructiveClasses} title="Delete Event">
-                          <Icon name="ri:delete-bin-line" class="size-4" />
-                        </button>
-                      </form>
-                    </div>
-                  </div>
-                  {/* Edit Event Form - Hidden by default */}
-                  <form
-                    id={`edit-event-${event.id}`}
-                    method="POST"
-                    action={actions.admin.event.update}
-                    class="mt-3 hidden space-y-3 rounded-md border border-zinc-600 bg-zinc-700/40 p-3"
-                  >
-                    <input type="hidden" name="eventId" value={event.id} />
-                    <div>
-                      <label for={`title-${event.id}`} class={labelBaseClasses}>
-                        Title
-                      </label>
-                      <input
-                        type="text"
-                        name="title"
-                        id={`title-${event.id}`}
-                        required
-                        value={event.title}
-                        class={inputBaseClasses}
-                      />
-                      {eventUpdateInputErrors.title && (
-                        <p class={errorTextClasses}>{eventUpdateInputErrors.title.join(', ')}</p>
-                      )}
-                    </div>
-                    <div>
-                      <label for={`content-${event.id}`} class={labelBaseClasses}>
-                        Content
-                      </label>
-                      <textarea
-                        name="content"
-                        id={`content-${event.id}`}
-                        required
-                        rows={3}
-                        class={inputBaseClasses}
-                        set:text={event.content}
-                      />
-                      {eventUpdateInputErrors.content && (
-                        <p class={errorTextClasses}>{eventUpdateInputErrors.content.join(', ')}</p>
-                      )}
-                    </div>
-                    <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
-                      <div>
-                        <label for={`startedAt-${event.id}`} class={labelBaseClasses}>
-                          Started At
-                        </label>
-                        <input
-                          type="date"
-                          name="startedAt"
-                          id={`startedAt-${event.id}`}
-                          required
-                          value={new Date(event.startedAt).toISOString().split('T')[0]}
-                          class={inputBaseClasses}
-                        />
-                        {eventUpdateInputErrors.startedAt && (
-                          <p class={errorTextClasses}>{eventUpdateInputErrors.startedAt.join(', ')}</p>
-                        )}
-                      </div>
-                      <div>
-                        <label for={`endedAt-${event.id}`} class={labelBaseClasses}>
-                          Ended At (optional)
-                        </label>
-                        <input
-                          type="date"
-                          name="endedAt"
-                          id={`endedAt-${event.id}`}
-                          value={event.endedAt ? new Date(event.endedAt).toISOString().split('T')[0] : ''}
-                          class={inputBaseClasses}
-                        />
-                        {eventUpdateInputErrors.endedAt && (
-                          <p class={errorTextClasses}>{eventUpdateInputErrors.endedAt.join(', ')}</p>
-                        )}
-                      </div>
-                    </div>
-                    <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
-                      <div>
-                        <label for={`source-${event.id}`} class={labelBaseClasses}>
-                          Source (URL)
-                        </label>
-                        <input
-                          type="text"
-                          name="source"
-                          id={`source-${event.id}`}
-                          value={event.source}
-                          class={inputBaseClasses}
-                        />
-                        {eventUpdateInputErrors.source && (
-                          <p class={errorTextClasses}>{eventUpdateInputErrors.source.join(', ')}</p>
-                        )}
-                      </div>
-                      <div>
-                        <label for={`type-${event.id}`} class={labelBaseClasses}>
-                          Type
-                        </label>
-                        <select name="type" id={`type-${event.id}`} required class={inputBaseClasses}>
-                          {Object.values(EventType).map((type) => (
-                            <option value={type} selected={event.type === type}>
-                              {type}
-                            </option>
-                          ))}
-                        </select>
-                        {eventUpdateInputErrors.type && (
-                          <p class={errorTextClasses}>{eventUpdateInputErrors.type.join(', ')}</p>
-                        )}
-                      </div>
-                    </div>
-                    <div class="mt-2 flex justify-end gap-2">
-                      <button
-                        type="button"
-                        class={buttonSmallSecondaryClasses}
-                        onclick={`document.getElementById('edit-event-${event.id}')?.classList.add('hidden')`}
-                      >
-                        Cancel
-                      </button>
-                      <button type="submit" class={buttonSmallPrimaryClasses}>
-                        Update Event
-                      </button>
-                    </div>
-                  </form>
-                </div>
-              ))}
-            </div>
-          )
-        }
-
-        <details class="group" open={!service.events.length}>
-          <summary class="cursor-pointer list-none">
-            <h3
-              class="font-title inline-flex items-center gap-1 text-lg font-medium text-zinc-200 hover:text-sky-400"
-            >
-              <Icon
-                name="ri:arrow-right-s-line"
-                class="size-5 transition-transform duration-150 group-open:rotate-90"
-              />
-              Add New Event
-            </h3>
-          </summary>
-          <form
-            method="POST"
-            action={actions.admin.event.create}
-            class="mt-3 space-y-4 border-t border-zinc-700 pt-4"
-          >
-            <input type="hidden" name="serviceId" value={service.id} />
-            <div>
-              <label for="newEventTitle" class={labelBaseClasses}>Title</label>
-              <input type="text" name="title" id="newEventTitle" required class={inputBaseClasses} />
-              {eventInputErrors.title && <p class={errorTextClasses}>{eventInputErrors.title.join(', ')}</p>}
-            </div>
-            <div>
-              <label for="newEventContent" class={labelBaseClasses}>Content</label>
-              <textarea
-                name="content"
-                id="newEventContent"
-                required
-                rows={3}
-                class={inputBaseClasses}
-                set:text=""
-              />
-              {
-                eventInputErrors.content && (
-                  <p class={errorTextClasses}>{eventInputErrors.content.join(', ')}</p>
-                )
-              }
-            </div>
-            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-              <div>
-                <label for="newEventStartedAt" class={labelBaseClasses}>Started At</label>
-                <input
-                  type="date"
-                  name="startedAt"
-                  id="newEventStartedAt"
-                  required
-                  value={new Date().toISOString().split('T')[0]}
-                  class={inputBaseClasses}
-                />
-                {
-                  eventInputErrors.startedAt && (
-                    <p class={errorTextClasses}>{eventInputErrors.startedAt.join(', ')}</p>
-                  )
-                }
-              </div>
-              <div>
-                <label for="newEventEndedAt" class={labelBaseClasses}>Ended At (optional)</label>
-                <input
-                  type="date"
-                  name="endedAt"
-                  id="newEventEndedAt"
-                  value={new Date().toISOString().split('T')[0]}
-                  class={inputBaseClasses}
-                />
-                {
-                  eventInputErrors.endedAt && (
-                    <p class={errorTextClasses}>{eventInputErrors.endedAt.join(', ')}</p>
-                  )
-                }
-              </div>
-            </div>
-            <div
-              class="rounded-md border border-yellow-600/50 bg-yellow-500/10 p-3 text-xs text-yellow-300/80"
-            >
-              <p class="mb-1 font-semibold text-yellow-200/90">End Date Options:</p>
-              <ul class="list-disc space-y-0.5 pl-4">
-                <li>Leave empty: Event is ongoing.</li>
-                <li>Same as start date: One-time event.</li>
-                <li>Future date: Event with specific end date.</li>
-              </ul>
-            </div>
-            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-              <div>
-                <label for="newEventSource" class={labelBaseClasses}>Source (URL)</label>
-                <input type="text" name="source" id="newEventSource" class={inputBaseClasses} />
-                {
-                  eventInputErrors.source && (
-                    <p class={errorTextClasses}>{eventInputErrors.source.join(', ')}</p>
-                  )
-                }
-              </div>
-              <div>
-                <label for="newEventType" class={labelBaseClasses}>Type</label>
-                <select name="type" id="newEventType" required class={inputBaseClasses}>
-                  {Object.values(EventType).map((type) => <option value={type}>{type}</option>)}
-                </select>
-                {eventInputErrors.type && <p class={errorTextClasses}>{eventInputErrors.type.join(', ')}</p>}
-              </div>
-            </div>
-            <button type="submit" class={buttonPrimaryClasses}>Add Event</button>
-          </form>
-        </details>
-      </div>
-    </section>
-
-    <!-- Verification Steps Section -->
-    <section>
-      <h2 class="font-title mb-4 border-b border-zinc-700 pb-2 text-xl font-semibold text-zinc-100">
-        Verification Steps
-      </h2>
-      <div
-        class="space-y-6 rounded-lg border border-zinc-700/80 bg-zinc-800/60 p-6 shadow-lg backdrop-blur-sm"
-      >
-        <!-- Existing Verification Steps List -->
-        {
-          service.verificationSteps.length > 0 && (
-            <div class="space-y-3">
-              <h3 class="font-title mb-2 text-lg font-medium text-zinc-200">Submitted Steps</h3>
-              {service.verificationSteps.map((step) => (
-                <div class="rounded-md border border-zinc-700 bg-zinc-700/30 p-3">
-                  <div class="flex items-start justify-between gap-3">
-                    <div class="flex-grow space-y-1">
-                      <div class="flex flex-wrap items-center gap-2">
-                        <span class="text-md font-semibold text-zinc-100">{step.title}</span>
-                        <span
-                          class={cn('rounded-full border px-2 py-0.5 text-xs font-medium', {
-                            'border-sky-500/60 bg-sky-500/20 text-sky-300':
-                              step.status === VerificationStepStatus.PENDING,
-                            'border-yellow-500/60 bg-yellow-500/20 text-yellow-300':
-                              step.status === VerificationStepStatus.IN_PROGRESS,
-                            'border-green-500/60 bg-green-500/20 text-green-300':
-                              step.status === VerificationStepStatus.PASSED,
-                            'border-red-500/60 bg-red-500/20 text-red-300':
-                              step.status === VerificationStepStatus.FAILED,
-                          })}
-                        >
-                          {step.status.replace('_', ' ')}
-                        </span>
-                      </div>
-                      <p class="text-sm text-pretty text-zinc-400">{step.description}</p>
-                      {step.evidenceMd && (
-                        <p class="mt-1 text-xs text-zinc-500 italic">Evidence provided (see edit form)</p>
-                      )}
-                      <p class="text-xs text-zinc-500">
-                        Created: {new Date(step.createdAt).toLocaleDateString()}
-                      </p>
-                    </div>
-                    <div class="flex shrink-0 gap-1.5">
-                      <button
-                        type="button"
-                        class={buttonSmallPrimaryClasses}
-                        title="Edit Step"
-                        onclick={`document.getElementById('edit-verification-step-${step.id}')?.classList.toggle('hidden')`}
-                      >
-                        <Icon name="ri:pencil-line" class="size-4" />
-                      </button>
-                      <form method="POST" action={actions.admin.verificationStep.delete} class="inline">
-                        <input type="hidden" name="id" value={step.id} />
-                        <button type="submit" class={buttonSmallDestructiveClasses} title="Delete Step">
-                          <Icon name="ri:delete-bin-line" class="size-4" />
-                        </button>
-                      </form>
-                    </div>
-                  </div>
-
-                  {/* Edit Verification Step Form - Hidden by default */}
-                  <form
-                    id={`edit-verification-step-${step.id}`}
-                    method="POST"
-                    action={actions.admin.verificationStep.update}
-                    class="mt-3 hidden space-y-3 rounded-md border border-zinc-600 bg-zinc-700/40 p-3"
-                  >
-                    <input type="hidden" name="id" value={step.id} />
-                    <div>
-                      <label for={`stepTitleEdit-${step.id}`} class={labelBaseClasses}>
-                        Title
-                      </label>
-                      <input
-                        type="text"
-                        name="title"
-                        id={`stepTitleEdit-${step.id}`}
-                        value={step.title}
-                        class={inputBaseClasses}
-                      />
-                      {verificationStepUpdateInputErrors.title && (
-                        <p class={errorTextClasses}>{verificationStepUpdateInputErrors.title.join(', ')}</p>
-                      )}
-                    </div>
-                    <div>
-                      <label for={`stepDescriptionEdit-${step.id}`} class={labelBaseClasses}>
-                        Description (Max 200 chars)
-                      </label>
-                      <textarea
-                        name="description"
-                        id={`stepDescriptionEdit-${step.id}`}
-                        rows={2}
-                        class={inputBaseClasses}
-                        set:text={step.description}
-                      />
-                      {verificationStepUpdateInputErrors.description && (
-                        <p class={errorTextClasses}>
-                          {verificationStepUpdateInputErrors.description.join(', ')}
-                        </p>
-                      )}
-                    </div>
-                    <div>
-                      <label for={`stepEvidenceMdEdit-${step.id}`} class={labelBaseClasses}>
-                        Evidence (Markdown)
-                      </label>
-                      <textarea
-                        name="evidenceMd"
-                        id={`stepEvidenceMdEdit-${step.id}`}
-                        rows={4}
-                        class={inputBaseClasses}
-                        set:text={step.evidenceMd}
-                      />
-                      {verificationStepUpdateInputErrors.evidenceMd && (
-                        <p class={errorTextClasses}>
-                          {verificationStepUpdateInputErrors.evidenceMd.join(', ')}
-                        </p>
-                      )}
-                    </div>
-                    <div>
-                      <label for={`stepStatusEdit-${step.id}`} class={labelBaseClasses}>
-                        Status
-                      </label>
-                      <select name="status" id={`stepStatusEdit-${step.id}`} class={inputBaseClasses}>
-                        {Object.values(VerificationStepStatus).map((status) => (
-                          <option value={status} selected={step.status === status}>
-                            {status.replace('_', ' ')}
-                          </option>
-                        ))}
-                      </select>
-                      {verificationStepUpdateInputErrors.status && (
-                        <p class={errorTextClasses}>{verificationStepUpdateInputErrors.status.join(', ')}</p>
-                      )}
-                    </div>
-                    <div class="mt-2 flex justify-end gap-2">
-                      <button
-                        type="button"
-                        class={buttonSmallSecondaryClasses}
-                        onclick={`document.getElementById('edit-verification-step-${step.id}')?.classList.add('hidden')`}
-                      >
-                        Cancel
-                      </button>
-                      <button type="submit" class={buttonSmallPrimaryClasses}>
-                        Update Step
-                      </button>
-                    </div>
-                  </form>
-                </div>
-              ))}
-            </div>
-          )
-        }
-
-        <details class="group" open={!service.verificationSteps.length}>
-          <summary class="cursor-pointer list-none">
-            <h3
-              class="font-title inline-flex items-center gap-1 text-lg font-medium text-zinc-200 hover:text-sky-400"
-            >
-              <Icon
-                name="ri:arrow-right-s-line"
-                class="size-5 transition-transform duration-150 group-open:rotate-90"
-              />
-              Add New Verification Step
-            </h3>
-          </summary>
-          <form
-            method="POST"
-            action={actions.admin.verificationStep.create}
-            class="mt-3 space-y-4 border-t border-zinc-700 pt-4"
-          >
-            <input type="hidden" name="serviceId" value={service.id} />
-            <div>
-              <label for="newStepTitle" class={labelBaseClasses}>Title</label>
-              <input type="text" name="title" id="newStepTitle" required class={inputBaseClasses} />
-              {
-                verificationStepInputErrors.title && (
-                  <p class={errorTextClasses}>{verificationStepInputErrors.title.join(', ')}</p>
-                )
-              }
-            </div>
-            <div>
-              <label for="newStepDescription" class={labelBaseClasses}>Description (Max 200 chars)</label>
-              <textarea
-                name="description"
-                id="newStepDescription"
-                required
-                rows={3}
-                class={inputBaseClasses}
-                set:text=""
-              />
-              {
-                verificationStepInputErrors.description && (
-                  <p class={errorTextClasses}>{verificationStepInputErrors.description.join(', ')}</p>
-                )
-              }
-            </div>
-            <div>
-              <label for="newStepEvidenceMd" class={labelBaseClasses}>Evidence (Markdown)</label>
-              <textarea
-                name="evidenceMd"
-                id="newStepEvidenceMd"
-                rows={5}
-                class={inputBaseClasses}
-                set:text=""
-              />
-              {
-                verificationStepInputErrors.evidenceMd && (
-                  <p class={errorTextClasses}>{verificationStepInputErrors.evidenceMd.join(', ')}</p>
-                )
-              }
-            </div>
-            <div>
-              <label for="newStepStatus" class={labelBaseClasses}>Status</label>
-              <select name="status" id="newStepStatus" required class={inputBaseClasses}>
-                {
-                  Object.values(VerificationStepStatus).map((status) => (
-                    <option value={status}>{status.replace('_', ' ')}</option>
-                  ))
-                }
-              </select>
-              {
-                verificationStepInputErrors.status && (
-                  <p class={errorTextClasses}>{verificationStepInputErrors.status.join(', ')}</p>
-                )
-              }
-            </div>
-            <button type="submit" class={buttonPrimaryClasses}>Add Verification Step</button>
-          </form>
-        </details>
-      </div>
-    </section>
-
-    <section>
-      <h2 class="font-title mb-4 border-b border-zinc-700 pb-2 text-xl font-semibold text-zinc-100">
-        Verification Requests
-        <span class="ml-2 rounded-full bg-sky-500/20 px-2.5 py-0.5 text-sm font-medium text-sky-300">
-          {service._count.verificationRequests}
-        </span>
-      </h2>
-      <div
-        class="overflow-hidden rounded-lg border border-zinc-700/80 bg-zinc-800/60 p-0 shadow-lg backdrop-blur-sm"
-      >
-        {
-          service.verificationRequests.length > 0 ? (
-            <div class="overflow-x-auto">
-              <table class="w-full text-sm">
-                <thead class="bg-zinc-700/50">
-                  <tr class="text-left">
-                    <th class="p-3 font-semibold text-zinc-300">User</th>
-                    <th class="p-3 font-semibold text-zinc-300">Requested At</th>
-                  </tr>
-                </thead>
-                <tbody class="divide-y divide-zinc-700/80">
-                  {service.verificationRequests.map((request) => (
-                    <tr class="transition-colors hover:bg-zinc-700/40">
-                      <td class="p-3 text-zinc-300">
-                        <UserBadge user={request.user} size="md" />
-                      </td>
-                      <td class="p-3 text-zinc-400">{new Date(request.createdAt).toLocaleString()}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
+          service.events.length === 0 ? (
+            <p class="border-night-600 bg-night-800 text-day-300 rounded-xl border p-6 text-center">
+              No events yet.
+            </p>
           ) : (
-            <p class="p-6 text-center text-zinc-400">No verification requests yet.</p>
-          )
-        }
-      </div>
-    </section>
-
-    <!-- Contact Methods Section -->
-    <section>
-      <h2 class="font-title mb-4 border-b border-zinc-700 pb-2 text-xl font-semibold text-zinc-100">
-        Contact Methods
-      </h2>
-      <div
-        class="space-y-6 rounded-lg border border-zinc-700/80 bg-zinc-800/60 p-6 shadow-lg backdrop-blur-sm"
-      >
-        <!-- Existing Contact Methods List -->
-        {
-          service.contactMethods.length > 0 && (
-            <div class="space-y-3">
-              <h3 class="font-title mb-2 text-lg font-medium text-zinc-200">Existing Contact Methods</h3>
-              {service.contactMethods.map((method) => {
-                const contactMethodInfo = formatContactMethod(method.value)
+            <div class="space-y-2">
+              {service.events.map((event) => {
+                const eventTypeInfo = getEventTypeInfo(event.type)
                 return (
-                  <div class="rounded-md border border-zinc-700 bg-zinc-700/30 p-3">
+                  <div class="border-night-600 bg-night-800 rounded-md border px-3 py-2">
                     <div class="flex items-start justify-between gap-3">
                       <div class="flex-grow space-y-1">
                         <div class="flex flex-wrap items-center gap-2">
-                          <Icon name={contactMethodInfo.icon} class="size-4 text-zinc-300" />
-                          <span class="text-md font-semibold text-zinc-100">{contactMethodInfo.label}</span>
+                          <span class="text-md text-day-100 font-semibold">{event.title}</span>
+                          <BadgeSmall
+                            text={eventTypeInfo.label}
+                            variant="faded"
+                            color={eventTypeInfo.color}
+                            icon={eventTypeInfo.icon}
+                          />
+                          {!event.visible && (
+                            <BadgeSmall text="Hidden" variant="faded" color="gray" icon="ri:eye-off-line" />
+                          )}
                         </div>
-                        <p class="text-sm text-pretty text-zinc-400">
-                          {method.label ?? contactMethodInfo.formattedValue}{' '}
-                          <span class="text-zinc-500">({method.value})</span>
+                        <p class="text-day-400 text-sm text-pretty">{event.content}</p>
+                        <div class="text-day-500 flex flex-wrap items-center gap-3 text-xs">
+                          <span>Started: {new Date(event.startedAt).toLocaleDateString()}</span>
+                          <span>
+                            Ended:
+                            {event.endedAt
+                              ? event.endedAt === event.startedAt
+                                ? '1-time event'
+                                : new Date(event.endedAt).toLocaleDateString()
+                              : 'Ongoing'}
+                          </span>
+                          {event.source && <span>Source: {event.source}</span>}
+                        </div>
+                      </div>
+                      <div class="flex shrink-0 gap-1.5">
+                        <form method="POST" action={actions.admin.event.toggle} class="contents">
+                          <input type="hidden" name="eventId" value={event.id} />
+                          <Tooltip text={event.visible ? 'Hide Event' : 'Show Event'}>
+                            <Button
+                              type="submit"
+                              variant="faded"
+                              size="sm"
+                              icon={event.visible ? 'ri:eye-off-line' : 'ri:eye-line'}
+                            />
+                          </Tooltip>
+                        </form>
+                        <Button
+                          type="button"
+                          variant="faded"
+                          size="sm"
+                          icon="ri:pencil-line"
+                          onclick={`document.getElementById('edit-event-${event.id}')?.classList.toggle('hidden')`}
+                        />
+                        <form method="POST" action={actions.admin.event.delete} class="contents">
+                          <input type="hidden" name="eventId" value={event.id} />
+                          <Button type="submit" size="sm" variant="faded" icon="ri:delete-bin-line" />
+                        </form>
+                      </div>
+                    </div>
+                    {/* Edit Event Form - Hidden by default */}
+                    <form
+                      id={`edit-event-${event.id}`}
+                      method="POST"
+                      action={actions.admin.event.update}
+                      class="border-night-500 bg-night-700 mt-3 hidden space-y-3 rounded-md border p-3"
+                    >
+                      <input type="hidden" name="eventId" value={event.id} />
+
+                      <InputText
+                        label="Title"
+                        name="title"
+                        inputProps={{ required: true, value: event.title }}
+                        error={eventUpdateInputErrors.title}
+                      />
+
+                      <InputTextArea
+                        label="Content"
+                        name="content"
+                        inputProps={{ required: true, rows: 3 }}
+                        value={event.content}
+                        error={eventUpdateInputErrors.content}
+                      />
+
+                      <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+                        <InputText
+                          label="Started At"
+                          name="startedAt"
+                          inputProps={{
+                            type: 'date',
+                            required: true,
+                            value: new Date(event.startedAt).toISOString().split('T')[0],
+                          }}
+                          error={eventUpdateInputErrors.startedAt}
+                        />
+
+                        <InputText
+                          label="Ended At"
+                          name="endedAt"
+                          inputProps={{
+                            value: event.endedAt ? new Date(event.endedAt).toISOString().split('T')[0] : '',
+                          }}
+                          error={eventUpdateInputErrors.endedAt}
+                          description="- Empty: Event is ongoing.\n- Filled: Event with specific end date.\n- Same as start date: One-time event."
+                        />
+                      </div>
+
+                      <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+                        <InputText
+                          label="Source URL"
+                          name="source"
+                          inputProps={{ value: event.source }}
+                          error={eventUpdateInputErrors.source}
+                        />
+
+                        <InputSelect
+                          label="Type"
+                          name="type"
+                          options={eventTypes.map((type) => ({
+                            label: type.label,
+                            value: type.id,
+                          }))}
+                          selectProps={{ required: true, value: event.type }}
+                          error={eventUpdateInputErrors.type}
+                        />
+                      </div>
+
+                      <InputSubmitButton label="Update" icon="ri:save-line" hideCancel />
+                    </form>
+                  </div>
+                )
+              })}
+            </div>
+          )
+        }
+      </FormSubSection>
+
+      <FormSubSection title="Add New Event">
+        <form method="POST" action={actions.admin.event.create} class="space-y-2">
+          <input type="hidden" name="serviceId" value={service.id} />
+
+          <InputText
+            label="Title"
+            name="title"
+            inputProps={{ required: true }}
+            error={eventInputErrors.title}
+          />
+
+          <InputTextArea
+            label="Content"
+            name="content"
+            inputProps={{ required: true, rows: 3 }}
+            error={eventInputErrors.content}
+          />
+
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <InputText
+              label="Started At"
+              name="startedAt"
+              inputProps={{
+                type: 'date',
+                required: true,
+                value: new Date().toISOString().split('T')[0],
+              }}
+              error={eventInputErrors.startedAt}
+            />
+
+            <InputText
+              label="Ended At"
+              name="endedAt"
+              inputProps={{
+                value: new Date().toISOString().split('T')[0],
+              }}
+              error={eventInputErrors.endedAt}
+              description="- Empty: Event is ongoing.\n- Filled: Event with specific end date.\n- Same as start date: One-time event."
+            />
+          </div>
+
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <InputText label="Source URL" name="source" error={eventInputErrors.source} />
+
+            <InputSelect
+              label="Type"
+              name="type"
+              options={eventTypes.map((type) => ({
+                label: type.label,
+                value: type.id,
+              }))}
+              selectProps={{ required: true }}
+              error={eventInputErrors.type}
+            />
+          </div>
+
+          <InputSubmitButton label="Add" icon="ri:add-line" hideCancel />
+        </form>
+      </FormSubSection>
+    </FormSection>
+
+    <FormSection title="Verification Steps">
+      <FormSubSection title="Existing Verification Steps">
+        {
+          service.verificationSteps.length === 0 ? (
+            <p class="border-night-600 bg-night-800 text-day-300 rounded-xl border p-6 text-center">
+              No verification steps yet.
+            </p>
+          ) : (
+            <div class="space-y-2">
+              {service.verificationSteps.map((step) => {
+                const verificationStepStatusInfo = getVerificationStepStatusInfo(step.status)
+                return (
+                  <div class="border-night-600 bg-night-800 rounded-md border p-3">
+                    <div class="flex items-start justify-between gap-3">
+                      <div class="flex-grow space-y-1">
+                        <div class="flex flex-wrap items-center gap-2">
+                          <span class="text-md text-day-100 font-semibold">{step.title}</span>
+                          <BadgeSmall
+                            text={verificationStepStatusInfo.label}
+                            variant="faded"
+                            color={verificationStepStatusInfo.color}
+                            icon={verificationStepStatusInfo.icon}
+                          />
+                        </div>
+                        <p class="text-day-400 text-sm text-pretty">{step.description}</p>
+                        {step.evidenceMd && (
+                          <p class="text-day-500 mt-1 text-xs italic">Evidence provided (see edit form)</p>
+                        )}
+                        <p class="text-day-500 text-xs">
+                          Created: {new Date(step.createdAt).toLocaleDateString()}
                         </p>
                       </div>
                       <div class="flex shrink-0 gap-1.5">
-                        <button
+                        <Button
                           type="button"
-                          class={buttonSmallPrimaryClasses}
-                          title="Edit Contact Method"
+                          size="sm"
+                          variant="faded"
+                          icon="ri:pencil-line"
+                          onclick={`document.getElementById('edit-verification-step-${step.id}')?.classList.toggle('hidden')`}
+                        />
+                        <form method="POST" action={actions.admin.verificationStep.delete} class="inline">
+                          <input type="hidden" name="id" value={step.id} />
+                          <Button type="submit" size="sm" variant="faded" icon="ri:delete-bin-line" />
+                        </form>
+                      </div>
+                    </div>
+
+                    {/* Edit Verification Step Form - Hidden by default */}
+                    <form
+                      id={`edit-verification-step-${step.id}`}
+                      method="POST"
+                      action={actions.admin.verificationStep.update}
+                      class="border-night-500 bg-night-700 mt-3 hidden space-y-3 rounded-md border p-3"
+                    >
+                      <input type="hidden" name="id" value={step.id} />
+
+                      <InputText
+                        label="Title"
+                        name="title"
+                        inputProps={{ value: step.title }}
+                        error={verificationStepUpdateInputErrors.title}
+                      />
+
+                      <InputTextArea
+                        label="Description (Max 200 chars)"
+                        name="description"
+                        inputProps={{ rows: 2 }}
+                        value={step.description}
+                        error={verificationStepUpdateInputErrors.description}
+                      />
+
+                      <InputTextArea
+                        label="Evidence"
+                        description="Markdown supported"
+                        name="evidenceMd"
+                        inputProps={{ rows: 4 }}
+                        value={step.evidenceMd}
+                        error={verificationStepUpdateInputErrors.evidenceMd}
+                      />
+
+                      <InputSelect
+                        label="Status"
+                        name="status"
+                        options={verificationStatuses.map((status) => ({
+                          label: status.label,
+                          value: status.value,
+                        }))}
+                        selectProps={{ value: step.status }}
+                        error={verificationStepUpdateInputErrors.status}
+                      />
+
+                      <InputSubmitButton label="Update" icon="ri:save-line" hideCancel />
+                    </form>
+                  </div>
+                )
+              })}
+            </div>
+          )
+        }
+      </FormSubSection>
+
+      <FormSubSection title="Add New Verification Step">
+        <form method="POST" action={actions.admin.verificationStep.create} class="space-y-2">
+          <input type="hidden" name="serviceId" value={service.id} />
+
+          <InputText
+            label="Title"
+            name="title"
+            inputProps={{ required: true }}
+            error={verificationStepInputErrors.title}
+          />
+
+          <InputTextArea
+            label="Description"
+            description="Max 200 chars"
+            name="description"
+            inputProps={{ required: true, rows: 3 }}
+            error={verificationStepInputErrors.description}
+          />
+
+          <InputTextArea
+            label="Evidence"
+            description="Markdown supported"
+            name="evidenceMd"
+            inputProps={{ rows: 5 }}
+            error={verificationStepInputErrors.evidenceMd}
+          />
+
+          <InputSelect
+            label="Status"
+            name="status"
+            options={verificationStatuses.map((status) => ({
+              label: status.label,
+              value: status.value,
+            }))}
+            selectProps={{ required: true }}
+            error={verificationStepInputErrors.status}
+          />
+
+          <InputSubmitButton label="Add" icon="ri:add-line" hideCancel />
+        </form>
+      </FormSubSection>
+    </FormSection>
+
+    <FormSection
+      title="Verification Requests"
+      subtitle={`Total: ${service._count.verificationRequests} ${pluralize('request', service._count.verificationRequests)}`}
+    >
+      {
+        service.verificationRequests.length > 0 ? (
+          <div class="bg-night-800 border-night-500 overflow-x-auto rounded-md border">
+            <table class="w-full text-sm">
+              <thead class="bg-night-600">
+                <tr class="text-left">
+                  <th class="text-day-300 p-3 font-semibold">User</th>
+                  <th class="text-day-300 p-3 font-semibold">Requested</th>
+                </tr>
+              </thead>
+              <tbody class="divide-night-500 divide-y">
+                {service.verificationRequests.map((request) => (
+                  <tr class="hover:bg-night-700 transition-colors">
+                    <td class="text-day-300 p-3">
+                      <UserBadge user={request.user} size="md" />
+                    </td>
+                    <td class="text-day-400 p-3">
+                      <TimeFormatted date={request.createdAt} hourPrecision />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <p class="border-night-600 bg-night-800 text-day-300 rounded-xl border p-6 text-center">
+            No verification requests yet.
+          </p>
+        )
+      }
+    </FormSection>
+
+    <FormSection title="Contact Methods">
+      <FormSubSection title="Existing Contact Methods">
+        {
+          service.contactMethods.length === 0 ? (
+            <p class="border-night-600 bg-night-800 text-day-300 rounded-xl border p-6 text-center">
+              No contact methods yet.
+            </p>
+          ) : (
+            <div class="space-y-3">
+              {service.contactMethods.map((method) => {
+                const contactMethodInfo = formatContactMethod(method.value)
+                return (
+                  <div class="border-night-600 bg-night-800 rounded-md border p-3">
+                    <div class="flex items-start justify-between gap-3">
+                      <div class="flex-grow space-y-1">
+                        <div class="flex flex-wrap items-center gap-2">
+                          <Icon name={contactMethodInfo.icon} class="text-day-300 size-4" />
+                          <span class="text-md text-day-100 font-semibold">
+                            {method.label ?? contactMethodInfo.formattedValue}
+                          </span>
+                        </div>
+                        <p class="text-day-400 text-sm text-pretty">{method.value}</p>
+                      </div>
+                      <div class="flex shrink-0 gap-1.5">
+                        <Button
+                          type="button"
+                          variant="faded"
+                          size="sm"
+                          icon="ri:pencil-line"
                           onclick={`document.getElementById('edit-contact-method-${method.id}')?.classList.toggle('hidden')`}
+                        />
+                        <form
+                          method="POST"
+                          action={actions.admin.service.deleteContactMethod}
+                          class="contents"
                         >
-                          <Icon name="ri:pencil-line" class="size-4" />
-                        </button>
-                        <form method="POST" action={actions.admin.service.deleteContactMethod} class="inline">
                           <input type="hidden" name="id" value={method.id} />
-                          <button
-                            type="submit"
-                            class={buttonSmallDestructiveClasses}
-                            title="Delete Contact Method"
-                          >
-                            <Icon name="ri:delete-bin-line" class="size-4" />
-                          </button>
+                          <Button type="submit" size="sm" variant="faded" icon="ri:delete-bin-line" />
                         </form>
                       </div>
                     </div>
@@ -1049,49 +859,30 @@ const errorTextClasses = 'mt-1 text-xs text-red-400'
                       id={`edit-contact-method-${method.id}`}
                       method="POST"
                       action={actions.admin.service.updateContactMethod}
-                      class="mt-3 hidden space-y-3 rounded-md border border-zinc-600 bg-zinc-700/40 p-3"
+                      class="border-night-500 bg-night-700 mt-3 hidden space-y-3 rounded-md border p-3"
                     >
                       <input type="hidden" name="id" value={method.id} />
                       <input type="hidden" name="serviceId" value={service.id} />
-                      <div>
-                        <label for={`contactLabel-${method.id}`} class={labelBaseClasses}>
-                          Override Label (Optional)
-                        </label>
-                        <input
-                          type="text"
-                          name="label"
-                          id={`contactLabel-${method.id}`}
-                          value={method.label}
-                          class={inputBaseClasses}
-                          placeholder={contactMethodInfo.formattedValue}
-                        />
-                      </div>
-                      <div>
-                        <label for={`contactValue-${method.id}`} class={labelBaseClasses}>
-                          Value (with protocol)
-                        </label>
-                        <input
-                          type="text"
-                          name="value"
-                          id={`contactValue-${method.id}`}
-                          value={method.value}
-                          placeholder="e.g., mailto:contact@example.com or https://t.me/example"
-                          class={inputBaseClasses}
-                        />
-                      </div>
 
-                      <div class="mt-2 flex justify-end gap-2">
-                        <button
-                          type="button"
-                          class={buttonSmallSecondaryClasses}
-                          onclick={`document.getElementById('edit-contact-method-${method.id}')?.classList.add('hidden')`}
-                        >
-                          Cancel
-                        </button>
-                        <button type="submit" class={buttonSmallPrimaryClasses}>
-                          Update Contact Method
-                        </button>
-                      </div>
+                      <InputText
+                        label="Override Label (Optional)"
+                        name="label"
+                        inputProps={{
+                          value: method.label,
+                          placeholder: contactMethodInfo.formattedValue,
+                        }}
+                      />
+
+                      <InputText
+                        label="Value (with protocol)"
+                        name="value"
+                        inputProps={{
+                          value: method.value,
+                          placeholder: 'e.g., mailto:contact@example.com or https://t.me/example',
+                        }}
+                      />
+
+                      <InputSubmitButton label="Update" icon="ri:save-line" hideCancel />
                     </form>
                   </div>
                 )
@@ -1099,45 +890,27 @@ const errorTextClasses = 'mt-1 text-xs text-red-400'
             </div>
           )
         }
+      </FormSubSection>
 
-        <details class="group" open={!service.contactMethods.length}>
-          <summary class="cursor-pointer list-none">
-            <h3
-              class="font-title inline-flex items-center gap-1 text-lg font-medium text-zinc-200 hover:text-sky-400"
-            >
-              <Icon
-                name="ri:arrow-right-s-line"
-                class="size-5 transition-transform duration-150 group-open:rotate-90"
-              />
-              Add New Contact Method
-            </h3>
-          </summary>
-          <form
-            method="POST"
-            action={actions.admin.service.createContactMethod}
-            class="mt-3 space-y-4 border-t border-zinc-700 pt-4"
-          >
-            <input type="hidden" name="serviceId" value={service.id} />
-            <div>
-              <label for="newContactLabel" class={labelBaseClasses}>Override Label (Optional)</label>
-              <input type="text" name="label" id="newContactLabel" class={inputBaseClasses} />
-            </div>
-            <div>
-              <label for="newContactValue" class={labelBaseClasses}>Value (with protocol)</label>
-              <input
-                type="text"
-                name="value"
-                id="newContactValue"
-                required
-                placeholder="e.g., mailto:contact@example.com or https://t.me/example"
-                class={inputBaseClasses}
-              />
-            </div>
+      <FormSubSection title="Add New Contact Method">
+        <form method="POST" action={actions.admin.service.createContactMethod} class="space-y-2">
+          <input type="hidden" name="serviceId" value={service.id} />
 
-            <button type="submit" class={buttonPrimaryClasses}>Add Contact Method</button>
-          </form>
-        </details>
-      </div>
-    </section>
-  </div></BaseLayout
->
+          <InputText label="Override Label" name="label" />
+
+          <InputText
+            label="Value"
+            description="With protocol (e.g., `mailto:contact@example.com` or `https://t.me/example`)"
+            name="value"
+            inputProps={{
+              required: true,
+              placeholder: 'mailto:contact@example.com',
+            }}
+          />
+
+          <InputSubmitButton label="Add" icon="ri:add-line" hideCancel />
+        </form>
+      </FormSubSection>
+    </FormSection>
+  </div>
+</BaseLayout>
diff --git a/web/src/pages/admin/users/[username].astro b/web/src/pages/admin/users/[username].astro
index 680b1ea..2b48cc4 100644
--- a/web/src/pages/admin/users/[username].astro
+++ b/web/src/pages/admin/users/[username].astro
@@ -4,6 +4,7 @@ import { actions, isInputError } from 'astro:actions'
 
 import BadgeSmall from '../../../components/BadgeSmall.astro'
 import Button from '../../../components/Button.astro'
+import FormSection from '../../../components/FormSection.astro'
 import InputCardGroup from '../../../components/InputCardGroup.astro'
 import InputImageFile from '../../../components/InputImageFile.astro'
 import InputSelect from '../../../components/InputSelect.astro'
@@ -171,90 +172,88 @@ if (!user) return Astro.rewrite('/404')
     </div>
   </div>
 
-  <form
-    method="POST"
-    action={actions.admin.user.update}
-    enctype="multipart/form-data"
-    class="space-y-2"
-    data-astro-reload
-  >
-    <h2 class="font-title text-center text-3xl leading-none font-bold">Edit profile</h2>
+  <FormSection title="Edit profile">
+    <form
+      method="POST"
+      action={actions.admin.user.update}
+      enctype="multipart/form-data"
+      class="space-y-2"
+      data-astro-reload
+    >
+      <input type="hidden" name="id" value={user.id} />
 
-    <input type="hidden" name="id" value={user.id} />
+      <div class="grid grid-cols-2 gap-x-4 gap-y-2">
+        <InputText
+          label="Name"
+          name="name"
+          error={updateInputErrors.name}
+          inputProps={{ value: user.name, required: true }}
+        />
 
-    <div class="grid grid-cols-2 gap-x-4 gap-y-2">
-      <InputText
-        label="Name"
-        name="name"
-        error={updateInputErrors.name}
-        inputProps={{ value: user.name, required: true }}
+        <InputText
+          label="Display Name"
+          name="displayName"
+          error={updateInputErrors.displayName}
+          inputProps={{ value: user.displayName ?? '', maxlength: 50 }}
+        />
+
+        <InputText
+          label="Link"
+          name="link"
+          error={updateInputErrors.link}
+          inputProps={{ value: user.link ?? '', type: 'url' }}
+        />
+
+        <InputText
+          label="Verified Link"
+          name="verifiedLink"
+          error={updateInputErrors.verifiedLink}
+          inputProps={{ value: user.verifiedLink, type: 'url' }}
+        />
+      </div>
+
+      <InputImageFile
+        label="Profile Picture Upload"
+        name="pictureFile"
+        value={user.picture}
+        error={updateInputErrors.pictureFile}
+        square
+        description="Upload a square image for best results. Supported formats: JPG, PNG, WebP, AVIF. Max size: 5MB."
       />
 
-      <InputText
-        label="Display Name"
-        name="displayName"
-        error={updateInputErrors.displayName}
-        inputProps={{ value: user.displayName ?? '', maxlength: 50 }}
+      <InputCardGroup
+        name="type"
+        label="Type"
+        options={[
+          { label: 'Admin', value: 'admin', icon: 'ri:shield-star-fill' },
+          { label: 'Moderator', value: 'moderator', icon: 'ri:graduation-cap-fill' },
+          { label: 'Spammer', value: 'spammer', icon: 'ri:alert-fill' },
+          {
+            label: 'Verified',
+            value: 'verified',
+            icon: 'ri:verified-badge-fill',
+            disabled: true,
+            noTransitionPersist: true,
+          },
+        ]}
+        selectedValue={[
+          user.admin ? 'admin' : null,
+          user.verified ? 'verified' : null,
+          user.moderator ? 'moderator' : null,
+          user.spammer ? 'spammer' : null,
+        ].filter((v) => v !== null)}
+        required
+        cardSize="sm"
+        iconSize="sm"
+        multiple
+        error={updateInputErrors.type}
       />
 
-      <InputText
-        label="Link"
-        name="link"
-        error={updateInputErrors.link}
-        inputProps={{ value: user.link ?? '', type: 'url' }}
-      />
-
-      <InputText
-        label="Verified Link"
-        name="verifiedLink"
-        error={updateInputErrors.verifiedLink}
-        inputProps={{ value: user.verifiedLink, type: 'url' }}
-      />
-    </div>
-
-    <InputImageFile
-      label="Profile Picture Upload"
-      name="pictureFile"
-      value={user.picture}
-      error={updateInputErrors.pictureFile}
-      square
-      description="Upload a square image for best results. Supported formats: JPG, PNG, WebP, AVIF. Max size: 5MB."
-    />
-
-    <InputCardGroup
-      name="type"
-      label="Type"
-      options={[
-        { label: 'Admin', value: 'admin', icon: 'ri:shield-star-fill' },
-        { label: 'Moderator', value: 'moderator', icon: 'ri:graduation-cap-fill' },
-        { label: 'Spammer', value: 'spammer', icon: 'ri:alert-fill' },
-        {
-          label: 'Verified',
-          value: 'verified',
-          icon: 'ri:verified-badge-fill',
-          disabled: true,
-          noTransitionPersist: true,
-        },
-      ]}
-      selectedValue={[
-        user.admin ? 'admin' : null,
-        user.verified ? 'verified' : null,
-        user.moderator ? 'moderator' : null,
-        user.spammer ? 'spammer' : null,
-      ].filter((v) => v !== null)}
-      required
-      cardSize="sm"
-      iconSize="sm"
-      multiple
-      error={updateInputErrors.type}
-    />
-
-    <InputSubmitButton label="Save" icon="ri:save-line" hideCancel />
-  </form>
-
-  <section class="space-y-2">
-    <h2 class="font-title text-center text-3xl leading-none font-bold">Internal Notes</h2>
+      <InputSubmitButton label="Save" icon="ri:save-line" hideCancel />
+    </form>
+  </FormSection>
 
+  <FormSection title="Internal Notes">
     {
       user.internalNotes.length === 0 ? (
         <p class="text-day-300 text-center">No internal notes yet.</p>
@@ -294,7 +293,7 @@ if (!user) return Astro.rewrite('/404')
                   <form
                     method="POST"
                     action={actions.admin.user.internalNotes.delete}
-                    class="contents"
+                    class="space-y-2"
                     data-astro-reload
                   >
                     <input type="hidden" name="noteId" value={note.id} />
@@ -347,11 +346,9 @@ if (!user) return Astro.rewrite('/404')
       />
       <InputSubmitButton label="Add" icon="ri:add-line" hideCancel />
     </form>
-  </section>
-
-  <section class="space-y-2">
-    <h2 class="font-title text-center text-3xl leading-none font-bold">Service Affiliations</h2>
+  </FormSection>
 
+  <FormSection title="Service Affiliations">
     {
       user.serviceAffiliations.length === 0 ? (
         <p class="text-day-200 text-center">No service affiliations yet.</p>
@@ -380,7 +377,7 @@ if (!user) return Astro.rewrite('/404')
                   method="POST"
                   action={actions.admin.user.serviceAffiliations.remove}
                   data-astro-reload
-                  class="contents"
+                  class="space-y-2"
                 >
                   <input type="hidden" name="id" value={affiliation.id} />
                   <button type="submit" class="text-day-300 transition-colors hover:text-red-400">
@@ -429,29 +426,29 @@ if (!user) return Astro.rewrite('/404')
 
       <InputSubmitButton label="Add Affiliation" icon="ri:link" hideCancel />
     </form>
-  </section>
+  </FormSection>
 
-  <form method="POST" action={actions.admin.user.karmaTransactions.add} data-astro-reload class="space-y-2">
-    <h2 class="font-title text-center text-3xl leading-none font-bold">Grant/Remove Karma</h2>
+  <FormSection title="Grant/Remove Karma">
+    <form method="POST" action={actions.admin.user.karmaTransactions.add} data-astro-reload class="space-y-2">
+      <input type="hidden" name="userId" value={user.id} />
 
-    <input type="hidden" name="userId" value={user.id} />
+      <InputText
+        label="Points"
+        name="points"
+        error={addKarmaTransactionResult?.error?.message}
+        inputProps={{ type: 'number', required: true }}
+      />
 
-    <InputText
-      label="Points"
-      name="points"
-      error={addKarmaTransactionResult?.error?.message}
-      inputProps={{ type: 'number', required: true }}
-    />
+      <InputTextArea
+        label="Description"
+        name="description"
+        error={addKarmaTransactionResult?.error?.message}
+        inputProps={{ required: true }}
+      />
 
-    <InputTextArea
-      label="Description"
-      name="description"
-      error={addKarmaTransactionResult?.error?.message}
-      inputProps={{ required: true }}
-    />
-
-    <InputSubmitButton label="Submit" icon="ri:add-line" hideCancel />
-  </form>
+      <InputSubmitButton label="Submit" icon="ri:add-line" hideCancel />
+    </form>
+  </FormSection>
 </BaseLayout>
 
 <script>