diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3b6541c4e9..ba79dfe8d8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -741,8 +741,8 @@ importers:
         specifier: file:../open-api/typescript-sdk
         version: link:../open-api/typescript-sdk
       '@immich/ui':
-        specifier: ^0.57.3
-        version: 0.57.3(@sveltejs/kit@2.49.3(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.3(svelte@5.46.1)(vite@7.3.1(@types/node@25.0.7)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.1)(typescript@5.9.3)(vite@7.3.1(@types/node@25.0.7)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.1)
+        specifier: ^0.58.1
+        version: 0.58.1(@sveltejs/kit@2.49.3(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.3(svelte@5.46.1)(vite@7.3.1(@types/node@25.0.7)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.1)(typescript@5.9.3)(vite@7.3.1(@types/node@25.0.7)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.1)
       '@mapbox/mapbox-gl-rtl-text':
         specifier: 0.2.3
         version: 0.2.3(mapbox-gl@1.13.3)
@@ -3128,8 +3128,8 @@ packages:
     peerDependencies:
       svelte: ^5.0.0
 
-  '@immich/ui@0.57.3':
-    resolution: {integrity: sha512-5Y0KmyHRojem1gvX4hbr01GZ35oq22AkYE3CImvg3+jmZQhP0newTiqyVYJsfnEupLZKu5bFIlWykIe8uwMqDQ==}
+  '@immich/ui@0.58.1':
+    resolution: {integrity: sha512-JV5ZxQz0XaKWrJjgC8KO+H8tbWF/FYf7Jz7lKJg8VY/vpbbWPGliemM5E4MYohe1yTej14yvrwQqZEXaQuMYkA==}
     peerDependencies:
       svelte: ^5.0.0
 
@@ -15604,7 +15604,7 @@ snapshots:
     dependencies:
       svelte: 5.46.1
 
-  '@immich/ui@0.57.3(@sveltejs/kit@2.49.3(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.3(svelte@5.46.1)(vite@7.3.1(@types/node@25.0.7)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.1)(typescript@5.9.3)(vite@7.3.1(@types/node@25.0.7)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.1)':
+  '@immich/ui@0.58.1(@sveltejs/kit@2.49.3(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.3(svelte@5.46.1)(vite@7.3.1(@types/node@25.0.7)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.1)(typescript@5.9.3)(vite@7.3.1(@types/node@25.0.7)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.46.1)':
     dependencies:
       '@immich/svelte-markdown-preprocess': 0.1.0(svelte@5.46.1)
       '@internationalized/date': 3.10.0
diff --git a/web/package.json b/web/package.json
index e02bbefacc..8ec8a94330 100644
--- a/web/package.json
+++ b/web/package.json
@@ -27,7 +27,7 @@
     "@formatjs/icu-messageformat-parser": "^3.0.0",
     "@immich/justified-layout-wasm": "^0.4.3",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.57.3",
+    "@immich/ui": "^0.58.1",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.14.0",
diff --git a/web/src/lib/components/server-statistics/ServerStatisticsCard.svelte b/web/src/lib/components/server-statistics/ServerStatisticsCard.svelte
index 5d76f79e91..41d9b99958 100644
--- a/web/src/lib/components/server-statistics/ServerStatisticsCard.svelte
+++ b/web/src/lib/components/server-statistics/ServerStatisticsCard.svelte
@@ -23,7 +23,7 @@
 <div class="flex h-35 w-full flex-col justify-between rounded-3xl bg-subtle text-primary p-5">
   <div class="flex place-items-center gap-4">
     <Icon {icon} size="40" />
-    <Text size="giant" class="font-medium">{title}</Text>
+    <Text size="giant" fontWeight="medium">{title}</Text>
   </div>
 
   <div class="relative mx-auto font-mono text-2xl font-medium">
diff --git a/web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte b/web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte
index 38374b86f2..3ae5e4283a 100644
--- a/web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte
+++ b/web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte
@@ -6,7 +6,6 @@
   import {
     Code,
     FormatBytes,
-    Heading,
     Icon,
     Table,
     TableBody,
@@ -38,7 +37,7 @@
 
 <div class="flex flex-col gap-5 my-4">
   <div>
-    <Text class="mb-2 font-medium">{$t('total_usage')}</Text>
+    <Text class="mb-2" fontWeight="medium">{$t('total_usage')}</Text>
 
     <div class="hidden justify-between lg:flex gap-4">
       <StatsCard icon={mdiCameraIris} title={$t('photos')} value={stats.photos} />
@@ -51,7 +50,7 @@
         <div class="flex flex-wrap gap-x-12">
           <div class="flex flex-1 place-items-center gap-4 text-primary">
             <Icon icon={mdiCameraIris} size="25" />
-            <Text class="font-medium" size="medium">{$t('photos')}</Text>
+            <Text size="medium" fontWeight="medium">{$t('photos')}</Text>
           </div>
 
           <div class="relative text-center font-mono text-2xl font-medium">
@@ -61,7 +60,7 @@
         <div class="flex flex-wrap gap-x-12">
           <div class="flex flex-1 place-items-center gap-4 text-primary">
             <Icon icon={mdiPlayCircle} size="25" />
-            <Text class="font-medium" size="medium">{$t('videos')}</Text>
+            <Text size="medium" fontWeight="medium">{$t('videos')}</Text>
           </div>
 
           <div class="relative text-center font-mono text-2xl font-medium">
@@ -71,7 +70,7 @@
         <div class="flex flex-wrap gap-x-5">
           <div class="flex flex-1 flex-nowrap place-items-center gap-4 text-primary">
             <Icon icon={mdiChartPie} size="25" />
-            <Text class="font-medium" size="medium">{$t('storage')}</Text>
+            <Text size="medium" fontWeight="medium">{$t('storage')}</Text>
           </div>
 
           <div class="relative flex text-center font-mono text-2xl font-medium">
@@ -87,8 +86,8 @@
   </div>
 
   <div>
-    <Heading size="tiny" class="mb-2">{$t('user_usage_detail')}</Heading>
-    <Table class="mt-5" striped size="small">
+    <Text class="mb-2 mt-4" fontWeight="medium">{$t('user_usage_detail')}</Text>
+    <Table striped size="small">
       <TableHeader>
         <TableHeading class="w-1/4">{$t('user')}</TableHeading>
         <TableHeading class="w-1/4">{$t('photos')}</TableHeading>
diff --git a/web/src/lib/components/shared-components/navigation-bar/notification-item.svelte b/web/src/lib/components/shared-components/navigation-bar/notification-item.svelte
index a233060c00..412ba47cf1 100644
--- a/web/src/lib/components/shared-components/navigation-bar/notification-item.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/notification-item.svelte
@@ -118,7 +118,7 @@
     </div>
 
     <Stack class="text-left" gap={1}>
-      <Text size="tiny" class="text-black dark:text-white font-semibold text-base">{notification.title}</Text>
+      <Text size="tiny" class="text-black dark:text-white text-base" fontWeight="semi-bold">{notification.title}</Text>
       {#if notification.description}
         <Text class="overflow-hidden text-gray-600 dark:text-gray-300">{notification.description}</Text>
       {/if}
diff --git a/web/src/lib/components/shared-components/navigation-bar/notification-panel.svelte b/web/src/lib/components/shared-components/navigation-bar/notification-panel.svelte
index 85ff9d90f8..eb4f31a79d 100644
--- a/web/src/lib/components/shared-components/navigation-bar/notification-panel.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/notification-panel.svelte
@@ -71,7 +71,7 @@
 >
   <Stack class="max-h-125">
     <div class="flex justify-between items-center mt-4 mx-4">
-      <Text size="medium" color="secondary" class="font-semibold">{$t('notifications')}</Text>
+      <Text size="medium" color="secondary" fontWeight="semi-bold">{$t('notifications')}</Text>
       <div>
         <Button
           variant="ghost"
diff --git a/web/src/lib/components/shared-components/side-bar/server-status.svelte b/web/src/lib/components/shared-components/side-bar/server-status.svelte
index d5b87f4bf4..c0a0ebb95a 100644
--- a/web/src/lib/components/shared-components/side-bar/server-status.svelte
+++ b/web/src/lib/components/shared-components/side-bar/server-status.svelte
@@ -101,7 +101,7 @@
     <div class="flex items-center justify-between gap-2">
       <div class="flex items-center gap-2">
         <Icon icon={mdiNewBox} size="16" class="text-immich-primary dark:text-immich-dark-primary opacity-80" />
-        <Text size="tiny" class="font-medium text-gray-700 dark:text-gray-300">
+        <Text size="tiny" fontWeight="medium" class="text-gray-700 dark:text-gray-300">
           {releaseInfo.availableVersion}
         </Text>
       </div>
diff --git a/web/src/lib/components/sharedlinks-page/SharedLinkCard.svelte b/web/src/lib/components/sharedlinks-page/SharedLinkCard.svelte
index 64cc79c08d..88a180074f 100644
--- a/web/src/lib/components/sharedlinks-page/SharedLinkCard.svelte
+++ b/web/src/lib/components/sharedlinks-page/SharedLinkCard.svelte
@@ -68,7 +68,7 @@
 
     <div class="flex flex-col gap-4 justify-between">
       <div class="flex flex-col">
-        <Text size="tiny" color={isExpired ? 'danger' : 'muted'} class="font-medium">
+        <Text size="tiny" color={isExpired ? 'danger' : 'muted'} fontWeight="medium">
           {#if isExpired}
             {$t('expired')}
           {:else if expiresAt}
@@ -78,7 +78,7 @@
           {/if}
         </Text>
 
-        <Text size="large" color="primary" class="flex place-items-center gap-2 break-all font-medium">
+        <Text size="large" color="primary" class="flex place-items-center gap-2 break-all" fontWeight="medium">
           {#if sharedLink.type === SharedLinkType.Album}
             {sharedLink.album?.albumName}
           {:else if sharedLink.type === SharedLinkType.Individual}
@@ -93,7 +93,7 @@
 
       <div class="flex flex-wrap items-center gap-2">
         {#each capabilities as capability, index (index)}
-          <Text size="small" color="primary" class="font-medium">
+          <Text size="small" color="primary" fontWeight="medium">
             {capability}
           </Text>
           {#if index < capabilities.length - 1}
diff --git a/web/src/lib/components/users/FeatureSetting.svelte b/web/src/lib/components/users/FeatureSetting.svelte
index efeb13e22f..e2e4f16242 100644
--- a/web/src/lib/components/users/FeatureSetting.svelte
+++ b/web/src/lib/components/users/FeatureSetting.svelte
@@ -11,6 +11,6 @@
 </script>
 
 <div class="flex justify-between items-center">
-  <Text class="text-sm font-medium">{title}</Text>
+  <Text class="text-sm" fontWeight="medium">{title}</Text>
   <Icon icon={state ? mdiCheck : mdiClose} class={state ? 'text-primary' : 'text-danger'} size="24" />
 </div>
diff --git a/web/src/lib/components/utilities-page/duplicates/info-row.svelte b/web/src/lib/components/utilities-page/duplicates/info-row.svelte
index a4ff87e83f..007dcfddc5 100644
--- a/web/src/lib/components/utilities-page/duplicates/info-row.svelte
+++ b/web/src/lib/components/utilities-page/duplicates/info-row.svelte
@@ -16,7 +16,11 @@
 <div class="grid grid-cols-[25px_1fr] w-full px-1 py-0.5" class:border-b={borderBottom} {title}>
   <Icon {icon} size="18" class="text-dark/25 {highlight ? 'text-primary/75' : ''}" />
   <div class="justify-self-end text-end rounded px-1 transition-colors w-full overflow-hidden">
-    <Text size="tiny" class={`${highlight ? 'font-semibold text-primary' : ''} text-ellipsis w-full overflow-hidden`}>
+    <Text
+      size="tiny"
+      fontWeight={highlight ? 'semi-bold' : 'normal'}
+      class={`${highlight ? 'text-primary' : ''} text-ellipsis w-full overflow-hidden`}
+    >
       {@render children?.()}
     </Text>
   </div>
diff --git a/web/src/lib/components/workflows/WorkflowPickerItemCard.svelte b/web/src/lib/components/workflows/WorkflowPickerItemCard.svelte
index 7b9a3088ea..03c0e80935 100644
--- a/web/src/lib/components/workflows/WorkflowPickerItemCard.svelte
+++ b/web/src/lib/components/workflows/WorkflowPickerItemCard.svelte
@@ -32,7 +32,7 @@
       {/if}
     </div>
     <div class="min-w-0 flex-1">
-      <Text class="font-semibold truncate">
+      <Text class="truncate" fontWeight="semi-bold">
         {isAlbum && 'albumName' in item ? item.albumName : 'name' in item ? item.name : ''}
       </Text>
       {#if isAlbum && 'assetCount' in item}
diff --git a/web/src/lib/components/workflows/WorkflowSummary.svelte b/web/src/lib/components/workflows/WorkflowSummary.svelte
index 0a3e4d62f9..4f0bb9765d 100644
--- a/web/src/lib/components/workflows/WorkflowSummary.svelte
+++ b/web/src/lib/components/workflows/WorkflowSummary.svelte
@@ -91,7 +91,7 @@
       class="rounded-xl border-transparent border-2 hover:shadow-xl hover:border-dashed bg-light-50 shadow-sm p-4 hover:border-light-300 transition-all"
     >
       <div class="flex items-center justify-between mb-4 cursor-grab select-none">
-        <Text size="small" class="font-semibold">{$t('workflow_summary')}</Text>
+        <Text size="small" fontWeight="semi-bold">{$t('workflow_summary')}</Text>
         <div class="flex items-center gap-1">
           <IconButton
             icon={mdiClose}
diff --git a/web/src/lib/components/workflows/WorkflowTriggerCard.svelte b/web/src/lib/components/workflows/WorkflowTriggerCard.svelte
index dd0421caf2..753abe23f3 100644
--- a/web/src/lib/components/workflows/WorkflowTriggerCard.svelte
+++ b/web/src/lib/components/workflows/WorkflowTriggerCard.svelte
@@ -71,7 +71,7 @@
       <Icon icon={getTriggerIcon(trigger.type)} size="24" />
     </div>
     <div class="flex-1">
-      <Text class="font-semibold mb-1">{getTriggerName(trigger.type)}</Text>
+      <Text fontWeight="semi-bold" class="mb-1">{getTriggerName(trigger.type)}</Text>
       {#if getTriggerDescription(trigger.type)}
         <Text size="small">{getTriggerDescription(trigger.type)}</Text>
       {/if}
diff --git a/web/src/lib/modals/AddWorkflowStepModal.svelte b/web/src/lib/modals/AddWorkflowStepModal.svelte
index 8a351f17d4..e99058f98a 100644
--- a/web/src/lib/modals/AddWorkflowStepModal.svelte
+++ b/web/src/lib/modals/AddWorkflowStepModal.svelte
@@ -47,7 +47,7 @@
     class="flex items-start gap-3 p-3 rounded-lg text-left bg-light-100 hover:border-primary border text-dark"
   >
     <div class="flex-1">
-      <Text color="primary" class="font-medium">{title}</Text>
+      <Text color="primary" fontWeight="medium">{title}</Text>
       {#if description}
         <Text size="small" class="mt-1">{description}</Text>
       {/if}
diff --git a/web/src/routes/(user)/utilities/workflows/+page.svelte b/web/src/routes/(user)/utilities/workflows/+page.svelte
index 84924901c8..13ab2c13fb 100644
--- a/web/src/routes/(user)/utilities/workflows/+page.svelte
+++ b/web/src/routes/(user)/utilities/workflows/+page.svelte
@@ -194,7 +194,7 @@
                 <div class="flex items-center gap-4">
                   <div class="text-right hidden sm:block">
                     <Text size="tiny">{$t('created_at')}</Text>
-                    <Text size="small" class="font-medium">
+                    <Text size="small" fontWeight="medium">
                       {formatTimestamp(workflow.createdAt)}
                     </Text>
                   </div>
@@ -214,7 +214,9 @@
                   <!-- Trigger Section -->
                   <div class="rounded-2xl border p-4 bg-light-50 border-light-200">
                     <div class="mb-3">
-                      <Text class="text-xs font-semibold uppercase tracking-widest" color="muted">{$t('trigger')}</Text>
+                      <Text class="text-xs uppercase tracking-widest" color="muted" fontWeight="semi-bold"
+                        >{$t('trigger')}</Text
+                      >
                     </div>
                     {@render chipItem(getTriggerLabel(workflow.triggerType))}
                   </div>
@@ -222,7 +224,9 @@
                   <!-- Filters Section -->
                   <div class="rounded-2xl border p-4 bg-light-50 border-light-200">
                     <div class="mb-3">
-                      <Text class="text-xs font-semibold uppercase tracking-widest" color="muted">{$t('filters')}</Text>
+                      <Text class="text-xs uppercase tracking-widest" color="muted" fontWeight="semi-bold"
+                        >{$t('filters')}</Text
+                      >
                     </div>
                     <div class="flex flex-wrap gap-2">
                       {#if workflow.filters.length === 0}
@@ -240,7 +244,9 @@
                   <!-- Actions Section -->
                   <div class="rounded-2xl border p-4 bg-light-50 border-light-200">
                     <div class="mb-3">
-                      <Text class="text-xs font-semibold uppercase tracking-widest" color="muted">{$t('actions')}</Text>
+                      <Text class="text-xs uppercase tracking-widest" color="muted" fontWeight="semi-bold"
+                        >{$t('actions')}</Text
+                      >
                     </div>
 
                     <div>
diff --git a/web/src/routes/(user)/utilities/workflows/[workflowId]/+page.svelte b/web/src/routes/(user)/utilities/workflows/[workflowId]/+page.svelte
index eb47abb767..a050598a90 100644
--- a/web/src/routes/(user)/utilities/workflows/[workflowId]/+page.svelte
+++ b/web/src/routes/(user)/utilities/workflows/[workflowId]/+page.svelte
@@ -350,7 +350,7 @@
     class="w-full p-8 rounded-lg border-2 border-dashed hover:border-light-400 hover:bg-light-50 transition-all flex flex-col items-center justify-center gap-2"
   >
     <Icon icon={mdiPlus} size="32" />
-    <Text size="small" class="font-medium">{title}</Text>
+    <Text size="small" fontWeight="medium">{title}</Text>
     <Text size="tiny">{description}</Text>
   </button>
 {/snippet}