diff --git a/src/uix/eidos/components/month-grid/month-grid.css b/src/uix/eidos/components/month-grid/month-grid.css
index 0398fdbf1..e3d4b76ae 100644
--- a/src/uix/eidos/components/month-grid/month-grid.css
+++ b/src/uix/eidos/components/month-grid/month-grid.css
@@ -27,6 +27,13 @@
 	line-height: var(--calendar-line-height);
 }
 
+[data-month-grid][data-size='xs'] {
+	--_month-grid-padding: var(--calendar-padding-xs);
+	--_month-grid-control-size: var(--calendar-control-size-xs);
+	--_month-grid-cell-size: var(--calendar-day-size-xs);
+	--_month-grid-font-size: var(--calendar-font-size-xs);
+}
+
 [data-month-grid][data-size='sm'] {
 	--_month-grid-padding: var(--calendar-padding-sm);
 	--_month-grid-control-size: var(--calendar-control-size-sm);
diff --git a/src/uix/eidos/components/month-grid/types.ts b/src/uix/eidos/components/month-grid/types.ts
index c97de1097..defab40e0 100644
--- a/src/uix/eidos/components/month-grid/types.ts
+++ b/src/uix/eidos/components/month-grid/types.ts
@@ -14,7 +14,7 @@ import type {
 } from '$soma/components/month-grid'
 import type { ColorRole, ControlVariant, ResponsiveProp, Size } from '$uix/eidos/lib/types'
 
-export type MonthGridSize = Extract<Size, 'sm' | 'md' | 'lg'>
+export type MonthGridSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>
 export type MonthGridVariant = ControlVariant
 export type MonthGridColor = ColorRole
 
diff --git a/src/uix/eidos/components/year-grid/types.ts b/src/uix/eidos/components/year-grid/types.ts
index 77c71f8cc..392f99480 100644
--- a/src/uix/eidos/components/year-grid/types.ts
+++ b/src/uix/eidos/components/year-grid/types.ts
@@ -14,7 +14,7 @@ import type {
 } from '$soma/components/year-grid'
 import type { ColorRole, ControlVariant, ResponsiveProp, Size } from '$uix/eidos/lib/types'
 
-export type YearGridSize = Extract<Size, 'sm' | 'md' | 'lg'>
+export type YearGridSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>
 export type YearGridVariant = ControlVariant
 export type YearGridColor = ColorRole
 
diff --git a/src/uix/eidos/components/year-grid/year-grid.css b/src/uix/eidos/components/year-grid/year-grid.css
index 2aa2a8d87..ecb5a6394 100644
--- a/src/uix/eidos/components/year-grid/year-grid.css
+++ b/src/uix/eidos/components/year-grid/year-grid.css
@@ -27,6 +27,13 @@
 	line-height: var(--calendar-line-height);
 }
 
+[data-year-grid][data-size='xs'] {
+	--_year-grid-padding: var(--calendar-padding-xs);
+	--_year-grid-control-size: var(--calendar-control-size-xs);
+	--_year-grid-cell-size: var(--calendar-day-size-xs);
+	--_year-grid-font-size: var(--calendar-font-size-xs);
+}
+
 [data-year-grid][data-size='sm'] {
 	--_year-grid-padding: var(--calendar-padding-sm);
 	--_year-grid-control-size: var(--calendar-control-size-sm);
diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css
index 8aed59e75..2323cddc9 100644
--- a/src/uix/eidos/generated/base.css
+++ b/src/uix/eidos/generated/base.css
@@ -1041,6 +1041,7 @@
 	--color-picker-transition-ease: var(--ease-default);
 	--color-picker-disabled-opacity: 0.56;
 	--calendar-gap: var(--space-3);
+	--calendar-padding-xs: var(--space-2);
 	--calendar-padding-sm: var(--space-3);
 	--calendar-padding-md: var(--space-4);
 	--calendar-padding-lg: var(--space-5);
@@ -1054,6 +1055,7 @@
 	--calendar-color: var(--color-content-primary);
 	--calendar-shadow: var(--shadow-sm);
 	--calendar-font-family: var(--font-ui);
+	--calendar-font-size-xs: var(--font-size-xs);
 	--calendar-font-size-sm: var(--font-size-xs);
 	--calendar-font-size-md: var(--font-size-sm);
 	--calendar-font-size-lg: var(--font-size-sm);
@@ -1062,6 +1064,7 @@
 	--calendar-heading-color: var(--color-content-primary);
 	--calendar-heading-font-size: var(--font-size-sm);
 	--calendar-heading-font-weight: var(--font-weight-semibold);
+	--calendar-control-size-xs: var(--control-height-xxs);
 	--calendar-control-size-sm: var(--control-height-xs);
 	--calendar-control-size-md: var(--control-height-sm);
 	--calendar-control-size-lg: var(--control-height-md);
@@ -1080,6 +1083,7 @@
 	--calendar-weekday-color: var(--color-content-muted);
 	--calendar-weekday-font-size: var(--font-size-xs);
 	--calendar-weekday-font-weight: var(--font-weight-medium);
+	--calendar-day-size-xs: var(--control-height-xxs);
 	--calendar-day-size-sm: var(--control-height-xs);
 	--calendar-day-size-md: var(--control-height-sm);
 	--calendar-day-size-lg: var(--control-height-md);
diff --git a/src/uix/eidos/lib/recipes/base.ts b/src/uix/eidos/lib/recipes/base.ts
index de14add6b..48011db71 100644
--- a/src/uix/eidos/lib/recipes/base.ts
+++ b/src/uix/eidos/lib/recipes/base.ts
@@ -838,6 +838,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
 	},
 	calendar: {
 		gap: 'var(--space-3)',
+		'padding-xs': 'var(--space-2)',
 		'padding-sm': 'var(--space-3)',
 		'padding-md': 'var(--space-4)',
 		'padding-lg': 'var(--space-5)',
@@ -851,6 +852,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		color: 'var(--color-content-primary)',
 		shadow: 'var(--shadow-sm)',
 		'font-family': 'var(--font-ui)',
+		'font-size-xs': 'var(--font-size-xs)',
 		'font-size-sm': 'var(--font-size-xs)',
 		'font-size-md': 'var(--font-size-sm)',
 		'font-size-lg': 'var(--font-size-sm)',
@@ -859,6 +861,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		'heading-color': 'var(--color-content-primary)',
 		'heading-font-size': 'var(--font-size-sm)',
 		'heading-font-weight': 'var(--font-weight-semibold)',
+		'control-size-xs': 'var(--control-height-xxs)',
 		'control-size-sm': 'var(--control-height-xs)',
 		'control-size-md': 'var(--control-height-sm)',
 		'control-size-lg': 'var(--control-height-md)',
@@ -877,6 +880,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		'weekday-color': 'var(--color-content-muted)',
 		'weekday-font-size': 'var(--font-size-xs)',
 		'weekday-font-weight': 'var(--font-weight-medium)',
+		'day-size-xs': 'var(--control-height-xxs)',
 		'day-size-sm': 'var(--control-height-xs)',
 		'day-size-md': 'var(--control-height-sm)',
 		'day-size-lg': 'var(--control-height-md)',
diff --git a/web/routes/uix/components/month-grid/+page.svelte b/web/routes/uix/components/month-grid/+page.svelte
index 59f300fd6..07ce6227d 100644
--- a/web/routes/uix/components/month-grid/+page.svelte
+++ b/web/routes/uix/components/month-grid/+page.svelte
@@ -323,7 +323,7 @@
 				<label data-uix-control>
 					<span data-uix-control-label>size</span>
 					<span data-uix-chips role="radiogroup">
-						{#each ['sm', 'md', 'lg'] as v (v)}
+						{#each ['xs', 'sm', 'md', 'lg'] as v (v)}
 							<button data-uix-chip data-active={size === v} onclick={() => (size = v as MonthGridSize)}>{v}</button>
 						{/each}
 					</span>
diff --git a/web/routes/uix/components/year-grid/+page.svelte b/web/routes/uix/components/year-grid/+page.svelte
index 88923e210..b4ee1c36d 100644
--- a/web/routes/uix/components/year-grid/+page.svelte
+++ b/web/routes/uix/components/year-grid/+page.svelte
@@ -320,7 +320,7 @@
 				<label data-uix-control>
 					<span data-uix-control-label>size</span>
 					<span data-uix-chips role="radiogroup">
-						{#each ['sm', 'md', 'lg'] as v (v)}
+						{#each ['xs', 'sm', 'md', 'lg'] as v (v)}
 							<button data-uix-chip data-active={size === v} onclick={() => (size = v as YearGridSize)}>{v}</button>
 						{/each}
 					</span>