Release 2025-05-25-irZj

Release 2025-05-25-ELtG
Release 2025-05-23-xzNR
2025-05-25 11:21:35 +00:00 · 2025-05-25 10:07:02 +00:00 · 2025-05-23 21:50:03 +00:00 · 2025-05-23 18:23:14 +00:00 · 2025-05-23 14:56:00 +00:00 · 2025-05-23 12:25:07 +00:00
63 changed files with 2266 additions and 1793 deletions
--- a/.cursor/rules/astro-actions-api.mdc
+++ b/.cursor/rules/astro-actions-api.mdc
@@ -0,0 +1,20 @@
+---
+description: 
+globs: web/src/actions,web/src/pages
+alwaysApply: false
+---
+- In the astro actions return, generaly don't return anythig unless the caller doesn't needs it. Specially don't `return { success: true }`, or similar. If needed, just return an object with the newly created/edited objects (Like: `return { newService: service }` or don't return anything if not needed).
+- When importing actions, use `import { actions } from 'astro:actions'`. Example:
+
+  ```ts
+  import { actions } from 'astro:actions'; /* CORRECT */
+  import { server } from '~/actions'; /* WRONG!!!! DON'T DO THIS */
+  import { adminAttributeActions } from '~/actions/admin/attribute.ts'; /* WRONG!!!! DON'T DO THIS */
+
+  const result = Astro.getActionResult(actions.admin.attribute.create);
+  ```
+- When adding actions, don't create and export a new variable called actions. Notice that Astro already provides that variable from `import { actions } from 'astro:actions'`. So just add the new actions to the `server` variable in `web/src/actions/index.ts` and that's it.
+- When throwing errors in Astro actions use ActionError.
+- Always use Astro actions instead of with API routes and instead of `if (Astro.request.method === "POST")`.
+- Generally call the actions using html forms. But if you need to, you can call them from the server-side code with Astro.callAction(), or [callActionWithUrlParams.ts](mdc:web/src/lib/callActionWithUrlParams.ts).
+- The admin actions go into a separate folder.
--- a/.cursor/rules/client-side-javascript.mdc
+++ b/.cursor/rules/client-side-javascript.mdc
@@ -0,0 +1,26 @@
+---
+description: 
+globs: web/src/pages,web/src/components
+alwaysApply: false
+---
+- Avoid sending JavaScript to the client. The JS send should always be optional.
+- Avoid using client-side JavaScript as much as possible. And if it has to be done, make it optional.
+- To avoid using JavaScript, you can use HTML and CSS features such as hidden checkboxes, deltails tag, etc.
+- The admin pages can use client-side JavaScript.
+- When adding clientside JS do it with HTMX.
+- When adding HTMX, the layout component BaseLayout [BaseLayout.astro](mdc:web/src/layouts/BaseLayout.astro) [BaseHead.astro](mdc:web/src/components/BaseHead.astro) accepts a prop htmx to load it in that page. No need to use a cdn.
+- When adding client scripts remember to use the event `astro:page-load`, `querySelectorAll<Type>` and add an explanation comment, like so:
+
+  ```tsx
+  <script>
+    ////////////////////////////////////////////////////////////
+    // Optional script for __________.                        //
+    // Desctiption goes here...                               //
+    ////////////////////////////////////////////////////////////
+    document.addEventListener('astro:page-load', () => {
+      document.querySelectorAll<HTMLDivElement>('[data-my-div]').forEach((myDiv) => {
+        // Do something
+      })
+    })
+  </script>
+  ```
--- a/.cursor/rules/code-style.mdc
+++ b/.cursor/rules/code-style.mdc
@@ -0,0 +1,8 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+- Instead of using the syntax`Array<T>`, use `T[]`.
+- Use TypeScript `type` over `interface`.
+- You should never add unnecessary or unuseful comments, if you add a comment it must provide some value to the code.
--- a/.cursor/rules/database.mdc
+++ b/.cursor/rules/database.mdc
@@ -0,0 +1,55 @@
+---
+description: Querying the database, editing the database, needing to import types from the database,  or anything related to the database or Prisma.
+globs: 
+alwaysApply: false
+---
+- We use Prisma as ORM.
+- Remember to check the prisma schema [schema.prisma](mdc:web/prisma/schema.prisma) when doing things related to the database.
+- After making changes to the [schema.prisma](mdc:web/prisma/schema.prisma) database or [faker.ts](mdc:web/scripts/faker.ts), you can run `npm run db-reset` (from `/web/` folder) [package.json](mdc:web/package.json).
+- Import the types from prisma instead of hardcoding duplicates. Specially use the Prisma.___GetPayload type and the enums. Like this:
+    ```ts
+    type Props = {
+      user: Prisma.UserGetPayload<{
+        select: {
+          name: true
+          displayName: true
+          picture: true
+        }
+      }>
+    }
+    ```
+
+- Only `select` the necessary fields, no more.
+- In prisma preffer `select` over `include` when making queries.
+- Avoid hardcoding enums from the database, import them from prisma.
+- To query the database from Astro pages, use Astro.locals.try() or Astro.locals.tryMany([]) [errorBanners.ts](mdc:web/src/lib/errorBanners.ts) [middleware.ts](mdc:web/src/middleware.ts) , like so:
+```ts
+const [user, services] = await Astro.locals.banners.tryMany([
+  [
+    'Error fetching user',
+    () =>
+      prisma.user.findUnique({
+        where: { id: userId },
+        select: {
+          name: true,
+          displayName: true,
+          picture: true,
+        },
+      }),
+  ],
+  [
+    'Error fetching services',
+    () =>
+      prisma.service.findMany({
+        where: { categories: { some: { id: categoryId } } },
+        select: {
+          id: true,
+          name: true,
+          slug: true,
+        },
+      }),
+    [] as [],
+  ],
+])
+```
+- When editing the database, remember to edit the db seeding file [faker.ts](mdc:web/scripts/faker.ts) to generate data for the new schema.
--- a/.cursor/rules/design-patterns.mdc
+++ b/.cursor/rules/design-patterns.mdc
@@ -0,0 +1,98 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+- The main libraries used are: Astro, TypeScript, Tailwind 4, HTMX, Prisma, npm, zod, lodash-es, date-fns, ts-toolbelt. Full list in: [package.json](mdc:web/package.json)
+- When creating constants or enums, use the `makeHelpersForOptions` function [makeHelpersForOptions.ts](mdc:web/src/lib/makeHelpersForOptions.ts) like in this example. Save the file in the `web/src/constants` folder (like [attributeTypes.ts](mdc:web/src/constants/attributeTypes.ts)). Note that it's not necessary to use all the options or export all the variables that the example has, just the ones you need.
+
+```ts
+import { makeHelpersForOptions } from '../lib/makeHelpersForOptions';
+import { transformCase } from '../lib/strings';
+
+import type { AttributeType } from '@prisma/client';
+
+type AttributeTypeInfo<T extends string | null | undefined = string> = {
+  value: T;
+  slug: string;
+  label: string;
+  icon: string;
+  order: number;
+  classNames: {
+    text: string;
+    icon: string;
+  };
+};
+
+export const {
+  dataArray: attributeTypes,
+  dataObject: attributeTypesById,
+  getFn: getAttributeTypeInfo,
+  getFnSlug: getAttributeTypeInfoBySlug,
+  zodEnumBySlug: attributeTypesZodEnumBySlug,
+  zodEnumById: attributeTypesZodEnumById,
+  keyToSlug: attributeTypeIdToSlug,
+  slugToKey: attributeTypeSlugToId,
+} = makeHelpersForOptions(
+  'value',
+  (value): AttributeTypeInfo<typeof value> => ({
+    value,
+    slug: value ? value.toLowerCase() : '',
+    label: value
+      ? transformCase(value.replace('_', ' '), 'title')
+      : String(value),
+    icon: 'ri:question-line',
+    order: Infinity,
+    classNames: {
+      text: 'text-current/60',
+      icon: 'text-current/60',
+    },
+  }),
+  [
+    {
+      value: 'BAD',
+      slug: 'bad',
+      label: 'Bad',
+      icon: 'ri:close-line',
+      order: 1,
+      classNames: {
+        text: 'text-red-200',
+        icon: 'text-red-400',
+      },
+    },
+    {
+      value: 'WARNING',
+      slug: 'warning',
+      label: 'Warning',
+      icon: 'ri:alert-line',
+      order: 2,
+      classNames: {
+        text: 'text-yellow-200',
+        icon: 'text-yellow-400',
+      },
+    },
+    {
+      value: 'GOOD',
+      slug: 'good',
+      label: 'Good',
+      icon: 'ri:check-line',
+      order: 3,
+      classNames: {
+        text: 'text-green-200',
+        icon: 'text-green-400',
+      },
+    },
+    {
+      value: 'INFO',
+      slug: 'info',
+      label: 'Info',
+      icon: 'ri:information-line',
+      order: 4,
+      classNames: {
+        text: 'text-blue-200',
+        icon: 'text-blue-400',
+      },
+    },
+  ] as const satisfies AttributeTypeInfo<AttributeType>[]
+);
+```
--- a/.cursor/rules/pages-and-components.mdc
+++ b/.cursor/rules/pages-and-components.mdc
@@ -0,0 +1,161 @@
+---
+description: 
+globs: web/src/pages,web/src/components
+alwaysApply: false
+---
+- On .astro files, don't forget to include the three dashes (`---`) at the begining of the file and where the server js ends. I noticed that sometimes you forget them.
+- For icons use the `Icon` component from `astro-icon/components`.
+- For icons use the Remix Icon library preferably.
+- Use the `MyPicture` component from `src/components/MyPicture.astro` for images.
+- When redirecting to login use the `makeLoginUrl` function from [redirectUrls.ts](mdc:web/src/lib/redirectUrls.ts) and if the link is for an `<a>` tag, use the `data-astro-reload` attribute. Similar for the logout and impersonate.
+- Don't use the `web/src/pages/admin` pages as example unless explicitly stated or you're creating/editing an admin page.
+- Checkout the @errorBanners.ts @middleware.ts @env.d.ts to see the avilable Astro.locals values.
+- Avoid duplicating similar html code. You can use jsx for loops, create variables in the constants folder, or create separate components.
+- When redirecting to the 404 not found page, use `Astro.rewrite` (Like this example: `if (!user) return Astro.rewrite('/404')`)
+- Include schema markup in the pages when it makes sense. Examples: [[slug].astro](mdc:web/src/pages/service/[slug].astro)
+- When creating forms, we already have utilities, components and established design patterns. Follow this example. (Note that this example may come slightly outdaded, but the overall philosophy doesn't change)
+  ```astro
+  ---
+  import { actions, isInputError } from 'astro:actions'
+  import { z } from 'astro:content'
+
+  import Captcha from '../../components/Captcha.astro'
+  import InputCardGroup from '../../components/InputCardGroup.astro'
+  import InputCheckboxGroup from '../../components/InputCheckboxGroup.astro'
+  import InputHoneypotTrap from '../../components/InputHoneypotTrap.astro'
+  import InputImageFile from '../../components/InputImageFile.astro'
+  import InputSubmitButton from '../../components/InputSubmitButton.astro'
+  import InputText from '../../components/InputText.astro'
+  import InputTextArea from '../../components/InputTextArea.astro'
+  import { kycLevels } from '../../constants/kycLevels'
+  import BaseLayout from '../../layouts/BaseLayout.astro'
+  import { zodParseQueryParamsStoringErrors } from '../../lib/parseUrlFilters'
+  import { prisma } from '../../lib/prisma'
+  import { makeLoginUrl } from '../../lib/redirectUrls'
+
+  const user = Astro.locals.user
+  if (!user) {
+    return Astro.redirect(makeLoginUrl(Astro.url, { message: 'Login to suggest a new service' }))
+  }
+
+  const result = Astro.getActionResult(actions.serviceSuggestion.editService)
+  if (result && !result.error) {
+    return Astro.redirect(`/service-suggestion/${result.data.serviceSuggestion.id}`)
+  }
+  const inputErrors = isInputError(result?.error) ? result.error.fields : {}
+
+  const { data: params } = zodParseQueryParamsStoringErrors(
+    {
+      serviceId: z.coerce.number().int().positive(),
+      notes: z.string().default(''),
+    },
+    Astro
+  )
+
+  if (!params.serviceId) return Astro.rewrite('/404')
+
+  const service = await Astro.locals.banners.try(
+    'Failed to fetch service',
+    async () =>
+      prisma.service.findUnique({
+        select: {
+          id: true,
+          name: true,
+          slug: true,
+          description: true,
+          overallScore: true,
+          kycLevel: true,
+          imageUrl: true,
+          verificationStatus: true,
+          acceptedCurrencies: true,
+          categories: {
+            select: {
+              name: true,
+              icon: true,
+            },
+          },
+        },
+        where: { id: params.serviceId },
+      }),
+    null
+  )
+
+  if (!service) return Astro.rewrite('/404')
+  ---
+
+  <BaseLayout
+    pageTitle="Edit service"
+    description="Suggest an edit to service"
+    ogImage={{
+      template: 'generic',
+      title: 'Edit service',
+      description: 'Suggest an edit to service',
+      icon: 'ri:edit-line',
+    }}
+    widthClassName="max-w-screen-md"
+  >
+    <h1 class="font-title mt-12 mb-6 text-center text-3xl font-bold">Edit service</h1>
+
+    <form method="POST" action={actions.serviceSuggestion.editService} class="space-y-6">
+      <input type="hidden" name="serviceId" value={params.serviceId} />
+
+      <InputText
+        label="Service name"
+        name="name"
+        value={service.name}
+        error={inputErrors.name}
+        inputProps={{ 'data-custom-value': true, required: true }}
+      />
+
+      <InputCardGroup
+        name="kycLevel"
+        label="KYC Level"
+        options={kycLevels.map((kycLevel) => ({
+          label: kycLevel.name,
+          value: kycLevel.id.toString(),
+          icon: kycLevel.icon,
+          description: `${kycLevel.description}\n\n_KYC Level ${kycLevel.value}/5_`,
+        }))}
+        iconSize="md"
+        cardSize="md"
+        required
+        error={inputErrors.kycLevel}
+      />
+
+      <InputCheckboxGroup
+        name="categories"
+        label="Categories"
+        required
+        options={categories.map((category) => ({
+          label: category.name,
+          value: category.id.toString(),
+          icon: category.icon,
+        }))}
+        error={inputErrors.categories}
+      />
+
+      <InputImageFile
+        label="Service Image"
+        name="imageFile"
+        description="Square image. At least 192x192px. Transparency supported."
+        error={inputErrors.imageFile}
+        square
+        required
+      />
+
+      <InputTextArea
+        label="Note for Moderators"
+        name="notes"
+        value={params.notes}
+        inputProps={{ rows: 10 }}
+        error={inputErrors.notes}
+      />
+
+      <Captcha action={actions.serviceSuggestion.createService} />
+
+      <InputHoneypotTrap name="message" />
+
+      <InputSubmitButton hideCancel />
+    </form>
+  </BaseLayout>
+  ```
--- a/.cursor/rules/styles.mdc
+++ b/.cursor/rules/styles.mdc
@@ -0,0 +1,10 @@
+---
+description: 
+globs: /web/src/pages,/web/src/components,/web/src/constants
+alwaysApply: false
+---
+- We use Tailwind 4 (the latest version), make sure to not use outdated classes from Tailwind 3.
+- Checkout the custom tailwind theme [global.css](mdc:web/src/styles/global.css).  
+- When adding conditional styles or merging tailwind classes, use the `cn` function. Never use template strings. [cn.ts](mdc:web/src/lib/cn.ts)
+- For the grayscale colors, try to use the custom color `day` for the light/foreground colors (50-500) and `night` for the dark/bakground (500-950). 
+- Generally avoid using opacity modifiers (In `text-red-500/50` the `/50`), but it's fine to also use it.
--- a/.cursorrules
+++ b/.cursorrules
@@ -1,312 +0,0 @@
-# Cursor Rules
-
- When merging tailwind classes, use the `cn` function.
- When using Tailwind and you need to merge classes use the `cn` function if avilable.
- We use Tailwind 4 (the latest version), make sure to not use outdated classes.
- Instead of using the syntax`Array<T>`, use `T[]`.
- Use TypeScript `type` over `interface`.
- You are forbiddent o add comments unless explicitly stated by the user.
- Avoid sending JavaScript to the client. The JS send should be optional.
- In prisma preffer `select` over `include` when making queries.
- Import the types from prisma instead of hardcoding duplicates.
- Avoid duplicating similar html code, and parametrize it when possible or create separate components.
- Remember to check the prisma schema when doing things related to the database.
- Avoid hardcoding enums from the database, import them from prisma.
- Avoid using client-side JavaScript as much as possible. And if it has to be done, make it optional.
- The admin pages can use client-side JavaScript.
- Keep README.md in sync with new capabilities.
- The package manager is npm.
- For icons use the `Icon` component from `astro-icon/components`.
- For icons use the Remix Icon library preferably.
- Use the `Image` component from `astro:assets` for images.
- Use the `zod` library for schema validation.
- In the astro actions return, don't return success: true, or similar, just return an object with the newly created/edited objects or nothing.
- When adding actions, don't create and export a new variable called actions. Notice that Astro already provides that variable from `import { actions } from 'astro:actions'`. So just add the new actions to the `server` variable in `web/src/actions/index.ts` and that's it.
- Don't forget that the astro files have three dashes (`---`) at the begining of the file and where the server js ends. I noticed that sometimes you forget them.
- The admin actions go into a separate folder.
- In Actro actions when throwing errors use ActionError.
- @deprecated Don't import this object, use {@link actions} instead, like: `import { actions } from 'astro:actions'`. Example:
-
-  ```ts
-  import { actions } from 'astro:actions'; /* CORRECT */
-  import { server } from '~/actions'; /* WRONG!!!! DON'T DO THIS */
-  import { adminAttributeActions } from '~/actions/admin/attribute.ts'; /* WRONG!!!! DON'T DO THIS */
-
-  const result = Astro.getActionResult(actions.admin.attribute.create);
-  ```
-
- Always use Astro actions instead of with API routes or `if (Astro.request.method === "POST")`.
- When adding clientside js do it with HTMX.
- When adding HTMX, the layout component BaseLayout accepts a prop htmx to load it in that page. No need to use a cdn.
- When redirecting to login use the `makeLoginUrl` function from web/src/lib/redirectUrls.ts and if the link is for an `<a>` tag, use the `data-astro-reload` attribute.
-
-  ```ts
-  function makeLoginUrl(
-    currentUrl: URL,
-    options: {
-      redirect?: URL | string | null;
-      error?: string | null;
-      logout?: boolean;
-      message?: string | null;
-    } = {}
-  );
-  ```
-
- When adding client scripts remember to use the event `astro:page-load`, `querySelectorAll<Type>` and add an explanation comment, like so:
-
-  ```tsx
-  <script>
-    ////////////////////////////////////////////////////////////
-    // Optional script for __________.                        //
-    // Desctiption goes here...                               //
-    ////////////////////////////////////////////////////////////
-
-    document.addEventListener('astro:page-load', () => {
-      document.querySelectorAll<HTMLDivElement>('[data-my-div]').forEach((myDiv) => {
-        // Do something
-      })
-    })
-  </script>
-  ```
-
- When creating forms, we already have utilities, components and established design patterns. Follow this example:
-
-  ```astro
-  ---
-  import { actions, isInputError } from 'astro:actions'
-  import { z } from 'astro:content'
-
-  import Captcha from '../../components/Captcha.astro'
-  import InputCardGroup from '../../components/InputCardGroup.astro'
-  import InputCheckboxGroup from '../../components/InputCheckboxGroup.astro'
-  import InputHoneypotTrap from '../../components/InputHoneypotTrap.astro'
-  import InputImageFile from '../../components/InputImageFile.astro'
-  import InputSubmitButton from '../../components/InputSubmitButton.astro'
-  import InputText from '../../components/InputText.astro'
-  import InputTextArea from '../../components/InputTextArea.astro'
-  import { kycLevels } from '../../constants/kycLevels'
-  import BaseLayout from '../../layouts/BaseLayout.astro'
-  import { zodParseQueryParamsStoringErrors } from '../../lib/parseUrlFilters'
-  import { prisma } from '../../lib/prisma'
-  import { makeLoginUrl } from '../../lib/redirectUrls'
-
-  const user = Astro.locals.user
-  if (!user) {
-    return Astro.redirect(makeLoginUrl(Astro.url, { message: 'Login to suggest a new service' }))
-  }
-
-  const result = Astro.getActionResult(actions.serviceSuggestion.editService)
-  if (result && !result.error) {
-    return Astro.redirect(`/service-suggestion/${result.data.serviceSuggestion.id}`)
-  }
-  const inputErrors = isInputError(result?.error) ? result.error.fields : {}
-
-  const { data: params } = zodParseQueryParamsStoringErrors(
-    {
-      serviceId: z.coerce.number().int().positive(),
-      notes: z.string().default(''),
-    },
-    Astro
-  )
-
-  if (!params.serviceId) return Astro.rewrite('/404')
-
-  const service = await Astro.locals.banners.try(
-    'Failed to fetch service',
-    async () =>
-      prisma.service.findUnique({
-        select: {
-          id: true,
-          name: true,
-          slug: true,
-          description: true,
-          overallScore: true,
-          kycLevel: true,
-          imageUrl: true,
-          verificationStatus: true,
-          acceptedCurrencies: true,
-          categories: {
-            select: {
-              name: true,
-              icon: true,
-            },
-          },
-        },
-        where: { id: params.serviceId },
-      }),
-    null
-  )
-
-  if (!service) return Astro.rewrite('/404')
-  ---
-
-  <BaseLayout
-    pageTitle="Edit service"
-    description="Suggest an edit to service"
-    ogImage={{
-      template: 'generic',
-      title: 'Edit service',
-      description: 'Suggest an edit to service',
-      icon: 'ri:edit-line',
-    }}
-    widthClassName="max-w-screen-md"
-  >
-    <h1 class="font-title mt-12 mb-6 text-center text-3xl font-bold">Edit service</h1>
-
-    <form method="POST" action={actions.serviceSuggestion.editService} class="space-y-6">
-      <input type="hidden" name="serviceId" value={params.serviceId} />
-
-      <InputText
-        label="Service name"
-        name="name"
-        value={service.name}
-        error={inputErrors.name}
-        inputProps={{ 'data-custom-value': true, required: true }}
-      />
-
-      <InputCardGroup
-        name="kycLevel"
-        label="KYC Level"
-        options={kycLevels.map((kycLevel) => ({
-          label: kycLevel.name,
-          value: kycLevel.id.toString(),
-          icon: kycLevel.icon,
-          description: `${kycLevel.description}\n\n_KYC Level ${kycLevel.value}/5_`,
-        }))}
-        iconSize="md"
-        cardSize="md"
-        required
-        error={inputErrors.kycLevel}
-      />
-
-      <InputCheckboxGroup
-        name="categories"
-        label="Categories"
-        required
-        options={categories.map((category) => ({
-          label: category.name,
-          value: category.id.toString(),
-          icon: category.icon,
-        }))}
-        error={inputErrors.categories}
-      />
-
-      <InputImageFile
-        label="Service Image"
-        name="imageFile"
-        description="Square image. At least 192x192px. Transparency supported."
-        error={inputErrors.imageFile}
-        square
-        required
-      />
-
-      <InputTextArea
-        label="Note for Moderators"
-        name="notes"
-        value={params.notes}
-        inputProps={{ rows: 10 }}
-        error={inputErrors.notes}
-      />
-
-      <Captcha action={actions.serviceSuggestion.createService} />
-
-      <InputHoneypotTrap name="message" />
-
-      <InputSubmitButton hideCancel />
-    </form>
-  </BaseLayout>
-  ```
-
- Don't use the `web/src/pages/admin` pages as example unless explicitly stated or you're creating/editing an admin page.
- When creating constants or enums, use the `makeHelpersForOptions` function like in this example. Save the file in the `web/src/constants` folder. Note that it's not necessary to use all the options the example has, just the ones you need.
-
-```ts
-import { makeHelpersForOptions } from '../lib/makeHelpersForOptions';
-import { transformCase } from '../lib/strings';
-
-import type { AttributeType } from '@prisma/client';
-
-type AttributeTypeInfo<T extends string | null | undefined = string> = {
-  value: T;
-  slug: string;
-  label: string;
-  icon: string;
-  order: number;
-  classNames: {
-    text: string;
-    icon: string;
-  };
-};
-
-export const {
-  dataArray: attributeTypes,
-  dataObject: attributeTypesById,
-  getFn: getAttributeTypeInfo,
-  getFnSlug: getAttributeTypeInfoBySlug,
-  zodEnumBySlug: attributeTypesZodEnumBySlug,
-  zodEnumById: attributeTypesZodEnumById,
-  keyToSlug: attributeTypeIdToSlug,
-  slugToKey: attributeTypeSlugToId,
-} = makeHelpersForOptions(
-  'value',
-  (value): AttributeTypeInfo<typeof value> => ({
-    value,
-    slug: value ? value.toLowerCase() : '',
-    label: value
-      ? transformCase(value.replace('_', ' '), 'title')
-      : String(value),
-    icon: 'ri:question-line',
-    order: Infinity,
-    classNames: {
-      text: 'text-current/60',
-      icon: 'text-current/60',
-    },
-  }),
-  [
-    {
-      value: 'BAD',
-      slug: 'bad',
-      label: 'Bad',
-      icon: 'ri:close-line',
-      order: 1,
-      classNames: {
-        text: 'text-red-200',
-        icon: 'text-red-400',
-      },
-    },
-    {
-      value: 'WARNING',
-      slug: 'warning',
-      label: 'Warning',
-      icon: 'ri:alert-line',
-      order: 2,
-      classNames: {
-        text: 'text-yellow-200',
-        icon: 'text-yellow-400',
-      },
-    },
-    {
-      value: 'GOOD',
-      slug: 'good',
-      label: 'Good',
-      icon: 'ri:check-line',
-      order: 3,
-      classNames: {
-        text: 'text-green-200',
-        icon: 'text-green-400',
-      },
-    },
-    {
-      value: 'INFO',
-      slug: 'info',
-      label: 'Info',
-      icon: 'ri:information-line',
-      order: 4,
-      classNames: {
-        text: 'text-blue-200',
-        icon: 'text-blue-400',
-      },
-    },
-  ] as const satisfies AttributeTypeInfo<AttributeType>[]
-);
-```
--- a/.env.example
+++ b/.env.example
--- a/.gitignore
+++ b/.gitignore
@@ -13,4 +13,5 @@ dump*.sql
 *.log
 *.bak
 migrate.py
-sync-all.sh
+sync-all.sh
+.DS_Store
--- a/README.md
+++ b/README.md
@@ -29,7 +29,7 @@ npm run db-fill-clean

 Now open the [.env](web/.env) file and fill in the missing values.

-> Default users are created with tokens: `admin`, `verifier`, `verified`, `normal` (configurable via env vars)
+> Default users are created with tokens: `admin`, `moderator`, `verified`, `normal` (configurable via env vars)

 ### Running the project

--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -62,6 +62,8 @@ services:
      POSTGRES_DB: ${POSTGRES_DATABASE:-kycnot}
      DATABASE_URL: "postgresql://${POSTGRES_USER:-kycnot}:${POSTGRES_PASSWORD:-kycnot}@database:5432/${POSTGRES_DATABASE:-kycnot}?schema=public"
      REDIS_URL: "redis://redis:6379"
+    env_file:
+      - .env
    depends_on:
      database:
        condition: service_healthy
--- 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"
--- a/web/README.md
+++ b/web/README.md
@@ -26,4 +26,4 @@ All commands are run from the root of the project, from a terminal:

 > **Note**: `db-fill` and `db-fill-clean` support the `-- --services=n` flag, where n is the number of fake services to add. It defaults to 10. For example, `npm run db-fill -- --services=5` will add 5 fake services.

-> **Note**: `db-fill` and `db-fill-clean` create default users with tokens: `admin`, `verifier`, `verified`, `normal` (override with `DEV_*****_USER_SECRET_TOKEN` env vars)
+> **Note**: `db-fill` and `db-fill-clean` create default users with tokens: `admin`, `moderator`, `verified`, `normal` (override with `DEV_*****_USER_SECRET_TOKEN` env vars)
--- a/web/astro.config.mjs
+++ b/web/astro.config.mjs
@@ -131,11 +131,11 @@ export default defineConfig({
        min: 1,
        default: 'admin',
      }),
-      DEV_VERIFIER_USER_SECRET_TOKEN: envField.string({
+      DEV_MODERATOR_USER_SECRET_TOKEN: envField.string({
        context: 'server',
        access: 'secret',
        min: 1,
-        default: 'verifier',
+        default: 'moderator',
      }),
      DEV_VERIFIED_USER_SECRET_TOKEN: envField.string({
        context: 'server',
@@ -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,
+      }),
    },
  },
 })
--- a/web/package.json
+++ b/web/package.json
@@ -12,7 +12,7 @@
    "db-push": "prisma migrate dev",
    "db-triggers": "just import-triggers",
    "db-update": "prisma migrate dev && just import-triggers",
-    "db-reset": "prisma migrate reset && prisma migrate dev && just import-triggers && tsx scripts/faker.ts",
+    "db-reset": "prisma migrate reset -f && prisma migrate dev && just import-triggers && tsx scripts/faker.ts",
    "db-fill": "tsx scripts/faker.ts",
    "db-fill-clean": "tsx scripts/faker.ts --cleanup",
    "format": "prettier --write .",
--- a/web/prisma/migrations/20250523181004_rename_migration/migration.sql
+++ b/web/prisma/migrations/20250523181004_rename_migration/migration.sql
@@ -0,0 +1,13 @@
+/*
+  Manully edited to be a rename migration.
+*/
+-- AlterEnum
+BEGIN;
+ALTER TYPE "AccountStatusChange" RENAME VALUE 'VERIFIER_TRUE' TO 'MODERATOR_TRUE';
+ALTER TYPE "AccountStatusChange" RENAME VALUE 'VERIFIER_FALSE' TO 'MODERATOR_FALSE';
+COMMIT;
+
+-- AlterTable
+ALTER TABLE "User" 
+RENAME COLUMN "verifier" TO "moderator"
+
--- a/web/prisma/migrations/20250525101939_archieved/migration.sql
+++ b/web/prisma/migrations/20250525101939_archieved/migration.sql
@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "ServiceVisibility" ADD VALUE 'ARCHIVED';
--- a/web/prisma/schema.prisma
+++ b/web/prisma/schema.prisma
@@ -87,6 +87,7 @@ enum ServiceVisibility {
  PUBLIC
  UNLISTED
  HIDDEN
+  ARCHIVED
 }

 enum Currency {
@@ -120,8 +121,8 @@ enum AccountStatusChange {
  ADMIN_FALSE
  VERIFIED_TRUE
  VERIFIED_FALSE
-  VERIFIER_TRUE
-  VERIFIER_FALSE
+  MODERATOR_TRUE
+  MODERATOR_FALSE
  SPAMMER_TRUE
  SPAMMER_FALSE
 }
@@ -464,7 +465,7 @@ model User {
  spammer         Boolean @default(false)
  verified        Boolean @default(false)
  admin           Boolean @default(false)
-  verifier        Boolean @default(false)
+  moderator       Boolean @default(false)
  verifiedLink    String?
  secretTokenHash String  @unique
  /// Computed via trigger. Do not update through prisma.
--- a/web/prisma/triggers/10_notifications_user_status_change.sql
+++ b/web/prisma/triggers/10_notifications_user_status_change.sql
@@ -25,12 +25,12 @@ BEGIN
    VALUES (NEW.id, 'ACCOUNT_STATUS_CHANGE', status_change);
  END IF;

-  -- Check for verifier status change
-  IF OLD.verifier IS DISTINCT FROM NEW.verifier THEN
-    IF NEW.verifier = true THEN
-      status_change := 'VERIFIER_TRUE';
+  -- Check for moderator status change
+  IF OLD.moderator IS DISTINCT FROM NEW.moderator THEN
+    IF NEW.moderator = true THEN
+      status_change := 'MODERATOR_TRUE';
    ELSE
-      status_change := 'VERIFIER_FALSE';
+      status_change := 'MODERATOR_FALSE';
    END IF;
    INSERT INTO "Notification" ("userId", "type", "aboutAccountStatusChange")
    VALUES (NEW.id, 'ACCOUNT_STATUS_CHANGE', status_change);
@@ -57,6 +57,6 @@ DROP TRIGGER IF EXISTS user_status_change_notifications_trigger ON "User";

 -- Create the trigger to fire after updates on specific status columns
 CREATE TRIGGER user_status_change_notifications_trigger
-  AFTER UPDATE OF admin, verified, verifier, spammer ON "User"
+  AFTER UPDATE OF admin, verified, moderator, spammer ON "User"
  FOR EACH ROW
  EXECUTE FUNCTION trigger_user_status_change_notifications();
--- a/web/scripts/faker.ts
+++ b/web/scripts/faker.ts
@@ -2,19 +2,20 @@ import crypto from 'crypto'

 import { faker } from '@faker-js/faker'
 import {
+  AnnouncementType,
  AttributeCategory,
  AttributeType,
  CommentStatus,
  Currency,
+  EventType,
  PrismaClient,
  ServiceSuggestionStatus,
  ServiceSuggestionType,
+  ServiceUserRole,
  VerificationStatus,
  type Prisma,
-  EventType,
  type User,
-  ServiceUserRole,
-  AnnouncementType,
+  type ServiceVisibility,
 } from '@prisma/client'
 import { uniqBy } from 'lodash-es'
 import { generateUsername } from 'unique-username-generator'
@@ -85,7 +86,7 @@ async function createAccount(preGeneratedToken?: string) {
      verifiedLink,
      verified: !!verifiedLink,
      admin: faker.datatype.boolean({ probability: 0.1 }),
-      verifier: faker.datatype.boolean({ probability: 0.1 }),
+      moderator: faker.datatype.boolean({ probability: 0.1 }),
    },
    include: {
      serviceAffiliations: true,
@@ -611,7 +612,12 @@ const generateFakeEvent = (serviceId: number) => {
 }

 const generateFakeService = (users: User[]) => {
-  const status = faker.helpers.arrayElement(Object.values(VerificationStatus))
+  const status = faker.helpers.weightedArrayElement<VerificationStatus>([
+    { weight: 20, value: 'VERIFICATION_SUCCESS' },
+    { weight: 30, value: 'APPROVED' },
+    { weight: 40, value: 'COMMUNITY_CONTRIBUTED' },
+    { weight: 10, value: 'VERIFICATION_FAILED' },
+  ])
  const name = faker.helpers.arrayElement(serviceNames)
  const slug = `${faker.helpers.slugify(name).toLowerCase()}-${faker.string.alphanumeric({ length: 6, casing: 'lower' })}`

@@ -623,6 +629,12 @@ const generateFakeService = (users: User[]) => {
    overallScore: 0,
    privacyScore: 0,
    trustScore: 0,
+    serviceVisibility: faker.helpers.weightedArrayElement<ServiceVisibility>([
+      { weight: 80, value: 'PUBLIC' },
+      { weight: 10, value: 'UNLISTED' },
+      { weight: 5, value: 'HIDDEN' },
+      { weight: 5, value: 'ARCHIVED' },
+    ]),
    verificationStatus: status,
    verificationSummary:
      status === 'VERIFICATION_SUCCESS' || status === 'VERIFICATION_FAILED' ? faker.lorem.paragraph() : null,
@@ -859,6 +871,22 @@ const generateFakeServiceContactMethod = (serviceId: number) => {
    {
      value: `https://x.com/${faker.internet.username()}`,
    },
+    {
+      value: `https://matrix.to/#/@${faker.internet.username()}:${faker.internet.domainName()}`,
+    },
+    {
+      value: `https://instagram.com/${faker.internet.username()}`,
+    },
+    {
+      value: `https://linkedin.com/in/${faker.helpers.slugify(faker.person.fullName())}`,
+    },
+    {
+      label: faker.lorem.word({ length: 2 }),
+      value: `https://bitcointalk.org/index.php?topic=${faker.number.int({ min: 1, max: 1000000 }).toString()}.0`,
+    },
+    {
+      value: `https://bitcointalk.org/index.php?topic=${faker.number.int({ min: 1, max: 1000000 }).toString()}.0`,
+    },
    {
      value: faker.internet.url(),
    },
@@ -867,7 +895,7 @@ const generateFakeServiceContactMethod = (serviceId: number) => {
      value: faker.internet.url(),
    },
    {
-      value: `https://www.linkedin.com/company/${faker.helpers.slugify(faker.company.name())}`,
+      value: `https://linkedin.com/company/${faker.helpers.slugify(faker.company.name())}`,
    },
  ] as const satisfies Partial<Prisma.ServiceContactMethodCreateInput>[]

@@ -883,19 +911,19 @@ const specialUsersData = {
    envToken: 'DEV_ADMIN_USER_SECRET_TOKEN',
    defaultToken: 'admin',
    admin: true,
-    verifier: true,
+    moderator: true,
    verified: true,
    verifiedLink: 'https://kycnot.me',
    totalKarma: 1001,
    link: 'https://kycnot.me',
    picture: 'https://comments.kycnot.me/api/users/549f290e-0542-4c18-b437-5b64b35758f0/avatar?size=L',
  },
-  verifier: {
-    name: 'verifier_dev',
-    envToken: 'DEV_VERIFIER_USER_SECRET_TOKEN',
-    defaultToken: 'verifier',
+  moderator: {
+    name: 'moderator_dev',
+    envToken: 'DEV_MODERATOR_USER_SECRET_TOKEN',
+    defaultToken: 'moderator',
    admin: false,
-    verifier: true,
+    moderator: true,
    verified: true,
    verifiedLink: 'https://kycnot.me',
    totalKarma: 1001,
@@ -907,7 +935,7 @@ const specialUsersData = {
    envToken: 'DEV_VERIFIED_USER_SECRET_TOKEN',
    defaultToken: 'verified',
    admin: false,
-    verifier: false,
+    moderator: false,
    verified: true,
    verifiedLink: 'https://kycnot.me',
    totalKarma: 1001,
@@ -917,7 +945,7 @@ const specialUsersData = {
    envToken: 'DEV_NORMAL_USER_SECRET_TOKEN',
    defaultToken: 'normal',
    admin: false,
-    verifier: false,
+    moderator: false,
    verified: false,
  },
  spam: {
@@ -925,7 +953,7 @@ const specialUsersData = {
    envToken: 'DEV_SPAM_USER_SECRET_TOKEN',
    defaultToken: 'spam',
    admin: false,
-    verifier: false,
+    moderator: false,
    verified: false,
    totalKarma: -100,
    spammer: true,
@@ -1290,7 +1318,7 @@ async function runFaker() {
              tx.internalUserNote.create({
                data: generateFakeInternalNote(
                  user.id,
-                  faker.helpers.arrayElement([specialUsers.admin.id, specialUsers.verifier.id])
+                  faker.helpers.arrayElement([specialUsers.admin.id, specialUsers.moderator.id])
                ),
              })
            )
@@ -1307,7 +1335,7 @@ async function runFaker() {
              tx.internalUserNote.create({
                data: generateFakeInternalNote(
                  user.id,
-                  faker.helpers.arrayElement([specialUsers.admin.id, specialUsers.verifier.id])
+                  faker.helpers.arrayElement([specialUsers.admin.id, specialUsers.moderator.id])
                ),
              })
            )
--- a/web/src/actions/admin/service.ts
+++ b/web/src/actions/admin/service.ts
@@ -187,13 +187,17 @@ export const adminServiceActions = {
    accept: 'form',
    permissions: 'admin',
    input: z.object({
-      label: z.string().min(1).max(50).optional(),
+      label: z.string().min(1).max(50).nullable(),
      value: z.string().url(),
      serviceId: z.number().int().positive(),
    }),
    handler: async (input) => {
      const contactMethod = await prisma.serviceContactMethod.create({
-        data: input,
+        data: {
+          label: input.label,
+          value: input.value,
+          serviceId: input.serviceId,
+        },
      })
      return { contactMethod }
    },
@@ -203,16 +207,19 @@ export const adminServiceActions = {
    accept: 'form',
    permissions: 'admin',
    input: z.object({
-      id: z.number().int().positive().optional(),
-      label: z.string().min(1).max(50).optional(),
+      id: z.number().int().positive(),
+      label: z.string().min(1).max(50).nullable(),
      value: z.string().url(),
      serviceId: z.number().int().positive(),
    }),
    handler: async (input) => {
-      const { id, ...data } = input
      const contactMethod = await prisma.serviceContactMethod.update({
-        where: { id },
-        data,
+        where: { id: input.id },
+        data: {
+          label: input.label,
+          value: input.value,
+          serviceId: input.serviceId,
+        },
      })
      return { contactMethod }
    },
--- a/web/src/actions/admin/user.ts
+++ b/web/src/actions/admin/user.ts
@@ -16,7 +16,7 @@ const selectUserReturnFields = {
  picture: true,
  admin: true,
  verified: true,
-  verifier: true,
+  moderator: true,
  verifiedLink: true,
  secretTokenHash: true,
  totalKarma: true,
@@ -55,7 +55,7 @@ export const adminUserActions = {
        .default(null) // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
        .transform((val) => val || null),
      pictureFile: z.instanceof(File).optional(),
-      type: z.array(z.enum(['admin', 'verifier', 'spammer'])),
+      type: z.array(z.enum(['admin', 'moderator', 'spammer'])),
      verifiedLink: z
        .string()
        .url('Invalid URL')
@@ -101,7 +101,7 @@ export const adminUserActions = {
          verified: !!valuesToUpdate.verifiedLink,
          picture: pictureUrl,
          admin: type.includes('admin'),
-          verifier: type.includes('verifier'),
+          moderator: type.includes('moderator'),
          spammer: type.includes('spammer'),
        },
        select: selectUserReturnFields,
--- a/web/src/actions/comment.ts
+++ b/web/src/actions/comment.ts
@@ -331,7 +331,7 @@ export const commentActions = {
  }),

  moderate: defineProtectedAction({
-    permissions: ['admin', 'verifier'],
+    permissions: ['admin', 'moderator'],
    input: z.object({
      commentId: z.number(),
      userId: z.number(),
--- a/web/src/components/Button.astro
+++ b/web/src/components/Button.astro
@@ -2,13 +2,15 @@
 import { Icon } from 'astro-icon/components'
 import { tv, type VariantProps } from 'tailwind-variants'

+import { cn } from '../lib/cn'
+
 import type { HTMLAttributes, Polymorphic } from 'astro/types'

 type Props<Tag extends 'a' | 'button' | 'label' = 'button'> = Polymorphic<
  Required<Pick<HTMLAttributes<'label'>, Tag extends 'label' ? 'for' : never>> &
    VariantProps<typeof button> & {
      as: Tag
-      label?: string
+      label: string
      icon?: string
      endIcon?: string
      classNames?: {
@@ -55,30 +57,21 @@ const button = tv({
    iconOnly: {
      true: {
        base: 'p-0',
+        label: 'sr-only',
      },
    },
    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 +85,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: 'bg2night-800/15 hover:bg-night-700/30 border-current/30 text-white/70 hover:text-white/90 focus-visible:ring-white/50',
+      },
+    },
+    {
+      color: 'white',
+      variant: 'faded',
+      class: {
+        base: 'b2-day-100/15 hover:bg-day-200/30 border-current/30 text-white/70 hover:text-white/90 focus-visible:ring-white/50',
+      },
+    },
+    {
+      color: 'gray',
+      variant: 'faded',
+      class: {
+        base: 'b2-day-400/15 hover:bg-day-500/30 text-day-300 hover:text-day-100 border-current/30 focus-visible:ring-white/50',
+      },
+    },
+    {
+      color: 'success',
+      variant: 'faded',
+      class: {
+        base: 'border-current/20 bg-green-500/15 text-green-300 hover:bg-green-500/30 hover:text-green-100',
+      },
+    },
+    {
+      color: 'danger',
+      variant: 'faded',
+      class: {
+        base: 'border-current/20 bg-red-500/15 text-red-300 hover:bg-red-500/30 hover:text-red-100',
+      },
+    },
+    {
+      color: 'warning',
+      variant: 'faded',
+      class: {
+        base: 'border-current/20 bg-yellow-500/15 text-yellow-300 hover:bg-yellow-500/30 hover:text-yellow-100',
+      },
+    },
+    {
+      color: 'info',
+      variant: 'faded',
+      class: {
+        base: 'border-current/20 bg-blue-500/15 text-blue-300 hover:bg-blue-500/30 hover:text-blue-100',
+      },
+    },
+    // Shadow variants
    {
      color: 'black',
      shadow: true,
@@ -113,7 +207,7 @@ const button = tv({
      class: 'shadow-green-500/30',
    },
    {
-      color: 'error',
+      color: 'danger',
      shadow: true,
      class: 'shadow-red-500/30',
    },
@@ -127,6 +221,7 @@ const button = tv({
      shadow: true,
      class: 'shadow-blue-500/30',
    },
+    // Icon only variants
    {
      iconOnly: true,
      size: 'sm',
@@ -146,6 +241,7 @@ const button = tv({
  defaultVariants: {
    size: 'md',
    color: 'black',
+    variant: 'solid',
    shadow: false,
    disabled: false,
    iconOnly: false,
@@ -159,6 +255,7 @@ const {
  endIcon,
  size,
  color,
+  variant,
  shadow,
  class: className,
  classNames,
@@ -166,6 +263,7 @@ const {
  dataAstroReload,
  disabled,
  inlineIcon,
+  iconOnly,
  ...htmlProps
 } = Astro.props

@@ -174,13 +272,20 @@ const {
  icon: iconSlot,
  label: labelSlot,
  endIcon: endIconSlot,
-} = button({ size, color, shadow, disabled, iconOnly: !label && !(!!icon && !!endIcon) })
+} = button({
+  size,
+  color,
+  variant,
+  shadow,
+  disabled,
+  iconOnly: iconOnly ?? (!label && !(!!icon && !!endIcon)),
+})

 const ActualTag = disabled && Tag === 'a' ? 'span' : Tag
 ---

 <ActualTag
-  class={base({ class: className })}
+  class={base({ class: cn({ 'opacity-20 hover:opacity-50': disabled }, className) })}
  role={role ??
    (ActualTag === 'button' || ActualTag === 'label' || ActualTag === 'span' ? undefined : 'button')}
  aria-disabled={disabled}
@@ -188,7 +293,7 @@ const ActualTag = disabled && Tag === 'a' ? 'span' : Tag
  {...htmlProps}
 >
  {!!icon && <Icon name={icon} class={iconSlot({ class: classNames?.icon })} is:inline={inlineIcon} />}
-  {!!label && <span class={labelSlot({ class: classNames?.label })}>{label}</span>}
+  <span class={labelSlot({ class: classNames?.label })}>{label}</span>
  {
    !!endIcon && (
      <Icon name={endIcon} class={endIconSlot({ class: classNames?.endIcon })} is:inline={inlineIcon}>
--- a/web/src/components/CommentItem.astro
+++ b/web/src/components/CommentItem.astro
@@ -61,8 +61,8 @@ const isHighlighted = comment.id === highlightedCommentId
 const userVote = user ? comment.votes.find((v) => v.userId === user.id) : null

 const isAuthor = user?.id === comment.author.id
-const isAdminOrVerifier = !!user && (user.admin || user.verifier)
-const isAuthorOrPrivileged = isAuthor || isAdminOrVerifier
+const isAdminOrModerator = !!user && (user.admin || user.moderator)
+const isAuthorOrPrivileged = isAuthor || isAdminOrModerator

 // Check if user is new (less than 1 week old)
 const isNewUser =
@@ -75,7 +75,7 @@ const isRatingActive =
  !comment.suspicious &&
  (comment.status === 'APPROVED' || comment.status === 'VERIFIED')

-// Skip rendering if comment is not approved/verified and user is not the author or admin/verifier
+// Skip rendering if comment is not approved/verified and user is not the author or admin/moderator
 const shouldShow =
  comment.status === 'APPROVED' ||
  comment.status === 'VERIFIED' ||
@@ -150,7 +150,7 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
    checked={comment.suspicious}
  />

-  <div class="comment-header flex items-center gap-2 text-sm">
+  <div class="comment-header scrollbar-w-none flex items-center gap-2 overflow-auto text-sm">
    <label for={`collapse-${comment.id.toString()}`} class="cursor-pointer text-zinc-500 hover:text-zinc-300">
      <span class="collapse-symbol text-xs"></span>
      <span class="sr-only">Toggle comment visibility</span>
@@ -164,10 +164,10 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
      />

      {
-        (comment.author.verified || comment.author.admin || comment.author.verifier) && (
+        (comment.author.verified || comment.author.admin || comment.author.moderator) && (
          <Tooltip
            text={`${
-              comment.author.admin || comment.author.verifier
+              comment.author.admin || comment.author.moderator
                ? `KYCnot.me ${comment.author.admin ? 'Admin' : 'Moderator'}${comment.author.verifiedLink ? '. ' : ''}`
                : ''
            }${comment.author.verifiedLink ? `Related to ${comment.author.verifiedLink}` : ''}`}
@@ -186,7 +186,7 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
        )
      }
      {
-        comment.author.verifier && !comment.author.admin && (
+        comment.author.moderator && !comment.author.admin && (
          <BadgeSmall
            icon="ri:graduation-cap-fill"
            color="teal"
@@ -198,14 +198,14 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
      }

      {
-        isNewUser && !comment.author.admin && !comment.author.verifier && (
+        isNewUser && !comment.author.admin && !comment.author.moderator && (
          <Tooltip text={`Joined ${formatDateShort(comment.author.createdAt, { hourPrecision: true })}`}>
            <BadgeSmall icon="ri:user-add-fill" color="purple" text="New User" variant="faded" inlineIcon />
          </Tooltip>
        )
      }
      {
-        authorUnlocks.highKarmaBadge && !comment.author.admin && !comment.author.verifier && (
+        authorUnlocks.highKarmaBadge && !comment.author.admin && !comment.author.moderator && (
          <BadgeSmall
            icon={karmaUnlocksById.highKarmaBadge.icon}
            color="lime"
@@ -380,7 +380,7 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
  }

  {
-    user && (user.admin || user.verifier) && comment.internalNote && (
+    user && (user.admin || user.moderator) && comment.internalNote && (
      <div class="mt-2 peer-checked/collapse:hidden">
        <div class="border-l-2 border-red-600 bg-red-900/20 py-0.5 pl-2 text-xs">
          <span class="font-medium text-red-400">Internal note:</span>
@@ -391,7 +391,7 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
  }

  {
-    user && (user.admin || user.verifier) && comment.privateContext && (
+    user && (user.admin || user.moderator) && comment.privateContext && (
      <div class="mt-2 peer-checked/collapse:hidden">
        <div class="border-l-2 border-blue-600 bg-blue-900/20 py-0.5 pl-2 text-xs">
          <span class="font-medium text-blue-400">Private context:</span>
--- a/web/src/components/CommentModeration.astro
+++ b/web/src/components/CommentModeration.astro
@@ -28,8 +28,8 @@ const { comment, class: className, ...divProps } = Astro.props

 const user = Astro.locals.user

-// Only render for admin/verifier users
-if (!user || !user.admin || !user.verifier) return null
+// Only render for admin/moderator users
+if (!user || !user.admin || !user.moderator) return null
 ---

 <div {...divProps} class={cn('text-xs', className)}>
--- a/web/src/components/CommentSection.astro
+++ b/web/src/components/CommentSection.astro
@@ -202,7 +202,7 @@ function makeReplySchema(comment: CommentWithRepliesPopulated): Comment {
          Most Upvotes
        </a>
        {
-          user && (user.admin || user.verifier) && (
+          user && (user.admin || user.moderator) && (
            <a
              href={getSortUrl('status')}
              class={cn([
--- a/web/src/components/Footer.astro
+++ b/web/src/components/Footer.astro
@@ -52,7 +52,7 @@ const { class: className, ...htmlProps } = Astro.props
            href={href}
            target={external ? '_blank' : undefined}
            rel={external ? 'noopener noreferrer' : undefined}
-            class="text-day-500 dark:text-day-400 dark:hover:text-day-300 flex items-center gap-1 text-sm transition-colors hover:text-gray-700"
+            class="text-day-500 flex items-center gap-1 text-sm transition-colors hover:text-gray-200 hover:underline"
          >
            <Icon name={icon} class="h-4 w-4" />
            {label}
--- a/web/src/components/FormSection.astro
+++ 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>
--- a/web/src/components/FormSubSection.astro
+++ 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>
--- 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>
--- 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
--- a/web/src/components/ServiceCard.astro
+++ b/web/src/components/ServiceCard.astro
@@ -2,6 +2,7 @@
 import { Icon } from 'astro-icon/components'

 import { currencies } from '../constants/currencies'
+import { serviceVisibilitiesById } from '../constants/serviceVisibility'
 import { verificationStatusesByValue } from '../constants/verificationStatus'
 import { cn } from '../lib/cn'
 import { makeOverallScoreInfo } from '../lib/overallScore'
@@ -25,6 +26,7 @@ type Props = HTMLAttributes<'a'> & {
      kycLevel: true
      imageUrl: true
      verificationStatus: true
+      serviceVisibility: true
      acceptedCurrencies: true
      categories: {
        select: {
@@ -43,11 +45,11 @@ const {
    slug,
    description,
    overallScore,
-
    kycLevel,
    imageUrl,
    categories,
    verificationStatus,
+    serviceVisibility,
    acceptedCurrencies,
  },
  class: className,
@@ -69,7 +71,9 @@ const overallScoreInfo = makeOverallScoreInfo(overallScore)
  href={Element === 'a' ? `/service/${slug}` : undefined}
  {...aProps}
  class={cn(
-    'border-night-600 bg-night-800 flex flex-col gap-(--gap) rounded-xl border p-(--gap) [--gap:calc(var(--spacing)*3)]',
+    'border-night-600 group/card bg-night-800 flex flex-col gap-(--gap) rounded-xl border p-(--gap) [--gap:calc(var(--spacing)*3)]',
+    (serviceVisibility === 'ARCHIVED' || verificationStatus === 'VERIFICATION_FAILED') &&
+      'opacity-75 transition-opacity hover:opacity-100 focus-visible:opacity-100',
    className
  )}
 >
@@ -79,7 +83,11 @@ const overallScoreInfo = makeOverallScoreInfo(overallScore)
      src={imageUrl}
      fallback="service"
      alt={name || 'Service logo'}
-      class="size-12 shrink-0 rounded-sm object-contain text-white"
+      class={cn(
+        'size-12 shrink-0 rounded-sm object-contain text-white',
+        (serviceVisibility === 'ARCHIVED' || verificationStatus === 'VERIFICATION_FAILED') &&
+          'grayscale-67 transition-all group-hover/card:grayscale-0 group-focus-visible/card:grayscale-0'
+      )}
      width={48}
      height={48}
    />
@@ -110,6 +118,23 @@ const overallScoreInfo = makeOverallScoreInfo(overallScore)
              ]}
            </Tooltip>
          )
+        }{
+          serviceVisibility === 'ARCHIVED' && (
+            <Tooltip
+              text={serviceVisibilitiesById.ARCHIVED.label}
+              position="right"
+              class="-my-2 shrink-0 whitespace-nowrap"
+            >
+              <Icon
+                is:inline={inlineIcons}
+                name={serviceVisibilitiesById.ARCHIVED.icon}
+                class={cn(
+                  'inline-block size-6 shrink-0 rounded-lg p-1 align-[-0.37em]',
+                  serviceVisibilitiesById.ARCHIVED.iconClass
+                )}
+              />
+            </Tooltip>
+          )
        }
      </h3>
      <div class="max-h-2 flex-1"></div>
--- a/web/src/components/ServicesFilters.astro
+++ b/web/src/components/ServicesFilters.astro
@@ -40,6 +40,7 @@ const {
  hx-select={`#${searchResultsId}`}
  hx-push-url="true"
  hx-indicator="#search-indicator"
+  hx-swap="outerHTML"
  data-services-filters-form
  data-default-verification-filter={options.verification
    .filter((verification) => verification.default)
@@ -107,7 +108,7 @@ const {
      {
        options.categories?.map((category) => (
          <li data-show-always={category.showAlways ? '' : undefined}>
-            <label class="flex cursor-pointer items-center space-x-2 text-sm text-white">
+            <label class="flex cursor-pointer items-center gap-2 text-sm text-white">
              <input
                type="checkbox"
                class="peer text-green-500"
@@ -116,6 +117,7 @@ const {
                checked={category.checked}
                data-trigger-on-change
              />
+              <Icon name={category.icon} class="size-4" />
              <span class="peer-checked:font-bold">
                {category.name}
                <span class="text-day-500 font-normal">{category._count.services}</span>
--- a/web/src/components/ServicesSearchResults.astro
+++ b/web/src/components/ServicesSearchResults.astro
@@ -205,6 +205,13 @@ const urlIfIncludingCommunity = urlWithParams(Astro.url, {
              inlineIcon={inlineIcons}
            />
          )}
+          <Button
+            as="a"
+            href="/service-suggestion/new"
+            label="Add service"
+            icon="ri:add-line"
+            inlineIcon={inlineIcons}
+          />
        </div>
      </div>
    ) : (
@@ -241,14 +248,18 @@ const urlIfIncludingCommunity = urlWithParams(Astro.url, {
      </>
    )
  }
-  <div class="mt-4 text-center">
-    <Button
-      as="a"
-      href="/service-suggestion/new"
-      label="Add service"
-      icon="ri:add-line"
-      inlineIcon={inlineIcons}
-      class="mx-auto"
-    />
-  </div>
+  {
+    services && services.length > 0 && (
+      <div class="mt-4 text-center">
+        <Button
+          as="a"
+          href="/service-suggestion/new"
+          label="Add service"
+          icon="ri:add-line"
+          inlineIcon={inlineIcons}
+          class="mx-auto"
+        />
+      </div>
+    )
+  }
 </div>
--- a/web/src/constants/accountStatusChange.ts
+++ b/web/src/constants/accountStatusChange.ts
@@ -43,14 +43,14 @@ export const {
      notificationTitle: 'Your account is no longer verified',
    },
    {
-      value: 'VERIFIER_TRUE',
-      label: 'Verifier role granted',
-      notificationTitle: 'Verifier role granted',
+      value: 'MODERATOR_TRUE',
+      label: 'Moderator role granted',
+      notificationTitle: 'Moderator role granted',
    },
    {
-      value: 'VERIFIER_FALSE',
-      label: 'Verifier role revoked',
-      notificationTitle: 'Verifier role revoked',
+      value: 'MODERATOR_FALSE',
+      label: 'Moderator role revoked',
+      notificationTitle: 'Moderator role revoked',
    },
    {
      value: 'SPAMMER_TRUE',
--- a/web/src/constants/contactMethods.ts
+++ b/web/src/constants/contactMethods.ts
@@ -30,14 +30,14 @@ export const {
    {
      type: 'email',
      label: 'Email',
-      matcher: /mailto:(.*)/,
+      matcher: /mailto:(.+)/,
      formatter: (value) => value,
      icon: 'ri:mail-line',
    },
    {
      type: 'telephone',
      label: 'Telephone',
-      matcher: /tel:(.*)/,
+      matcher: /tel:(.+)/,
      formatter: (value) => {
        return parsePhoneNumberWithError(value).formatInternational()
      },
@@ -46,7 +46,7 @@ export const {
    {
      type: 'whatsapp',
      label: 'WhatsApp',
-      matcher: /https?:\/\/(?:www\.)?wa\.me\/(.*)\/?/,
+      matcher: /https?:\/\/(?:www\.)?wa\.me\/(.+)/,
      formatter: (value) => {
        return parsePhoneNumberWithError(value).formatInternational()
      },
@@ -55,42 +55,35 @@ export const {
    {
      type: 'telegram',
      label: 'Telegram',
-      matcher: /https?:\/\/(?:www\.)?t\.me\/(.*)\/?/,
+      matcher: /https?:\/\/(?:www\.)?t\.me\/(.+)/,
      formatter: (value) => `t.me/${value}`,
      icon: 'ri:telegram-line',
    },
    {
      type: 'linkedin',
      label: 'LinkedIn',
-      matcher: /https?:\/\/(?:www\.)?linkedin\.com\/(?:in|company)\/(.*)\/?/,
+      matcher: /https?:\/\/(?:www\.)?linkedin\.com\/(?:in|company)\/(.+)/,
      formatter: (value) => `in/${value}`,
      icon: 'ri:linkedin-box-line',
    },
-    {
-      type: 'website',
-      label: 'Website',
-      matcher: /https?:\/\/(?:www\.)?((?:[a-zA-Z0-9-]+\.)+[a-zA-Z]+)/,
-      formatter: (value) => value,
-      icon: 'ri:global-line',
-    },
    {
      type: 'x',
      label: 'X',
-      matcher: /https?:\/\/(?:www\.)?x\.com\/(.*)\/?/,
+      matcher: /https?:\/\/(?:www\.)?x\.com\/(.+)/,
      formatter: (value) => `@${value}`,
      icon: 'ri:twitter-x-line',
    },
    {
      type: 'instagram',
      label: 'Instagram',
-      matcher: /https?:\/\/(?:www\.)?instagram\.com\/(.*)\/?/,
+      matcher: /https?:\/\/(?:www\.)?instagram\.com\/(.+)/,
      formatter: (value) => `@${value}`,
      icon: 'ri:instagram-line',
    },
    {
      type: 'matrix',
      label: 'Matrix',
-      matcher: /https?:\/\/(?:www\.)?matrix\.to\/#\/(.*)\/?/,
+      matcher: /https?:\/\/(?:www\.)?matrix\.to\/#\/(.+)/,
      formatter: (value) => value,
      icon: 'ri:hashtag',
    },
@@ -101,6 +94,14 @@ export const {
      formatter: () => 'BitcoinTalk',
      icon: 'ri:btc-line',
    },
+    // Website must go last because it's a catch-all
+    {
+      type: 'website',
+      label: 'Website',
+      matcher: /https?:\/\/(?:www\.)?((?:[a-zA-Z0-9-]+\.)+[a-zA-Z]+)/,
+      formatter: (value) => value,
+      icon: 'ri:global-line',
+    },
  ] as const satisfies ContactMethodInfo[]
 )

--- 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>[]
 )
--- a/web/src/constants/serviceVisibility.ts
+++ b/web/src/constants/serviceVisibility.ts
@@ -8,6 +8,7 @@ type ServiceVisibilityInfo<T extends string | null | undefined = string> = {
  slug: string
  label: string
  description: string
+  longDescription: string
  icon: string
  iconClass: string
 }
@@ -28,6 +29,7 @@ export const {
    slug: value ? value.toLowerCase() : '',
    label: value ? transformCase(value, 'title') : String(value),
    description: '',
+    longDescription: '',
    icon: 'ri:eye-line',
    iconClass: 'text-current/60',
  }),
@@ -37,6 +39,7 @@ export const {
      slug: 'public',
      label: 'Public',
      description: 'Listed in search and browse.',
+      longDescription: 'Listed in search and browse.',
      icon: 'ri:global-line',
      iconClass: 'text-green-500',
    },
@@ -45,6 +48,7 @@ export const {
      slug: 'unlisted',
      label: 'Unlisted',
      description: 'Only accessible via direct link.',
+      longDescription: "Unlisted service, only accessible via direct link and won't appear in searches.",
      icon: 'ri:link',
      iconClass: 'text-yellow-500',
    },
@@ -53,8 +57,19 @@ export const {
      slug: 'hidden',
      label: 'Hidden',
      description: 'Only visible to moderators.',
+      longDescription: 'Hidden service, only visible to moderators.',
      icon: 'ri:lock-line',
      iconClass: 'text-red-500',
    },
+    {
+      value: 'ARCHIVED',
+      slug: 'archived',
+      label: 'Archived',
+      description: 'Service no longer exists or ceased operations.',
+      longDescription:
+        'This service has been archived and no longer exists or ceased operations. Information may be outdated.',
+      icon: 'ri:archive-line',
+      iconClass: 'text-day-100',
+    },
  ] as const satisfies ServiceVisibilityInfo<ServiceVisibility>[]
 )
--- a/web/src/constants/verificationStepStatus.ts
+++ 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>[]
+)
--- 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>
--- a/web/src/lib/attributes.ts
+++ b/web/src/lib/attributes.ts
@@ -2,6 +2,7 @@ import { orderBy } from 'lodash-es'

 import { getAttributeCategoryInfo } from '../constants/attributeCategories'
 import { getAttributeTypeInfo } from '../constants/attributeTypes'
+import { serviceVisibilitiesById } from '../constants/serviceVisibility'
 import { READ_MORE_SENTENCE_LINK, verificationStatusesByValue } from '../constants/verificationStatus'

 import { formatDateShort } from './timeAgo'
@@ -36,6 +37,7 @@ export function makeNonDbAttributes(
  service: Prisma.ServiceGetPayload<{
    select: {
      verificationStatus: true
+      serviceVisibility: true
      isRecentlyListed: true
      listedAt: true
      createdAt: true
@@ -134,6 +136,16 @@ export function makeNonDbAttributes(
        },
      ],
    },
+    {
+      title: serviceVisibilitiesById.ARCHIVED.label,
+      show: service.serviceVisibility === 'ARCHIVED',
+      type: 'WARNING',
+      category: 'TRUST',
+      description: serviceVisibilitiesById.ARCHIVED.longDescription,
+      privacyPoints: 0,
+      trustPoints: 0,
+      links: [],
+    },
    {
      title: 'Recently listed',
      show: service.isRecentlyListed,
--- a/web/src/lib/commentsWithReplies.ts
+++ b/web/src/lib/commentsWithReplies.ts
@@ -31,7 +31,7 @@ const commentReplyQuery = {
        name: true,
        verified: true,
        admin: true,
-        verifier: true,
+        moderator: true,
        createdAt: true,
        displayName: true,
        picture: true,
--- a/web/src/lib/defineProtectedAction.ts
+++ b/web/src/lib/defineProtectedAction.ts
@@ -9,7 +9,7 @@ import {
 import type { MaybePromise } from 'astro/actions/runtime/utils.js'
 import type { z } from 'astro/zod'

-type SpecialUserPermission = 'admin' | 'verified' | 'verifier'
+type SpecialUserPermission = 'admin' | 'moderator' | 'verified'
 type Permission = SpecialUserPermission | 'guest' | 'not-spammer' | 'user'

 type ActionAPIContextWithUser = ActionAPIContext & {
@@ -87,8 +87,8 @@ export function defineProtectedAction<
      }

      if (
-        (permissions === 'verifier' || (Array.isArray(permissions) && permissions.includes('verifier'))) &&
-        !context.locals.user.verifier
+        (permissions === 'moderator' || (Array.isArray(permissions) && permissions.includes('moderator'))) &&
+        !context.locals.user.moderator
      ) {
        if (context.locals.user.spammer) {
          throw new ActionError({
@@ -98,7 +98,7 @@ export function defineProtectedAction<
        }
        throw new ActionError({
          code: 'FORBIDDEN',
-          message: 'Verifier privileges required.',
+          message: 'Moderator privileges required.',
        })
      }

--- a/web/src/lib/userSecretToken.ts
+++ b/web/src/lib/userSecretToken.ts
@@ -29,8 +29,8 @@ const USER_SECRET_TOKEN_DEV_USERS_REGEX = (() => {
      defaultToken: 'admin',
    },
    {
-      envToken: 'DEV_VERIFIER_USER_SECRET_TOKEN',
-      defaultToken: 'verifier',
+      envToken: 'DEV_MODERATOR_USER_SECRET_TOKEN',
+      defaultToken: 'moderator',
    },
    {
      envToken: 'DEV_VERIFIED_USER_SECRET_TOKEN',
--- a/web/src/pages/about.mdx
+++ b/web/src/pages/about.mdx
@@ -206,7 +206,6 @@ You can contact via direct chat:

 - [SimpleX Chat](https://simplex.chat/contact#/?v=2&smp=smp%3A%2F%2F0YuTwO05YJWS8rkjn9eLJDjQhFKvIYd8d4xG8X1blIU%3D%40smp8.simplex.im%2FcgKHYUYnpAIVoGb9lxb0qEMEpvYIvc1O%23%2F%3Fv%3D1-2%26dh%3DMCowBQYDK2VuAyEAIW_JSq8wOsLKG4Xv4O54uT2D_l8MJBYKQIFj1FjZpnU%253D%26srv%3Dbeccx4yfxxbvyhqypaavemqurytl6hozr47wfc7uuecacjqdvwpw2xid.onion)

-
 ## Disclaimer

 This website is strictly for informational purposes regarding privacy technology in the cryptocurrency space. We unequivocally condemn and do not endorse, support, or facilitate money laundering, terrorist financing, or any other illegal financial activities. The use of any information or service mentioned herein for such purposes is strictly prohibited and contrary to the core principles of this project.
--- a/web/src/pages/account/index.astro
+++ b/web/src/pages/account/index.astro
@@ -44,7 +44,7 @@ const user = await Astro.locals.banners.try('user', async () => {
        spammer: true,
        verified: true,
        admin: true,
-        verifier: true,
+        moderator: true,
        verifiedLink: true,
        totalKarma: true,
        createdAt: true,
@@ -206,7 +206,7 @@ if (!user) return Astro.rewrite('/404')
          </h1>
          {user.displayName && <p class="text-day-200 font-title">{user.name}</p>}
          {
-            (user.admin || user.verified || user.verifier) && (
+            (user.admin || user.verified || user.moderator) && (
              <div class="mt-1 flex gap-2">
                {user.admin && (
                  <span class="rounded-full border border-red-500/50 bg-red-500/20 px-2 py-0.5 text-xs text-red-400">
@@ -218,9 +218,9 @@ if (!user) return Astro.rewrite('/404')
                    verified
                  </span>
                )}
-                {user.verifier && (
+                {user.moderator && (
                  <span class="rounded-full border border-green-500/50 bg-green-500/20 px-2 py-0.5 text-xs text-green-400">
-                    verifier
+                    moderator
                  </span>
                )}
              </div>
@@ -356,14 +356,14 @@ if (!user) return Astro.rewrite('/404')
                    )
                  }
                  {
-                    user.verifier && (
+                    user.moderator && (
                      <span class="rounded-full border border-green-500/50 bg-green-500/20 px-2 py-0.5 text-xs text-green-400">
-                        Verifier
+                        Moderator
                      </span>
                    )
                  }
                  {
-                    !user.admin && !user.verified && !user.verifier && (
+                    !user.admin && !user.verified && !user.moderator && (
                      <span class="border-day-700/50 bg-day-700/20 text-day-400 rounded-full border px-2 py-0.5 text-xs">
                        Standard User
                      </span>
--- a/web/src/pages/admin/announcements/index.astro
+++ b/web/src/pages/admin/announcements/index.astro
@@ -143,9 +143,9 @@ if (toggleResult?.error) {
 }
 ---

-<BaseLayout pageTitle="Announcement Management" widthClassName="max-w-screen-xl">
+<BaseLayout pageTitle="Announcements" widthClassName="max-w-screen-xl">
  <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between">
-    <h1 class="font-title text-2xl font-bold text-white">Announcement Management</h1>
+    <h1 class="font-title text-2xl font-bold text-white">Announcements</h1>
    <div class="mt-2 flex items-center gap-4 sm:mt-0">
      <span class="text-sm text-zinc-400">{announcements.length} announcements</span>
    </div>
@@ -193,12 +193,17 @@ if (toggleResult?.error) {
            <option value="active" selected={filters.status === 'active'}>Active</option>
            <option value="inactive" selected={filters.status === 'inactive'}>Inactive</option>
          </select>
-          <button
+          <Button
+            as="button"
            type="submit"
-            class="inline-flex items-center rounded-r-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
-          >
-            <Icon name="ri:search-2-line" class="h-4 w-4" />
-          </button>
+            color="info"
+            variant="solid"
+            size="md"
+            iconOnly
+            icon="ri:search-2-line"
+            label="Search"
+            class="rounded-l-none"
+          />
        </div>
      </div>
    </form>
@@ -206,13 +211,16 @@ if (toggleResult?.error) {

  <!-- Create New Announcement Form -->
  <div class="mb-6">
-    <button
+    <Button
+      as="button"
      id="toggle-new-announcement-form"
-      class="mb-4 inline-flex items-center rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
-    >
-      <Icon name="ri:add-line" class="mr-1 h-4 w-4" />
-      Create New Announcement
-    </button>
+      color="success"
+      variant="solid"
+      size="md"
+      icon="ri:add-line"
+      label="Create"
+      class="mb-4"
+    />

    <div
      id="new-announcement-form"
@@ -306,13 +314,16 @@ if (toggleResult?.error) {

          <div class="pt-4">
            <InputSubmitButton label="Create Announcement" icon="ri:save-line" hideCancel />
-            <button
+            <Button
+              as="button"
              type="button"
              id="cancel-create"
-              class="ml-2 inline-flex items-center rounded-md border border-zinc-600 bg-zinc-800 px-4 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-700 focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
-            >
-              Cancel
-            </button>
+              color="gray"
+              variant="faded"
+              size="md"
+              label="Cancel"
+              class="ml-2"
+            />
          </div>
        </div>
      </form>
@@ -339,19 +350,24 @@ if (toggleResult?.error) {
      <form method="POST" action={actions.admin.announcement.delete} id="delete-form">
        <input type="hidden" name="id" id="delete-id" />
        <div class="flex justify-end gap-2">
-          <button
+          <Button
+            as="button"
            type="button"
-            class="close-modal inline-flex items-center rounded-md border border-zinc-600 bg-zinc-800 px-4 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-700 focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
-          >
-            Cancel
-          </button>
-          <button
+            class="close-modal"
+            color="gray"
+            variant="faded"
+            size="md"
+            label="Cancel"
+          />
+          <Button
+            as="button"
            type="submit"
-            class="inline-flex items-center rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
-          >
-            <Icon name="ri:delete-bin-line" class="mr-1 h-4 w-4" />
-            Delete
-          </button>
+            color="danger"
+            variant="solid"
+            size="md"
+            icon="ri:delete-bin-line"
+            label="Delete"
+          />
        </div>
      </form>
    </div>
@@ -497,60 +513,64 @@ if (toggleResult?.error) {
                      </td>
                      <td class="px-4 py-3">
                        <div class="flex justify-center gap-2">
-                          <Tooltip
-                            as="button"
-                            type="button"
-                            data-id={announcement.id}
-                            class="edit-button inline-flex items-center rounded-md border border-blue-500/50 bg-blue-500/20 px-1 py-1 text-xs text-blue-400 transition-colors hover:bg-blue-500/30"
-                            text="Edit"
-                            onclick={`document.getElementById('edit-announcement-form-${announcement.id}').classList.toggle('hidden')`}
-                          >
-                            <Icon name="ri:edit-line" class="size-4" />
+                          <Tooltip text="Edit">
+                            <Button
+                              as="button"
+                              type="button"
+                              data-id={announcement.id}
+                              class="edit-button"
+                              color="info"
+                              variant="faded"
+                              size="sm"
+                              iconOnly
+                              icon="ri:edit-line"
+                              label="Edit"
+                              onclick={`document.getElementById('edit-announcement-form-${announcement.id}').classList.toggle('hidden')`}
+                            />
                          </Tooltip>

-                          <form
-                            method="POST"
-                            action={actions.admin.announcement.toggleActive}
-                            class="inline-block"
-                            data-confirm={`Are you sure you want to ${announcement.isActive ? 'deactivate' : 'activate'} this announcement?`}
-                          >
-                            <input type="hidden" name="id" value={announcement.id} />
-                            <input type="hidden" name="isActive" value={String(!announcement.isActive)} />
-                            <button
-                              type="submit"
-                              class={`rounded-md border px-1 py-1 text-xs transition-colors ${
-                                announcement.isActive
-                                  ? 'border-yellow-500/50 bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30'
-                                  : 'border-green-500/50 bg-green-500/20 text-green-400 hover:bg-green-500/30'
-                              }`}
+                          <Tooltip text={announcement.isActive ? 'Deactivate' : 'Activate'}>
+                            <form
+                              method="POST"
+                              action={actions.admin.announcement.toggleActive}
+                              class="inline-block"
+                              data-confirm={`Are you sure you want to ${announcement.isActive ? 'deactivate' : 'activate'} this announcement?`}
                            >
-                              <Tooltip text={announcement.isActive ? 'Deactivate' : 'Activate'}>
-                                <Icon
-                                  name={
-                                    announcement.isActive ? 'ri:pause-circle-line' : 'ri:play-circle-line'
-                                  }
-                                  class="size-4"
-                                />
-                              </Tooltip>
-                            </button>
-                          </form>
+                              <input type="hidden" name="id" value={announcement.id} />
+                              <input type="hidden" name="isActive" value={String(!announcement.isActive)} />
+                              <Button
+                                as="button"
+                                type="submit"
+                                color={announcement.isActive ? 'warning' : 'success'}
+                                variant="faded"
+                                size="sm"
+                                iconOnly
+                                icon={announcement.isActive ? 'ri:pause-circle-line' : 'ri:play-circle-line'}
+                                label={announcement.isActive ? 'Deactivate' : 'Activate'}
+                              />
+                            </form>
+                          </Tooltip>

-                          <form
-                            method="POST"
-                            action={actions.admin.announcement.delete}
-                            class="inline-block"
-                            data-confirm="Are you sure you want to delete this announcement?"
-                          >
-                            <input type="hidden" name="id" value={announcement.id} />
-                            <button
-                              type="submit"
-                              class="rounded-md border border-red-500/50 bg-red-500/20 px-1 py-1 text-xs text-red-400 transition-colors hover:bg-red-500/30"
+                          <Tooltip text="Delete">
+                            <form
+                              method="POST"
+                              action={actions.admin.announcement.delete}
+                              class="inline-block"
+                              data-confirm="Are you sure you want to delete this announcement?"
                            >
-                              <Tooltip text="Delete">
-                                <Icon name="ri:delete-bin-line" class="size-4" />
-                              </Tooltip>
-                            </button>
-                          </form>
+                              <input type="hidden" name="id" value={announcement.id} />
+                              <Button
+                                as="button"
+                                type="submit"
+                                color="danger"
+                                variant="faded"
+                                size="sm"
+                                iconOnly
+                                icon="ri:delete-bin-line"
+                                label="Delete"
+                              />
+                            </form>
+                          </Tooltip>
                        </div>
                      </td>
                    </tr>
@@ -648,9 +668,12 @@ if (toggleResult?.error) {
                            <div class="pt-4">
                              <InputSubmitButton label="Save Changes" icon="ri:save-line" hideCancel />
                              <Button
+                                as="button"
                                type="button"
                                label="Cancel"
                                color="gray"
+                                variant="faded"
+                                size="md"
                                onclick={`document.getElementById('edit-announcement-form-${announcement.id}').classList.toggle('hidden')`}
                                class="ml-2"
                              />
--- a/web/src/pages/admin/attributes.astro
+++ b/web/src/pages/admin/attributes.astro
@@ -5,7 +5,9 @@ import { actions, isInputError } from 'astro:actions'
 import { z } from 'astro:content'
 import { orderBy as lodashOrderBy } from 'lodash-es'

+import Button from '../../components/Button.astro'
 import SortArrowIcon from '../../components/SortArrowIcon.astro'
+import Tooltip from '../../components/Tooltip.astro'
 import { getAttributeCategoryInfo } from '../../constants/attributeCategories'
 import { getAttributeTypeInfo } from '../../constants/attributeTypes'
 import BaseLayout from '../../layouts/BaseLayout.astro'
@@ -136,14 +138,15 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
    <h1 class="font-title text-2xl font-bold text-white">Attribute Management</h1>
    <div class="mt-2 flex items-center gap-4 sm:mt-0">
      <span class="text-sm text-zinc-400">{attributeCount} attributes</span>
-      <button
-        type="button"
-        class="inline-flex items-center gap-2 rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:outline-none"
+      <Button
+        as="button"
+        color="success"
+        variant="solid"
+        size="md"
+        icon="ri:add-line"
+        label="New Attribute"
        onclick="document.getElementById('create-attribute-form').classList.toggle('hidden')"
-      >
-        <Icon name="ri:add-line" class="size-4" />
-        <span>New Attribute</span>
-      </button>
+      />
    </div>
  </div>

@@ -286,12 +289,15 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
        </div>
      </div>

-      <button
+      <Button
+        as="button"
        type="submit"
-        class="w-full rounded-md bg-green-600 py-2 text-sm font-medium text-white hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
-      >
-        Create Attribute
-      </button>
+        color="success"
+        variant="solid"
+        size="md"
+        label="Create Attribute"
+        class="w-full"
+      />
    </form>
  </div>

@@ -343,12 +349,17 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
              ))
            }
          </select>
-          <button
+          <Button
+            as="button"
            type="submit"
-            class="inline-flex items-center rounded-r-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
-          >
-            <Icon name="ri:search-2-line" class="h-4 w-4" />
-          </button>
+            color="info"
+            variant="solid"
+            size="md"
+            iconOnly
+            icon="ri:search-2-line"
+            label="Search"
+            class="rounded-l-none"
+          />
        </div>
      </div>
    </form>
@@ -519,25 +530,34 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
                    </td>
                    <td class="px-4 py-3 text-right">
                      <div class="flex justify-end gap-2">
-                        <button
-                          type="button"
-                          class="inline-flex items-center justify-center rounded-md border border-blue-500/50 bg-blue-500/20 p-1.5 text-blue-400 transition-colors hover:bg-blue-500/30 focus:outline-none"
-                          onclick={`document.getElementById('edit-form-${index}').classList.toggle('hidden')`}
-                          title="Edit attribute"
-                        >
-                          <Icon name="ri:edit-line" class="size-3.5" />
-                        </button>
-                        <form method="POST" action={actions.admin.attribute.delete} class="inline-block">
-                          <input type="hidden" name="id" value={attribute.id} />
-                          <button
-                            type="submit"
-                            class="inline-flex items-center justify-center rounded-md border border-red-500/50 bg-red-500/20 p-1.5 text-red-400 transition-colors hover:bg-red-500/30 focus:outline-none"
-                            onclick="return confirm('Are you sure you want to delete this attribute?')"
-                            title="Delete attribute"
-                          >
-                            <Icon name="ri:delete-bin-line" class="size-3.5" />
-                          </button>
-                        </form>
+                        <Tooltip text="Edit">
+                          <Button
+                            as="button"
+                            color="info"
+                            variant="faded"
+                            size="sm"
+                            iconOnly
+                            icon="ri:edit-line"
+                            label="Edit"
+                            onclick={`document.getElementById('edit-form-${index}').classList.toggle('hidden')`}
+                          />
+                        </Tooltip>
+                        <Tooltip text="Delete">
+                          <form method="POST" action={actions.admin.attribute.delete} class="inline-block">
+                            <input type="hidden" name="id" value={attribute.id} />
+                            <Button
+                              as="button"
+                              type="submit"
+                              color="danger"
+                              variant="faded"
+                              size="sm"
+                              iconOnly
+                              icon="ri:delete-bin-line"
+                              label="Delete"
+                              onclick="return confirm('Are you sure you want to delete this attribute?')"
+                            />
+                          </form>
+                        </Tooltip>
                      </div>
                    </td>
                  </tr>
@@ -673,19 +693,23 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
                        </div>

                        <div class="flex justify-end space-x-3">
-                          <button
-                            type="button"
-                            class="rounded-md border border-zinc-600 bg-zinc-800 px-3 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-700 focus:outline-none"
+                          <Button
+                            as="button"
+                            color="gray"
+                            variant="faded"
+                            size="sm"
+                            label="Cancel"
                            onclick={`document.getElementById('edit-form-${index}').classList.toggle('hidden')`}
-                          >
-                            Cancel
-                          </button>
-                          <button
+                          />
+                          <Button
+                            as="button"
                            type="submit"
-                            class="rounded-md bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
-                          >
-                            Save Changes
-                          </button>
+                            color="info"
+                            variant="solid"
+                            size="sm"
+                            icon="ri:save-line"
+                            label="Save"
+                          />
                        </div>
                      </form>
                    </td>
--- a/web/src/pages/admin/comments.astro
+++ b/web/src/pages/admin/comments.astro
@@ -20,7 +20,7 @@ import { prisma } from '../../lib/prisma'
 import { urlWithParams } from '../../lib/urls'

 const user = Astro.locals.user
-if (!user || (!user.admin && !user.verifier)) {
+if (!user || (!user.admin && !user.moderator)) {
  return Astro.rewrite('/404')
 }

--- 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,7 +11,9 @@ type AdminLink = {
  icon: ComponentProps<typeof Icon>['name']
  title: string
  href: string
-  description: string
+  classNames: {
+    base?: string
+  }
 }

 const adminLinks: AdminLink[] = [
@@ -17,66 +21,98 @@ const adminLinks: AdminLink[] = [
    icon: 'ri:box-3-line',
    title: 'Services',
    href: '/admin/services',
-    description: 'Manage your available services',
-  },
-  {
-    icon: 'ri:file-list-3-line',
-    title: 'Attributes',
-    href: '/admin/attributes',
-    description: 'Configure service attributes',
+    classNames: {
+      base: 'text-green-300',
+    },
  },
  {
    icon: 'ri:user-3-line',
    title: 'Users',
    href: '/admin/users',
-    description: 'Manage user accounts',
+    classNames: {
+      base: 'text-red-300',
+    },
  },
  {
-    icon: 'ri:chat-settings-line',
+    icon: 'ri:chat-4-line',
    title: 'Comments',
    href: '/admin/comments',
-    description: 'Moderate user comments',
+    classNames: {
+      base: 'text-yellow-300',
+    },
  },
  {
    icon: 'ri:lightbulb-line',
-    title: 'Service suggestions',
+    title: 'Suggestions',
    href: '/admin/service-suggestions',
-    description: 'Review and manage 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',
-    description: 'Manage site 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: 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-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-    {
-      adminLinks.map((link) => (
-        <a
-          href={link.href}
-          class="group block rounded-lg border border-zinc-800 bg-gradient-to-br from-zinc-900/90 to-zinc-900/50 p-6 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"
-        >
-          <div class="mb-4 flex items-center gap-3">
-            <Icon
-              name={link.icon}
-              class="h-6 w-6 text-zinc-400 transition-colors group-hover:text-green-400"
-            />
-            <h2 class="font-title text-xl font-semibold text-zinc-100 transition-colors group-hover:text-green-400">
-              {link.title}
-            </h2>
-          </div>
-          <p class="text-sm text-zinc-400">{link.description}</p>
-        </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>
--- a/web/src/pages/admin/releases.astro
+++ 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>
--- a/web/src/pages/admin/service-suggestions/[id].astro
+++ b/web/src/pages/admin/service-suggestions/[id].astro
@@ -2,10 +2,14 @@
 import { Icon } from 'astro-icon/components'
 import { actions } from 'astro:actions'

+import Button from '../../../components/Button.astro'
 import Chat from '../../../components/Chat.astro'
 import ServiceCard from '../../../components/ServiceCard.astro'
 import UserBadge from '../../../components/UserBadge.astro'
-import { getServiceSuggestionStatusInfo } from '../../../constants/serviceSuggestionStatus'
+import {
+  getServiceSuggestionStatusInfo,
+  serviceSuggestionStatuses,
+} from '../../../constants/serviceSuggestionStatus'
 import BaseLayout from '../../../layouts/BaseLayout.astro'
 import { cn } from '../../../lib/cn'
 import { parseIntWithFallback } from '../../../lib/numbers'
@@ -96,13 +100,15 @@ const statusInfo = getServiceSuggestionStatusInfo(serviceSuggestion.status)
  widthClassName="max-w-screen-md"
 >
  <div class="mb-4 flex items-center gap-4">
-    <a
+    <Button
+      as="a"
      href="/admin/service-suggestions"
-      class="font-title inline-flex items-center justify-center rounded-md border border-green-500/30 bg-green-500/10 px-3 py-2 text-sm text-green-400 shadow-xs transition-colors duration-200 hover:bg-green-500/20 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
-    >
-      <Icon name="ri:arrow-left-s-line" class="mr-1 size-4" />
-      Back
-    </a>
+      color="success"
+      variant="faded"
+      size="md"
+      icon="ri:arrow-left-s-line"
+      label="Back"
+    />

    <h1 class="font-title text-xl text-green-500">Service Suggestion</h1>
  </div>
@@ -170,17 +176,23 @@ const statusInfo = getServiceSuggestionStatusInfo(serviceSuggestion.status)
          name="status"
          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-sm text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500 disabled:opacity-50"
        >
-          <option value="PENDING" selected={serviceSuggestion.status === 'PENDING'}> Pending </option>
-          <option value="APPROVED" selected={serviceSuggestion.status === 'APPROVED'}> Approve </option>
-          <option value="REJECTED" selected={serviceSuggestion.status === 'REJECTED'}> Reject </option>
-          <option value="WITHDRAWN" selected={serviceSuggestion.status === 'WITHDRAWN'}> Withdrawn </option>
+          {
+            serviceSuggestionStatuses.map((status) => (
+              <option value={status.value} selected={serviceSuggestion.status === status.value}>
+                {status.label}
+              </option>
+            ))
+          }
        </select>
-        <button
+        <Button
+          as="button"
          type="submit"
-          class="font-title inline-flex items-center justify-center rounded-md border border-green-500/30 bg-green-500/10 px-4 py-2 text-sm text-green-400 shadow-xs transition-colors duration-200 hover:bg-green-500/20 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
-        >
-          <Icon name="ri:save-line" class="mr-1 size-4" /> Update
-        </button>
+          color="success"
+          variant="faded"
+          size="md"
+          icon="ri:save-line"
+          label="Update"
+        />
      </form>
    </div>

--- a/web/src/pages/admin/service-suggestions/index.astro
+++ b/web/src/pages/admin/service-suggestions/index.astro
@@ -4,8 +4,10 @@ import { actions } from 'astro:actions'
 import { z } from 'astro:content'
 import { orderBy } from 'lodash-es'

+import Button from '../../../components/Button.astro'
 import SortArrowIcon from '../../../components/SortArrowIcon.astro'
 import TimeFormatted from '../../../components/TimeFormatted.astro'
+import Tooltip from '../../../components/Tooltip.astro'
 import UserBadge from '../../../components/UserBadge.astro'
 import {
  getServiceSuggestionStatusInfo,
@@ -183,12 +185,16 @@ const makeSortUrl = (slug: string) => {
        </select>
      </div>
      <div class="flex items-end">
-        <button
+        <Button
+          as="button"
          type="submit"
-          class="inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
-        >
-          <Icon name="ri:search-2-line" class="h-4 w-4" />
-        </button>
+          color="info"
+          variant="solid"
+          size="md"
+          iconOnly
+          icon="ri:search-2-line"
+          label="Search"
+        />
      </div>
    </form>
  </div>
@@ -317,13 +323,18 @@ const makeSortUrl = (slug: string) => {
                  </td>
                  <td class="px-4 py-3 text-right">
                    <div class="flex justify-end gap-1">
-                      <a
-                        href={`/admin/service-suggestions/${suggestion.id}`}
-                        class="inline-flex items-center justify-center rounded-full border border-green-500/40 bg-green-500/10 p-1.5 text-green-400 shadow-xs transition-colors duration-200 hover:bg-green-500/20 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
-                        title="View"
-                      >
-                        <Icon name="ri:external-link-line" class="size-4" />
-                      </a>
+                      <Tooltip text="Manage">
+                        <Button
+                          as="a"
+                          href={`/admin/service-suggestions/${suggestion.id}`}
+                          color="success"
+                          variant="faded"
+                          size="sm"
+                          iconOnly
+                          icon="ri:arrow-right-line"
+                          label="Manage"
+                        />
+                      </Tooltip>
                    </div>
                  </td>
                </tr>
--- a/web/src/pages/admin/services/[slug]/edit.astro
+++ b/web/src/pages/admin/services/[slug]/edit.astro
--- a/web/src/pages/admin/services/index.astro
+++ b/web/src/pages/admin/services/index.astro
@@ -3,10 +3,13 @@ import { ServiceVisibility, VerificationStatus, type Prisma } from '@prisma/clie
 import { z } from 'astro/zod'
 import { Icon } from 'astro-icon/components'

+import Button from '../../../components/Button.astro'
 import MyPicture from '../../../components/MyPicture.astro'
 import SortArrowIcon from '../../../components/SortArrowIcon.astro'
+import Tooltip from '../../../components/Tooltip.astro'
 import { getKycLevelInfo } from '../../../constants/kycLevels'
-import { getVerificationStatusInfo } from '../../../constants/verificationStatus'
+import { serviceVisibilities } from '../../../constants/serviceVisibility'
+import { getVerificationStatusInfo, verificationStatuses } from '../../../constants/verificationStatus'
 import BaseLayout from '../../../layouts/BaseLayout.astro'
 import { cn } from '../../../lib/cn'
 import { zodParseQueryParamsStoringErrors } from '../../../lib/parseUrlFilters'
@@ -171,13 +174,15 @@ const truncate = (text: string, length: number) => {
    <h1 class="font-title text-2xl font-bold text-white">Service Management</h1>
    <div class="mt-2 flex items-center gap-4 sm:mt-0">
      <span class="text-sm text-zinc-400">{totalServicesCount} services</span>
-      <a
+      <Button
+        as="a"
        href="/admin/services/new"
-        class="inline-flex items-center gap-2 rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:outline-none"
-      >
-        <Icon name="ri:add-line" class="size-4" />
-        <span>New Service</span>
-      </a>
+        color="success"
+        variant="solid"
+        size="md"
+        icon="ri:add-line"
+        label="New Service"
+      />
    </div>
  </div>

@@ -205,11 +210,11 @@ const truncate = (text: string, length: number) => {
          id="visibility"
          class="mt-1 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
        >
-          <option value="">All Visibilities</option>
+          <option value="">All</option>
          {
-            Object.values(ServiceVisibility).map((status) => (
-              <option value={status} selected={filters.visibility === status}>
-                {status}
+            serviceVisibilities.map((visibility) => (
+              <option value={visibility.value} selected={filters.visibility === visibility.value}>
+                {visibility.label}
              </option>
            ))
          }
@@ -223,11 +228,11 @@ const truncate = (text: string, length: number) => {
          id="verificationStatus"
          class="mt-1 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
        >
-          <option value="">All Statuses</option>
+          <option value="">All</option>
          {
-            Object.values(VerificationStatus).map((status) => (
-              <option value={status} selected={filters.verificationStatus === status}>
-                {status}
+            verificationStatuses.map((status) => (
+              <option value={status.value} selected={filters.verificationStatus === status.value}>
+                {status.label}
              </option>
            ))
          }
@@ -250,12 +255,17 @@ const truncate = (text: string, length: number) => {
              ))
            }
          </select>
-          <button
+          <Button
+            as="button"
            type="submit"
-            class="ml-2 inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
-          >
-            <Icon name="ri:search-2-line" class="h-4 w-4" />
-          </button>
+            color="info"
+            variant="solid"
+            size="md"
+            iconOnly
+            icon="ri:search-2-line"
+            label="Search"
+            class="ml-2"
+          />
        </div>
      </div>
    </form>
@@ -437,20 +447,30 @@ const truncate = (text: string, length: number) => {
                  <td class="px-4 py-3 text-center text-xs text-zinc-400">{service.formattedDate}</td>
                  <td class="px-4 py-3 text-right">
                    <div class="flex justify-end space-x-2">
-                      <a
-                        href={`/service/${service.slug}`}
-                        target="_blank"
-                        class="inline-flex items-center rounded-md border border-zinc-600 bg-zinc-800 px-2 py-1 text-xs text-zinc-300 transition-colors hover:bg-zinc-700"
-                        title="View on site"
-                      >
-                        <Icon name="ri:external-link-line" class="size-3.5" />
-                      </a>
-                      <a
-                        href={`/admin/services/${service.slug}/edit`}
-                        class="inline-flex items-center rounded-md border border-blue-500/50 bg-blue-500/20 px-2 py-1 text-xs text-blue-400 transition-colors hover:bg-blue-500/30"
-                      >
-                        Edit
-                      </a>
+                      <Tooltip text="View">
+                        <Button
+                          as="a"
+                          href={`/service/${service.slug}`}
+                          color="success"
+                          variant="faded"
+                          size="sm"
+                          iconOnly
+                          icon="ri:global-line"
+                          label="View"
+                        />
+                      </Tooltip>
+                      <Tooltip text="Edit">
+                        <Button
+                          as="a"
+                          href={`/admin/services/${service.slug}/edit`}
+                          color="info"
+                          variant="faded"
+                          size="sm"
+                          iconOnly
+                          icon="ri:edit-line"
+                          label="Edit"
+                        />
+                      </Tooltip>
                    </div>
                  </td>
                </tr>
--- 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'
@@ -52,7 +53,7 @@ const [user, allServices] = await Astro.locals.banners.tryMany([
          link: true,
          admin: true,
          verified: true,
-          verifier: true,
+          moderator: true,
          spammer: true,
          verifiedLink: true,
          internalNotes: {
@@ -141,7 +142,7 @@ if (!user) return Astro.rewrite('/404')
    <div class="mb-4 flex flex-wrap justify-center gap-2">
      {user.admin && <BadgeSmall color="green" text="Admin" icon="ri:shield-star-fill" />}
      {user.verified && <BadgeSmall color="cyan" text="Verified" icon="ri:verified-badge-fill" />}
-      {user.verifier && <BadgeSmall color="blue" text="Moderator" icon="ri:graduation-cap-fill" />}
+      {user.moderator && <BadgeSmall color="blue" text="Moderator" icon="ri:graduation-cap-fill" />}
      {user.spammer && <BadgeSmall color="red" text="Spammer" icon="ri:alert-fill" />}
    </div>

@@ -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: 'verifier', 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.verifier ? 'verifier' : 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>
--- a/web/src/pages/admin/users/index.astro
+++ b/web/src/pages/admin/users/index.astro
@@ -3,6 +3,7 @@ import { Icon } from 'astro-icon/components'
 import { z } from 'astro:content'
 import { orderBy as lodashOrderBy } from 'lodash-es'

+import Button from '../../../components/Button.astro'
 import SortArrowIcon from '../../../components/SortArrowIcon.astro'
 import TimeFormatted from '../../../components/TimeFormatted.astro'
 import Tooltip from '../../../components/Tooltip.astro'
@@ -21,7 +22,7 @@ const { data: filters } = zodParseQueryParamsStoringErrors(
    'sort-by': z.enum(['name', 'role', 'createdAt', 'karma']).default('createdAt'),
    'sort-order': z.enum(['asc', 'desc']).default('desc'),
    search: z.string().optional(),
-    role: z.enum(['user', 'admin', 'verifier', 'verified', 'spammer']).optional(),
+    role: z.enum(['user', 'admin', 'moderator', 'verified', 'spammer']).optional(),
  },
  Astro
 )
@@ -46,7 +47,7 @@ if (filters.role) {
  switch (filters.role) {
    case 'user': {
      whereClause.admin = false
-      whereClause.verifier = false
+      whereClause.moderator = false
      whereClause.verified = false
      whereClause.spammer = false
      break
@@ -55,8 +56,8 @@ if (filters.role) {
      whereClause.admin = true
      break
    }
-    case 'verifier': {
-      whereClause.verifier = true
+    case 'moderator': {
+      whereClause.moderator = true
      break
    }
    case 'verified': {
@@ -80,7 +81,7 @@ const dbUsers = await prisma.user.findMany({
    picture: true,
    verified: true,
    admin: true,
-    verifier: true,
+    moderator: true,
    spammer: true,
    totalKarma: true,
    createdAt: true,
@@ -147,16 +148,21 @@ const makeSortUrl = (sortBy: NonNullable<(typeof filters)['sort-by']>) => {
            <option value="" selected={!filters.role}>All Users</option>
            <option value="user" selected={filters.role === 'user'}>Regular Users</option>
            <option value="admin" selected={filters.role === 'admin'}>Admins</option>
-            <option value="verifier" selected={filters.role === 'verifier'}>Verifiers</option>
+            <option value="moderator" selected={filters.role === 'moderator'}>Moderators</option>
            <option value="verified" selected={filters.role === 'verified'}>Verified Users</option>
            <option value="spammer" selected={filters.role === 'spammer'}>Spammers</option>
          </select>
-          <button
+          <Button
+            as="button"
            type="submit"
-            class="inline-flex items-center rounded-r-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
-          >
-            <Icon name="ri:search-2-line" class="h-4 w-4" />
-          </button>
+            color="info"
+            variant="solid"
+            size="md"
+            iconOnly
+            icon="ri:search-2-line"
+            label="Search"
+            class="rounded-l-none"
+          />
        </div>
      </div>
    </form>
@@ -277,10 +283,10 @@ const makeSortUrl = (sortBy: NonNullable<(typeof filters)['sort-by']>) => {
                          Verified
                        </span>
                      )}
-                      {user.verifier && (
+                      {user.moderator && (
                        <span class="inline-flex items-center gap-1 rounded-md bg-blue-900/30 px-2 py-0.5 text-xs font-medium text-blue-400">
                          <Icon name="ri:shield-check-fill" class="size-3.5" />
-                          Verifier
+                          Moderator
                        </span>
                      )}
                    </div>
@@ -320,30 +326,43 @@ const makeSortUrl = (sortBy: NonNullable<(typeof filters)['sort-by']>) => {
                  </td>
                  <td class="px-4 py-3">
                    <div class="flex justify-center gap-2">
-                      <Tooltip
-                        as="a"
-                        href={`/account/impersonate?targetUserId=${user.id}&redirect=/account`}
-                        data-astro-prefetch="tap"
-                        class="inline-flex items-center rounded-md border border-orange-500/50 bg-orange-500/20 px-1 py-1 text-xs text-orange-400 transition-colors hover:bg-orange-500/30"
-                        text="Impersonate"
-                      >
-                        <Icon name="ri:spy-line" class="size-4" />
+                      <Tooltip text="Impersonate">
+                        <Button
+                          as="a"
+                          href={`/account/impersonate?targetUserId=${user.id}&redirect=/account`}
+                          data-astro-prefetch="tap"
+                          color="warning"
+                          variant="faded"
+                          size="sm"
+                          iconOnly
+                          icon="ri:spy-line"
+                          label="Impersonate"
+                          disabled={user.admin}
+                        />
                      </Tooltip>
-                      <Tooltip
-                        as="a"
-                        href={`/admin/users/${user.name}`}
-                        class="inline-flex items-center rounded-md border border-blue-500/50 bg-blue-500/20 px-1 py-1 text-xs text-blue-400 transition-colors hover:bg-blue-500/30"
-                        text="Edit"
-                      >
-                        <Icon name="ri:edit-line" class="size-4" />
+                      <Tooltip text="Edit">
+                        <Button
+                          as="a"
+                          href={`/admin/users/${user.name}`}
+                          color="info"
+                          variant="faded"
+                          size="sm"
+                          iconOnly
+                          icon="ri:edit-line"
+                          label="Edit"
+                        />
                      </Tooltip>
-                      <Tooltip
-                        as="a"
-                        href={`/u/${user.name}`}
-                        class="inline-flex items-center rounded-md border border-green-500/50 bg-green-500/20 px-1 py-1 text-xs text-green-400 transition-colors hover:bg-green-500/30"
-                        text="Public profile"
-                      >
-                        <Icon name="ri:global-line" class="size-4" />
+                      <Tooltip text="Public profile">
+                        <Button
+                          as="a"
+                          href={`/u/${user.name}`}
+                          color="success"
+                          variant="faded"
+                          size="sm"
+                          iconOnly
+                          icon="ri:global-line"
+                          label="Public profile"
+                        />
                      </Tooltip>
                    </div>
                  </td>
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -222,7 +222,9 @@ const where = {
  verificationStatus: {
    in: includeScams ? uniq([...filters.verification, 'VERIFICATION_FAILED'] as const) : filters.verification,
  },
-  serviceVisibility: ServiceVisibility.PUBLIC,
+  serviceVisibility: {
+    in: [ServiceVisibility.PUBLIC, ServiceVisibility.ARCHIVED],
+  },
  overallScore: { gte: filters['min-score'] },
  acceptedCurrencies: filters.currencies.length
    ? filters['currency-mode'] === 'and'
@@ -322,7 +324,11 @@ const [categories, [services, totalServices], countCommunityOnly, attributes] =
            icon: true,
            _count: {
              select: {
-                services: true,
+                services: {
+                  where: {
+                    serviceVisibility: 'PUBLIC',
+                  },
+                },
              },
            },
          },
@@ -368,6 +374,7 @@ const [categories, [services, totalServices], countCommunityOnly, attributes] =
            imageUrl: true,
            verificationStatus: true,
            acceptedCurrencies: true,
+            serviceVisibility: true,
            attributes: {
              select: {
                attribute: {
@@ -530,6 +537,7 @@ const showFiltersId = 'show-filters'
            hx-trigger="input delay:500ms, keyup[key=='Enter']"
            hx-target={`#${searchResultsId}`}
            hx-select={`#${searchResultsId}`}
+            hx-swap="outerHTML"
            hx-push-url="true"
            hx-indicator="#search-indicator"
            class="contents"
--- a/web/src/pages/service/[slug].astro
+++ b/web/src/pages/service/[slug].astro
@@ -30,7 +30,7 @@ import { formatContactMethod } from '../../constants/contactMethods'
 import { currencies, getCurrencyInfo } from '../../constants/currencies'
 import { getEventTypeInfo } from '../../constants/eventTypes'
 import { getKycLevelInfo, kycLevels } from '../../constants/kycLevels'
-import { serviceVisibilitiesById } from '../../constants/serviceVisibility'
+import { getServiceVisibilityInfo } from '../../constants/serviceVisibility'
 import { getTosHighlightRatingInfo } from '../../constants/tosHighlightRating'
 import { getUserSentimentInfo } from '../../constants/userSentiment'
 import { getVerificationStatusInfo, verificationStatusesByValue } from '../../constants/verificationStatus'
@@ -240,7 +240,11 @@ const watchingDetails = makeWatchingDetails(dbNotificationPreferences, service?.

 if (!service) return Astro.rewrite('/404')

-if (service.serviceVisibility !== 'PUBLIC' && service.serviceVisibility !== 'UNLISTED') {
+if (
+  service.serviceVisibility !== 'PUBLIC' &&
+  service.serviceVisibility !== 'UNLISTED' &&
+  service.serviceVisibility !== 'ARCHIVED'
+) {
  return Astro.rewrite('/404')
 }

@@ -356,6 +360,8 @@ const ogImageTemplateData = {
  score: service.overallScore,
  imageUrl: service.imageUrl,
 } satisfies OgImageAllTemplatesWithProps
+
+const serviceVisibilityInfo = getServiceVisibilityInfo(service.serviceVisibility)
 ---

 <BaseLayout
@@ -457,16 +463,17 @@ const ogImageTemplateData = {
  ]}
 >
  {
-    service.serviceVisibility === 'UNLISTED' && (
-      <div class={cn('mb-4 rounded-md bg-yellow-900/50 p-2 text-sm text-yellow-400')}>
+    (serviceVisibilityInfo.value === 'UNLISTED' || serviceVisibilityInfo.value === 'ARCHIVED') && (
+      <div class={cn('mb-4 rounded-md bg-yellow-900/50 px-3 py-2 text-sm text-yellow-400')}>
        <Icon
-          name={serviceVisibilitiesById.UNLISTED.icon}
-          class={cn('me-1.5 inline-block size-4 align-[-0.15em]', serviceVisibilitiesById.UNLISTED.iconClass)}
+          name={serviceVisibilityInfo.icon}
+          class="me-1.5 inline-block size-4 align-[-0.15em] text-yellow-500"
        />
-        Unlisted service, only accessible via direct link and won't appear in searches.
+        {serviceVisibilityInfo.longDescription}
      </div>
    )
  }
+
  <VerificationWarningBanner service={service} />

  <div class="flex items-center gap-4">
@@ -1245,7 +1252,8 @@ const ogImageTemplateData = {
      <div class="flex flex-col gap-2">
        {
          service.verificationStatus !== 'VERIFICATION_SUCCESS' &&
-            service.verificationStatus !== 'VERIFICATION_FAILED' && (
+            service.verificationStatus !== 'VERIFICATION_FAILED' &&
+            service.serviceVisibility !== 'ARCHIVED' && (
              <form
                method="POST"
                action={actions.service.requestVerification}
--- a/web/src/pages/u/[username].astro
+++ b/web/src/pages/u/[username].astro
@@ -43,7 +43,7 @@ const user = await Astro.locals.banners.try('user', async () => {
        spammer: true,
        verified: true,
        admin: true,
-        verifier: true,
+        moderator: true,
        verifiedLink: true,
        totalKarma: true,
        createdAt: true,
@@ -208,7 +208,7 @@ const isCurrentUser = !!Astro.locals.user && user.id === Astro.locals.user.id
        sameAs: user.link ? [user.link] : undefined,
        description: `User profile page for ${user.displayName ?? user.name} on KYCnot.me`,
        identifier: [user.name, user.id.toString()],
-        jobTitle: user.admin ? 'Administrator' : user.verifier ? 'Moderator' : undefined,
+        jobTitle: user.admin ? 'Administrator' : user.moderator ? 'Moderator' : undefined,
        memberOf: KYCNOTME_SCHEMA_MINI,
        interactionStatistic: [
          {
@@ -281,9 +281,9 @@ const isCurrentUser = !!Astro.locals.user && user.id === Astro.locals.user.id
              )
            }
            {
-              user.verifier && (
+              user.moderator && (
                <span class="rounded-full border border-green-500/50 bg-green-500/20 px-2 py-0.5 text-xs text-green-400">
-                  verifier
+                  moderator
                </span>
              )
            }
@@ -415,14 +415,14 @@ const isCurrentUser = !!Astro.locals.user && user.id === Astro.locals.user.id
                    )
                  }
                  {
-                    user.verifier && (
+                    user.moderator && (
                      <span class="rounded-full border border-green-500/50 bg-green-500/20 px-2 py-0.5 text-xs text-green-400">
-                        Verifier
+                        Moderator
                      </span>
                    )
                  }
                  {
-                    !user.admin && !user.verified && !user.verifier && (
+                    !user.admin && !user.verified && !user.moderator && (
                      <span class="border-day-700/50 bg-day-700/20 text-day-400 rounded-full border px-2 py-0.5 text-xs">
                        Standard User
                      </span>
--- a/web/src/styles/global.css
+++ b/web/src/styles/global.css
@@ -103,6 +103,10 @@
    drop-shadow(0 0 4px color-mix(in oklab, currentColor 60%, transparent));
 }

+@utility scrollbar-w-none {
+  scrollbar-width: none;
+}
+
@utility checkbox-force-checked {
  &:not(:checked) {
    @apply border-transparent! bg-current/50!;
Author	SHA1	Message	Date
pluja	8f2b2c34ff	Release 2025-05-25-irZj	2025-05-25 11:21:35 +00:00
pluja	ac9a2f428a	Release 2025-05-25-ELtG	2025-05-25 10:07:02 +00:00
pluja	970622d061	Release 2025-05-23-xzNR	2025-05-23 21:50:03 +00:00
pluja	4806a7fd4e	Release 2025-05-23-nwlb	2025-05-23 18:23:14 +00:00
pluja	85605de8aa	Release 2025-05-23-S6tT	2025-05-23 14:56:00 +00:00
pluja	7a22629c55	Release 2025-05-23-JSHi	2025-05-23 12:25:07 +00:00
pluja	8deb9acb93	Release 2025-05-23-9Gto	2025-05-23 12:09:33 +00:00
pluja	61a5448ff5	Release 2025-05-23-5vNZ	2025-05-23 12:05:29 +00:00