diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index ebe7d01..8514350 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -6,6 +6,9 @@ import { code } from "./shiki-code";
 import { DocsContainer } from "./docs-container";
 
 import "@picocss/pico";
+import "@picocss/pico/css/pico.colors.min.css";
+
+import "./style.css";
 
 const PicoDocsContainer = ({ children, ...props }: any) => {
   return (
diff --git a/.storybook/style.css b/.storybook/style.css
new file mode 100644
index 0000000..0dd2182
--- /dev/null
+++ b/.storybook/style.css
@@ -0,0 +1,7 @@
+.category {
+  color: var(--pico-color-pumpkin-600);
+  font-weight: 600;
+  font-size: 13px;
+  letter-spacing: 0.0625em;
+  text-transform: uppercase;
+}
diff --git a/src/components/checkbox-group/Docs.mdx b/src/components/checkbox-group/Docs.mdx
index e8b80c9..06c3dbe 100644
--- a/src/components/checkbox-group/Docs.mdx
+++ b/src/components/checkbox-group/Docs.mdx
@@ -5,6 +5,8 @@ import * as CheckboxGroupStories from "./CheckboxGroup.stories";
 
 <hgroup>
 
+<p class="category">Components</p>
+
 # CheckboxGroup
 
 A generic multi-choice component enabling users to select multiple values from a list of options.
diff --git a/src/components/field-errors/Docs.mdx b/src/components/field-errors/Docs.mdx
index 7992f06..f759235 100644
--- a/src/components/field-errors/Docs.mdx
+++ b/src/components/field-errors/Docs.mdx
@@ -11,6 +11,8 @@ import {
 
 <hgroup>
 
+<p class="category">Components</p>
+
 # FieldErrors
 
 A JSX component version of the [`useFieldErrors()`](https://github.com/jaredLunde/form-atoms#usefielderrors) hook.
diff --git a/src/components/list/Docs.mdx b/src/components/list/Docs.mdx
index 45c9adf..ce7d4e0 100644
--- a/src/components/list/Docs.mdx
+++ b/src/components/list/Docs.mdx
@@ -6,6 +6,8 @@ import * as ListItemStories from "./item/Item.stories";
 
 <hgroup>
 
+<p class="category">Components</p>
+
 # List
 
 The List component enables you to easily render & manage a [listField()](?path=/docs/fields-listField--docs). It is a higher order component, which internally uses the [useListField](?path=/docs/hooks-useListField--docs)
diff --git a/src/components/multi-select/Docs.mdx b/src/components/multi-select/Docs.mdx
index 61e032f..bac3cf1 100644
--- a/src/components/multi-select/Docs.mdx
+++ b/src/components/multi-select/Docs.mdx
@@ -5,6 +5,8 @@ import * as MultiSelectStories from "./MultiSelect.stories";
 
 <hgroup>
 
+<p class="category">Components</p>
+
 # MultiSelect
 
 A combination of generic [useMultiSelectFieldProps](?path=/docs/hooks-usemultiselectfieldprops--docs) and [useSelectOptions](?path=/docs/hooks-useselectoptions--docs)
diff --git a/src/components/placeholder-option/Docs.mdx b/src/components/placeholder-option/Docs.mdx
index 9a89a9a..2e062c8 100644
--- a/src/components/placeholder-option/Docs.mdx
+++ b/src/components/placeholder-option/Docs.mdx
@@ -11,6 +11,8 @@ import {
 
 <hgroup>
 
+<p class="category">Components</p>
+
 # PlaceholderOption
 
 An atomic component to be used when your `<select>` is controlled with [useSelectFieldProps](?path=/docs/hooks-useselectfieldprops--docs).
diff --git a/src/components/radio-group/Docs.mdx b/src/components/radio-group/Docs.mdx
index 923d8c5..725c937 100644
--- a/src/components/radio-group/Docs.mdx
+++ b/src/components/radio-group/Docs.mdx
@@ -5,6 +5,8 @@ import * as RadioGroupStories from "./RadioGroup.stories";
 
 <hgroup>
 
+<p class="category">Components</p>
+
 # RadioGroup
 
 A combination of generic [useSelectFieldProps](?path=/docs/hooks-useselectfieldprops--docs) and [useOptions](?path=/docs/hooks-useoptions--docs)
diff --git a/src/components/select/Docs.mdx b/src/components/select/Docs.mdx
index 841ff18..bc23392 100644
--- a/src/components/select/Docs.mdx
+++ b/src/components/select/Docs.mdx
@@ -5,6 +5,8 @@ import * as SelectStories from "./Select.stories";
 
 <hgroup>
 
+<p class="category">Components</p>
+
 # Select
 
 A combination of generic [useSelectFieldProps](?path=/docs/hooks-useselectfieldprops--docs) and [useSelectOptions](?path=/docs/hooks-useselectoptions--docs)
diff --git a/src/fields/array-field/Docs.mdx b/src/fields/array-field/Docs.mdx
index 12e2e3b..5e154b4 100644
--- a/src/fields/array-field/Docs.mdx
+++ b/src/fields/array-field/Docs.mdx
@@ -5,6 +5,8 @@ import Config from "./config.md?raw";
 
 <hgroup>
 
+<p class="category">Fields</p>
+
 # `arrayField<Value>(): ZodField<Value[]>`
 
 A generic field to hold multiple values of the same type.
diff --git a/src/fields/boolean-field/Docs.mdx b/src/fields/boolean-field/Docs.mdx
index 8a98c69..47edc29 100644
--- a/src/fields/boolean-field/Docs.mdx
+++ b/src/fields/boolean-field/Docs.mdx
@@ -6,6 +6,8 @@ import Config from "./config.md?raw";
 
 <hgroup>
 
+<p class="category">Fields</p>
+
 # `booleanField(): ZodField<boolean | undefined>`
 
 A field to represent a 3-state checkbox which will have `true`, `false` or `undefined` value.
diff --git a/src/fields/checkbox-field/Docs.mdx b/src/fields/checkbox-field/Docs.mdx
index b6fefff..61bf818 100644
--- a/src/fields/checkbox-field/Docs.mdx
+++ b/src/fields/checkbox-field/Docs.mdx
@@ -7,6 +7,8 @@ import Config from "./config.md?raw";
 
 <hgroup>
 
+<p class="category">Fields</p>
+
 # `checkboxField()`
 
 A field to represent a 2-state checkbox which will have `true` or `false` value.
diff --git a/src/fields/date-field/Docs.mdx b/src/fields/date-field/Docs.mdx
index 0b18d2e..e5cad21 100644
--- a/src/fields/date-field/Docs.mdx
+++ b/src/fields/date-field/Docs.mdx
@@ -6,6 +6,8 @@ import Config from "./config.md?raw";
 
 <hgroup>
 
+<p class="category">Fields</p>
+
 # `dateField(): ZodField<date | undefined>`
 
 </hgroup>
diff --git a/src/fields/digit-field/Docs.mdx b/src/fields/digit-field/Docs.mdx
index ef05153..4e129ae 100644
--- a/src/fields/digit-field/Docs.mdx
+++ b/src/fields/digit-field/Docs.mdx
@@ -3,8 +3,14 @@ import Config from "./config.md?raw";
 
 <Meta title="fields/digitField" />
 
+<hgroup>
+
+<p class="category">Fields</p>
+
 # `digitField(): ZodField<0 | 1 | ... | 9 | undefined>`
 
+</hgroup>
+
 ```ts
 import { digitField } from "@form-atoms/field";
 
@@ -22,3 +28,4 @@ const pinForm = formAtom({
 ## Initial Config
 
 <Markdown>{Config}</Markdown>
+```
diff --git a/src/fields/files-field/Docs.mdx b/src/fields/files-field/Docs.mdx
index 5ee7e41..c9477cb 100644
--- a/src/fields/files-field/Docs.mdx
+++ b/src/fields/files-field/Docs.mdx
@@ -7,6 +7,8 @@ import Config from "./config.md?raw";
 
 <hgroup>
 
+<p class="category">Fields</p>
+
 # `filesField(): ZodField<File[] | [File, ...File[]]>`
 
 A field to hold `input[type="file"]` values.
diff --git a/src/fields/list-field/Docs.mdx b/src/fields/list-field/Docs.mdx
index 5c1e2a7..6e2cab4 100644
--- a/src/fields/list-field/Docs.mdx
+++ b/src/fields/list-field/Docs.mdx
@@ -5,6 +5,8 @@ import Config from "./config.md?raw";
 
 <hgroup>
 
+<p class="category">Fields</p>
+
 # `listField<Fields>(): RequiredListField<Fields>`
 
 A field to capture list of generic items. You can think of each item as a separate form. It requires a `builder` function returning fields, which will be used inside of the form.
diff --git a/src/fields/number-field/Docs.mdx b/src/fields/number-field/Docs.mdx
index 36c583c..0b45ed7 100644
--- a/src/fields/number-field/Docs.mdx
+++ b/src/fields/number-field/Docs.mdx
@@ -6,6 +6,8 @@ import Config from "./config.md?raw";
 
 <hgroup>
 
+<p class="category">Fields</p>
+
 # `numberField(): ZodField<number | undefined>`
 
 </hgroup>
diff --git a/src/fields/string-field/Docs.mdx b/src/fields/string-field/Docs.mdx
index cea842d..a41609e 100644
--- a/src/fields/string-field/Docs.mdx
+++ b/src/fields/string-field/Docs.mdx
@@ -5,6 +5,8 @@ import Config from "./config.md?raw";
 
 <hgroup>
 
+<p class="category">Fields</p>
+
 # `stringField(): ZodField<string | undefined>`
 
 A generic choice field to hold a key of some options e.g. in `<input type="radio">` or `<select>` elements.
diff --git a/src/fields/text-field/Docs.mdx b/src/fields/text-field/Docs.mdx
index 7d31946..c149f7f 100644
--- a/src/fields/text-field/Docs.mdx
+++ b/src/fields/text-field/Docs.mdx
@@ -6,6 +6,8 @@ import Config from "./config.md?raw";
 
 <hgroup>
 
+<p class="category">Fields</p>
+
 # `textField(): ZodField<string>`
 
 </hgroup>
diff --git a/src/fields/zod-field/Docs.mdx b/src/fields/zod-field/Docs.mdx
index a1b5e78..f0ee531 100644
--- a/src/fields/zod-field/Docs.mdx
+++ b/src/fields/zod-field/Docs.mdx
@@ -5,6 +5,8 @@ import Config from "./config.md?raw";
 
 <hgroup>
 
+<p class="category">Fields</p>
+
 # `zodField()`
 
 `zodField` extends the `fieldAtom` with `required` state which is `true` by default.
diff --git a/src/hooks/use-checkbox-field-props/Docs.mdx b/src/hooks/use-checkbox-field-props/Docs.mdx
index 6a7d409..fb03dae 100644
--- a/src/hooks/use-checkbox-field-props/Docs.mdx
+++ b/src/hooks/use-checkbox-field-props/Docs.mdx
@@ -4,6 +4,8 @@ import { Meta } from "@storybook/blocks";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # `useCheckboxFieldProps(field: BooleanField | CheckboxField)`
 
 A hook providing props to control the `input[type=checkbox]`.
diff --git a/src/hooks/use-clear-input-action/Docs.mdx b/src/hooks/use-clear-input-action/Docs.mdx
index 84ca7a3..4eb81f8 100644
--- a/src/hooks/use-clear-input-action/Docs.mdx
+++ b/src/hooks/use-clear-input-action/Docs.mdx
@@ -5,6 +5,8 @@ import { Primary } from "./useClearInputAction.stories";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # useClearInputAction(field)
 
 Clears input value.
diff --git a/src/hooks/use-date-field-props/Docs.mdx b/src/hooks/use-date-field-props/Docs.mdx
index d9d7615..abfd86d 100644
--- a/src/hooks/use-date-field-props/Docs.mdx
+++ b/src/hooks/use-date-field-props/Docs.mdx
@@ -4,6 +4,8 @@ import { Meta } from "@storybook/blocks";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # `useDateFieldProps(field: DateField)`
 
 A hook to control the date inputs e.g. `input[type=date]`.
diff --git a/src/hooks/use-files-field-props/Docs.mdx b/src/hooks/use-files-field-props/Docs.mdx
index 9e0f69e..4f5fa37 100644
--- a/src/hooks/use-files-field-props/Docs.mdx
+++ b/src/hooks/use-files-field-props/Docs.mdx
@@ -4,6 +4,8 @@ import { Meta } from "@storybook/blocks";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # `useFilesFieldProps(field: FilesField)`
 
 A hook to control the file inputs e.g. `input[type=file]`.
diff --git a/src/hooks/use-list-field/Docs.mdx b/src/hooks/use-list-field/Docs.mdx
index bae5a10..e488ff7 100644
--- a/src/hooks/use-list-field/Docs.mdx
+++ b/src/hooks/use-list-field/Docs.mdx
@@ -4,6 +4,8 @@ import { Meta, Markdown, Canvas } from "@storybook/blocks";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # `useListField<Fields>(listField, options): UseListField<Fields>`
 
 A hook to manage a [listField()](?path=/docs/fields-listField--docs). It provides list of items ready to be rendered, together with actions to add, remove or reorder the items.
diff --git a/src/hooks/use-multiselect-field-props/Docs.mdx b/src/hooks/use-multiselect-field-props/Docs.mdx
index 206b3fe..107a0c2 100644
--- a/src/hooks/use-multiselect-field-props/Docs.mdx
+++ b/src/hooks/use-multiselect-field-props/Docs.mdx
@@ -4,6 +4,8 @@ import { Meta, Stories } from "@storybook/blocks";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # `useMultiSelectFieldProps<Option, Field extends ZodArrayFieldeld>(props)`
 
 A hook to control `<select multiple />` element. It accepts only fields which keep array of elements as value.
diff --git a/src/hooks/use-number-field-props/Docs.mdx b/src/hooks/use-number-field-props/Docs.mdx
index 19210d9..2f369c4 100644
--- a/src/hooks/use-number-field-props/Docs.mdx
+++ b/src/hooks/use-number-field-props/Docs.mdx
@@ -4,6 +4,8 @@ import { Meta } from "@storybook/blocks";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # `useNumberFieldProps(field: NumberField)`
 
 A hook to control the numeric inputs e.g. `input[type=number]`, `input[type=range]`.
diff --git a/src/hooks/use-options/Docs.mdx b/src/hooks/use-options/Docs.mdx
index 903a46e..cded759 100644
--- a/src/hooks/use-options/Docs.mdx
+++ b/src/hooks/use-options/Docs.mdx
@@ -4,6 +4,8 @@ import { Meta, Markdown, Canvas } from "@storybook/blocks";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # `useOptions<Option>(props): UseOptions`
 
 A generic hook which evaluates a list of options against a field value.
diff --git a/src/hooks/use-required-props/Docs.mdx b/src/hooks/use-required-props/Docs.mdx
index b2d6ab2..f42272f 100644
--- a/src/hooks/use-required-props/Docs.mdx
+++ b/src/hooks/use-required-props/Docs.mdx
@@ -6,6 +6,8 @@ import Combinations from "./combinations.md?raw";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # `useRequiredProps({field, required})`
 
 A 'mixin' hook to compute `required` prop for the input elements based on the field's optionality.
diff --git a/src/hooks/use-select-field-props/Docs.mdx b/src/hooks/use-select-field-props/Docs.mdx
index 2f426b2..54dea8a 100644
--- a/src/hooks/use-select-field-props/Docs.mdx
+++ b/src/hooks/use-select-field-props/Docs.mdx
@@ -4,6 +4,8 @@ import { Meta, Stories } from "@storybook/blocks";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # `useSelectFieldProps<Option, Field extends SelectField>(props)`
 
 A hook that enables you to pick a single choice from a list of options.
diff --git a/src/hooks/use-select-options/Docs.mdx b/src/hooks/use-select-options/Docs.mdx
index 8cf74ef..e8a86d2 100644
--- a/src/hooks/use-select-options/Docs.mdx
+++ b/src/hooks/use-select-options/Docs.mdx
@@ -4,6 +4,8 @@ import { Meta, Markdown, Canvas } from "@storybook/blocks";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # `useSelectOptions<Option>(props): UseSelectOptions`
 
 A wrapper arround [useOptions](?path=/docs/hooks-useoptions--docs) which renders the options into `<option>` elements.