diff --git a/web/src/components/ui/Primitives.tsx b/web/src/components/ui/Primitives.tsx
index 5124f5a..f07ed79 100644
--- a/web/src/components/ui/Primitives.tsx
+++ b/web/src/components/ui/Primitives.tsx
@@ -2,7 +2,27 @@ import {
   Badge as BytelystBadge,
   Button as BytelystButton,
   Card as BytelystCard,
+  Checkbox,
+  DataList as BytelystDataList,
+  DataListItem as BytelystDataListItem,
+  DataListMeta,
+  DataTable,
+  DataTableBody,
+  DataTableCell,
+  DataTableHead,
+  DataTableHeader,
+  DataTableRow,
   DiffCard as BytelystDiffCard,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
   IconButton as BytelystIconButton,
   Input as BytelystInput,
   Label as BytelystLabel,
@@ -12,13 +32,30 @@ import {
   PanelDescription as BytelystPanelDescription,
   PanelHeader as BytelystPanelHeader,
   PanelTitle as BytelystPanelTitle,
+  RadioGroup,
+  RadioGroupItem,
+  SegmentedControl,
   Select as BytelystSelect,
   StatusBadge as BytelystStatusBadge,
+  Surface as BytelystSurface,
+  SurfaceList as BytelystSurfaceList,
+  SurfaceListItem as BytelystSurfaceListItem,
+  Switch,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
   Textarea as BytelystTextarea,
   Timeline as BytelystTimeline,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
   type BadgeProps,
   type ButtonProps,
   type CardProps,
+  type DataListItemProps,
+  type DataListProps,
   type DiffCardProps,
   type IconButtonProps,
   type InputProps,
@@ -31,6 +68,10 @@ import {
   type PanelTitleProps,
   type SelectProps,
   type StatusBadgeProps,
+  type StatusTone,
+  type SurfaceListItemProps,
+  type SurfaceListProps,
+  type SurfaceProps,
   type TextareaProps,
   type TimelineProps,
 } from "@bytelyst/ui";
@@ -39,6 +80,70 @@ function mergeClassNames(...classes: Array<string | undefined>) {
   return classes.filter(Boolean).join(" ");
 }
 
+export {
+  Checkbox,
+  DataListMeta,
+  DataTable,
+  DataTableBody,
+  DataTableCell,
+  DataTableHead,
+  DataTableHeader,
+  DataTableRow,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  RadioGroup,
+  RadioGroupItem,
+  SegmentedControl,
+  Switch,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+};
+
+export type NoteLettStatus =
+  | "applied"
+  | "approved"
+  | "archived"
+  | "draft"
+  | "error"
+  | "failed"
+  | "pending"
+  | "proposed"
+  | "published"
+  | "rejected"
+  | "review";
+
+const statusToneMap: Record<NoteLettStatus, StatusTone> = {
+  applied: "success",
+  approved: "success",
+  archived: "neutral",
+  draft: "neutral",
+  error: "danger",
+  failed: "danger",
+  pending: "warning",
+  proposed: "info",
+  published: "success",
+  rejected: "danger",
+  review: "accent",
+};
+
+export function getStatusTone(status: NoteLettStatus): StatusTone {
+  return statusToneMap[status];
+}
+
 export function Button({ className, ...props }: ButtonProps) {
   return (
     <BytelystButton
@@ -108,8 +213,12 @@ export function ListItemButton({ className, ...props }: ListItemButtonProps) {
   );
 }
 
-export function StatusBadge({ className, ...props }: StatusBadgeProps) {
-  return <BytelystStatusBadge className={className} {...props} />;
+export interface NoteLettStatusBadgeProps extends StatusBadgeProps {
+  status?: NoteLettStatus;
+}
+
+export function StatusBadge({ className, status, tone, ...props }: NoteLettStatusBadgeProps) {
+  return <BytelystStatusBadge className={className} tone={tone ?? (status ? getStatusTone(status) : undefined)} {...props} />;
 }
 
 export function Input({ className, ...props }: InputProps) {
@@ -159,3 +268,32 @@ export function Timeline({ className, ...props }: TimelineProps) {
 export function DiffCard({ className, ...props }: DiffCardProps) {
   return <BytelystDiffCard className={mergeClassNames("gap-[var(--nl-space-3)]", className)} {...props} />;
 }
+
+export function Surface({ className, padding = "md", ...props }: SurfaceProps) {
+  return (
+    <BytelystSurface
+      padding={padding}
+      className={mergeClassNames("rounded-[var(--nl-radius-md)]", className)}
+      {...props}
+    />
+  );
+}
+
+export function SurfaceList({ density = "normal", className, ...props }: SurfaceListProps) {
+  return <BytelystSurfaceList density={density} className={mergeClassNames("gap-[var(--nl-space-3)]", className)} {...props} />;
+}
+
+export function SurfaceListItem({ className, ...props }: SurfaceListItemProps) {
+  return <BytelystSurfaceListItem className={mergeClassNames("rounded-[var(--nl-radius-sm)]", className)} {...props} />;
+}
+
+export function DataList({ density = "normal", className, ...props }: DataListProps) {
+  return <BytelystDataList density={density} className={mergeClassNames("gap-[var(--nl-space-3)]", className)} {...props} />;
+}
+
+export function DataListItem({ className, ...props }: DataListItemProps) {
+  return <BytelystDataListItem className={mergeClassNames("rounded-[var(--nl-radius-sm)]", className)} {...props} />;
+}
+
+export const OperationalList = DataList;
+export const OperationalListItem = DataListItem;