diff --git a/package.json b/package.json
index c8865665..6d57d79c 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "test:component": "cypress run --component --browser electron",
     "test:unit": "npm run test:unit:dev -- run --coverage",
     "test:unit:dev": "vitest",
-    "docs:generate": "typedoc --plugin typedoc-plugin-coverage src/index.tsx",
+    "docs:generate": "typedoc --navigation.includeCategories true --plugin typedoc-plugin-coverage src/index.tsx",
     "update": "npx npm-check-updates"
   },
   "files": [
diff --git a/src/Components/AppShell/AppShell.tsx b/src/Components/AppShell/AppShell.tsx
index 0421a302..be88baba 100644
--- a/src/Components/AppShell/AppShell.tsx
+++ b/src/Components/AppShell/AppShell.tsx
@@ -4,6 +4,9 @@ import { SetAppState } from './SetAppState'
 
 import type { AssetsApi } from '#types/AssetsApi'
 
+/**
+ * @category AppShell
+ */
 export function AppShell({
   appName,
   children,
diff --git a/src/Components/AppShell/Content.tsx b/src/Components/AppShell/Content.tsx
index 28ed522f..42dfbf5f 100644
--- a/src/Components/AppShell/Content.tsx
+++ b/src/Components/AppShell/Content.tsx
@@ -3,6 +3,9 @@ type ContentProps = {
   children?: React.ReactNode
 }
 
+/**
+ * @category AppShell
+ */
 export function Content({ children }: ContentProps) {
   return (
     <div className='tw-flex tw-flex-col tw-w-full tw-h-full tw-bg-base-200 tw-relative'>
diff --git a/src/Components/AppShell/SideBar.tsx b/src/Components/AppShell/SideBar.tsx
index 1525157a..4c174351 100644
--- a/src/Components/AppShell/SideBar.tsx
+++ b/src/Components/AppShell/SideBar.tsx
@@ -20,6 +20,9 @@ type route = {
   blank?: boolean
 }
 
+/**
+ * @category AppShell
+ */
 export function SideBar({ routes, bottomRoutes }: { routes: route[]; bottomRoutes?: route[] }) {
   // prevent react18 from calling useEffect twice
   const init = useRef(false)
diff --git a/src/Components/AppShell/Sitemap.tsx b/src/Components/AppShell/Sitemap.tsx
index 61d97abc..3a212924 100644
--- a/src/Components/AppShell/Sitemap.tsx
+++ b/src/Components/AppShell/Sitemap.tsx
@@ -3,6 +3,9 @@ import { useEffect, useState } from 'react'
 
 import { useItems } from '#components/Map/hooks/useItems'
 
+/**
+ * @category AppShell
+ */
 export const Sitemap = ({ url }: { url: string }) => {
   const [sitemap, setSitemap] = useState('')
 
diff --git a/src/Components/Auth/LoginPage.tsx b/src/Components/Auth/LoginPage.tsx
index 73ab2fb0..14177275 100644
--- a/src/Components/Auth/LoginPage.tsx
+++ b/src/Components/Auth/LoginPage.tsx
@@ -11,6 +11,9 @@ import { MapOverlayPage } from '#components/Templates/MapOverlayPage'
 
 import { useAuth } from './useAuth'
 
+/**
+ * @category Auth
+ */
 export function LoginPage() {
   const [email, setEmail] = useState<string>('')
   const [password, setPassword] = useState<string>('')
diff --git a/src/Components/Auth/RequestPasswordPage.tsx b/src/Components/Auth/RequestPasswordPage.tsx
index 043f0e96..b26c70c2 100644
--- a/src/Components/Auth/RequestPasswordPage.tsx
+++ b/src/Components/Auth/RequestPasswordPage.tsx
@@ -9,6 +9,9 @@ import { MapOverlayPage } from '#components/Templates/MapOverlayPage'
 
 import { useAuth } from './useAuth'
 
+/**
+ * @category Auth
+ */
 // eslint-disable-next-line react/prop-types
 export function RequestPasswordPage({ resetUrl }) {
   const [email, setEmail] = useState<string>('')
diff --git a/src/Components/Auth/SetNewPasswordPage.tsx b/src/Components/Auth/SetNewPasswordPage.tsx
index 20f30445..9bf33054 100644
--- a/src/Components/Auth/SetNewPasswordPage.tsx
+++ b/src/Components/Auth/SetNewPasswordPage.tsx
@@ -8,6 +8,9 @@ import { MapOverlayPage } from '#components/Templates/MapOverlayPage'
 
 import { useAuth } from './useAuth'
 
+/**
+ * @category Auth
+ */
 export function SetNewPasswordPage() {
   const [password, setPassword] = useState<string>('')
 
diff --git a/src/Components/Auth/SignupPage.tsx b/src/Components/Auth/SignupPage.tsx
index 82f5bbf0..57c559c4 100644
--- a/src/Components/Auth/SignupPage.tsx
+++ b/src/Components/Auth/SignupPage.tsx
@@ -11,6 +11,9 @@ import { MapOverlayPage } from '#components/Templates/MapOverlayPage'
 
 import { useAuth } from './useAuth'
 
+/**
+ * @category Auth
+ */
 export function SignupPage() {
   const [email, setEmail] = useState<string>('')
   const [userName, setUserName] = useState<string>('')
diff --git a/src/Components/Auth/useAuth.tsx b/src/Components/Auth/useAuth.tsx
index e892a0c6..1cbba54c 100644
--- a/src/Components/Auth/useAuth.tsx
+++ b/src/Components/Auth/useAuth.tsx
@@ -45,6 +45,9 @@ const AuthContext = createContext<AuthContextProps>({
   passwordReset: () => Promise.reject(Error('Unimplemented')),
 })
 
+/**
+ * @category Auth
+ */
 export const AuthProvider = ({ userApi, children }: AuthProviderProps) => {
   const [user, setUser] = useState<UserItem | null>(null)
   const [token, setToken] = useState<string | null>(null)
diff --git a/src/Components/Gaming/Modal.tsx b/src/Components/Gaming/Modal.tsx
index d58de15e..e69b8f39 100644
--- a/src/Components/Gaming/Modal.tsx
+++ b/src/Components/Gaming/Modal.tsx
@@ -1,5 +1,8 @@
 import { useEffect } from 'react'
 
+/**
+ * @category Gaming
+ */
 export function Modal({
   children,
   showOnStartup,
diff --git a/src/Components/Gaming/Quests.tsx b/src/Components/Gaming/Quests.tsx
index 0e669c6f..07fa54c1 100644
--- a/src/Components/Gaming/Quests.tsx
+++ b/src/Components/Gaming/Quests.tsx
@@ -7,6 +7,9 @@ import { useQuestsOpen, useSetQuestOpen } from './hooks/useQuests'
 
 import type { Item } from '#types/Item'
 
+/**
+ * @category Gaming
+ */
 export function Quests() {
   const questsOpen = useQuestsOpen()
   const setQuestsOpen = useSetQuestOpen()
diff --git a/src/Components/Input/SelectBox.tsx b/src/Components/Input/SelectBox.tsx
index 5fe6cff7..c4d4282e 100644
--- a/src/Components/Input/SelectBox.tsx
+++ b/src/Components/Input/SelectBox.tsx
@@ -17,6 +17,9 @@ type SelectBoxProps = {
   labelDescription?: string
 }
 
+/**
+ * @category Input
+ */
 export function SelectBox(props: SelectBoxProps) {
   const {
     labelTitle,
diff --git a/src/Components/Input/TextAreaInput.tsx b/src/Components/Input/TextAreaInput.tsx
index 8b0b940b..fb87b85d 100644
--- a/src/Components/Input/TextAreaInput.tsx
+++ b/src/Components/Input/TextAreaInput.tsx
@@ -22,6 +22,9 @@ interface KeyValue {
   [key: string]: string
 }
 
+/**
+ * @category Input
+ */
 export function TextAreaInput({
   labelTitle,
   dataField,
diff --git a/src/Components/Input/TextInput.tsx b/src/Components/Input/TextInput.tsx
index 54217e7c..ec0c1807 100644
--- a/src/Components/Input/TextInput.tsx
+++ b/src/Components/Input/TextInput.tsx
@@ -18,6 +18,9 @@ type InputTextProps = {
   updateFormValue?: (value: string) => void
 }
 
+/**
+ * @category Input
+ */
 export function TextInput({
   labelTitle,
   labelStyle,
diff --git a/src/Components/Map/ItemForm.tsx b/src/Components/Map/ItemForm.tsx
index d024ef1e..b0fc58a1 100644
--- a/src/Components/Map/ItemForm.tsx
+++ b/src/Components/Map/ItemForm.tsx
@@ -2,6 +2,9 @@ import { Children, cloneElement, isValidElement, useEffect } from 'react'
 
 import type { Item } from '#types/Item'
 
+/**
+ * @category Map
+ */
 export const ItemForm = ({
   children,
   item,
diff --git a/src/Components/Map/ItemView.tsx b/src/Components/Map/ItemView.tsx
index 0b9c2f91..bdad06b3 100644
--- a/src/Components/Map/ItemView.tsx
+++ b/src/Components/Map/ItemView.tsx
@@ -2,6 +2,9 @@ import { Children, cloneElement, isValidElement } from 'react'
 
 import type { Item } from '#types/Item'
 
+/**
+ * @category Map
+ */
 export const ItemView = ({ children, item }: { children?: React.ReactNode; item?: Item }) => {
   return (
     <div>
diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx
index 014fb828..01ce5946 100644
--- a/src/Components/Map/Layer.tsx
+++ b/src/Components/Map/Layer.tsx
@@ -27,6 +27,9 @@ import type { Tag } from '#types/Tag'
 import type { Popup } from 'leaflet'
 import type { ReactElement, ReactNode } from 'react'
 
+/**
+ * @category Map
+ */
 export const Layer = ({
   data,
   children,
diff --git a/src/Components/Map/Permissions.tsx b/src/Components/Map/Permissions.tsx
index cac67cf2..47a61a1c 100644
--- a/src/Components/Map/Permissions.tsx
+++ b/src/Components/Map/Permissions.tsx
@@ -7,6 +7,9 @@ import { useSetPermissionData, useSetPermissionApi, useSetAdminRole } from './ho
 import type { ItemsApi } from '#types/ItemsApi'
 import type { Permission } from '#types/Permission'
 
+/**
+ * @category Map
+ */
 export function Permissions({
   data,
   api,
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx
index 85ff07a2..6f5fac4c 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx
@@ -6,6 +6,9 @@ import { useGetItemTags } from '#components/Map/hooks/useTags'
 
 import type { Item } from '#types/Item'
 
+/**
+ * @category Map
+ */
 export const PopupButton = ({
   url,
   parameterField,
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx
index 42a1d6ca..fe2e9cb5 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx
@@ -1,5 +1,8 @@
 import type { Item } from '#types/Item'
 
+/**
+ * @category Map
+ */
 export const PopupCheckboxInput = ({
   dataField,
   label,
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
index 819182d6..e57323b2 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
@@ -10,6 +10,9 @@ interface StartEndInputProps {
   updateEndValue?: (value: string) => void
 }
 
+/**
+ * @category Map
+ */
 export const PopupStartEndInput = ({
   item,
   showLabels = true,
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx
index c07b6b26..e56153f6 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx
@@ -2,6 +2,9 @@ import { TextAreaInput } from '#components/Input'
 
 import type { Item } from '#types/Item'
 
+/**
+ * @category Map
+ */
 export const PopupTextAreaInput = ({
   dataField,
   placeholder,
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx
index 4030769f..439bf340 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx
@@ -2,6 +2,9 @@ import { TextInput } from '#components/Input'
 
 import type { Item } from '#types/Item'
 
+/**
+ * @category Map
+ */
 export const PopupTextInput = ({
   dataField,
   placeholder,
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx
index c41d86f4..eaf2c56c 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx
@@ -1,6 +1,9 @@
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
 import type { Item } from '#types/Item'
 
+/**
+ * @category Map
+ */
 export const StartEndView = ({ item }: { item?: Item }) => {
   return (
     <div className='tw-flex tw-flex-row tw-mb-4 tw-mt-1'>
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
index 36f73318..27bb83a2 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
@@ -18,6 +18,9 @@ import { fixUrls, mailRegex } from '#utils/ReplaceURLs'
 import type { Item } from '#types/Item'
 import type { Tag } from '#types/Tag'
 
+/**
+ * @category Map
+ */
 export const TextView = ({
   item,
   itemId,
diff --git a/src/Components/Map/Tags.tsx b/src/Components/Map/Tags.tsx
index ff77a3ff..7415560e 100644
--- a/src/Components/Map/Tags.tsx
+++ b/src/Components/Map/Tags.tsx
@@ -7,6 +7,9 @@ import { useSetTagData, useSetTagApi, useTags } from './hooks/useTags'
 import type { ItemsApi } from '#types/ItemsApi'
 import type { Tag } from '#types/Tag'
 
+/**
+ * @category Map
+ */
 export function Tags({ data, api }: { data?: Tag[]; api?: ItemsApi<Tag> }) {
   const setTagData = useSetTagData()
   const setTagApi = useSetTagApi()
diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx
index 757bca74..ed612563 100644
--- a/src/Components/Map/UtopiaMap.tsx
+++ b/src/Components/Map/UtopiaMap.tsx
@@ -8,6 +8,9 @@ import { UtopiaMapInner } from './UtopiaMapInner'
 import type { UtopiaMapProps } from '#types/UtopiaMapProps'
 import 'react-toastify/dist/ReactToastify.css'
 
+/**
+ * @category Map
+ */
 function UtopiaMap({
   height = '500px',
   width = '100%',
diff --git a/src/Components/Profile/ProfileForm.tsx b/src/Components/Profile/ProfileForm.tsx
index 8b25baad..f0a9dd60 100644
--- a/src/Components/Profile/ProfileForm.tsx
+++ b/src/Components/Profile/ProfileForm.tsx
@@ -23,6 +23,9 @@ import type { FormState } from '#types/FormState'
 import type { Item } from '#types/Item'
 import type { Tag } from '#types/Tag'
 
+/**
+ * @category Profile
+ */
 export function ProfileForm() {
   const [state, setState] = useState<FormState>({
     color: '',
diff --git a/src/Components/Profile/ProfileView.tsx b/src/Components/Profile/ProfileView.tsx
index b4b05b5e..dd907a63 100644
--- a/src/Components/Profile/ProfileView.tsx
+++ b/src/Components/Profile/ProfileView.tsx
@@ -33,6 +33,9 @@ import type { ItemsApi } from '#types/ItemsApi'
 import type { Tag } from '#types/Tag'
 import type { Marker } from 'leaflet'
 
+/**
+ * @category Profile
+ */
 export function ProfileView({ attestationApi }: { attestationApi?: ItemsApi<any> }) {
   const [item, setItem] = useState<Item>()
   const [updatePermission, setUpdatePermission] = useState<boolean>(false)
diff --git a/src/Components/Profile/UserSettings.tsx b/src/Components/Profile/UserSettings.tsx
index 9f602f63..a351be21 100644
--- a/src/Components/Profile/UserSettings.tsx
+++ b/src/Components/Profile/UserSettings.tsx
@@ -10,6 +10,9 @@ import { MapOverlayPage } from '#components/Templates'
 
 import type { UserItem } from '#types/UserItem'
 
+/**
+ * @category Profile
+ */
 export function UserSettings() {
   const { user, updateUser, loading /* token */ } = useAuth()
 
diff --git a/src/Components/Templates/AttestationForm.tsx b/src/Components/Templates/AttestationForm.tsx
index ce5994ad..a127b1d0 100644
--- a/src/Components/Templates/AttestationForm.tsx
+++ b/src/Components/Templates/AttestationForm.tsx
@@ -11,6 +11,9 @@ import { MapOverlayPage } from './MapOverlayPage'
 import type { Item } from '#types/Item'
 import type { ItemsApi } from '#types/ItemsApi'
 
+/**
+ * @category Templates
+ */
 export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
   const items = useItems()
   const appState = useAppState()
diff --git a/src/Components/Templates/CardPage.tsx b/src/Components/Templates/CardPage.tsx
index 42078e88..e0a10d88 100644
--- a/src/Components/Templates/CardPage.tsx
+++ b/src/Components/Templates/CardPage.tsx
@@ -2,6 +2,9 @@ import { Link } from 'react-router-dom'
 
 import { TitleCard } from './TitleCard'
 
+/**
+ * @category Templates
+ */
 export function CardPage({
   title,
   hideTitle,
diff --git a/src/Components/Templates/MapOverlayPage.tsx b/src/Components/Templates/MapOverlayPage.tsx
index e25bb589..33ff59e1 100644
--- a/src/Components/Templates/MapOverlayPage.tsx
+++ b/src/Components/Templates/MapOverlayPage.tsx
@@ -3,6 +3,9 @@ import { DomEvent } from 'leaflet'
 import { createRef, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 
+/**
+ * @category Templates
+ */
 export function MapOverlayPage({
   children,
   className,
diff --git a/src/Components/Templates/MarketView.tsx b/src/Components/Templates/MarketView.tsx
index 4c575af5..f6326594 100644
--- a/src/Components/Templates/MarketView.tsx
+++ b/src/Components/Templates/MarketView.tsx
@@ -30,6 +30,9 @@ function groupAndCount(arr) {
   return grouped.sort((a, b) => b.count - a.count)
 }
 
+/**
+ * @category Templates
+ */
 export const MarketView = () => {
   const [offers, setOffers] = useState<Tag[]>([])
   const [needs, setNeeds] = useState<Tag[]>([])
diff --git a/src/Components/Templates/MoonCalendar.tsx b/src/Components/Templates/MoonCalendar.tsx
index a2a6bf5e..48a900cb 100644
--- a/src/Components/Templates/MoonCalendar.tsx
+++ b/src/Components/Templates/MoonCalendar.tsx
@@ -7,6 +7,9 @@ import { LUNAR_MONTH, getLastNewMoon, getNextNewMoon } from '#utils/Moon'
 import { CircleLayout } from './CircleLayout'
 import { MapOverlayPage } from './MapOverlayPage'
 
+/**
+ * @category Templates
+ */
 export const MoonCalendar = () => {
   const today = startOfToday()
 
diff --git a/src/Components/Templates/OverlayItemsIndexPage.tsx b/src/Components/Templates/OverlayItemsIndexPage.tsx
index 82273dfb..1ec0d8e2 100644
--- a/src/Components/Templates/OverlayItemsIndexPage.tsx
+++ b/src/Components/Templates/OverlayItemsIndexPage.tsx
@@ -27,6 +27,9 @@ import { MapOverlayPage } from './MapOverlayPage'
 
 import type { Item } from '#types/Item'
 
+/**
+ * @category Templates
+ */
 export const OverlayItemsIndexPage = ({
   url,
   layerName,
diff --git a/src/Components/Templates/SelectUser.tsx b/src/Components/Templates/SelectUser.tsx
index f9da4dfd..1cd48a9a 100644
--- a/src/Components/Templates/SelectUser.tsx
+++ b/src/Components/Templates/SelectUser.tsx
@@ -7,6 +7,9 @@ import { useItems } from '#components/Map/hooks/useItems'
 
 import { MapOverlayPage } from './MapOverlayPage'
 
+/**
+ * @category Templates
+ */
 export const SelectUser = () => {
   const appState = useAppState()
   const items = useItems()
diff --git a/src/Components/Templates/TitleCard.tsx b/src/Components/Templates/TitleCard.tsx
index 206ef8fa..c3370550 100644
--- a/src/Components/Templates/TitleCard.tsx
+++ b/src/Components/Templates/TitleCard.tsx
@@ -11,6 +11,9 @@ interface TitleCardProps {
   TopSideButtons?: any
 }
 
+/**
+ * @category Templates
+ */
 export function TitleCard({
   title,
   hideTitle,