From 9058d4428575d4855fbde46df31c4a4e3b452c14 Mon Sep 17 00:00:00 2001
From: overtrue <anzhengchao@gmail.com>
Date: Mon, 15 Jun 2026 12:42:44 +0800
Subject: [PATCH] fix: polish ui details and add audit skill

---
 app/(auth)/auth/oidc-callback/page.tsx        |   6 +-
 app/(auth)/config/page.tsx                    |  45 ++--
 app/(auth)/layout.tsx                         |   6 +-
 app/(dashboard)/403/page.tsx                  |  10 +-
 .../performance-infrastructure-card.tsx       |  12 +-
 .../_components/performance-server-list.tsx   |   6 +-
 .../_components/performance-usage-card.tsx    |   4 +-
 app/(dashboard)/access-keys/page.tsx          |  12 +-
 app/(dashboard)/browser/content.tsx           |  21 +-
 app/(dashboard)/browser/page.tsx              |  23 +-
 app/(dashboard)/buckets/page.tsx              |   2 +-
 app/(dashboard)/events/page.tsx               |   2 +-
 app/(dashboard)/import-export/page.tsx        |  22 +-
 app/(dashboard)/layout.tsx                    |   6 +-
 app/(dashboard)/lifecycle/page.tsx            |   2 +-
 app/(dashboard)/policies/page.tsx             |   6 +-
 app/(dashboard)/pool-decommission/page.tsx    |  14 +-
 app/(dashboard)/rebalance/page.tsx            |  10 +-
 app/(dashboard)/replication/page.tsx          |   2 +-
 app/(dashboard)/site-replication/page.tsx     |  13 +-
 app/(dashboard)/sse/page.tsx                  | 164 ++++++++----
 app/(dashboard)/status/page.tsx               |   2 +-
 app/(dashboard)/user-groups/page.tsx          |   8 +-
 app/(dashboard)/users/page.tsx                |  26 +-
 app/globals.css                               |  33 +++
 components/access-keys/edit-item.tsx          |  50 ++--
 components/access-keys/new-item.tsx           |  47 +++-
 components/app-sidebar.tsx                    |  18 +-
 components/app-top-nav.tsx                    |  10 +-
 components/audit-target/new-form.tsx          |  27 +-
 components/auth/heroes/hero-static.tsx        |  17 +-
 components/auth/login-form.tsx                |  37 ++-
 components/buckets/events-tab.tsx             |   4 +-
 components/buckets/info.tsx                   | 123 ++++++---
 components/buckets/lifecycle-tab.tsx          |   4 +-
 components/buckets/list.tsx                   |  18 +-
 components/buckets/new-form.tsx               |  81 ++++--
 components/buckets/replication-tab.tsx        |   4 +-
 components/buckets/selector.tsx               |   2 +-
 components/copy-button.tsx                    |   2 +-
 components/copy-input.tsx                     |   3 +-
 .../data-table/data-table-pagination.tsx      |   2 +-
 components/data-table/data-table.tsx          |  16 +-
 components/datetime-picker.tsx                |   6 +-
 components/events-target/new-form.tsx         |  27 +-
 components/events/new-form.tsx                |  21 +-
 components/language-switcher.tsx              |   6 +-
 components/license/article.tsx                |   6 +-
 components/license/enterprise-section.tsx     |   5 +-
 components/lifecycle/new-form.tsx             |  63 ++++-
 components/links/github.tsx                   |  11 +-
 components/links/x.tsx                        |  11 +-
 components/object/info.tsx                    |  92 +++++--
 components/object/list.tsx                    |  57 +++--
 components/object/new-form.tsx                |   3 +
 components/object/parquet-viewer.tsx          |   2 +-
 components/object/path-links.tsx              |  30 ++-
 components/object/pdf-viewer.tsx              |   6 +-
 components/object/preview-modal.tsx           |  20 +-
 components/object/upload-picker.tsx           |  52 ++--
 components/object/versions.tsx                |  27 +-
 components/object/view.tsx                    |   2 +-
 components/oidc/form.tsx                      |  58 ++++-
 components/oidc/provider-list.tsx             |   9 +-
 components/page-header.tsx                    |  15 +-
 components/policies/form.tsx                  |  13 +-
 components/pools/overview.tsx                 |  16 +-
 components/providers/app-ui-provider.tsx      |   2 +
 components/providers/theme-provider.tsx       |  36 ++-
 components/replication/new-form.tsx           | 132 +++++++---
 components/search-input.tsx                   |  33 ++-
 components/site-replication/edit-form.tsx     |  18 +-
 components/site-replication/new-form.tsx      |  35 ++-
 components/skip-link.tsx                      |  16 ++
 components/tasks/item.tsx                     |   3 +-
 components/tasks/panel.tsx                    |   6 +-
 components/tasks/stats-button.tsx             |   2 +-
 components/theme-switcher.tsx                 |   6 +-
 components/theme/logo.tsx                     |   8 +-
 components/tiers/change-key.tsx               |  10 +-
 components/tiers/new-form.tsx                 |  72 ++++--
 components/top-nav-breadcrumb.tsx             |  30 +--
 components/upload-zone.tsx                    |   8 +-
 components/user-group/edit-form.tsx           |  10 +-
 components/user-group/members.tsx             |   2 +-
 components/user-group/new-form.tsx            |  15 +-
 components/user-group/policies.tsx            |   4 +-
 .../user-group/set-policies-multiple.tsx      |   2 +
 components/user/add-to-group-form.tsx         |  10 +-
 components/user/change-password.tsx           |  23 +-
 components/user/dropdown.tsx                  |  12 +-
 components/user/edit-form.tsx                 |  11 +-
 components/user/edit/access-keys.tsx          | 117 ++++++---
 components/user/edit/groups.tsx               |   2 +-
 components/user/edit/policies.tsx             |   2 +-
 components/user/edit/secret-key.tsx           |   7 +-
 components/user/new-form.tsx                  |  32 ++-
 components/user/selector.tsx                  |   2 +-
 eslint.config.js                              |   7 +-
 i18n/locales/ar-MA.json                       |  40 +--
 i18n/locales/de-DE.json                       |  40 +--
 i18n/locales/en-US.json                       |  40 +--
 i18n/locales/es-ES.json                       |  40 +--
 i18n/locales/fr-FR.json                       |  40 +--
 i18n/locales/id-ID.json                       |  40 +--
 i18n/locales/it-IT.json                       |  40 +--
 i18n/locales/ja-JP.json                       |  40 +--
 i18n/locales/ko-KR.json                       |  40 +--
 i18n/locales/pt-BR.json                       |  40 +--
 i18n/locales/ru-RU.json                       |  40 +--
 i18n/locales/tr-TR.json                       |  40 +--
 i18n/locales/vi-VN.json                       |  40 +--
 i18n/locales/zh-CN.json                       |  40 +--
 lib/functions.ts                              |  26 ++
 pnpm-lock.yaml                                | 235 ------------------
 skills/ui-audit/SKILL.md                      | 140 +++++++++++
 skills/ui-audit/agents/openai.yaml            |   4 +
 117 files changed, 1997 insertions(+), 1123 deletions(-)
 create mode 100644 components/skip-link.tsx
 create mode 100644 skills/ui-audit/SKILL.md
 create mode 100644 skills/ui-audit/agents/openai.yaml

diff --git a/app/(auth)/auth/oidc-callback/page.tsx b/app/(auth)/auth/oidc-callback/page.tsx
index 1918f150..8d333cd6 100644
--- a/app/(auth)/auth/oidc-callback/page.tsx
+++ b/app/(auth)/auth/oidc-callback/page.tsx
@@ -69,10 +69,10 @@ export default function OidcCallbackPage() {
   }, [credentialsSet, isAuthenticated, hasResolvedFirstRoute, firstAccessibleRoute, router])
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-100 dark:bg-neutral-800">
+    <div className="flex min-h-screen items-center justify-center bg-muted">
       <div className="text-center">
-        <div className="mb-4 h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-blue-600 mx-auto" />
-        <p className="text-gray-600 dark:text-neutral-400">{t("Completing SSO login...")}</p>
+        <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-4 border-muted-foreground/25 border-t-primary" />
+        <p className="text-muted-foreground">{t("Completing SSO login…")}</p>
       </div>
     </div>
   )
diff --git a/app/(auth)/config/page.tsx b/app/(auth)/config/page.tsx
index 5501e87d..352cd98b 100644
--- a/app/(auth)/config/page.tsx
+++ b/app/(auth)/config/page.tsx
@@ -101,25 +101,25 @@ function ConfigPageContent() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-gray-100 dark:bg-neutral-800 lg:p-20">
+    <div className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-muted p-4 sm:p-6 lg:p-20">
       <Image
         src={buildRoute("/backgrounds/scillate.svg")}
         alt=""
         fill
+        priority
+        sizes="100vw"
         className="absolute inset-0 z-0 opacity-45 object-cover"
       />
-      <div className="z-10 mx-auto flex max-h-[85vh] w-full max-w-7xl flex-1 flex-col overflow-hidden rounded-lg shadow-lg dark:border-neutral-700 dark:bg-neutral-800 lg:flex-row">
+      <div className="z-10 mx-auto flex w-full max-w-7xl flex-col overflow-hidden border bg-card shadow-none lg:min-h-[560px] lg:flex-row">
         <div className="hidden w-1/2 lg:block">
           <AuthHeroStatic />
         </div>
-        <div className="flex w-full flex-col items-center justify-center bg-white dark:border-neutral-700 dark:bg-neutral-900 lg:w-1/2">
+        <div className="flex w-full flex-col items-center justify-center bg-card lg:w-1/2">
           <div className="max-w-sm w-full space-y-6 p-4 sm:p-7">
-            <ThemeLogo width={112} height={24} className="max-w-28" />
+            <ThemeLogo width={112} height={24} priority />
             <div className="py-6">
-              <h1 className="block text-2xl font-bold text-gray-800 dark:text-white">{t("Server Configuration")}</h1>
-              <p className="mt-2 text-sm text-gray-600 dark:text-neutral-400">
-                {t("Please configure your RustFS server address")}
-              </p>
+              <h1 className="block text-2xl font-bold text-foreground">{t("Server Configuration")}</h1>
+              <p className="mt-2 text-sm text-muted-foreground">{t("Please configure your RustFS server address")}</p>
             </div>
 
             <div className="mt-5 space-y-4">
@@ -131,9 +131,12 @@ function ConfigPageContent() {
                     <FieldContent>
                       <Input
                         id="serverHost"
+                        name="serverHost"
                         value={serverHost}
                         onChange={(e) => setServerHost(e.target.value)}
-                        type="text"
+                        type="url"
+                        autoComplete="off"
+                        spellCheck={false}
                         placeholder={t("Please enter server address (e.g., http://localhost:9000)")}
                       />
                     </FieldContent>
@@ -142,16 +145,28 @@ function ConfigPageContent() {
                     </FieldDescription>
                   </Field>
 
-                  <div className="flex gap-3">
-                    <Button type="submit" className="flex-1" disabled={isSaving}>
+                  <div className="flex flex-col gap-3 sm:flex-row">
+                    <Button type="submit" className="w-full sm:flex-1" disabled={isSaving}>
                       {t("Save Configuration")}
                     </Button>
 
-                    <Button type="button" variant="outline" onClick={resetToCurrentHost} disabled={isSaving}>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      className="w-full sm:w-auto"
+                      onClick={resetToCurrentHost}
+                      disabled={isSaving}
+                    >
                       {t("Reset")}
                     </Button>
 
-                    <Button type="button" variant="outline" onClick={skipConfig} disabled={isSaving}>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      className="w-full sm:w-auto"
+                      onClick={skipConfig}
+                      disabled={isSaving}
+                    >
                       {t("Skip")}
                     </Button>
                   </div>
@@ -160,9 +175,9 @@ function ConfigPageContent() {
             </div>
 
             <div className="my-8">
-              <p className="text-sm text-gray-600 dark:text-neutral-400">
+              <p className="text-sm text-muted-foreground">
                 {t("Need help?")}{" "}
-                <Link href={docs} className="text-blue-600 hover:underline">
+                <Link href={docs} className="text-foreground underline-offset-4 hover:underline">
                   {t("View Documentation")}
                 </Link>
               </p>
diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
index bb664d41..c93eac6b 100644
--- a/app/(auth)/layout.tsx
+++ b/app/(auth)/layout.tsx
@@ -1,3 +1,7 @@
 export default function AuthLayout({ children }: { children: React.ReactNode }) {
-  return <div className="min-h-screen">{children}</div>
+  return (
+    <main id="main-content" tabIndex={-1} className="min-h-screen min-w-0">
+      {children}
+    </main>
+  )
 }
diff --git a/app/(dashboard)/403/page.tsx b/app/(dashboard)/403/page.tsx
index 18b05830..76983d97 100644
--- a/app/(dashboard)/403/page.tsx
+++ b/app/(dashboard)/403/page.tsx
@@ -31,17 +31,17 @@ export default function ForbiddenPage() {
         <EmptyContent className="max-w-sm text-center">
           <EmptyHeader>
             <EmptyMedia variant="icon" className="mx-auto">
-              <svg viewBox="0 0 48 48" fill="none" className="h-12 w-12">
-                <circle cx="24" cy="24" r="22" fill="#F3F4F6" stroke="#E5E7EB" strokeWidth="2" />
+              <svg viewBox="0 0 48 48" fill="none" className="h-12 w-12 text-muted-foreground" aria-hidden>
+                <circle cx="24" cy="24" r="22" className="fill-muted stroke-border" strokeWidth="2" />
                 <path
                   d="M16 21V19a8 8 0 0116 0v2"
-                  stroke="#A3A3A3"
+                  className="stroke-muted-foreground"
                   strokeWidth="2"
                   strokeLinecap="round"
                   strokeLinejoin="round"
                 />
-                <rect x="16" y="28" width="16" height="4" rx="2" fill="#A3A3A3" />
-                <rect x="22" y="32" width="4" height="4" rx="2" fill="#A3A3A3" />
+                <rect x="16" y="28" width="16" height="4" rx="2" className="fill-muted-foreground" />
+                <rect x="22" y="32" width="4" height="4" rx="2" className="fill-muted-foreground" />
               </svg>
             </EmptyMedia>
             <EmptyTitle>{t("Access Denied")}</EmptyTitle>
diff --git a/app/(dashboard)/_components/performance-infrastructure-card.tsx b/app/(dashboard)/_components/performance-infrastructure-card.tsx
index dc9d81e7..61434bcc 100644
--- a/app/(dashboard)/_components/performance-infrastructure-card.tsx
+++ b/app/(dashboard)/_components/performance-infrastructure-card.tsx
@@ -23,27 +23,27 @@ export function PerformanceInfrastructureCard({
       </CardHeader>
       <CardContent>
         <div className="grid gap-4 lg:grid-cols-2">
-          <div className="rounded-lg border bg-muted/40 p-4">
+          <div className="border bg-muted/40 p-4">
             <p className="text-sm font-medium text-muted-foreground">{t("Servers")}</p>
             <div className="mt-4 grid gap-3 sm:grid-cols-2">
-              <div className="rounded-md border bg-background p-3">
+              <div className="border bg-background p-3">
                 <p className="text-xs text-muted-foreground">{t("Online")}</p>
                 <p className="mt-1 text-xl font-semibold text-foreground">{onlineServers}</p>
               </div>
-              <div className="rounded-md border bg-background p-3">
+              <div className="border bg-background p-3">
                 <p className="text-xs text-muted-foreground">{t("Offline")}</p>
                 <p className="mt-1 text-xl font-semibold text-foreground">{offlineServers}</p>
               </div>
             </div>
           </div>
-          <div className="rounded-lg border bg-muted/40 p-4">
+          <div className="border bg-muted/40 p-4">
             <p className="text-sm font-medium text-muted-foreground">{t("Disks")}</p>
             <div className="mt-4 grid gap-3 sm:grid-cols-2">
-              <div className="rounded-md border bg-background p-3">
+              <div className="border bg-background p-3">
                 <p className="text-xs text-muted-foreground">{t("Online")}</p>
                 <p className="mt-1 text-xl font-semibold text-foreground">{onlineDisks}</p>
               </div>
-              <div className="rounded-md border bg-background p-3">
+              <div className="border bg-background p-3">
                 <p className="text-xs text-muted-foreground">{t("Offline")}</p>
                 <p className="mt-1 text-xl font-semibold text-foreground">{offlineDisks}</p>
               </div>
diff --git a/app/(dashboard)/_components/performance-server-list.tsx b/app/(dashboard)/_components/performance-server-list.tsx
index 9b84dad3..af9ef8d4 100644
--- a/app/(dashboard)/_components/performance-server-list.tsx
+++ b/app/(dashboard)/_components/performance-server-list.tsx
@@ -147,7 +147,7 @@ export function PerformanceServerList({ servers, t }: { servers: ServerInfo[]; t
           <div className="flex items-center gap-2 self-start sm:self-auto">
             <span className="text-sm text-muted-foreground">{t("Sort by")}</span>
             <Select value={sortBy} onValueChange={(value) => setSortBy(value as PerformanceServerSort)}>
-              <SelectTrigger className="w-[180px] shadow-none">
+              <SelectTrigger className="w-[180px] shadow-none" aria-label={t("Sort by")}>
                 <SelectValue placeholder={t("Default")} />
               </SelectTrigger>
               <SelectContent>
@@ -171,12 +171,12 @@ export function PerformanceServerList({ servers, t }: { servers: ServerInfo[]; t
               value={server.endpoint ? `${server.endpoint}-${originalIndex}` : `server-${originalIndex}`}
             >
               <AccordionTrigger>
-                <div className="flex flex-col gap-2 text-left sm:flex-row sm:items-center sm:gap-4">
+                <div className="flex flex-col gap-2 text-start sm:flex-row sm:items-center sm:gap-4">
                   <div className="flex items-center gap-2">
                     <span
                       className={cn(
                         "inline-flex h-2 w-2 rounded-full",
-                        server.state === "online" ? "bg-emerald-500" : "bg-rose-500",
+                        server.state === "online" ? "bg-primary" : "bg-destructive",
                       )}
                     />
                     <span className="font-semibold">{server.endpoint ?? "--"}</span>
diff --git a/app/(dashboard)/_components/performance-usage-card.tsx b/app/(dashboard)/_components/performance-usage-card.tsx
index 1799149a..b5561f7a 100644
--- a/app/(dashboard)/_components/performance-usage-card.tsx
+++ b/app/(dashboard)/_components/performance-usage-card.tsx
@@ -45,13 +45,13 @@ export function PerformanceUsageCard({
           </div>
           <div className="w-full max-w-xs space-y-2">
             <Progress value={usedPercent} className="h-2" />
-            <p className="text-right text-xs text-muted-foreground">{usedPercent.toFixed(0)}%</p>
+            <p className="text-end text-xs text-muted-foreground">{usedPercent.toFixed(0)}%</p>
           </div>
         </div>
 
         <div className="grid gap-3 sm:grid-cols-3">
           {usageStats.map((item) => (
-            <div key={item.label} className="rounded-lg border bg-muted/40 p-4">
+            <div key={item.label} className="border bg-muted/40 p-4">
               <p className="text-xs uppercase text-muted-foreground">{item.label}</p>
               <p className="mt-2 text-sm font-medium text-foreground">{item.value}</p>
             </div>
diff --git a/app/(dashboard)/access-keys/page.tsx b/app/(dashboard)/access-keys/page.tsx
index d9e7ea34..33f70449 100644
--- a/app/(dashboard)/access-keys/page.tsx
+++ b/app/(dashboard)/access-keys/page.tsx
@@ -19,8 +19,8 @@ import { UserNotice } from "@/components/user/notice"
 import { useAccessKeys } from "@/hooks/use-access-keys"
 import { useDialog } from "@/lib/feedback/dialog"
 import { useMessage } from "@/lib/feedback/message"
+import { formatDateTime } from "@/lib/functions"
 import type { ColumnDef } from "@tanstack/react-table"
-import dayjs from "dayjs"
 
 interface RowData {
   accessKey: string
@@ -89,7 +89,7 @@ export default function AccessKeysPage() {
       header: () => t("Expiration"),
       cell: ({ row }) =>
         row.original.expiration && row.original.expiration !== "9999-01-01T00:00:00Z"
-          ? dayjs(row.original.expiration).format("YYYY-MM-DD HH:mm")
+          ? formatDateTime(row.original.expiration)
           : "-",
     },
     {
@@ -121,13 +121,13 @@ export default function AccessKeysPage() {
         <div className="flex justify-center gap-2">
           {canEditAccessKey ? (
             <Button variant="outline" size="sm" onClick={() => openEditItem(row.original)}>
-              <RiEdit2Line className="size-4" />
+              <RiEdit2Line className="size-4" aria-hidden />
               <span>{t("Edit")}</span>
             </Button>
           ) : null}
           {canDeleteAccessKey ? (
             <Button variant="outline" size="sm" onClick={() => confirmDeleteSingle(row.original)}>
-              <RiDeleteBin5Line className="size-4" />
+              <RiDeleteBin5Line className="size-4" aria-hidden />
               <span>{t("Delete")}</span>
             </Button>
           ) : null}
@@ -222,13 +222,13 @@ export default function AccessKeysPage() {
             />
             {selectedKeys.length > 0 && canBulkDeleteAccessKeys && (
               <Button variant="outline" disabled={!selectedKeys.length} onClick={deleteSelected}>
-                <RiDeleteBin5Line className="size-4" />
+                <RiDeleteBin5Line className="size-4" aria-hidden />
                 <span>{t("Delete Selected")}</span>
               </Button>
             )}
             {canCreateAccessKey ? (
               <Button variant="outline" onClick={() => setNewItemVisible(true)}>
-                <RiAddLine className="size-4" />
+                <RiAddLine className="size-4" aria-hidden />
                 <span>{t("Add Access Key")}</span>
               </Button>
             ) : null}
diff --git a/app/(dashboard)/browser/content.tsx b/app/(dashboard)/browser/content.tsx
index bcdb5f7c..1eaeb0ea 100644
--- a/app/(dashboard)/browser/content.tsx
+++ b/app/(dashboard)/browser/content.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import Link from "next/link"
 import { useRouter, useSearchParams } from "next/navigation"
 import { useTranslation } from "react-i18next"
 import { Page } from "@/components/page"
@@ -161,19 +162,13 @@ export function BrowserContent({ bucketName, keyPath = "", preview = false, prev
     <Page>
       <PageHeader>
         <div className="flex items-center gap-4 min-w-[40vw]">
-          <h1
-            className="text-2xl font-bold cursor-pointer"
-            onClick={() => router.push(bucketPath())}
-            role="button"
-            tabIndex={0}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault()
-                router.push(bucketPath())
-              }
-            }}
-          >
-            {bucketName}
+          <h1 className="min-w-0 text-2xl font-bold text-pretty">
+            <Link
+              href={bucketPath()}
+              className="truncate hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {bucketName}
+            </Link>
           </h1>
           <ObjectPathLinks objectKey={keyPath} bucketName={bucketName} onClick={handlePathClick} />
         </div>
diff --git a/app/(dashboard)/browser/page.tsx b/app/(dashboard)/browser/page.tsx
index 98854699..1154a943 100644
--- a/app/(dashboard)/browser/page.tsx
+++ b/app/(dashboard)/browser/page.tsx
@@ -19,11 +19,10 @@ import { useSystem } from "@/hooks/use-system"
 import { usePermissions } from "@/hooks/use-permissions"
 import { useDialog } from "@/lib/feedback/dialog"
 import { useMessage } from "@/lib/feedback/message"
-import { niceBytes } from "@/lib/functions"
+import { formatDateTime, formatInteger, niceBytes } from "@/lib/functions"
 import { normalizeDateToIso } from "@/lib/safe-date"
 import { BrowserContent } from "./content"
 import type { ColumnDef } from "@tanstack/react-table"
-import dayjs from "dayjs"
 
 interface BucketRow {
   Name: string
@@ -208,17 +207,17 @@ function BrowserBucketsPage() {
       cell: ({ row }) => (
         <Link
           href={`/browser?bucket=${encodeURIComponent(row.original.Name)}`}
-          className="flex items-center gap-2 text-primary hover:underline"
+          className="flex min-w-0 max-w-full items-center gap-2 text-primary hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50"
         >
-          <RiArchiveLine className="size-4" />
-          {row.original.Name}
+          <RiArchiveLine className="size-4 shrink-0" aria-hidden />
+          <span className="min-w-0 truncate">{row.original.Name}</span>
         </Link>
       ),
     },
     {
       header: () => t("Creation Date"),
       accessorKey: "CreationDate",
-      cell: ({ row }) => dayjs(row.original.CreationDate).format("YYYY-MM-DD HH:mm:ss"),
+      cell: ({ row }) => formatDateTime(row.original.CreationDate),
     },
   ]
 
@@ -228,7 +227,7 @@ function BrowserBucketsPage() {
       accessorKey: "Count",
       cell: ({ row }) =>
         typeof row.original.Count === "number" ? (
-          row.original.Count.toLocaleString()
+          formatInteger(row.original.Count)
         ) : usageLoading ? (
           <Spinner className="size-3 text-muted-foreground" />
         ) : (
@@ -251,7 +250,7 @@ function BrowserBucketsPage() {
     cell: ({ row }) => {
       if (typeof row.original.IsPublic === "boolean") {
         return row.original.IsPublic ? (
-          <span className="text-red-600 dark:text-red-400">{t("Public")}</span>
+          <span className="text-destructive">{t("Public")}</span>
         ) : (
           <span className="text-muted-foreground">{t("Private")}</span>
         )
@@ -272,12 +271,12 @@ function BrowserBucketsPage() {
           size="sm"
           onClick={() => router.push(`/buckets?bucket=${encodeURIComponent(row.original.Name)}`)}
         >
-          <RiSettings5Line className="size-4" />
+          <RiSettings5Line className="size-4" aria-hidden />
           <span>{t("Settings")}</span>
         </Button>
         {canCapability("bucket.delete", { bucket: row.original.Name }) ? (
           <Button variant="outline" size="sm" onClick={() => confirmDelete(row.original)}>
-            <RiDeleteBin5Line className="size-4" />
+            <RiDeleteBin5Line className="size-4" aria-hidden />
             <span>{t("Delete")}</span>
           </Button>
         ) : null}
@@ -343,12 +342,12 @@ function BrowserBucketsPage() {
             />
             {canCreateBucket ? (
               <Button variant="outline" onClick={() => setFormVisible(true)}>
-                <RiAddLine className="size-4" />
+                <RiAddLine className="size-4" aria-hidden />
                 <span>{t("Create Bucket")}</span>
               </Button>
             ) : null}
             <Button variant="outline" onClick={() => fetchBuckets({ force: true })}>
-              <RiRefreshLine className="size-4" />
+              <RiRefreshLine className="size-4" aria-hidden />
               <span>{t("Refresh")}</span>
             </Button>
           </>
diff --git a/app/(dashboard)/buckets/page.tsx b/app/(dashboard)/buckets/page.tsx
index 21d9a74b..699610f1 100644
--- a/app/(dashboard)/buckets/page.tsx
+++ b/app/(dashboard)/buckets/page.tsx
@@ -16,7 +16,7 @@ export default function BucketSettingsPage() {
     <Page>
       <PageHeader>
         <h1 className="text-2xl font-bold">
-          {t("Bucket")}: {bucketName || "..."}
+          {t("Bucket")}: {bucketName || "…"}
         </h1>
       </PageHeader>
 
diff --git a/app/(dashboard)/events/page.tsx b/app/(dashboard)/events/page.tsx
index 2955cc04..bf3d3c92 100644
--- a/app/(dashboard)/events/page.tsx
+++ b/app/(dashboard)/events/page.tsx
@@ -33,7 +33,7 @@ export default function EventsPage() {
       <PageHeader
         actions={
           <Button variant="outline" nativeButton={false} render={<Link href="/events" />}>
-            <RiArrowLeftLine className="size-4" />
+            <RiArrowLeftLine className="size-4" aria-hidden />
             <span>{t("Buckets")}</span>
           </Button>
         }
diff --git a/app/(dashboard)/import-export/page.tsx b/app/(dashboard)/import-export/page.tsx
index ca6c82a4..8a7b0326 100644
--- a/app/(dashboard)/import-export/page.tsx
+++ b/app/(dashboard)/import-export/page.tsx
@@ -53,14 +53,14 @@ export default function ImportExportPage() {
 
   const exportHighlights = useMemo(
     () => [
-      { label: "Users", icon: RiUserLine, iconClass: "text-blue-500" },
-      { label: "User Groups", icon: RiGroupLine, iconClass: "text-green-500" },
+      { label: "Users", icon: RiUserLine, iconClass: "text-chart-1" },
+      { label: "User Groups", icon: RiGroupLine, iconClass: "text-chart-2" },
       {
         label: "IAM Policies",
         icon: RiShieldCheckLine,
-        iconClass: "text-purple-500",
+        iconClass: "text-chart-3",
       },
-      { label: "AK/SK", icon: RiKeyLine, iconClass: "text-orange-500" },
+      { label: "AK/SK", icon: RiKeyLine, iconClass: "text-chart-4" },
     ],
     [],
   )
@@ -148,7 +148,7 @@ export default function ImportExportPage() {
               <CardContent className="space-y-6">
                 <div className="grid gap-4 sm:grid-cols-2">
                   {exportHighlights.map((item) => (
-                    <div key={item.label} className="flex items-center gap-3 rounded-md border bg-muted/40 p-3">
+                    <div key={item.label} className="flex items-center gap-3 border bg-muted/40 p-3">
                       <item.icon className={`size-5 ${item.iconClass}`} aria-hidden />
                       <span className="text-sm font-medium text-foreground">{t(item.label)}</span>
                     </div>
@@ -169,7 +169,7 @@ export default function ImportExportPage() {
                 </div>
                 <Button variant="default" size="lg" disabled={isLoading} onClick={handleExportIam}>
                   <RiDownload2Line className="size-4" aria-hidden />
-                  <span>{isLoading ? t("Exporting...") : t("Export Now")}</span>
+                  <span>{isLoading ? t("Exporting…") : t("Export Now")}</span>
                 </Button>
               </CardFooter>
             </Card>
@@ -198,7 +198,13 @@ export default function ImportExportPage() {
                           <p className="text-sm font-medium text-foreground">{selectedFile.name}</p>
                           <p className="text-xs text-muted-foreground">{formatSize(selectedFile.size)}</p>
                         </div>
-                        <Button variant="ghost" size="icon" className="text-destructive" onClick={clearSelectedFile}>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="text-destructive"
+                          aria-label={t("Remove")}
+                          onClick={clearSelectedFile}
+                        >
                           <RiCloseLine className="size-4" aria-hidden />
                         </Button>
                       </CardContent>
@@ -216,7 +222,7 @@ export default function ImportExportPage() {
                 </div>
                 <Button variant="default" size="lg" disabled={isLoading || !selectedFile} onClick={handleImportIam}>
                   <RiUpload2Line className="size-4" aria-hidden />
-                  <span>{isLoading ? t("Importing...") : t("Import Now")}</span>
+                  <span>{isLoading ? t("Importing…") : t("Import Now")}</span>
                 </Button>
               </CardFooter>
             </Card>
diff --git a/app/(dashboard)/layout.tsx b/app/(dashboard)/layout.tsx
index 45dad0a2..b4e12a58 100644
--- a/app/(dashboard)/layout.tsx
+++ b/app/(dashboard)/layout.tsx
@@ -9,9 +9,11 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
       <SidebarProvider defaultOpen>
         <AppSidebar />
         <SidebarInset>
-          <div className="flex flex-1 flex-col gap-4 p-6 pt-0">
+          <div className="flex flex-1 flex-col gap-4 px-4 pb-6 pt-0 sm:px-6">
             <AppTopNav />
-            {children}
+            <main id="main-content" tabIndex={-1} className="min-w-0 flex-1 scroll-mt-16">
+              {children}
+            </main>
           </div>
         </SidebarInset>
       </SidebarProvider>
diff --git a/app/(dashboard)/lifecycle/page.tsx b/app/(dashboard)/lifecycle/page.tsx
index 643765ef..5be20eae 100644
--- a/app/(dashboard)/lifecycle/page.tsx
+++ b/app/(dashboard)/lifecycle/page.tsx
@@ -33,7 +33,7 @@ export default function LifecyclePage() {
       <PageHeader
         actions={
           <Button variant="outline" nativeButton={false} render={<Link href="/lifecycle" />}>
-            <RiArrowLeftLine className="size-4" />
+            <RiArrowLeftLine className="size-4" aria-hidden />
             <span>{t("Buckets")}</span>
           </Button>
         }
diff --git a/app/(dashboard)/policies/page.tsx b/app/(dashboard)/policies/page.tsx
index b37a3488..f0b67cad 100644
--- a/app/(dashboard)/policies/page.tsx
+++ b/app/(dashboard)/policies/page.tsx
@@ -95,13 +95,13 @@ export default function PoliciesPage() {
         <div className="flex items-center gap-2">
           {canEditPolicy ? (
             <Button variant="outline" size="sm" onClick={() => handleEdit(row.original)}>
-              <RiEdit2Line className="size-4" />
+              <RiEdit2Line className="size-4" aria-hidden />
               <span>{t("Edit")}</span>
             </Button>
           ) : null}
           {canDeletePolicy ? (
             <Button variant="outline" size="sm" onClick={() => confirmDelete(row.original)}>
-              <RiDeleteBin5Line className="size-4" />
+              <RiDeleteBin5Line className="size-4" aria-hidden />
               <span>{t("Delete")}</span>
             </Button>
           ) : null}
@@ -152,7 +152,7 @@ export default function PoliciesPage() {
             />
             {canCreatePolicy ? (
               <Button variant="outline" onClick={handleNew}>
-                <RiAddLine className="size-4" />
+                <RiAddLine className="size-4" aria-hidden />
                 <span>{t("New Policy")}</span>
               </Button>
             ) : null}
diff --git a/app/(dashboard)/pool-decommission/page.tsx b/app/(dashboard)/pool-decommission/page.tsx
index 7074b6a7..435df83f 100644
--- a/app/(dashboard)/pool-decommission/page.tsx
+++ b/app/(dashboard)/pool-decommission/page.tsx
@@ -256,7 +256,7 @@ export default function PoolDecommissionPage() {
         actions={
           <>
             <Button variant="outline" onClick={() => void loadData()} disabled={loading || submitting}>
-              <RiRefreshLine className="me-2 size-4" />
+              <RiRefreshLine className="me-2 size-4" aria-hidden />
               {t("Sync")}
             </Button>
             <Button variant="outline" onClick={() => void handleCancel()} disabled={!canCancelActive || submitting}>
@@ -280,7 +280,7 @@ export default function PoolDecommissionPage() {
 
         {["starting", "running", "stopping", "failed", "stopped", "unknown"].includes(rebalanceState) ? (
           <Alert>
-            <RiAlertLine className="size-4" />
+            <RiAlertLine className="size-4" aria-hidden />
             <AlertTitle>{t("Rebalance must complete before decommission")}</AlertTitle>
             <AlertDescription>{t("Finish rebalance successfully before retiring a pool.")}</AlertDescription>
           </Alert>
@@ -354,7 +354,7 @@ export default function PoolDecommissionPage() {
                       <TableHead>{t("Progress")}</TableHead>
                       <TableHead>{t("Objects")}</TableHead>
                       <TableHead>{t("Bytes Moved")}</TableHead>
-                      <TableHead className="text-right">{t("Actions")}</TableHead>
+                      <TableHead className="text-end">{t("Actions")}</TableHead>
                     </TableRow>
                   </TableHeader>
                   <TableBody>
@@ -374,8 +374,16 @@ export default function PoolDecommissionPage() {
                         return (
                           <TableRow
                             key={pool.id}
+                            tabIndex={0}
+                            aria-selected={pool.id === selectedPoolId}
+                            className="cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                             data-state={pool.id === selectedPoolId ? "selected" : undefined}
                             onClick={() => setSelectedPoolId(pool.id)}
+                            onKeyDown={(event) => {
+                              if (event.key !== "Enter" && event.key !== " ") return
+                              event.preventDefault()
+                              setSelectedPoolId(pool.id)
+                            }}
                           >
                             <TableCell className="max-w-[320px] truncate">{pool.name}</TableCell>
                             <TableCell>
diff --git a/app/(dashboard)/rebalance/page.tsx b/app/(dashboard)/rebalance/page.tsx
index 8249f461..e260032a 100644
--- a/app/(dashboard)/rebalance/page.tsx
+++ b/app/(dashboard)/rebalance/page.tsx
@@ -18,7 +18,7 @@ import { usePoolOperations } from "@/hooks/use-pool-operations"
 import type { PoolSummary, PoolsOverview, RebalanceDisplayState, RebalanceStatus } from "@/lib/pool-operations"
 import { useDialog } from "@/lib/feedback/dialog"
 import { useMessage } from "@/lib/feedback/message"
-import { niceBytes } from "@/lib/functions"
+import { formatInteger, niceBytes } from "@/lib/functions"
 import { cn } from "@/lib/utils"
 
 const POLL_MS = 5000
@@ -42,7 +42,7 @@ function formatBytesValue(value?: number) {
 }
 
 function formatNumberValue(value?: number) {
-  return value === undefined ? "--" : String(value)
+  return formatInteger(value)
 }
 
 function isFailedRebalancePool(pool: PoolSummary) {
@@ -197,19 +197,19 @@ export default function RebalancePage() {
         actions={
           <>
             <Button variant="outline" onClick={() => void loadData()} disabled={loading || submitting}>
-              <RiRefreshLine className="me-2 size-4" />
+              <RiRefreshLine className="me-2 size-4" aria-hidden />
               {t("Sync")}
             </Button>
             <Button onClick={handleStart} disabled={!canStart || submitting}>
               {submitting && canStart ? (
                 <Spinner className="me-2 size-4" />
               ) : (
-                <RiPlayCircleLine className="me-2 size-4" />
+                <RiPlayCircleLine className="me-2 size-4" aria-hidden />
               )}
               {t("Start Rebalance")}
             </Button>
             <Button variant="outline" onClick={handleStop} disabled={!canStop || submitting}>
-              <RiPauseCircleLine className="me-2 size-4" />
+              <RiPauseCircleLine className="me-2 size-4" aria-hidden />
               {t("Stop")}
             </Button>
           </>
diff --git a/app/(dashboard)/replication/page.tsx b/app/(dashboard)/replication/page.tsx
index e331f7af..dace0861 100644
--- a/app/(dashboard)/replication/page.tsx
+++ b/app/(dashboard)/replication/page.tsx
@@ -33,7 +33,7 @@ export default function ReplicationPage() {
       <PageHeader
         actions={
           <Button variant="outline" nativeButton={false} render={<Link href="/replication" />}>
-            <RiArrowLeftLine className="size-4" />
+            <RiArrowLeftLine className="size-4" aria-hidden />
             <span>{t("Buckets")}</span>
           </Button>
         }
diff --git a/app/(dashboard)/site-replication/page.tsx b/app/(dashboard)/site-replication/page.tsx
index b43cc6ab..59bfe3d1 100644
--- a/app/(dashboard)/site-replication/page.tsx
+++ b/app/(dashboard)/site-replication/page.tsx
@@ -34,7 +34,7 @@ import { Spinner } from "@/components/ui/spinner"
 import { useDataTable } from "@/hooks/use-data-table"
 import { usePermissions } from "@/hooks/use-permissions"
 import { useSiteReplication } from "@/hooks/use-site-replication"
-import { niceBytes } from "@/lib/functions"
+import { formatDateTime, niceBytes } from "@/lib/functions"
 import { useDialog } from "@/lib/feedback/dialog"
 import { useMessage } from "@/lib/feedback/message"
 import type {
@@ -59,15 +59,6 @@ function isNotImplementedError(error: unknown) {
   return /notimplemented|not implemented/i.test(message)
 }
 
-function formatDateTime(value?: string) {
-  if (!value) return "--"
-
-  const date = new Date(value)
-  if (Number.isNaN(date.getTime())) return value
-
-  return date.toLocaleString()
-}
-
 function formatSyncBadge(t: (key: string) => string, syncState: SiteReplicationPeerInfo["syncState"]) {
   switch (syncState) {
     case "enable":
@@ -356,7 +347,7 @@ export default function SiteReplicationPage() {
             <DropdownMenu>
               <DropdownMenuTrigger
                 render={
-                  <Button type="button" variant="ghost" size="icon-sm" disabled={isBusy}>
+                  <Button type="button" variant="ghost" size="icon" disabled={isBusy}>
                     <RiMore2Line className="size-4" aria-hidden />
                     <span className="sr-only">{t("Actions")}</span>
                   </Button>
diff --git a/app/(dashboard)/sse/page.tsx b/app/(dashboard)/sse/page.tsx
index 5d070e6c..840b8368 100644
--- a/app/(dashboard)/sse/page.tsx
+++ b/app/(dashboard)/sse/page.tsx
@@ -33,6 +33,7 @@ import { Spinner } from "@/components/ui/spinner"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { useSSE } from "@/hooks/use-sse"
 import { useMessage } from "@/lib/feedback/message"
+import { formatDateTime } from "@/lib/functions"
 import type { KmsConfigPayload, KmsKeyInfo, KmsKeyMetadata, KmsServiceStatusResponse } from "@/types/kms"
 import {
   AlertDialog,
@@ -101,10 +102,7 @@ function getStatusKind(status: KmsServiceStatusResponse | null): "NotConfigured"
 }
 
 function formatTimestamp(value?: string | null) {
-  if (!value) return "-"
-  const date = new Date(value)
-  if (Number.isNaN(date.getTime())) return value
-  return date.toLocaleString()
+  return formatDateTime(value, "-")
 }
 
 function getKeyDisplayName(key: KmsKeyInfo | KmsKeyMetadata | null) {
@@ -617,7 +615,7 @@ export default function SSEPage() {
       <Page>
         <PageHeader
           description={
-            <p className="text-gray-600 dark:text-gray-400">
+            <p className="text-muted-foreground">
               {t("Configure server-side encryption for your objects using external key management services.")}
             </p>
           }
@@ -631,7 +629,7 @@ export default function SSEPage() {
               <div className="flex flex-wrap items-center gap-3">
                 <CardTitle className="text-base sm:text-lg">{t("KMS Status Overview")}</CardTitle>
                 <Badge variant={getStateBadgeVariant(statusBadgeValue)} className="text-sm uppercase">
-                  {loadingStatus ? t("Loading...") : getKmsStatusText()}
+                  {loadingStatus ? t("Loading…") : getKmsStatusText()}
                 </Badge>
               </div>
               <CardDescription>{getKmsStatusDescription()}</CardDescription>
@@ -643,23 +641,23 @@ export default function SSEPage() {
             </CardHeader>
             <CardContent className="space-y-4">
               <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
-                <div className="rounded-md border bg-muted/40 p-3">
+                <div className="border bg-muted/40 p-3">
                   <p className="text-xs text-muted-foreground">{t("Backend Type")}</p>
                   <p className="text-sm font-medium text-foreground">{status?.backend_type ?? t("Not configured")}</p>
                 </div>
-                <div className="rounded-md border bg-muted/40 p-3">
+                <div className="border bg-muted/40 p-3">
                   <p className="text-xs text-muted-foreground">{t("Status")}</p>
                   <p className="text-sm font-medium text-foreground">
-                    {loadingStatus ? t("Loading...") : getKmsStatusText()}
+                    {loadingStatus ? t("Loading…") : getKmsStatusText()}
                   </p>
                 </div>
-                <div className="rounded-md border bg-muted/40 p-3">
+                <div className="border bg-muted/40 p-3">
                   <p className="text-xs text-muted-foreground">{t("Health")}</p>
                   <p className="text-sm font-medium text-foreground">
                     {status?.healthy == null ? t("Unknown") : status.healthy ? t("Healthy") : t("Unhealthy")}
                   </p>
                 </div>
-                <div className="rounded-md border bg-muted/40 p-3">
+                <div className="border bg-muted/40 p-3">
                   <p className="text-xs text-muted-foreground">{t("Default SSE Key")}</p>
                   <p className="text-sm font-medium text-foreground">
                     {status?.config_summary?.default_key_id || t("Not set")}
@@ -687,7 +685,7 @@ export default function SSEPage() {
 
               <div className="flex flex-wrap items-center justify-end gap-2">
                 <Button size="sm" variant="outline" disabled={refreshingStatus} onClick={handleRefresh}>
-                  {refreshingStatus ? <Spinner className="size-4" /> : <RiRefreshLine className="size-4" />}
+                  {refreshingStatus ? <Spinner className="size-4" /> : <RiRefreshLine className="size-4" aria-hidden />}
                   {t("Refresh")}
                 </Button>
 
@@ -709,7 +707,7 @@ export default function SSEPage() {
                     />
                     <DropdownMenuContent align="end">
                       <DropdownMenuItem disabled={!isRunning || clearingCache} onClick={handleClearCache}>
-                        {clearingCache ? t("Clearing cache...") : t("Clear Cache")}
+                        {clearingCache ? t("Clearing cache…") : t("Clear Cache")}
                       </DropdownMenuItem>
                       <DropdownMenuSeparator />
                       <DropdownMenuItem
@@ -717,7 +715,7 @@ export default function SSEPage() {
                         onClick={handleStopKMS}
                         className="text-destructive focus:text-destructive"
                       >
-                        {stoppingKMS ? t("Stopping KMS...") : t("Stop KMS")}
+                        {stoppingKMS ? t("Stopping KMS…") : t("Stop KMS")}
                       </DropdownMenuItem>
                     </DropdownMenuContent>
                   </DropdownMenu>
@@ -749,7 +747,7 @@ export default function SSEPage() {
                           updateFormState("backendType", value as ConfigFormState["backendType"])
                         }
                       >
-                        <SelectTrigger className="w-full">
+                        <SelectTrigger className="w-full" aria-label={t("KMS Backend")}>
                           <SelectValue placeholder={t("Select backend type")} />
                         </SelectTrigger>
                         <SelectContent>
@@ -763,12 +761,16 @@ export default function SSEPage() {
                   </Field>
 
                   <Field>
-                    <FieldLabel>{t("Default SSE Key")}</FieldLabel>
+                    <FieldLabel htmlFor="defaultKeyId">{t("Default SSE Key")}</FieldLabel>
                     <FieldContent>
                       <Input
+                        id="defaultKeyId"
+                        name="defaultKeyId"
                         value={formState.defaultKeyId}
                         onChange={(event) => updateFormState("defaultKeyId", event.target.value)}
+                        autoComplete="off"
                         placeholder={t("Enter the default SSE key ID")}
+                        spellCheck={false}
                       />
                     </FieldContent>
                     <FieldDescription>
@@ -780,23 +782,31 @@ export default function SSEPage() {
                 {formState.backendType === "local" ? (
                   <FieldGroup className="grid gap-4 lg:grid-cols-2">
                     <Field>
-                      <FieldLabel>{t("Local Key Directory")}</FieldLabel>
+                      <FieldLabel htmlFor="keyDir">{t("Local Key Directory")}</FieldLabel>
                       <FieldContent>
                         <Input
+                          id="keyDir"
+                          name="keyDir"
                           value={formState.keyDir}
                           onChange={(event) => updateFormState("keyDir", event.target.value)}
+                          autoComplete="off"
                           placeholder={t("Enter an absolute path such as D:/data/kms-keys")}
+                          spellCheck={false}
                         />
                       </FieldContent>
                       <FieldDescription>{t("The directory must be an absolute path on the server.")}</FieldDescription>
                     </Field>
 
                     <Field>
-                      <FieldLabel>{t("File Permissions")}</FieldLabel>
+                      <FieldLabel htmlFor="filePermissions">{t("File Permissions")}</FieldLabel>
                       <FieldContent>
                         <Input
+                          id="filePermissions"
+                          name="filePermissions"
                           type="number"
+                          inputMode="numeric"
                           min={0}
+                          autoComplete="off"
                           value={formState.filePermissions}
                           onChange={(event) => updateFormState("filePermissions", event.target.value)}
                           placeholder="384"
@@ -816,20 +826,27 @@ export default function SSEPage() {
 
                     <FieldGroup className="grid gap-4 lg:grid-cols-2">
                       <Field>
-                        <FieldLabel>{t("Vault Server Address")}</FieldLabel>
+                        <FieldLabel htmlFor="vaultAddress">{t("Vault Server Address")}</FieldLabel>
                         <FieldContent>
                           <Input
+                            id="vaultAddress"
+                            name="vaultAddress"
+                            type="url"
                             value={formState.address}
                             onChange={(event) => updateFormState("address", event.target.value)}
+                            autoComplete="off"
                             placeholder="http://127.0.0.1:8200"
+                            spellCheck={false}
                           />
                         </FieldContent>
                       </Field>
 
                       <Field>
-                        <FieldLabel>{t("Vault Token")}</FieldLabel>
+                        <FieldLabel htmlFor="vaultToken">{t("Vault Token")}</FieldLabel>
                         <FieldContent>
                           <Input
+                            id="vaultToken"
+                            name="vaultToken"
                             type="password"
                             value={formState.vaultToken}
                             onChange={(event) => updateFormState("vaultToken", event.target.value)}
@@ -839,6 +856,7 @@ export default function SSEPage() {
                                 : t("Enter your Vault authentication token")
                             }
                             autoComplete="off"
+                            spellCheck={false}
                           />
                         </FieldContent>
                         <FieldDescription>
@@ -851,23 +869,31 @@ export default function SSEPage() {
 
                     <FieldGroup className="grid gap-4 lg:grid-cols-2">
                       <Field>
-                        <FieldLabel>{t("Vault Namespace")}</FieldLabel>
+                        <FieldLabel htmlFor="vaultNamespace">{t("Vault Namespace")}</FieldLabel>
                         <FieldContent>
                           <Input
+                            id="vaultNamespace"
+                            name="vaultNamespace"
                             value={formState.namespace}
                             onChange={(event) => updateFormState("namespace", event.target.value)}
+                            autoComplete="off"
                             placeholder={t("Optional Vault namespace")}
+                            spellCheck={false}
                           />
                         </FieldContent>
                       </Field>
 
                       <Field>
-                        <FieldLabel>{t("Transit Mount Path")}</FieldLabel>
+                        <FieldLabel htmlFor="transitMountPath">{t("Transit Mount Path")}</FieldLabel>
                         <FieldContent>
                           <Input
+                            id="transitMountPath"
+                            name="transitMountPath"
                             value={formState.mountPath}
                             onChange={(event) => updateFormState("mountPath", event.target.value)}
+                            autoComplete="off"
                             placeholder="transit"
+                            spellCheck={false}
                           />
                         </FieldContent>
                       </Field>
@@ -875,23 +901,31 @@ export default function SSEPage() {
                       {formState.backendType === "vault-kv2" && (
                         <>
                           <Field>
-                            <FieldLabel>{t("KV Mount")}</FieldLabel>
+                            <FieldLabel htmlFor="kvMount">{t("KV Mount")}</FieldLabel>
                             <FieldContent>
                               <Input
+                                id="kvMount"
+                                name="kvMount"
                                 value={formState.kvMount}
                                 onChange={(event) => updateFormState("kvMount", event.target.value)}
+                                autoComplete="off"
                                 placeholder="secret"
+                                spellCheck={false}
                               />
                             </FieldContent>
                           </Field>
 
                           <Field>
-                            <FieldLabel>{t("Key Path Prefix")}</FieldLabel>
+                            <FieldLabel htmlFor="keyPathPrefix">{t("Key Path Prefix")}</FieldLabel>
                             <FieldContent>
                               <Input
+                                id="keyPathPrefix"
+                                name="keyPathPrefix"
                                 value={formState.keyPathPrefix}
                                 onChange={(event) => updateFormState("keyPathPrefix", event.target.value)}
+                                autoComplete="off"
                                 placeholder="rustfs/kms/keys"
+                                spellCheck={false}
                               />
                             </FieldContent>
                           </Field>
@@ -899,8 +933,9 @@ export default function SSEPage() {
                       )}
                     </FieldGroup>
 
-                    <div className="flex items-center gap-3 rounded-md border p-3">
+                    <div className="flex items-center gap-3 border p-3">
                       <Checkbox
+                        name="skipTlsVerify"
                         checked={formState.skipTlsVerify}
                         onCheckedChange={(checked) => updateFormState("skipTlsVerify", checked === true)}
                         id="skipTlsVerify"
@@ -914,11 +949,15 @@ export default function SSEPage() {
 
                 <FieldGroup className="grid gap-4 lg:grid-cols-3">
                   <Field>
-                    <FieldLabel>{t("Timeout (seconds)")}</FieldLabel>
+                    <FieldLabel htmlFor="timeoutSeconds">{t("Timeout (seconds)")}</FieldLabel>
                     <FieldContent>
                       <Input
+                        id="timeoutSeconds"
+                        name="timeoutSeconds"
                         type="number"
+                        inputMode="numeric"
                         min={1}
+                        autoComplete="off"
                         value={formState.timeoutSeconds}
                         onChange={(event) => updateFormState("timeoutSeconds", event.target.value)}
                       />
@@ -926,11 +965,15 @@ export default function SSEPage() {
                   </Field>
 
                   <Field>
-                    <FieldLabel>{t("Retry Attempts")}</FieldLabel>
+                    <FieldLabel htmlFor="retryAttempts">{t("Retry Attempts")}</FieldLabel>
                     <FieldContent>
                       <Input
+                        id="retryAttempts"
+                        name="retryAttempts"
                         type="number"
+                        inputMode="numeric"
                         min={0}
+                        autoComplete="off"
                         value={formState.retryAttempts}
                         onChange={(event) => updateFormState("retryAttempts", event.target.value)}
                       />
@@ -938,9 +981,10 @@ export default function SSEPage() {
                   </Field>
                 </FieldGroup>
 
-                <div className="space-y-4 rounded-md border p-4">
+                <div className="space-y-4 border p-4">
                   <div className="flex items-center gap-3">
                     <Checkbox
+                      name="enableCache"
                       checked={formState.enableCache}
                       onCheckedChange={(checked) => updateFormState("enableCache", checked === true)}
                       id="enableCache"
@@ -953,11 +997,15 @@ export default function SSEPage() {
                   {formState.enableCache && (
                     <FieldGroup className="grid gap-4 lg:grid-cols-2">
                       <Field>
-                        <FieldLabel>{t("Max Cached Keys")}</FieldLabel>
+                        <FieldLabel htmlFor="maxCachedKeys">{t("Max Cached Keys")}</FieldLabel>
                         <FieldContent>
                           <Input
+                            id="maxCachedKeys"
+                            name="maxCachedKeys"
                             type="number"
+                            inputMode="numeric"
                             min={1}
+                            autoComplete="off"
                             value={formState.maxCachedKeys}
                             onChange={(event) => updateFormState("maxCachedKeys", event.target.value)}
                           />
@@ -965,11 +1013,15 @@ export default function SSEPage() {
                       </Field>
 
                       <Field>
-                        <FieldLabel>{t("Cache TTL (seconds)")}</FieldLabel>
+                        <FieldLabel htmlFor="cacheTtlSeconds">{t("Cache TTL (seconds)")}</FieldLabel>
                         <FieldContent>
                           <Input
+                            id="cacheTtlSeconds"
+                            name="cacheTtlSeconds"
                             type="number"
+                            inputMode="numeric"
                             min={1}
+                            autoComplete="off"
                             value={formState.cacheTtlSeconds}
                             onChange={(event) => updateFormState("cacheTtlSeconds", event.target.value)}
                           />
@@ -1014,11 +1066,11 @@ export default function SSEPage() {
                       disabled={loadingKeys}
                       onClick={() => void loadKeys(currentMarker)}
                     >
-                      {loadingKeys ? <Spinner className="size-4" /> : <RiRefreshLine className="size-4" />}
+                      {loadingKeys ? <Spinner className="size-4" /> : <RiRefreshLine className="size-4" aria-hidden />}
                       {t("Refresh")}
                     </Button>
                     <Button size="sm" onClick={() => setCreateKeyOpen(true)}>
-                      <RiAddLine className="size-4" />
+                      <RiAddLine className="size-4" aria-hidden />
                       {t("Create Key")}
                     </Button>
                   </div>
@@ -1033,11 +1085,11 @@ export default function SSEPage() {
                 </Alert>
 
                 {loadingKeys ? (
-                  <div className="flex items-center justify-center rounded-md border py-10">
+                  <div className="flex items-center justify-center border py-10">
                     <Spinner className="size-5" />
                   </div>
                 ) : keys.length === 0 ? (
-                  <div className="rounded-md border border-dashed py-10 text-center text-sm text-muted-foreground">
+                  <div className="border border-dashed py-10 text-center text-sm text-muted-foreground">
                     {t("No KMS keys found")}
                   </div>
                 ) : (
@@ -1050,7 +1102,7 @@ export default function SSEPage() {
                         <TableHead>{t("Algorithm")}</TableHead>
                         <TableHead>{t("Usage")}</TableHead>
                         <TableHead>{t("Created")}</TableHead>
-                        <TableHead className="text-right">{t("Actions")}</TableHead>
+                        <TableHead className="text-end">{t("Actions")}</TableHead>
                       </TableRow>
                     </TableHeader>
                     <TableBody>
@@ -1129,7 +1181,7 @@ export default function SSEPage() {
                         void loadKeys(previousMarker)
                       }}
                     >
-                      <RiArrowLeftSLine className="size-4" />
+                      <RiArrowLeftSLine className="size-4" aria-hidden />
                       {t("Previous")}
                     </Button>
                     <Button
@@ -1143,7 +1195,7 @@ export default function SSEPage() {
                       }}
                     >
                       {t("Next")}
-                      <RiArrowRightSLine className="size-4" />
+                      <RiArrowRightSLine className="size-4" aria-hidden />
                     </Button>
                   </div>
                 </div>
@@ -1164,7 +1216,7 @@ export default function SSEPage() {
           }
         }}
       >
-        <DialogContent className="sm:max-w-lg">
+        <DialogContent className="max-h-[90vh] overflow-y-auto overflow-x-hidden sm:max-w-lg">
           <DialogHeader>
             <DialogTitle>{t("Create New Key")}</DialogTitle>
             <DialogDescription>
@@ -1174,29 +1226,37 @@ export default function SSEPage() {
 
           <div className="space-y-4">
             <Field>
-              <FieldLabel>{t("Key Name")}</FieldLabel>
+              <FieldLabel htmlFor="kms-key-name">{t("Key Name")}</FieldLabel>
               <FieldContent>
                 <Input
+                  id="kms-key-name"
+                  name="kms-key-name"
                   value={createKeyName}
                   onChange={(event) => setCreateKeyName(event.target.value)}
+                  autoComplete="off"
                   placeholder={t("Optional display name for the key")}
+                  spellCheck={false}
                 />
               </FieldContent>
             </Field>
 
             <Field>
-              <FieldLabel>{t("Description")}</FieldLabel>
+              <FieldLabel htmlFor="kms-key-description">{t("Description")}</FieldLabel>
               <FieldContent>
                 <Input
+                  id="kms-key-description"
+                  name="kms-key-description"
                   value={createKeyDescription}
                   onChange={(event) => setCreateKeyDescription(event.target.value)}
+                  autoComplete="off"
                   placeholder={t("Describe the purpose of this key")}
                 />
               </FieldContent>
             </Field>
 
-            <div className="flex items-start gap-3 rounded-md border p-3">
+            <div className="flex items-start gap-3 border p-3">
               <Checkbox
+                name="setAsDefaultKey"
                 checked={createKeySetAsDefault}
                 onCheckedChange={(checked) => setCreateKeySetAsDefault(checked === true)}
                 id="setAsDefaultKey"
@@ -1235,56 +1295,56 @@ export default function SSEPage() {
                 <Spinner className="size-5" />
               </div>
             ) : !keyDetails ? (
-              <div className="rounded-md border border-dashed py-10 text-center text-sm text-muted-foreground">
+              <div className="border border-dashed py-10 text-center text-sm text-muted-foreground">
                 {t("No key details available")}
               </div>
             ) : (
               <>
                 <div className="grid gap-3 sm:grid-cols-2">
-                  <div className="rounded-md border p-3">
+                  <div className="border p-3">
                     <p className="text-xs text-muted-foreground">{t("Name")}</p>
                     <p className="text-sm font-medium">{getKeyDisplayName(keyDetails)}</p>
                   </div>
-                  <div className="rounded-md border p-3">
+                  <div className="border p-3">
                     <p className="text-xs text-muted-foreground">{t("State")}</p>
                     <div className="pt-1">
                       <Badge variant={getStateBadgeVariant(keyDetails.key_state)}>{keyDetails.key_state || "-"}</Badge>
                     </div>
                   </div>
-                  <div className="rounded-md border p-3">
+                  <div className="border p-3">
                     <p className="text-xs text-muted-foreground">{t("KMS Key ID")}</p>
                     <p className="text-sm font-medium break-all">{keyDetails.key_id}</p>
                   </div>
-                  <div className="rounded-md border p-3">
+                  <div className="border p-3">
                     <p className="text-xs text-muted-foreground">{t("Usage")}</p>
                     <p className="text-sm font-medium">{keyDetails.key_usage || "-"}</p>
                   </div>
-                  <div className="rounded-md border p-3">
+                  <div className="border p-3">
                     <p className="text-xs text-muted-foreground">{t("Creation Date")}</p>
                     <p className="text-sm font-medium">{formatTimestamp(keyDetails.creation_date)}</p>
                   </div>
-                  <div className="rounded-md border p-3">
+                  <div className="border p-3">
                     <p className="text-xs text-muted-foreground">{t("Deletion Date")}</p>
                     <p className="text-sm font-medium">{formatTimestamp(keyDetails.deletion_date)}</p>
                   </div>
-                  <div className="rounded-md border p-3">
+                  <div className="border p-3">
                     <p className="text-xs text-muted-foreground">{t("Origin")}</p>
                     <p className="text-sm font-medium">{keyDetails.origin || "-"}</p>
                   </div>
-                  <div className="rounded-md border p-3">
+                  <div className="border p-3">
                     <p className="text-xs text-muted-foreground">{t("Key Manager")}</p>
                     <p className="text-sm font-medium">{keyDetails.key_manager || "-"}</p>
                   </div>
                 </div>
 
                 {keyDetails.description && (
-                  <div className="rounded-md border p-3">
+                  <div className="border p-3">
                     <p className="text-xs text-muted-foreground">{t("Description")}</p>
                     <p className="text-sm">{keyDetails.description}</p>
                   </div>
                 )}
 
-                <div className="rounded-md border p-3">
+                <div className="border p-3">
                   <p className="text-xs text-muted-foreground">{t("Tags")}</p>
                   <div className="mt-2 flex flex-wrap gap-2">
                     {Object.entries(keyDetails.tags ?? {}).length > 0 ? (
diff --git a/app/(dashboard)/status/page.tsx b/app/(dashboard)/status/page.tsx
index 58e47590..8e11c02c 100644
--- a/app/(dashboard)/status/page.tsx
+++ b/app/(dashboard)/status/page.tsx
@@ -172,7 +172,7 @@ export default function PerformancePage() {
         >
           <h1 className="text-2xl font-bold">{t("Running Status")}</h1>
         </PageHeader>
-        <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center">
+        <div className="border border-destructive/50 bg-destructive/10 p-6 text-center">
           <p className="text-sm text-destructive">{error}</p>
         </div>
       </Page>
diff --git a/app/(dashboard)/user-groups/page.tsx b/app/(dashboard)/user-groups/page.tsx
index 7660dcbc..0556bf63 100644
--- a/app/(dashboard)/user-groups/page.tsx
+++ b/app/(dashboard)/user-groups/page.tsx
@@ -118,11 +118,11 @@ export default function UserGroupsPage() {
         cell: ({ row }) => (
           <div className="flex items-center gap-2">
             <Button type="button" size="sm" variant="outline" onClick={() => openEditItem(row.original)}>
-              <RiEdit2Line className="size-4" />
+              <RiEdit2Line className="size-4" aria-hidden />
               <span>{t("Edit")}</span>
             </Button>
             <Button type="button" size="sm" variant="outline" onClick={() => confirmDelete(row.original)}>
-              <RiDeleteBin5Line className="size-4" />
+              <RiDeleteBin5Line className="size-4" aria-hidden />
               <span>{t("Delete")}</span>
             </Button>
           </div>
@@ -163,11 +163,11 @@ export default function UserGroupsPage() {
               disabled={!selectedKeys.length}
               onClick={() => setPoliciesDialogOpen(true)}
             >
-              <RiGroup2Fill className="size-4" />
+              <RiGroup2Fill className="size-4" aria-hidden />
               {t("Assign Policy")}
             </Button>
             <Button type="button" variant="outline" onClick={() => setNewFormOpen(true)}>
-              <RiAddLine className="size-4" />
+              <RiAddLine className="size-4" aria-hidden />
               {t("Add User Group")}
             </Button>
           </>
diff --git a/app/(dashboard)/users/page.tsx b/app/(dashboard)/users/page.tsx
index ec607a1e..0f72846e 100644
--- a/app/(dashboard)/users/page.tsx
+++ b/app/(dashboard)/users/page.tsx
@@ -3,7 +3,6 @@
 import * as React from "react"
 import { useState, useEffect } from "react"
 import { useTranslation } from "react-i18next"
-import dayjs from "dayjs"
 import { RiAddLine, RiDeleteBin5Line, RiEdit2Line, RiGroup2Fill } from "@remixicon/react"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
@@ -20,6 +19,7 @@ import { UserAddToGroupForm } from "@/components/user/add-to-group-form"
 import { useUsers } from "@/hooks/use-users"
 import { useDialog } from "@/lib/feedback/dialog"
 import { useMessage } from "@/lib/feedback/message"
+import { formatDateTime } from "@/lib/functions"
 import type { ColumnDef } from "@tanstack/react-table"
 
 interface UserRow {
@@ -33,15 +33,15 @@ interface UserRow {
 
 function formatDate(dateStr?: string) {
   if (!dateStr) return "-"
-  let d = dayjs(dateStr)
-  if (d.isValid()) return d.format("YYYY-MM-DD HH:mm:ss")
-  const [date, timeRaw, offsetRaw] = (dateStr || "").split(" ")
-  if (date && timeRaw && offsetRaw) {
+  const parsedDate = new Date(dateStr)
+  if (!Number.isNaN(parsedDate.getTime())) return formatDateTime(parsedDate)
+  const [datePart, timeRaw, offsetRaw] = (dateStr || "").split(" ")
+  if (datePart && timeRaw && offsetRaw) {
     const time = timeRaw.substring(0, 12)
     const offset = offsetRaw.substring(0, 6)
-    const isoStr = `${date}T${time}${offset}`
-    d = dayjs(isoStr)
-    if (d.isValid()) return d.format("YYYY-MM-DD HH:mm:ss")
+    const isoStr = `${datePart}T${time}${offset}`
+    const normalizedDate = new Date(isoStr)
+    if (!Number.isNaN(normalizedDate.getTime())) return formatDateTime(normalizedDate)
   }
   return "-"
 }
@@ -134,13 +134,13 @@ export default function UsersPage() {
         <div className="flex items-center gap-2">
           {canEditUser ? (
             <Button type="button" variant="outline" size="sm" onClick={() => openEditItem(row.original)}>
-              <RiEdit2Line className="size-4" />
+              <RiEdit2Line className="size-4" aria-hidden />
               <span>{t("Edit")}</span>
             </Button>
           ) : null}
           {canDeleteUser ? (
             <Button type="button" variant="outline" size="sm" onClick={() => confirmDelete(row.original)}>
-              <RiDeleteBin5Line className="size-4" />
+              <RiDeleteBin5Line className="size-4" aria-hidden />
               <span>{t("Delete")}</span>
             </Button>
           ) : null}
@@ -235,7 +235,7 @@ export default function UsersPage() {
               disabled={!canBulkDeleteUsers || !selectedKeys.length}
               onClick={deleteByList}
             >
-              <RiDeleteBin5Line className="size-4" />
+              <RiDeleteBin5Line className="size-4" aria-hidden />
               {t("Delete Selected")}
             </Button>
             <Button
@@ -244,12 +244,12 @@ export default function UsersPage() {
               disabled={!canAssignGroups || !selectedKeys.length}
               onClick={addToGroup}
             >
-              <RiGroup2Fill className="size-4" />
+              <RiGroup2Fill className="size-4" aria-hidden />
               {t("Add to Group")}
             </Button>
             {canCreateUser ? (
               <Button type="button" variant="outline" onClick={() => setNewFormOpen(true)}>
-                <RiAddLine className="size-4" />
+                <RiAddLine className="size-4" aria-hidden />
                 {t("Add User")}
               </Button>
             ) : null}
diff --git a/app/globals.css b/app/globals.css
index d0b2354e..45f39cef 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -48,6 +48,7 @@
 }
 
 :root {
+  color-scheme: light;
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
@@ -83,6 +84,7 @@
 }
 
 .dark {
+  color-scheme: dark;
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);
@@ -125,6 +127,37 @@
   }
   html {
     @apply font-sans;
+    -webkit-tap-highlight-color: transparent;
+  }
+  button,
+  a,
+  input,
+  textarea,
+  select,
+  [role="button"] {
+    touch-action: manipulation !important;
+  }
+  [data-slot="tabs-list"] {
+    min-height: 2.25rem;
+  }
+  [data-slot="tabs-trigger"] {
+    min-height: 2rem;
+  }
+  [data-slot="dialog-content"],
+  [data-slot="drawer-content"],
+  [data-slot="dropdown-menu-content"],
+  [data-slot="popover-content"] {
+    overscroll-behavior: contain;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+      animation-duration: 1ms !important;
+      animation-iteration-count: 1 !important;
+      scroll-behavior: auto !important;
+      transition-duration: 1ms !important;
+    }
   }
 }
 
diff --git a/components/access-keys/edit-item.tsx b/components/access-keys/edit-item.tsx
index 31fd8305..42cda218 100644
--- a/components/access-keys/edit-item.tsx
+++ b/components/access-keys/edit-item.tsx
@@ -142,57 +142,79 @@ export function AccessKeysEditItem({ open, onOpenChange, row, onSuccess }: Acces
 
   return (
     <Dialog open={open} onOpenChange={closeModal} disablePointerDismissal>
-      <DialogContent className="sm:max-w-6xl">
+      <DialogContent className="overflow-x-hidden sm:max-w-6xl">
         <DialogHeader>
           <DialogTitle>{t("Edit Key")}</DialogTitle>
         </DialogHeader>
 
-        <div className="flex flex-col gap-4 lg:flex-row max-h-[80vh] overflow-auto px-2 -mx-2">
+        <div className="-mx-2 flex max-h-[80vh] flex-col gap-4 overflow-y-auto overflow-x-hidden px-2 lg:flex-row">
           <div className="flex w-full flex-col gap-4 lg:w-72 lg:shrink-0">
             <Field>
-              <FieldLabel>{t("Access Key")}</FieldLabel>
+              <FieldLabel htmlFor="edit-access-key">{t("Access Key")}</FieldLabel>
               <FieldContent>
-                <Input value={accesskey} disabled />
+                <Input id="edit-access-key" name="edit-access-key" value={accesskey} disabled />
               </FieldContent>
             </Field>
 
             <Field>
-              <FieldLabel>{t("Expiry")}</FieldLabel>
+              <FieldLabel htmlFor="edit-access-key-expiry">{t("Expiry")}</FieldLabel>
               <FieldContent>
-                <DateTimePicker value={expiry} onChange={setExpiry} min={minExpiry} />
+                <DateTimePicker id="edit-access-key-expiry" value={expiry} onChange={setExpiry} min={minExpiry} />
               </FieldContent>
             </Field>
 
             <Field>
-              <FieldLabel>{t("Name")}</FieldLabel>
+              <FieldLabel htmlFor="edit-access-key-name">{t("Name")}</FieldLabel>
               <FieldContent>
-                <Input value={name} onChange={(e) => setName(e.target.value)} />
+                <Input
+                  id="edit-access-key-name"
+                  name="edit-access-key-name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  autoComplete="off"
+                  spellCheck={false}
+                />
               </FieldContent>
             </Field>
 
             <Field>
-              <FieldLabel>{t("Description")}</FieldLabel>
+              <FieldLabel htmlFor="edit-access-key-description">{t("Description")}</FieldLabel>
               <FieldContent>
-                <Textarea value={description} onChange={(e) => setDescription(e.target.value)} rows={2} />
+                <Textarea
+                  id="edit-access-key-description"
+                  name="edit-access-key-description"
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  rows={2}
+                />
               </FieldContent>
             </Field>
 
             <Field orientation="responsive">
-              <FieldLabel className="text-sm font-medium">{t("Status")}</FieldLabel>
+              <FieldLabel htmlFor="edit-access-key-status" className="text-sm font-medium">
+                {t("Status")}
+              </FieldLabel>
               <FieldContent className="flex justify-end">
-                <Switch checked={status === "on"} onCheckedChange={(checked) => setStatus(checked ? "on" : "off")} />
+                <Switch
+                  id="edit-access-key-status"
+                  checked={status === "on"}
+                  onCheckedChange={(checked) => setStatus(checked ? "on" : "off")}
+                />
               </FieldContent>
             </Field>
           </div>
 
-          <div className="flex-1 max-h-[60vh] overflow-auto">
+          <div className="max-h-[60vh] flex-1 overflow-y-auto overflow-x-hidden">
             <Field className="h-full">
-              <FieldLabel>{t("Policy")}</FieldLabel>
+              <FieldLabel htmlFor="edit-access-key-policy">{t("Policy")}</FieldLabel>
               <FieldContent className="h-full">
                 <Textarea
+                  id="edit-access-key-policy"
+                  name="edit-access-key-policy"
                   value={policy}
                   onChange={(e) => setPolicy(e.target.value)}
                   className="h-full min-h-[200px] font-mono text-xs"
+                  spellCheck={false}
                 />
               </FieldContent>
             </Field>
diff --git a/components/access-keys/new-item.tsx b/components/access-keys/new-item.tsx
index 69815900..a5121499 100644
--- a/components/access-keys/new-item.tsx
+++ b/components/access-keys/new-item.tsx
@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
 import { Spinner } from "@/components/ui/spinner"
-import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/ui/field"
+import { Field, FieldContent, FieldError, FieldLabel } from "@/components/ui/field"
 import { Switch } from "@/components/ui/switch"
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { DateTimePicker } from "@/components/datetime-picker"
@@ -148,12 +148,12 @@ export function AccessKeysNewItem({ visible, onVisibleChange, onSuccess, onNotic
 
   return (
     <Dialog open={visible} onOpenChange={closeModal} disablePointerDismissal>
-      <DialogContent className={cn("sm:max-w-xl", !impliedPolicy && "sm:max-w-6xl")}>
+      <DialogContent className={cn("overflow-x-hidden sm:max-w-xl", !impliedPolicy && "sm:max-w-6xl")}>
         <DialogHeader>
           <DialogTitle>{t("Create Key")}</DialogTitle>
         </DialogHeader>
 
-        <div className="flex flex-col gap-4 lg:flex-row max-h-[80vh] overflow-auto px-2 -mx-2">
+        <div className="-mx-2 flex max-h-[80vh] flex-col gap-4 overflow-y-auto overflow-x-hidden px-2 lg:flex-row">
           <div
             className={cn(
               impliedPolicy ? "flex flex-1 flex-col gap-4" : "flex w-full flex-col gap-4 lg:w-72 lg:shrink-0",
@@ -164,12 +164,15 @@ export function AccessKeysNewItem({ visible, onVisibleChange, onSuccess, onNotic
               <FieldContent>
                 <Input
                   id="create-access-key"
+                  name="create-access-key"
                   value={accessKey}
                   onChange={(e) => setAccessKey(e.target.value)}
                   autoComplete="off"
+                  spellCheck={false}
+                  aria-invalid={Boolean(errors.accessKey)}
                 />
               </FieldContent>
-              {errors.accessKey && <FieldDescription className="text-destructive">{errors.accessKey}</FieldDescription>}
+              <FieldError>{errors.accessKey}</FieldError>
             </Field>
 
             <Field>
@@ -177,13 +180,16 @@ export function AccessKeysNewItem({ visible, onVisibleChange, onSuccess, onNotic
               <FieldContent>
                 <Input
                   id="create-secret-key"
+                  name="create-secret-key"
                   type="password"
                   value={secretKey}
                   onChange={(e) => setSecretKey(e.target.value)}
                   autoComplete="off"
+                  spellCheck={false}
+                  aria-invalid={Boolean(errors.secretKey)}
                 />
               </FieldContent>
-              {errors.secretKey && <FieldDescription className="text-destructive">{errors.secretKey}</FieldDescription>}
+              <FieldError>{errors.secretKey}</FieldError>
             </Field>
 
             <Field>
@@ -204,9 +210,17 @@ export function AccessKeysNewItem({ visible, onVisibleChange, onSuccess, onNotic
             <Field>
               <FieldLabel htmlFor="create-name">{t("Name")}</FieldLabel>
               <FieldContent>
-                <Input id="create-name" value={name} onChange={(e) => setName(e.target.value)} autoComplete="off" />
+                <Input
+                  id="create-name"
+                  name="create-name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  autoComplete="off"
+                  spellCheck={false}
+                  aria-invalid={Boolean(errors.name)}
+                />
               </FieldContent>
-              {errors.name && <FieldDescription className="text-destructive">{errors.name}</FieldDescription>}
+              <FieldError>{errors.name}</FieldError>
             </Field>
 
             <Field>
@@ -214,6 +228,7 @@ export function AccessKeysNewItem({ visible, onVisibleChange, onSuccess, onNotic
               <FieldContent>
                 <Textarea
                   id="create-description"
+                  name="create-description"
                   value={description}
                   onChange={(e) => setDescription(e.target.value)}
                   rows={3}
@@ -221,13 +236,20 @@ export function AccessKeysNewItem({ visible, onVisibleChange, onSuccess, onNotic
               </FieldContent>
             </Field>
 
-            <Field orientation="responsive" className="items-start gap-3 rounded-md border p-3">
-              <FieldLabel className="text-sm font-medium">{t("Use main account policy")}</FieldLabel>
+            <Field orientation="responsive" className="items-start gap-3 border p-3">
+              <FieldLabel htmlFor="create-implied-policy" className="text-sm font-medium">
+                {t("Use main account policy")}
+              </FieldLabel>
               <FieldContent className="flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
                 <p className="text-xs text-muted-foreground">
                   {t("Automatically inherit the main account policy when enabled.")}
                 </p>
-                <Switch checked={impliedPolicy} onCheckedChange={setImpliedPolicy} />
+                <Switch
+                  id="create-implied-policy"
+                  name="create-implied-policy"
+                  checked={impliedPolicy}
+                  onCheckedChange={setImpliedPolicy}
+                />
               </FieldContent>
             </Field>
           </div>
@@ -235,12 +257,15 @@ export function AccessKeysNewItem({ visible, onVisibleChange, onSuccess, onNotic
           {!impliedPolicy && (
             <div className="flex-1 max-h-[60vh] overflow-auto">
               <Field className="h-full">
-                <FieldLabel>{t("Current user policy")}</FieldLabel>
+                <FieldLabel htmlFor="create-policy">{t("Current user policy")}</FieldLabel>
                 <FieldContent className="h-full">
                   <Textarea
+                    id="create-policy"
+                    name="create-policy"
                     value={policy}
                     onChange={(e) => setPolicy(e.target.value)}
                     className="h-full min-h-[200px] font-mono text-xs"
+                    spellCheck={false}
                   />
                 </FieldContent>
               </Field>
diff --git a/components/app-sidebar.tsx b/components/app-sidebar.tsx
index e3d3f744..2e3b2082 100644
--- a/components/app-sidebar.tsx
+++ b/components/app-sidebar.tsx
@@ -43,7 +43,7 @@ function NavIcon({ name }: { name?: string }) {
   // Icon from static map lookup; rule flags dynamic lookup as "component during render"
   return (
     // eslint-disable-next-line react-hooks/static-components -- icon from static map
-    <Icon className="size-4 shrink-0" />
+    <Icon className="size-4 shrink-0" aria-hidden />
   )
 }
 
@@ -149,12 +149,12 @@ export function AppSidebar() {
       <SidebarHeader>
         <Link href={homeRoute ?? "/"} className="flex items-center gap-3">
           {isCollapsed ? (
-            <div className="flex size-8 items-center justify-center rounded-lg bg-primary text-md font-semibold text-primary-foreground">
+            <div className="flex size-8 items-center justify-center rounded-none bg-primary text-sm font-semibold text-primary-foreground">
               <span>{brandInitial}</span>
             </div>
           ) : (
             <div className="flex min-w-0 items-baseline gap-2 px-3 py-4">
-              <ThemeLogo width={64} height={16} className="h-4 w-auto shrink-0" alt={APP_NAME} />
+              <ThemeLogo width={64} height={16} className="shrink-0" alt={APP_NAME} priority />
             </div>
           )}
         </Link>
@@ -184,7 +184,10 @@ export function AppSidebar() {
                                   >
                                     <NavIcon name={item.icon} />
                                     <span className="flex-1 truncate">{getLabel(item)}</span>
-                                    <RiArrowRightSLine className="size-4 shrink-0 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                                    <RiArrowRightSLine
+                                      className="size-4 shrink-0 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+                                      aria-hidden
+                                    />
                                   </SidebarMenuButton>
                                 }
                               />
@@ -204,7 +207,10 @@ export function AppSidebar() {
                                             >
                                               <NavIcon name={child.icon} />
                                               <span className="truncate">{getLabel(child)}</span>
-                                              <RiExternalLinkLine className="ms-auto size-3 text-muted-foreground" />
+                                              <RiExternalLinkLine
+                                                className="ms-auto size-3 text-muted-foreground"
+                                                aria-hidden
+                                              />
                                             </a>
                                           }
                                         />
@@ -239,7 +245,7 @@ export function AppSidebar() {
                                     >
                                       <NavIcon name={item.icon} />
                                       <span className="flex-1 truncate">{getLabel(item)}</span>
-                                      <RiExternalLinkLine className="size-3.5 text-muted-foreground" />
+                                      <RiExternalLinkLine className="size-3.5 text-muted-foreground" aria-hidden />
                                     </a>
                                   }
                                 />
diff --git a/components/app-top-nav.tsx b/components/app-top-nav.tsx
index 06256c46..a0825286 100644
--- a/components/app-top-nav.tsx
+++ b/components/app-top-nav.tsx
@@ -10,16 +10,18 @@ import { UserDropdown } from "@/components/user/dropdown"
 
 export function AppTopNav() {
   return (
-    <header className="flex h-16 shrink-0 items-center justify-between gap-2 border-b bg-background transition-[height] ease-linear backdrop-blur group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+    <header className="flex h-14 shrink-0 items-center justify-between gap-2 border-b bg-background transition-[height] ease-linear backdrop-blur sm:h-16 group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
       <div className="flex min-w-0 flex-1 items-center gap-3">
         <SidebarTrigger className="-ms-1 shrink-0" />
         <TopNavBreadcrumb />
       </div>
-      <div className="flex shrink-0 items-center gap-2">
+      <div className="flex shrink-0 items-center gap-1 sm:gap-2">
         <LanguageSwitcher />
         <ThemeSwitcher />
-        <LinksGithub />
-        <LinksX />
+        <div className="hidden items-center gap-1 sm:flex sm:gap-2">
+          <LinksGithub />
+          <LinksX />
+        </div>
         <UserDropdown />
       </div>
     </header>
diff --git a/components/audit-target/new-form.tsx b/components/audit-target/new-form.tsx
index 47774e7e..30cffb73 100644
--- a/components/audit-target/new-form.tsx
+++ b/components/audit-target/new-form.tsx
@@ -15,7 +15,6 @@ import {
   type AuditTargetType,
 } from "@/lib/audit-target-config"
 import { useMessage } from "@/lib/feedback/message"
-import { cn } from "@/lib/utils"
 import { buildRoute } from "@/lib/routes"
 
 interface AuditTargetNewFormProps {
@@ -129,7 +128,7 @@ export function AuditTargetNewForm({ open, onOpenChange, onSuccess }: AuditTarge
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-h-[80vh] overflow-y-auto sm:max-w-lg">
+      <DialogContent className="max-h-[80vh] overflow-y-auto overflow-x-hidden sm:max-w-lg">
         <DialogHeader>
           <DialogTitle>{type ? t("Add {type} Audit Target", { type }) : t("Add Audit Target")}</DialogTitle>
         </DialogHeader>
@@ -141,7 +140,7 @@ export function AuditTargetNewForm({ open, onOpenChange, onSuccess }: AuditTarge
                   key={option.value}
                   type="button"
                   onClick={() => setType(option.value)}
-                  className={cn("cursor-pointer border border-border/70 text-left transition hover:border-primary")}
+                  className="cursor-pointer border border-border/70 text-start transition hover:border-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50"
                 >
                   <div className="flex items-center gap-3 p-4">
                     <Image
@@ -151,9 +150,11 @@ export function AuditTargetNewForm({ open, onOpenChange, onSuccess }: AuditTarge
                       height={40}
                       className="size-10 shrink-0 object-contain"
                     />
-                    <div>
-                      <p className="text-base font-semibold">{t(option.labelKey)}</p>
-                      <p className="text-sm text-muted-foreground">{t(option.descKey)}</p>
+                    <div className="min-w-0">
+                      <p className="truncate text-base font-semibold" title={t(option.labelKey)}>
+                        {t(option.labelKey)}
+                      </p>
+                      <p className="break-words text-sm text-muted-foreground">{t(option.descKey)}</p>
                     </div>
                   </div>
                 </button>
@@ -164,7 +165,7 @@ export function AuditTargetNewForm({ open, onOpenChange, onSuccess }: AuditTarge
               <button
                 type="button"
                 onClick={() => setType("")}
-                className="flex w-full cursor-pointer items-center gap-3 border p-4 text-left transition hover:border-primary"
+                className="flex w-full cursor-pointer items-center gap-3 border p-4 text-start transition hover:border-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50"
               >
                 {selectedOption && (
                   <Image
@@ -175,9 +176,11 @@ export function AuditTargetNewForm({ open, onOpenChange, onSuccess }: AuditTarge
                     className="size-10 shrink-0 object-contain"
                   />
                 )}
-                <div className="flex flex-col">
+                <div className="flex min-w-0 flex-col">
                   <span className="text-sm text-muted-foreground">{t("Selected Type")}</span>
-                  <span className="text-base font-semibold">{type}</span>
+                  <span className="truncate text-base font-semibold" title={type}>
+                    {type}
+                  </span>
                 </div>
               </button>
 
@@ -187,10 +190,12 @@ export function AuditTargetNewForm({ open, onOpenChange, onSuccess }: AuditTarge
                   <FieldContent>
                     <Input
                       id="audit-target-name"
+                      name="audit-target-name"
                       value={name}
                       onChange={handleNameChange}
                       placeholder={t("Please enter name")}
                       autoComplete="off"
+                      spellCheck={false}
                     />
                   </FieldContent>
                   {nameError && <FieldDescription className="text-destructive">{nameError}</FieldDescription>}
@@ -202,6 +207,7 @@ export function AuditTargetNewForm({ open, onOpenChange, onSuccess }: AuditTarge
                     <FieldContent>
                       <Input
                         id={`audit-config-${cfg.name}`}
+                        name={`audit-config-${cfg.name}`}
                         value={String(config[cfg.name] ?? "")}
                         onChange={(e) =>
                           setConfig((prev) => ({
@@ -212,6 +218,7 @@ export function AuditTargetNewForm({ open, onOpenChange, onSuccess }: AuditTarge
                         type={cfg.type === "password" ? "password" : "text"}
                         autoComplete="off"
                         placeholder={`${t("Please enter")} ${t(cfg.label).toLowerCase()}`}
+                        spellCheck={false}
                       />
                     </FieldContent>
                   </Field>
@@ -225,7 +232,7 @@ export function AuditTargetNewForm({ open, onOpenChange, onSuccess }: AuditTarge
             {t("Cancel")}
           </Button>
           <Button onClick={handleSave} disabled={!type || submitting}>
-            {submitting ? t("Saving...") : t("Save")}
+            {submitting ? t("Saving…") : t("Save")}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/components/auth/heroes/hero-static.tsx b/components/auth/heroes/hero-static.tsx
index 39f87e46..93feb51e 100644
--- a/components/auth/heroes/hero-static.tsx
+++ b/components/auth/heroes/hero-static.tsx
@@ -15,9 +15,9 @@ export function AuthHeroStatic() {
   const theme = getThemeManifest()
 
   return (
-    <div className="relative flex h-full w-full flex-col justify-center gap-8 overflow-hidden border-e bg-gray-50 p-16 dark:border-none dark:bg-black">
+    <div className="relative flex h-full w-full flex-col justify-center gap-8 overflow-hidden border-e bg-muted/40 p-16">
       <div className="z-10 flex max-w-7xl flex-col">
-        <ThemeLogo width={112} height={24} className="max-w-28" alt={theme.brand.name} />
+        <ThemeLogo width={112} height={24} alt={theme.brand.name} priority />
         <div className="my-6 px-0 text-4xl font-semibold text-primary">
           <span className={locale !== "zh" ? "pe-1" : undefined}>{t("Rust-based")} </span>
           <FlipWords
@@ -36,13 +36,20 @@ export function AuthHeroStatic() {
       </div>
       <Link
         href="https://www.rustfs.com"
-        className="z-10 inline-flex w-max items-center gap-2 rounded-full border border-blue-500 p-2 px-5 leading-none text-primary-500"
+        className="z-10 inline-flex w-max items-center gap-2 rounded-none border border-primary/30 p-2 px-5 leading-none text-primary transition-colors hover:bg-accent"
       >
         <span>{t("Visit website")}</span>
-        <RiArrowRightLongFill className="me-2 rtl:-scale-x-100" />
+        <RiArrowRightLongFill className="me-2 size-4 rtl:-scale-x-100" aria-hidden />
       </Link>
       <div className="absolute inset-0 z-0 h-full">
-        <Image src={buildRoute("/backgrounds/ttten.svg")} alt="" fill className="object-cover opacity-45" />
+        <Image
+          src={buildRoute("/backgrounds/ttten.svg")}
+          alt=""
+          fill
+          priority
+          sizes="50vw"
+          className="object-cover opacity-45"
+        />
       </div>
     </div>
   )
diff --git a/components/auth/login-form.tsx b/components/auth/login-form.tsx
index 4294373d..a40d31b3 100644
--- a/components/auth/login-form.tsx
+++ b/components/auth/login-form.tsx
@@ -57,30 +57,33 @@ export function LoginForm({
   const website = theme.links.website ?? "https://www.rustfs.com"
 
   return (
-    <div className="relative flex min-h-screen flex-col items-center justify-center bg-gray-100 dark:bg-neutral-800 lg:p-20">
+    <div className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-muted p-4 sm:p-6 lg:p-20">
       <Image
         src={buildRoute("/backgrounds/scillate.svg")}
         alt=""
         fill
+        priority
+        sizes="100vw"
         className="absolute inset-0 z-0 opacity-45 object-cover"
       />
-      <div className="z-10 mx-auto flex max-h-[85vh] w-full max-w-7xl flex-1 flex-col overflow-hidden rounded-lg shadow-lg dark:border-neutral-700 dark:bg-neutral-800 lg:flex-row">
+      <div className="z-10 mx-auto flex w-full max-w-7xl flex-col overflow-hidden border bg-card shadow-none lg:min-h-[560px] lg:flex-row">
         <div className="hidden w-1/2 lg:block">
           <AuthHeroStatic />
         </div>
-        <div className="relative flex w-full flex-col items-center justify-center bg-white dark:border-neutral-700 dark:bg-neutral-900 lg:w-1/2">
+        <div className="relative flex w-full flex-col items-center justify-center bg-card lg:w-1/2">
           <div className="absolute end-4 top-4 z-10">
             <Link
               href="/config"
-              className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-600 shadow-sm transition-colors hover:bg-gray-50 hover:text-gray-800 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white"
+              className="inline-flex h-8 w-8 items-center justify-center border bg-background text-muted-foreground shadow-none transition-colors hover:bg-accent hover:text-accent-foreground"
               title={t("Server Configuration")}
+              aria-label={t("Server Configuration")}
             >
-              <RiSettings3Line className="text-sm" />
+              <RiSettings3Line className="size-4" aria-hidden />
             </Link>
           </div>
 
           <div className="max-w-sm w-full space-y-6 p-4 sm:p-7">
-            <ThemeLogo width={112} height={24} className="max-w-28" />
+            <ThemeLogo width={112} height={24} priority />
 
             <div className="space-y-4">
               <Tabs value={method} onValueChange={(v) => setMethod(v as LoginMethod)} className="flex flex-col gap-4">
@@ -102,6 +105,7 @@ export function LoginForm({
                           <FieldContent>
                             <Input
                               id="accessKey"
+                              name="accessKey"
                               value={accessKeyAndSecretKey.accessKeyId}
                               onChange={(e) =>
                                 setAccessKeyAndSecretKey((prev) => ({
@@ -111,6 +115,7 @@ export function LoginForm({
                               }
                               autoComplete="username"
                               type="text"
+                              spellCheck={false}
                               placeholder={t("Please enter account")}
                             />
                           </FieldContent>
@@ -120,6 +125,7 @@ export function LoginForm({
                           <FieldContent>
                             <Input
                               id="secretKey"
+                              name="secretKey"
                               value={accessKeyAndSecretKey.secretAccessKey}
                               onChange={(e) =>
                                 setAccessKeyAndSecretKey((prev) => ({
@@ -129,6 +135,7 @@ export function LoginForm({
                               }
                               autoComplete="current-password"
                               type="password"
+                              spellCheck={false}
                               placeholder={t("Please enter key")}
                             />
                           </FieldContent>
@@ -141,6 +148,7 @@ export function LoginForm({
                           <FieldContent>
                             <Input
                               id="stsAccessKey"
+                              name="stsAccessKey"
                               value={sts.accessKeyId}
                               onChange={(e) =>
                                 setSts((prev) => ({
@@ -150,6 +158,7 @@ export function LoginForm({
                               }
                               autoComplete="new-password"
                               type="text"
+                              spellCheck={false}
                               placeholder={t("Please enter STS username")}
                             />
                           </FieldContent>
@@ -159,6 +168,7 @@ export function LoginForm({
                           <FieldContent>
                             <Input
                               id="stsSecretKey"
+                              name="stsSecretKey"
                               value={sts.secretAccessKey}
                               onChange={(e) =>
                                 setSts((prev) => ({
@@ -168,6 +178,7 @@ export function LoginForm({
                               }
                               autoComplete="new-password"
                               type="password"
+                              spellCheck={false}
                               placeholder={t("Please enter STS key")}
                             />
                           </FieldContent>
@@ -177,6 +188,7 @@ export function LoginForm({
                           <FieldContent>
                             <Input
                               id="sessionToken"
+                              name="sessionToken"
                               value={sts.sessionToken}
                               onChange={(e) =>
                                 setSts((prev) => ({
@@ -186,6 +198,7 @@ export function LoginForm({
                               }
                               autoComplete="new-password"
                               type="text"
+                              spellCheck={false}
                               placeholder={t("Please enter STS session token")}
                             />
                           </FieldContent>
@@ -204,11 +217,9 @@ export function LoginForm({
             {oidcProviders && oidcProviders.length > 0 && onOidcLogin && (
               <div className="space-y-3">
                 <div className="relative flex items-center">
-                  <div className="flex-grow border-t border-gray-200 dark:border-neutral-700" />
-                  <span className="mx-3 flex-shrink text-xs text-gray-500 dark:text-neutral-500">
-                    {t("Or continue with")}
-                  </span>
-                  <div className="flex-grow border-t border-gray-200 dark:border-neutral-700" />
+                  <div className="flex-grow border-t" />
+                  <span className="mx-3 flex-shrink text-xs text-muted-foreground">{t("Or continue with")}</span>
+                  <div className="flex-grow border-t" />
                 </div>
                 <div className="grid gap-2">
                   {oidcProviders.map((provider) => (
@@ -227,9 +238,9 @@ export function LoginForm({
             )}
 
             <div>
-              <p className="text-sm text-gray-600 dark:text-neutral-400">
+              <p className="text-sm text-muted-foreground">
                 {t("Login Problems?")}{" "}
-                <Link href={website} className="text-blue-600 hover:underline">
+                <Link href={website} className="text-foreground underline-offset-4 hover:underline">
                   {t("Get Help")}
                 </Link>
               </p>
diff --git a/components/buckets/events-tab.tsx b/components/buckets/events-tab.tsx
index 47872de9..9d093875 100644
--- a/components/buckets/events-tab.tsx
+++ b/components/buckets/events-tab.tsx
@@ -198,12 +198,12 @@ export function BucketEventsTab({ bucketName, hideTitle = false }: BucketEventsT
         <div className="flex gap-2">
           {canEditEvents ? (
             <Button variant="outline" onClick={() => setNewFormOpen(true)} disabled={!canManageBucketEvents}>
-              <RiAddLine className="size-4" />
+              <RiAddLine className="size-4" aria-hidden />
               <span>{t("Add Event Subscription")}</span>
             </Button>
           ) : null}
           <Button variant="outline" onClick={loadData} disabled={loading}>
-            <RiRefreshLine className="size-4" />
+            <RiRefreshLine className="size-4" aria-hidden />
             <span>{t("Refresh")}</span>
           </Button>
         </div>
diff --git a/components/buckets/info.tsx b/components/buckets/info.tsx
index 300aa40d..6d2666ea 100644
--- a/components/buckets/info.tsx
+++ b/components/buckets/info.tsx
@@ -532,7 +532,7 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
             <ItemActions>
               {canEditBucketPolicy ? (
                 <Button variant="outline" size="sm" className="shrink-0" onClick={openPolicyModal}>
-                  <RiEdit2Line className="me-2 size-4" />
+                  <RiEdit2Line className="me-2 size-4" aria-hidden />
                   {t("Edit")}
                 </Button>
               ) : null}
@@ -553,7 +553,7 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
             <ItemActions>
               {canEditEncryption ? (
                 <Button variant="outline" size="sm" className="shrink-0" onClick={openEncryptModal}>
-                  <RiEdit2Line className="me-2 size-4" />
+                  <RiEdit2Line className="me-2 size-4" aria-hidden />
                   {t("Edit")}
                 </Button>
               ) : null}
@@ -573,7 +573,7 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
             <ItemActions>
               {canEditCors ? (
                 <Button variant="outline" size="sm" className="shrink-0" onClick={openCorsModal}>
-                  <RiEdit2Line className="me-2 size-4" />
+                  <RiEdit2Line className="me-2 size-4" aria-hidden />
                   {t("Edit")}
                 </Button>
               ) : null}
@@ -608,7 +608,7 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
             <ItemActions>
               {canEditTags ? (
                 <Button variant="outline" size="sm" className="shrink-0" onClick={() => openTagModal()}>
-                  <RiAddLine className="me-2 size-4" />
+                  <RiAddLine className="me-2 size-4" aria-hidden />
                   {t("Add")}
                 </Button>
               ) : null}
@@ -620,24 +620,25 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
                 {tags.map((tag, index) => (
                   <div
                     key={`${tag.Key}-${index}`}
-                    className="flex items-center gap-2 rounded-full border bg-muted/40 px-3 py-1 text-xs"
+                    className="flex max-w-full items-center gap-2 rounded-none border bg-muted/40 px-3 py-1 text-xs"
                   >
                     <button
                       type="button"
-                      className="text-left hover:underline disabled:no-underline"
+                      className="min-w-0 break-all text-start hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50 disabled:no-underline"
                       onClick={() => openTagModal(index)}
                       disabled={!canEditTags}
+                      title={`${tag.Key}:${tag.Value}`}
                     >
                       {tag.Key}:{tag.Value}
                     </button>
                     <Button
                       variant="ghost"
-                      size="sm"
-                      className="h-6 w-6 p-0"
+                      size="icon-xs"
                       onClick={() => setDeleteTagIndex(index)}
                       disabled={!canEditTags}
+                      aria-label={t("Delete Tag")}
                     >
-                      <RiCloseLine className="size-3.5" />
+                      <RiCloseLine className="size-3" aria-hidden />
                     </Button>
                   </div>
                 ))}
@@ -655,15 +656,20 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
           </ItemHeader>
           <ItemContent className="flex flex-col gap-3">
             <div className="flex items-center justify-between gap-3">
-              <p className="text-sm font-medium text-foreground">{t("Object Lock")}</p>
-              <Switch checked={objectLock ?? false} disabled />
+              <label htmlFor="bucket-info-object-lock" className="text-sm font-medium text-foreground">
+                {t("Object Lock")}
+              </label>
+              <Switch id="bucket-info-object-lock" checked={objectLock ?? false} disabled />
             </div>
             <div className="flex items-center justify-between gap-3">
               <div className="flex items-center gap-2">
-                <p className="text-sm font-medium text-foreground">{t("Version Control")}</p>
+                <label htmlFor="bucket-info-version-control" className="text-sm font-medium text-foreground">
+                  {t("Version Control")}
+                </label>
                 {versionLoading && <Spinner className="size-3 text-muted-foreground" />}
               </div>
               <Switch
+                id="bucket-info-version-control"
                 checked={versioning === "Enabled"}
                 disabled={!canEditVersioning || (objectLock ?? false) || versionLoading}
                 onCheckedChange={handleVersionToggle}
@@ -757,7 +763,7 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
                   value={policyFormPolicy}
                   onValueChange={(v) => setPolicyFormPolicy(v as BucketPolicyType | "custom")}
                 >
-                  <SelectTrigger className="w-full">
+                  <SelectTrigger className="w-full" aria-label={t("Policy")}>
                     <SelectValue placeholder={t("Please select policy")} />
                   </SelectTrigger>
                   <SelectContent>
@@ -770,20 +776,23 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
             </Field>
             {policyFormPolicy === "custom" && (
               <Field>
-                <FieldLabel>{t("Policy Content")}</FieldLabel>
+                <FieldLabel htmlFor="bucket-policy-content">{t("Policy Content")}</FieldLabel>
                 <FieldContent>
-                  <div className="max-h-[60vh] overflow-y-auto rounded-md border p-2">
+                  <div className="max-h-[60vh] overflow-y-auto border p-2">
                     <Textarea
+                      id="bucket-policy-content"
+                      name="bucket-policy-content"
                       value={policyFormContent}
                       onChange={(e) => setPolicyFormContent(e.target.value)}
                       className="min-h-[200px] font-mono text-xs"
+                      spellCheck={false}
                     />
                   </div>
                 </FieldContent>
               </Field>
             )}
           </div>
-          <DialogFooter showCloseButton>
+          <DialogFooter>
             <Button variant="outline" onClick={() => setShowPolicyModal(false)}>
               {t("Cancel")}
             </Button>
@@ -803,7 +812,7 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
               <FieldLabel>{t("Encryption Type")}</FieldLabel>
               <FieldContent>
                 <Select value={encryptFormType} onValueChange={(value) => setEncryptFormType(value ?? "")}>
-                  <SelectTrigger className="w-full">
+                  <SelectTrigger className="w-full" aria-label={t("Encryption Type")}>
                     <SelectValue placeholder={t("Please select encryption type")} />
                   </SelectTrigger>
                   <SelectContent>
@@ -819,7 +828,7 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
                 <FieldLabel>KMS Key ID</FieldLabel>
                 <FieldContent>
                   <Select value={encryptFormKmsKeyId} onValueChange={(value) => setEncryptFormKmsKeyId(value ?? "")}>
-                    <SelectTrigger className="w-full">
+                    <SelectTrigger className="w-full" aria-label="KMS Key ID">
                       <SelectValue placeholder={t("Please select KMS key")} />
                     </SelectTrigger>
                     <SelectContent>
@@ -834,7 +843,7 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
               </Field>
             )}
           </div>
-          <DialogFooter showCloseButton>
+          <DialogFooter>
             <Button variant="outline" onClick={() => setShowEncryptModal(false)}>
               {t("Cancel")}
             </Button>
@@ -845,26 +854,29 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
 
       {/* CORS Modal */}
       <Dialog open={showCorsModal} onOpenChange={setShowCorsModal}>
-        <DialogContent className="sm:max-w-2xl" showCloseButton>
+        <DialogContent className="overflow-x-hidden sm:max-w-2xl" showCloseButton>
           <DialogHeader>
             <DialogTitle>{t("Set Bucket CORS")}</DialogTitle>
           </DialogHeader>
           <div className="space-y-4">
             <Field className="flex items-center justify-between">
-              <FieldLabel>{t("Bucket CORS")}</FieldLabel>
+              <FieldLabel htmlFor="bucket-info-cors-enabled">{t("Bucket CORS")}</FieldLabel>
               <FieldContent className="flex justify-end">
-                <Switch checked={corsFormEnabled} onCheckedChange={setCorsFormEnabled} />
+                <Switch id="bucket-info-cors-enabled" checked={corsFormEnabled} onCheckedChange={setCorsFormEnabled} />
               </FieldContent>
             </Field>
             {corsFormEnabled ? (
               <Field>
-                <FieldLabel>{t("CORS Configuration")}</FieldLabel>
+                <FieldLabel htmlFor="bucket-cors-content">{t("CORS Configuration")}</FieldLabel>
                 <FieldContent>
-                  <div className="max-h-[60vh] overflow-y-auto rounded-md border p-2">
+                  <div className="max-h-[60vh] overflow-y-auto border p-2">
                     <Textarea
+                      id="bucket-cors-content"
+                      name="bucket-cors-content"
                       value={corsFormContent}
                       onChange={(e) => setCorsFormContent(e.target.value)}
                       className="min-h-[260px] font-mono text-xs"
+                      spellCheck={false}
                     />
                   </div>
                 </FieldContent>
@@ -902,27 +914,35 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
           </DialogHeader>
           <div className="space-y-4">
             <Field>
-              <FieldLabel>{t("Tag Key")}</FieldLabel>
+              <FieldLabel htmlFor="bucket-tag-key">{t("Tag Key")}</FieldLabel>
               <FieldContent>
                 <Input
+                  id="bucket-tag-key"
+                  name="bucket-tag-key"
                   value={tagFormKey}
                   onChange={(e) => setTagFormKey(e.target.value)}
+                  autoComplete="off"
                   placeholder={t("Tag Key Placeholder")}
+                  spellCheck={false}
                 />
               </FieldContent>
             </Field>
             <Field>
-              <FieldLabel>{t("Tag Value")}</FieldLabel>
+              <FieldLabel htmlFor="bucket-tag-value">{t("Tag Value")}</FieldLabel>
               <FieldContent>
                 <Input
+                  id="bucket-tag-value"
+                  name="bucket-tag-value"
                   value={tagFormValue}
                   onChange={(e) => setTagFormValue(e.target.value)}
+                  autoComplete="off"
                   placeholder={t("Please enter tag value")}
+                  spellCheck={false}
                 />
               </FieldContent>
             </Field>
           </div>
-          <DialogFooter showCloseButton>
+          <DialogFooter>
             <Button variant="outline" onClick={() => setShowTagModal(false)}>
               {t("Cancel")}
             </Button>
@@ -939,19 +959,26 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
           </DialogHeader>
           <div className="space-y-4">
             <Field className="flex items-center justify-between">
-              <FieldLabel>{t("Bucket Quota")}</FieldLabel>
+              <FieldLabel htmlFor="bucket-info-quota-enabled">{t("Bucket Quota")}</FieldLabel>
               <FieldContent className="flex justify-end">
-                <Switch checked={quotaFormEnabled} onCheckedChange={setQuotaFormEnabled} />
+                <Switch
+                  id="bucket-info-quota-enabled"
+                  checked={quotaFormEnabled}
+                  onCheckedChange={setQuotaFormEnabled}
+                />
               </FieldContent>
             </Field>
             {quotaFormEnabled && (
-              <div className="space-y-4 rounded-lg border p-4">
+              <div className="space-y-4 border p-4">
                 <Field>
                   <FieldLabel>{t("Quota Size")}</FieldLabel>
                   <FieldContent>
                     <div className="flex flex-col gap-2 sm:flex-row">
                       <Input
+                        name="bucket-quota-size"
                         type="number"
+                        inputMode="numeric"
+                        aria-label={t("Quota Size")}
                         value={quotaFormSize}
                         onChange={(e) => setQuotaFormSize(e.target.value)}
                         className="sm:w-32"
@@ -964,11 +991,14 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
                         {["MiB", "GiB", "TiB", "PiB"].map((u) => (
                           <label
                             key={u}
-                            className={cn(
-                              "flex items-start gap-3 rounded-md border border-border/50 p-3 cursor-pointer",
-                            )}
+                            htmlFor={`bucket-info-quota-unit-${u.toLowerCase()}`}
+                            className={cn("flex items-start gap-3 border border-border/50 p-3 cursor-pointer")}
                           >
-                            <RadioGroupItem value={u} className="mt-0.5" />
+                            <RadioGroupItem
+                              id={`bucket-info-quota-unit-${u.toLowerCase()}`}
+                              value={u}
+                              className="mt-0.5"
+                            />
                             <span className="text-sm font-medium">{u}</span>
                           </label>
                         ))}
@@ -979,7 +1009,7 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
               </div>
             )}
           </div>
-          <DialogFooter showCloseButton>
+          <DialogFooter>
             <Button variant="outline" onClick={() => setShowQuotaModal(false)}>
               {t("Cancel")}
             </Button>
@@ -1009,9 +1039,14 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
                   ].map((opt) => (
                     <label
                       key={opt.value}
-                      className="flex items-start gap-3 rounded-md border border-border/50 p-3 cursor-pointer"
+                      htmlFor={`bucket-info-retention-mode-${opt.value.toLowerCase()}`}
+                      className="flex items-start gap-3 border border-border/50 p-3 cursor-pointer"
                     >
-                      <RadioGroupItem value={opt.value} className="mt-0.5" />
+                      <RadioGroupItem
+                        id={`bucket-info-retention-mode-${opt.value.toLowerCase()}`}
+                        value={opt.value}
+                        className="mt-0.5"
+                      />
                       <span className="text-sm font-medium">{opt.label}</span>
                     </label>
                   ))}
@@ -1032,9 +1067,14 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
                   ].map((opt) => (
                     <label
                       key={opt.value}
-                      className="flex items-start gap-3 rounded-md border border-border/50 p-3 cursor-pointer"
+                      htmlFor={`bucket-info-retention-unit-${opt.value.toLowerCase()}`}
+                      className="flex items-start gap-3 border border-border/50 p-3 cursor-pointer"
                     >
-                      <RadioGroupItem value={opt.value} className="mt-0.5" />
+                      <RadioGroupItem
+                        id={`bucket-info-retention-unit-${opt.value.toLowerCase()}`}
+                        value={opt.value}
+                        className="mt-0.5"
+                      />
                       <span className="text-sm font-medium">{opt.label}</span>
                     </label>
                   ))}
@@ -1045,14 +1085,17 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
               <FieldLabel>{t("Retention Period")}</FieldLabel>
               <FieldContent>
                 <Input
+                  name="bucket-retention-period"
                   type="number"
+                  inputMode="numeric"
+                  aria-label={t("Retention Period")}
                   value={retentionPeriodInput}
                   onChange={(e) => setRetentionPeriodInput(e.target.value)}
                 />
               </FieldContent>
             </Field>
           </div>
-          <DialogFooter showCloseButton>
+          <DialogFooter>
             <Button variant="outline" onClick={() => setShowRetentionModal(false)}>
               {t("Cancel")}
             </Button>
diff --git a/components/buckets/lifecycle-tab.tsx b/components/buckets/lifecycle-tab.tsx
index a78e328a..a24597c3 100644
--- a/components/buckets/lifecycle-tab.tsx
+++ b/components/buckets/lifecycle-tab.tsx
@@ -191,12 +191,12 @@ export function BucketLifecycleTab({ bucketName, hideTitle = false }: BucketLife
         <div className="flex gap-2">
           {canEditLifecycle ? (
             <Button variant="outline" onClick={() => setNewFormOpen(true)}>
-              <RiAddLine className="size-4" />
+              <RiAddLine className="size-4" aria-hidden />
               <span>{t("Add Lifecycle Rule")}</span>
             </Button>
           ) : null}
           <Button variant="outline" onClick={loadData}>
-            <RiRefreshLine className="size-4" />
+            <RiRefreshLine className="size-4" aria-hidden />
             <span>{t("Refresh")}</span>
           </Button>
         </div>
diff --git a/components/buckets/list.tsx b/components/buckets/list.tsx
index 51e1ff20..78fd4939 100644
--- a/components/buckets/list.tsx
+++ b/components/buckets/list.tsx
@@ -11,10 +11,9 @@ import { useDataTable } from "@/hooks/use-data-table"
 import { useBucket } from "@/hooks/use-bucket"
 import { useSystem } from "@/hooks/use-system"
 import { Spinner } from "@/components/ui/spinner"
-import { niceBytes } from "@/lib/functions"
+import { formatDateTime, formatInteger, niceBytes } from "@/lib/functions"
 import { normalizeDateToIso } from "@/lib/safe-date"
 import type { ColumnDef } from "@tanstack/react-table"
-import dayjs from "dayjs"
 
 export interface BucketListRow {
   Name: string
@@ -176,25 +175,24 @@ export function BucketList({ title, emptyDescription, getBucketHref }: BucketLis
         cell: ({ row }) => (
           <Link
             href={getBucketHref(row.original.Name)}
-            className="flex items-center gap-2 text-primary hover:underline"
+            className="flex min-w-0 max-w-full items-center gap-2 text-primary hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50"
           >
-            <RiArchiveLine className="size-4" />
-            {row.original.Name}
+            <RiArchiveLine className="size-4 shrink-0" aria-hidden />
+            <span className="min-w-0 truncate">{row.original.Name}</span>
           </Link>
         ),
       },
       {
         header: () => t("Creation Date"),
         accessorKey: "CreationDate",
-        cell: ({ row }) =>
-          row.original.CreationDate ? dayjs(row.original.CreationDate).format("YYYY-MM-DD HH:mm:ss") : "--",
+        cell: ({ row }) => formatDateTime(row.original.CreationDate),
       },
       {
         header: () => t("Object Count"),
         accessorKey: "Count",
         cell: ({ row }) =>
           typeof row.original.Count === "number" ? (
-            row.original.Count.toLocaleString()
+            formatInteger(row.original.Count)
           ) : usageLoading ? (
             <Spinner className="size-3 text-muted-foreground" />
           ) : (
@@ -214,7 +212,7 @@ export function BucketList({ title, emptyDescription, getBucketHref }: BucketLis
         cell: ({ row }) => {
           if (typeof row.original.IsPublic === "boolean") {
             return row.original.IsPublic ? (
-              <span className="text-red-600 dark:text-red-400">{t("Public")}</span>
+              <span className="text-destructive">{t("Public")}</span>
             ) : (
               <span className="text-muted-foreground">{t("Private")}</span>
             )
@@ -246,7 +244,7 @@ export function BucketList({ title, emptyDescription, getBucketHref }: BucketLis
             className="max-w-sm"
           />
           <Button variant="outline" onClick={() => fetchBuckets({ force: true })}>
-            <RiRefreshLine className="size-4" />
+            <RiRefreshLine className="size-4" aria-hidden />
             <span>{t("Refresh")}</span>
           </Button>
         </div>
diff --git a/components/buckets/new-form.tsx b/components/buckets/new-form.tsx
index 25632761..d4674dbd 100644
--- a/components/buckets/new-form.tsx
+++ b/components/buckets/new-form.tsx
@@ -4,7 +4,7 @@ import * as React from "react"
 import { useTranslation } from "react-i18next"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
-import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/ui/field"
+import { Field, FieldContent, FieldError, FieldLabel } from "@/components/ui/field"
 import { Switch } from "@/components/ui/switch"
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
@@ -147,57 +147,77 @@ export function BucketNewForm({ show, onShowChange }: BucketNewFormProps) {
 
   return (
     <Dialog open={show} onOpenChange={(open) => !open && closeModal()} disablePointerDismissal>
-      <DialogContent className="sm:max-w-2xl" showCloseButton={false}>
+      <DialogContent className="overflow-x-hidden sm:max-w-2xl" showCloseButton={false}>
         <DialogHeader>
           <DialogTitle>{t("Create Bucket")}</DialogTitle>
         </DialogHeader>
 
-        <div className="space-y-6 max-h-[80vh] overflow-auto px-2 -mx-2">
+        <div className="-mx-2 max-h-[80vh] space-y-6 overflow-y-auto overflow-x-hidden px-2">
           <Field>
             <FieldLabel htmlFor="bucket-name">{t("Please enter name")}</FieldLabel>
             <FieldContent>
               <Input
                 id="bucket-name"
+                name="bucket-name"
                 value={objectKey}
                 onChange={(e) => setObjectKey(e.target.value)}
                 autoComplete="off"
                 className={cn("w-full", nameError && "border-destructive focus-visible:ring-destructive")}
+                aria-invalid={Boolean(nameError)}
               />
             </FieldContent>
-            {nameError && <FieldDescription className="text-destructive">{t(nameError)}</FieldDescription>}
+            <FieldError>{nameError ? t(nameError) : undefined}</FieldError>
           </Field>
 
           <Field orientation="responsive" className="items-center">
-            <FieldLabel>{t("Version")}</FieldLabel>
+            <FieldLabel htmlFor="bucket-new-version">{t("Version")}</FieldLabel>
             <FieldContent className="flex justify-end">
-              <Switch checked={version} onCheckedChange={setVersion} disabled={!canEditVersioning} />
+              <Switch
+                id="bucket-new-version"
+                checked={version}
+                onCheckedChange={setVersion}
+                disabled={!canEditVersioning}
+              />
             </FieldContent>
           </Field>
 
           <Field orientation="responsive" className="items-center">
-            <FieldLabel>{t("Object Lock")}</FieldLabel>
+            <FieldLabel htmlFor="bucket-new-object-lock">{t("Object Lock")}</FieldLabel>
             <FieldContent className="flex justify-end">
-              <Switch checked={objectLock} onCheckedChange={setObjectLock} disabled={!canEditObjectLock} />
+              <Switch
+                id="bucket-new-object-lock"
+                checked={objectLock}
+                onCheckedChange={setObjectLock}
+                disabled={!canEditObjectLock}
+              />
             </FieldContent>
           </Field>
 
           <Field orientation="responsive" className="items-center">
-            <FieldLabel>{t("Bucket Quota")}</FieldLabel>
+            <FieldLabel htmlFor="bucket-new-quota">{t("Bucket Quota")}</FieldLabel>
             <FieldContent className="flex justify-end">
-              <Switch checked={quotaEnabled} onCheckedChange={setQuotaEnabled} disabled={!canEditQuota} />
+              <Switch
+                id="bucket-new-quota"
+                checked={quotaEnabled}
+                onCheckedChange={setQuotaEnabled}
+                disabled={!canEditQuota}
+              />
             </FieldContent>
           </Field>
 
           {quotaEnabled && (
-            <div className="space-y-4 rounded-lg border p-4">
+            <div className="space-y-4 border p-4">
               <Field>
                 <FieldLabel>{t("Quota Size")}</FieldLabel>
                 <FieldContent>
                   <div className="flex flex-col gap-2 sm:flex-row">
                     <Input
+                      name="bucket-quota-size"
                       value={quotaSize}
                       onChange={(e) => setQuotaSize(e.target.value)}
                       type="number"
+                      inputMode="numeric"
+                      aria-label={t("Quota Size")}
                       className="sm:w-32"
                     />
                     <RadioGroup
@@ -206,8 +226,16 @@ export function BucketNewForm({ show, onShowChange }: BucketNewFormProps) {
                       className="grid grid-cols-2 gap-2 sm:grid-cols-4"
                     >
                       {["MiB", "GiB", "TiB", "PiB"].map((unit) => (
-                        <label key={unit} className="flex items-start gap-3 rounded-md border border-border/50 p-3">
-                          <RadioGroupItem value={unit} className="mt-0.5" />
+                        <label
+                          key={unit}
+                          htmlFor={`bucket-new-quota-unit-${unit.toLowerCase()}`}
+                          className="flex items-start gap-3 border border-border/50 p-3"
+                        >
+                          <RadioGroupItem
+                            id={`bucket-new-quota-unit-${unit.toLowerCase()}`}
+                            value={unit}
+                            className="mt-0.5"
+                          />
                           <span className="text-sm font-medium">{unit}</span>
                         </label>
                       ))}
@@ -219,11 +247,11 @@ export function BucketNewForm({ show, onShowChange }: BucketNewFormProps) {
           )}
 
           {objectLock && (
-            <div className="space-y-4 rounded-lg border p-4">
+            <div className="space-y-4 border p-4">
               <Field orientation="responsive" className="items-center">
-                <FieldLabel>{t("Retention")}</FieldLabel>
+                <FieldLabel htmlFor="bucket-new-retention">{t("Retention")}</FieldLabel>
                 <FieldContent className="flex justify-end">
-                  <Switch checked={retentionEnabled} onCheckedChange={setRetentionEnabled} />
+                  <Switch id="bucket-new-retention" checked={retentionEnabled} onCheckedChange={setRetentionEnabled} />
                 </FieldContent>
               </Field>
 
@@ -240,9 +268,14 @@ export function BucketNewForm({ show, onShowChange }: BucketNewFormProps) {
                         {retentionModeOptions.map((option) => (
                           <label
                             key={option.value}
-                            className="flex items-start gap-3 rounded-md border border-border/50 p-3"
+                            htmlFor={`bucket-new-retention-mode-${option.value.toLowerCase()}`}
+                            className="flex items-start gap-3 border border-border/50 p-3"
                           >
-                            <RadioGroupItem value={option.value} className="mt-0.5" />
+                            <RadioGroupItem
+                              id={`bucket-new-retention-mode-${option.value.toLowerCase()}`}
+                              value={option.value}
+                              className="mt-0.5"
+                            />
                             <span className="text-sm font-medium">{t(option.label)}</span>
                           </label>
                         ))}
@@ -255,9 +288,12 @@ export function BucketNewForm({ show, onShowChange }: BucketNewFormProps) {
                     <FieldContent>
                       <div className="flex flex-col gap-2 sm:flex-row">
                         <Input
+                          name="bucket-retention-period"
                           value={retentionPeriod}
                           onChange={(e) => setRetentionPeriod(e.target.value)}
                           type="number"
+                          inputMode="numeric"
+                          aria-label={t("Validity")}
                           className="sm:w-32"
                         />
                         <RadioGroup
@@ -268,9 +304,14 @@ export function BucketNewForm({ show, onShowChange }: BucketNewFormProps) {
                           {retentionUnitOptions.map((option) => (
                             <label
                               key={option.value}
-                              className="flex items-start gap-3 rounded-md border border-border/50 p-3"
+                              htmlFor={`bucket-new-retention-unit-${option.value}`}
+                              className="flex items-start gap-3 border border-border/50 p-3"
                             >
-                              <RadioGroupItem value={option.value} className="mt-0.5" />
+                              <RadioGroupItem
+                                id={`bucket-new-retention-unit-${option.value}`}
+                                value={option.value}
+                                className="mt-0.5"
+                              />
                               <span className="text-sm font-medium">{t(option.labelKey)}</span>
                             </label>
                           ))}
diff --git a/components/buckets/replication-tab.tsx b/components/buckets/replication-tab.tsx
index 3cb506f8..8e16732d 100644
--- a/components/buckets/replication-tab.tsx
+++ b/components/buckets/replication-tab.tsx
@@ -178,12 +178,12 @@ export function BucketReplicationTab({ bucketName, hideTitle = false }: BucketRe
         <div className="flex gap-2">
           {canEditReplication ? (
             <Button variant="outline" onClick={() => setNewFormOpen(true)}>
-              <RiAddLine className="size-4" />
+              <RiAddLine className="size-4" aria-hidden />
               <span>{t("Add Replication Rule")}</span>
             </Button>
           ) : null}
           <Button variant="outline" onClick={loadData}>
-            <RiRefreshLine className="size-4" />
+            <RiRefreshLine className="size-4" aria-hidden />
             <span>{t("Refresh")}</span>
           </Button>
         </div>
diff --git a/components/buckets/selector.tsx b/components/buckets/selector.tsx
index 64475ce4..3c61bf8d 100644
--- a/components/buckets/selector.tsx
+++ b/components/buckets/selector.tsx
@@ -81,7 +81,7 @@ export function BucketSelector({
     <div className={cn(containerClasses)}>
       <div className={controlWrapperClasses}>
         <Select value={value ?? ""} onValueChange={(v) => onChange(v || null)} disabled={disabled || isLoading}>
-          <SelectTrigger className={cn("min-w-[200px]", selectorClass)}>
+          <SelectTrigger className={cn("min-w-[200px]", selectorClass)} aria-label={displayLabel}>
             <SelectValue placeholder={t(placeholder)}>
               {value ? `${displayLabel}: ${buckets.find((b) => b.value === value)?.label ?? value}` : null}
             </SelectValue>
diff --git a/components/copy-button.tsx b/components/copy-button.tsx
index 5aad4915..90ccf1c2 100644
--- a/components/copy-button.tsx
+++ b/components/copy-button.tsx
@@ -37,7 +37,7 @@ export function CopyButton({ value = "", iconOnly = false }) {
     >
       {iconOnly ? (
         <>
-          <RiFileCopyLine className="size-[18px]" />
+          <RiFileCopyLine className="size-4" aria-hidden />
           <span className="sr-only">{t("Copy")}</span>
         </>
       ) : (
diff --git a/components/copy-input.tsx b/components/copy-input.tsx
index 05e34418..a367970f 100644
--- a/components/copy-input.tsx
+++ b/components/copy-input.tsx
@@ -43,6 +43,7 @@ export function CopyInput({
         value={value}
         onChange={(e) => onChange?.(e.target.value)}
         readOnly={readonly}
+        aria-label={props["aria-label"] ?? t("Copy")}
         className="flex-1"
         {...props}
       />
@@ -59,7 +60,7 @@ export function CopyInput({
           title={t("Copy")}
           onClick={handleCopy}
         >
-          <RiFileCopyLine className="size-[18px]" />
+          <RiFileCopyLine className="size-4" aria-hidden />
           <span className="sr-only">{t("Copy")}</span>
         </Button>
       )}
diff --git a/components/data-table/data-table-pagination.tsx b/components/data-table/data-table-pagination.tsx
index 58b5a15a..0f1cc006 100644
--- a/components/data-table/data-table-pagination.tsx
+++ b/components/data-table/data-table-pagination.tsx
@@ -37,7 +37,7 @@ export function DataTablePagination<TData>({
       <div className="flex items-center gap-3">
         <span className="text-sm text-muted-foreground">{t("Rows per page")}</span>
         <Select value={String(pagination.pageSize)} onValueChange={(value) => handlePageSizeChange(value ?? "")}>
-          <SelectTrigger className="w-24">
+          <SelectTrigger className="w-24" aria-label={t("Rows per page")}>
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
diff --git a/components/data-table/data-table.tsx b/components/data-table/data-table.tsx
index 726e4ea8..453f1656 100644
--- a/components/data-table/data-table.tsx
+++ b/components/data-table/data-table.tsx
@@ -69,7 +69,7 @@ export function DataTable<TData>({
   const hasRows = table.getRowModel().rows.length > 0
 
   const tableContent = (
-    <UiTable className={cn(bodyHeight ? tableClass : "border rounded-md", tableClass)}>
+    <UiTable className={cn("min-w-full tabular-nums", tableClass)}>
       <TableHeader className={stickyHeader ? "sticky top-0 z-10 bg-muted/40 backdrop-blur" : ""}>
         {table.getHeaderGroups().map((headerGroup) => (
           <TableRow key={headerGroup.id} className={stickyHeader ? "bg-muted/40 backdrop-blur" : undefined}>
@@ -84,16 +84,16 @@ export function DataTable<TData>({
                     {canSort(header.column) ? (
                       <button
                         type="button"
-                        className="flex items-center gap-2 cursor-pointer select-none hover:text-foreground"
+                        className="flex cursor-pointer items-center gap-2 select-none rounded-none outline-none hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring/50"
                         onClick={header.column.getToggleSortingHandler()}
                       >
                         {flexRender(header.column.columnDef.header, header.getContext())}
                         {header.column.getIsSorted() === "asc" ? (
-                          <RiArrowUpSLine className="size-4" />
+                          <RiArrowUpSLine className="size-4" aria-hidden />
                         ) : header.column.getIsSorted() === "desc" ? (
-                          <RiArrowDownSLine className="size-4" />
+                          <RiArrowDownSLine className="size-4" aria-hidden />
                         ) : (
-                          <RiArrowUpDownLine className="size-4 text-muted-foreground opacity-50" />
+                          <RiArrowUpDownLine className="size-4 text-muted-foreground opacity-50" aria-hidden />
                         )}
                       </button>
                     ) : (
@@ -112,7 +112,7 @@ export function DataTable<TData>({
             <TableCell colSpan={visibleColumnCount} className="h-48 text-center align-middle">
               <div className="flex flex-col items-center gap-2">
                 <Spinner className="size-6" />
-                <span className="text-sm text-muted-foreground">Loading...</span>
+                <span className="text-sm text-muted-foreground">Loading…</span>
               </div>
             </TableCell>
           </TableRow>
@@ -148,9 +148,9 @@ export function DataTable<TData>({
   return (
     <div className={cn("flex flex-col gap-4", className)}>
       {bodyHeight ? (
-        <ScrollArea className={cn("rounded-md border", bodyHeight)}>{tableContent}</ScrollArea>
+        <ScrollArea className={cn("border", bodyHeight)}>{tableContent}</ScrollArea>
       ) : (
-        tableContent
+        <div className="w-full overflow-x-auto border">{tableContent}</div>
       )}
     </div>
   )
diff --git a/components/datetime-picker.tsx b/components/datetime-picker.tsx
index d7ebf6ea..6eb7f6c6 100644
--- a/components/datetime-picker.tsx
+++ b/components/datetime-picker.tsx
@@ -120,7 +120,7 @@ export function DateTimePicker({
               variant="outline"
               disabled={disabled}
               className={cn(
-                "h-8 w-full justify-start px-2.5 text-left font-normal",
+                "h-8 w-full justify-start px-2.5 text-start font-normal",
                 displayValue && "pe-8",
                 !displayValue && "text-muted-foreground",
                 className,
@@ -139,7 +139,7 @@ export function DateTimePicker({
             type="button"
             variant="ghost"
             size="icon-xs"
-            className="absolute top-1 right-1 text-muted-foreground hover:text-foreground"
+            className="absolute top-1 end-1 text-muted-foreground hover:text-foreground"
             onClick={clearValue}
             aria-label={t("Remove")}
           >
@@ -161,6 +161,7 @@ export function DateTimePicker({
           <div className="flex min-w-0 flex-1 items-center gap-2">
             <RiTimeLine className="size-4 text-muted-foreground" aria-hidden />
             <Input
+              name="datetime-hours"
               type="number"
               inputMode="numeric"
               min={0}
@@ -173,6 +174,7 @@ export function DateTimePicker({
             />
             <span className="text-muted-foreground">:</span>
             <Input
+              name="datetime-minutes"
               type="number"
               inputMode="numeric"
               min={0}
diff --git a/components/events-target/new-form.tsx b/components/events-target/new-form.tsx
index 21398e26..9b7c61a4 100644
--- a/components/events-target/new-form.tsx
+++ b/components/events-target/new-form.tsx
@@ -15,7 +15,6 @@ import {
   type EventTargetType,
 } from "@/lib/events-target-config"
 import { useMessage } from "@/lib/feedback/message"
-import { cn } from "@/lib/utils"
 import { buildRoute } from "@/lib/routes"
 
 interface EventsTargetNewFormProps {
@@ -130,7 +129,7 @@ export function EventsTargetNewForm({ open, onOpenChange, onSuccess }: EventsTar
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-h-[80vh] overflow-y-auto sm:max-w-lg">
+      <DialogContent className="max-h-[80vh] overflow-y-auto overflow-x-hidden sm:max-w-lg">
         <DialogHeader>
           <DialogTitle>{type ? t("Add {type} Destination", { type }) : t("Add Event Destination")}</DialogTitle>
         </DialogHeader>
@@ -142,7 +141,7 @@ export function EventsTargetNewForm({ open, onOpenChange, onSuccess }: EventsTar
                   key={option.value}
                   type="button"
                   onClick={() => setType(option.value)}
-                  className={cn("cursor-pointer border border-border/70 text-left transition hover:border-primary")}
+                  className="cursor-pointer border border-border/70 text-start transition hover:border-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50"
                 >
                   <div className="flex items-center gap-3 p-4">
                     <Image
@@ -152,9 +151,11 @@ export function EventsTargetNewForm({ open, onOpenChange, onSuccess }: EventsTar
                       height={40}
                       className="size-10 shrink-0 object-contain"
                     />
-                    <div>
-                      <p className="text-base font-semibold">{t(option.labelKey)}</p>
-                      <p className="text-sm text-muted-foreground">{t(option.descKey)}</p>
+                    <div className="min-w-0">
+                      <p className="truncate text-base font-semibold" title={t(option.labelKey)}>
+                        {t(option.labelKey)}
+                      </p>
+                      <p className="break-words text-sm text-muted-foreground">{t(option.descKey)}</p>
                     </div>
                   </div>
                 </button>
@@ -165,7 +166,7 @@ export function EventsTargetNewForm({ open, onOpenChange, onSuccess }: EventsTar
               <button
                 type="button"
                 onClick={() => setType("")}
-                className="flex w-full cursor-pointer items-center gap-3 border p-4 text-left transition hover:border-primary"
+                className="flex w-full cursor-pointer items-center gap-3 border p-4 text-start transition hover:border-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50"
               >
                 {selectedOption && (
                   <Image
@@ -176,9 +177,11 @@ export function EventsTargetNewForm({ open, onOpenChange, onSuccess }: EventsTar
                     className="size-10 shrink-0 object-contain"
                   />
                 )}
-                <div className="flex flex-col">
+                <div className="flex min-w-0 flex-col">
                   <span className="text-sm text-muted-foreground">{t("Selected Type")}</span>
-                  <span className="text-base font-semibold">{type}</span>
+                  <span className="truncate text-base font-semibold" title={type}>
+                    {type}
+                  </span>
                 </div>
               </button>
 
@@ -188,10 +191,12 @@ export function EventsTargetNewForm({ open, onOpenChange, onSuccess }: EventsTar
                   <FieldContent>
                     <Input
                       id="target-name"
+                      name="target-name"
                       value={name}
                       onChange={handleNameChange}
                       placeholder={t("Please enter name")}
                       autoComplete="off"
+                      spellCheck={false}
                     />
                   </FieldContent>
                   {nameError && <FieldDescription className="text-destructive">{nameError}</FieldDescription>}
@@ -203,6 +208,7 @@ export function EventsTargetNewForm({ open, onOpenChange, onSuccess }: EventsTar
                     <FieldContent>
                       <Input
                         id={`config-${cfg.name}`}
+                        name={`config-${cfg.name}`}
                         value={String(config[cfg.name] ?? "")}
                         onChange={(e) =>
                           setConfig((prev) => ({
@@ -213,6 +219,7 @@ export function EventsTargetNewForm({ open, onOpenChange, onSuccess }: EventsTar
                         type={cfg.type === "password" ? "password" : "text"}
                         autoComplete="off"
                         placeholder={`${t("Please enter")} ${t(cfg.label).toLowerCase()}`}
+                        spellCheck={false}
                       />
                     </FieldContent>
                   </Field>
@@ -226,7 +233,7 @@ export function EventsTargetNewForm({ open, onOpenChange, onSuccess }: EventsTar
             {t("Cancel")}
           </Button>
           <Button onClick={handleSave} disabled={!type} aria-disabled={submitting}>
-            {submitting ? t("Saving...") : t("Save")}
+            {submitting ? t("Saving…") : t("Save")}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/components/events/new-form.tsx b/components/events/new-form.tsx
index b17971ff..feae6910 100644
--- a/components/events/new-form.tsx
+++ b/components/events/new-form.tsx
@@ -193,8 +193,8 @@ export function EventsNewForm({ open, onOpenChange, bucketName, onSuccess, disab
       }}
       disablePointerDismissal
     >
-      <DialogContent className="max-w-2xl">
-        <DialogHeader className="text-left">
+      <DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto overflow-x-hidden">
+        <DialogHeader className="text-start">
           <DialogTitle>
             {t("Subscribe to event notification")}
             <span className="mt-1 block text-sm font-normal text-muted-foreground">
@@ -212,7 +212,7 @@ export function EventsNewForm({ open, onOpenChange, bucketName, onSuccess, disab
                 onValueChange={(value) => setResourceName(value ?? "")}
                 disabled={disabled || !arnList.length}
               >
-                <SelectTrigger id="event-resource-name">
+                <SelectTrigger id="event-resource-name" aria-label={t("Amazon Resource Name")}>
                   <SelectValue placeholder={t("Please select resource name")} />
                 </SelectTrigger>
                 <SelectContent>
@@ -232,10 +232,13 @@ export function EventsNewForm({ open, onOpenChange, bucketName, onSuccess, disab
             <FieldContent>
               <Input
                 id="event-prefix"
+                name="event-prefix"
                 value={prefix}
                 onChange={(e) => setPrefix(e.target.value)}
+                autoComplete="off"
                 disabled={disabled}
                 placeholder={t("Please enter prefix")}
+                spellCheck={false}
               />
             </FieldContent>
           </Field>
@@ -245,10 +248,13 @@ export function EventsNewForm({ open, onOpenChange, bucketName, onSuccess, disab
             <FieldContent>
               <Input
                 id="event-suffix"
+                name="event-suffix"
                 value={suffix}
                 onChange={(e) => setSuffix(e.target.value)}
+                autoComplete="off"
                 disabled={disabled}
                 placeholder={t("Please enter suffix")}
+                spellCheck={false}
               />
             </FieldContent>
           </Field>
@@ -256,11 +262,16 @@ export function EventsNewForm({ open, onOpenChange, bucketName, onSuccess, disab
           <Field>
             <FieldLabel>{t("Select events")}</FieldLabel>
             <FieldContent>
-              <ScrollArea className="max-h-64 rounded-md border">
+              <ScrollArea className="max-h-64 border">
                 <div className="flex flex-col gap-2 p-4">
                   {EVENT_OPTIONS.map((event) => (
-                    <label key={event.value} className="flex cursor-pointer items-start gap-3">
+                    <label
+                      key={event.value}
+                      htmlFor={`event-option-${event.value.toLowerCase()}`}
+                      className="flex cursor-pointer items-start gap-3"
+                    >
                       <Checkbox
+                        id={`event-option-${event.value.toLowerCase()}`}
                         checked={events.includes(event.value)}
                         onCheckedChange={(v) => handleEventChecked(event.value, v)}
                         disabled={disabled}
diff --git a/components/language-switcher.tsx b/components/language-switcher.tsx
index fff64bef..bbef183d 100644
--- a/components/language-switcher.tsx
+++ b/components/language-switcher.tsx
@@ -29,7 +29,7 @@ const options = LOCALE_CODES.map((key) => ({
 }))
 
 export function LanguageSwitcher() {
-  const { i18n } = useTranslation()
+  const { i18n, t } = useTranslation()
   const currentLocale = (i18n.language?.split("-")[0] ?? "en") as Locale
   const currentLanguage = languageConfig[currentLocale] ?? languageConfig.en
 
@@ -39,8 +39,8 @@ export function LanguageSwitcher() {
     <DropdownMenu>
       <DropdownMenuTrigger
         render={
-          <Button variant="ghost">
-            <CurrentIcon className="h-4 w-4 shrink-0" />
+          <Button variant="ghost" size="icon" aria-label={t("Language")}>
+            <CurrentIcon className="size-4 shrink-0" aria-hidden />
           </Button>
         }
       />
diff --git a/components/license/article.tsx b/components/license/article.tsx
index 8103f3c5..51ebd4e2 100644
--- a/components/license/article.tsx
+++ b/components/license/article.tsx
@@ -28,12 +28,12 @@ export function LicenseArticle() {
       <Card className="space-y-4 shadow-none">
         <CardContent className="space-y-4">
           <div className="text-center">
-            <h2 className="text-2xl font-bold">{t("Apache License")}</h2>
+            <h2 className="text-xl font-semibold">{t("Apache License")}</h2>
             <p className="mt-2 text-sm text-muted-foreground">{t("Version 2.0, January 2004")}</p>
           </div>
-          <ScrollArea className="h-[70vh] rounded-lg border">
+          <ScrollArea className="h-[70vh] border">
             <pre className="whitespace-pre-wrap p-6 text-sm leading-6 text-muted-foreground">
-              {licenseContent || t("Loading...")}
+              {licenseContent || t("Loading…")}
             </pre>
           </ScrollArea>
         </CardContent>
diff --git a/components/license/enterprise-section.tsx b/components/license/enterprise-section.tsx
index 0304ed80..c9f08ba9 100644
--- a/components/license/enterprise-section.tsx
+++ b/components/license/enterprise-section.tsx
@@ -3,7 +3,6 @@
 import { useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { RiUploadFill, RiCustomerService2Line } from "@remixicon/react"
-import dayjs from "dayjs"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
@@ -13,7 +12,7 @@ import { useDataTable } from "@/hooks/use-data-table"
 import type { ColumnDef } from "@tanstack/react-table"
 
 const hasValidLicense = false
-const endDate = dayjs().format("YYYY-MM-DD")
+const endDate = new Intl.DateTimeFormat(undefined, { dateStyle: "medium" }).format(new Date())
 
 interface PermissionItem {
   name: string
@@ -233,7 +232,7 @@ export function LicenseEnterpriseSection() {
                   <Badge variant={hasValidLicense ? "default" : "destructive"}>{t("Enterprise License")}</Badge>
                   <span
                     className={
-                      hasValidLicense ? "text-sm font-medium text-emerald-600" : "text-sm font-medium text-rose-500"
+                      hasValidLicense ? "text-sm font-medium text-foreground" : "text-sm font-medium text-destructive"
                     }
                   >
                     {t("Status")}：{hasValidLicense ? t("Normal") : t("Expired")}
diff --git a/components/lifecycle/new-form.tsx b/components/lifecycle/new-form.tsx
index 241ffb57..00406100 100644
--- a/components/lifecycle/new-form.tsx
+++ b/components/lifecycle/new-form.tsx
@@ -234,7 +234,7 @@ export function LifecycleNewForm({ open, onOpenChange, bucketName, onSuccess }:
       }}
       disablePointerDismissal
     >
-      <DialogContent className="sm:max-w-lg">
+      <DialogContent className="max-h-[90vh] overflow-y-auto overflow-x-hidden sm:max-w-lg">
         <DialogHeader>
           <DialogTitle>
             {t("Add Lifecycle Rule")} ({t("Bucket")}: {bucketName || ""})
@@ -259,7 +259,7 @@ export function LifecycleNewForm({ open, onOpenChange, bucketName, onSuccess }:
                     <FieldLabel>{t("Object Version")}</FieldLabel>
                     <FieldContent>
                       <Select value={versionType} onValueChange={(value) => setVersionType(value ?? "")}>
-                        <SelectTrigger className="w-full">
+                        <SelectTrigger className="w-full" aria-label={t("Object Version")}>
                           <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
@@ -280,8 +280,11 @@ export function LifecycleNewForm({ open, onOpenChange, bucketName, onSuccess }:
                   <FieldContent>
                     <div className="flex items-center gap-3">
                       <Input
+                        name="lifecycle-expire-days"
                         type="number"
+                        inputMode="numeric"
                         min={1}
+                        aria-label={t("Days")}
                         value={days}
                         onChange={(e) => setDays(Number(e.target.value))}
                         className="w-32"
@@ -299,12 +302,16 @@ export function LifecycleNewForm({ open, onOpenChange, bucketName, onSuccess }:
                 </summary>
                 <div className="mt-4 space-y-4">
                   <Field>
-                    <FieldLabel>{t("Prefix")}</FieldLabel>
+                    <FieldLabel htmlFor="lifecycle-expire-prefix">{t("Prefix")}</FieldLabel>
                     <FieldContent>
                       <Input
+                        id="lifecycle-expire-prefix"
+                        name="lifecycle-expire-prefix"
                         value={prefix}
                         onChange={(e) => setPrefix(e.target.value)}
+                        autoComplete="off"
                         placeholder={t("Please enter prefix")}
+                        spellCheck={false}
                       />
                     </FieldContent>
                   </Field>
@@ -322,16 +329,26 @@ export function LifecycleNewForm({ open, onOpenChange, bucketName, onSuccess }:
                         {tags.map((tag, index) => (
                           <div key={index} className="grid gap-2 md:grid-cols-2 md:items-center md:gap-4">
                             <Input
+                              id={`lifecycle-expire-tag-key-${index}`}
+                              name={`lifecycle-expire-tag-key-${index}`}
                               value={tag.key}
                               onChange={(e) => updateTag(index, "key", e.target.value)}
+                              aria-label={`${t("Tag Name")} ${index + 1}`}
+                              autoComplete="off"
                               placeholder={t("Tag Name")}
+                              spellCheck={false}
                             />
                             <div className="flex items-center gap-2">
                               <Input
+                                id={`lifecycle-expire-tag-value-${index}`}
+                                name={`lifecycle-expire-tag-value-${index}`}
                                 value={tag.value}
                                 onChange={(e) => updateTag(index, "value", e.target.value)}
+                                aria-label={`${t("Tag Value")} ${index + 1}`}
+                                autoComplete="off"
                                 placeholder={t("Tag Value")}
                                 className="flex-1"
+                                spellCheck={false}
                               />
                               <Button
                                 variant="ghost"
@@ -359,12 +376,18 @@ export function LifecycleNewForm({ open, onOpenChange, bucketName, onSuccess }:
                   <Field className="mt-4">
                     <div className="flex items-center justify-between">
                       <div>
-                        <FieldLabel className="text-sm font-medium">{t("Delete Marker Handling")}</FieldLabel>
+                        <FieldLabel htmlFor="lifecycle-expired-delete-marker" className="text-sm font-medium">
+                          {t("Delete Marker Handling")}
+                        </FieldLabel>
                         <FieldDescription>
                           {t("If no versions remain, delete references to this object")}
                         </FieldDescription>
                       </div>
-                      <Switch checked={expiredDeleteMark} onCheckedChange={setExpiredDeleteMark} />
+                      <Switch
+                        id="lifecycle-expired-delete-marker"
+                        checked={expiredDeleteMark}
+                        onCheckedChange={setExpiredDeleteMark}
+                      />
                     </div>
                   </Field>
                 </details>
@@ -378,7 +401,7 @@ export function LifecycleNewForm({ open, onOpenChange, bucketName, onSuccess }:
                     <FieldLabel>{t("Object Version")}</FieldLabel>
                     <FieldContent>
                       <Select value={versionType} onValueChange={(value) => setVersionType(value ?? "")}>
-                        <SelectTrigger className="w-full">
+                        <SelectTrigger className="w-full" aria-label={t("Object Version")}>
                           <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
@@ -398,8 +421,11 @@ export function LifecycleNewForm({ open, onOpenChange, bucketName, onSuccess }:
                   <FieldContent>
                     <div className="flex items-center gap-3">
                       <Input
+                        name="lifecycle-transition-days"
                         type="number"
+                        inputMode="numeric"
                         min={1}
+                        aria-label={t("Days")}
                         value={days}
                         onChange={(e) => setDays(Number(e.target.value))}
                         className="w-32"
@@ -414,7 +440,7 @@ export function LifecycleNewForm({ open, onOpenChange, bucketName, onSuccess }:
                   <FieldLabel>{t("Storage Type")}</FieldLabel>
                   <FieldContent>
                     <Select value={storageType} onValueChange={(value) => setStorageType(value ?? "")}>
-                      <SelectTrigger className="w-full">
+                      <SelectTrigger className="w-full" aria-label={t("Storage Type")}>
                         <SelectValue placeholder={t("Please select storage type")} />
                       </SelectTrigger>
                       <SelectContent>
@@ -435,12 +461,16 @@ export function LifecycleNewForm({ open, onOpenChange, bucketName, onSuccess }:
                 </summary>
                 <div className="mt-4 space-y-4">
                   <Field>
-                    <FieldLabel>{t("Prefix")}</FieldLabel>
+                    <FieldLabel htmlFor="lifecycle-transition-prefix">{t("Prefix")}</FieldLabel>
                     <FieldContent>
                       <Input
+                        id="lifecycle-transition-prefix"
+                        name="lifecycle-transition-prefix"
                         value={prefix}
                         onChange={(e) => setPrefix(e.target.value)}
+                        autoComplete="off"
                         placeholder={t("Please enter prefix")}
+                        spellCheck={false}
                       />
                     </FieldContent>
                   </Field>
@@ -456,21 +486,28 @@ export function LifecycleNewForm({ open, onOpenChange, bucketName, onSuccess }:
                     {tags.length > 0 && (
                       <div className="space-y-3">
                         {tags.map((tag, index) => (
-                          <div
-                            key={index}
-                            className="grid gap-2 rounded-md border p-3 md:grid-cols-2 md:items-center md:gap-4"
-                          >
+                          <div key={index} className="grid gap-2 border p-3 md:grid-cols-2 md:items-center md:gap-4">
                             <Input
+                              id={`lifecycle-transition-tag-key-${index}`}
+                              name={`lifecycle-transition-tag-key-${index}`}
                               value={tag.key}
                               onChange={(e) => updateTag(index, "key", e.target.value)}
+                              aria-label={`${t("Tag Name")} ${index + 1}`}
+                              autoComplete="off"
                               placeholder={t("Tag Name")}
+                              spellCheck={false}
                             />
                             <div className="flex items-center gap-2">
                               <Input
+                                id={`lifecycle-transition-tag-value-${index}`}
+                                name={`lifecycle-transition-tag-value-${index}`}
                                 value={tag.value}
                                 onChange={(e) => updateTag(index, "value", e.target.value)}
+                                aria-label={`${t("Tag Value")} ${index + 1}`}
+                                autoComplete="off"
                                 placeholder={t("Tag Value")}
                                 className="flex-1"
+                                spellCheck={false}
                               />
                               <Button
                                 variant="ghost"
@@ -498,7 +535,7 @@ export function LifecycleNewForm({ open, onOpenChange, bucketName, onSuccess }:
             {t("Cancel")}
           </Button>
           <Button onClick={handleSave} disabled={submitting}>
-            {submitting ? t("Saving...") : t("Save")}
+            {submitting ? t("Saving…") : t("Save")}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/components/links/github.tsx b/components/links/github.tsx
index cf997287..b2b90eac 100644
--- a/components/links/github.tsx
+++ b/components/links/github.tsx
@@ -9,10 +9,13 @@ export function LinksGithub() {
   if (!github) return null
 
   return (
-    <Button variant="link">
-      <a href={github} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1">
-        <RiGithubLine className="size-4" />
-      </a>
+    <Button
+      variant="ghost"
+      size="icon"
+      nativeButton={false}
+      render={<a href={github} target="_blank" rel="noopener noreferrer" aria-label="GitHub" />}
+    >
+      <RiGithubLine className="size-4" aria-hidden />
     </Button>
   )
 }
diff --git a/components/links/x.tsx b/components/links/x.tsx
index 6f5dd7b4..93980aac 100644
--- a/components/links/x.tsx
+++ b/components/links/x.tsx
@@ -9,10 +9,13 @@ export function LinksX() {
   if (!x) return null
 
   return (
-    <Button variant="link">
-      <a href={x} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1">
-        <RiTwitterXLine className="size-4" />
-      </a>
+    <Button
+      variant="ghost"
+      size="icon"
+      nativeButton={false}
+      render={<a href={x} target="_blank" rel="noopener noreferrer" aria-label="X" />}
+    >
+      <RiTwitterXLine className="size-4" aria-hidden />
     </Button>
   )
 }
diff --git a/components/object/info.tsx b/components/object/info.tsx
index 03b08579..3a679415 100644
--- a/components/object/info.tsx
+++ b/components/object/info.tsx
@@ -440,31 +440,31 @@ export function ObjectInfo({ bucketName, objectKey, open, onOpenChange, onPrevie
         <DrawerContent className="overflow-y-auto overflow-x-hidden data-[vaul-drawer-direction=right]:w-[92vw] data-[vaul-drawer-direction=right]:sm:max-w-2xl">
           <DrawerHeader>
             <DrawerTitle>{t("Object Details")}</DrawerTitle>
-            <DrawerDescription />
+            <DrawerDescription className="break-all">{resolvedObjectKey || bucketName}</DrawerDescription>
           </DrawerHeader>
           <div className="min-w-0 space-y-4 p-4 overflow-hidden">
             <div className="flex flex-wrap items-center gap-2">
               {canDownloadObject ? (
                 <Button variant="outline" size="sm" onClick={download}>
-                  <RiDownloadLine className="size-4" />
+                  <RiDownloadLine className="size-4" aria-hidden />
                   {t("Download")}
                 </Button>
               ) : null}
               {canPreviewObject ? (
                 <Button variant="outline" size="sm" onClick={() => onPreview({ key: String(object?.Key ?? "") })}>
-                  <RiEyeLine className="size-4" />
+                  <RiEyeLine className="size-4" aria-hidden />
                   {t("Preview")}
                 </Button>
               ) : null}
               {canViewObjectTags || canEditObjectTags ? (
                 <Button variant="outline" size="sm" onClick={() => setShowTagView(true)}>
-                  <RiPriceTag3Line className="size-4" />
+                  <RiPriceTag3Line className="size-4" aria-hidden />
                   {t("Set Tags")}
                 </Button>
               ) : null}
               {canViewVersions ? (
                 <Button variant="outline" size="sm" onClick={() => setShowVersions(true)}>
-                  <RiFileList2Line className="size-4" />
+                  <RiFileList2Line className="size-4" aria-hidden />
                   {t("Versions")}
                 </Button>
               ) : null}
@@ -480,7 +480,7 @@ export function ObjectInfo({ bucketName, objectKey, open, onOpenChange, onPrevie
                     setShowRetentionView(true)
                   }}
                 >
-                  <RiLockLine className="size-4" />
+                  <RiLockLine className="size-4" aria-hidden />
                   {t("Retention")}
                 </Button>
               ) : null}
@@ -488,7 +488,7 @@ export function ObjectInfo({ bucketName, objectKey, open, onOpenChange, onPrevie
 
             <Item variant="outline" className="flex-col items-stretch gap-4">
               <Tabs defaultValue="info" className="w-full">
-                <TabsList className="inline-flex h-9 mb-2 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground">
+                <TabsList className="mb-2 inline-flex h-9 items-center justify-center rounded-none bg-muted p-1 text-muted-foreground">
                   <TabsTrigger value="info" className="px-4">
                     {t("Info")}
                   </TabsTrigger>
@@ -496,42 +496,52 @@ export function ObjectInfo({ bucketName, objectKey, open, onOpenChange, onPrevie
                     {t("Metadata")}
                   </TabsTrigger>
                 </TabsList>
-                <TabsContent value="info" className="space-y-4 outline-none">
+                <TabsContent
+                  value="info"
+                  className="space-y-4 outline-none focus-visible:ring-1 focus-visible:ring-ring/50"
+                >
                   <ItemContent className="min-w-0 space-y-3 text-sm overflow-hidden">
                     <div className="flex items-center justify-between gap-3 min-w-0">
                       <span className="font-medium text-muted-foreground">{t("Object Name")}</span>
-                      <span className="flex-1 truncate text-right" title={String(object?.Key ?? "")}>
+                      <span className="flex-1 truncate text-end" title={String(object?.Key ?? "")}>
                         {String(object?.Key ?? "")}
                       </span>
                       <CopyButton value={String(object?.Key ?? "")} iconOnly />
                     </div>
                     <div className="flex items-center justify-between gap-3 min-w-0">
                       <span className="font-medium text-muted-foreground">{t("Object Size")}</span>
-                      <span className="max-w-[60%] truncate text-right" title={String(object?.ContentLength ?? "-")}>
+                      <span className="max-w-[60%] truncate text-end" title={String(object?.ContentLength ?? "-")}>
                         {String(object?.ContentLength ?? "-")}
                       </span>
                     </div>
                     <div className="flex items-center justify-between gap-3 min-w-0">
                       <span className="font-medium text-muted-foreground">{t("Object Type")}</span>
-                      <span className="max-w-[60%] truncate text-right" title={String(object?.ContentType ?? "")}>
+                      <span className="max-w-[60%] truncate text-end" title={String(object?.ContentType ?? "")}>
                         {String(object?.ContentType ?? "-")}
                       </span>
                     </div>
                     <div className="flex items-center justify-between gap-3 min-w-0">
                       <span className="font-medium text-muted-foreground">ETag</span>
-                      <span className="max-w-[60%] truncate text-right" title={String(object?.ETag ?? "-")}>
+                      <span className="max-w-[60%] truncate text-end" title={String(object?.ETag ?? "-")}>
                         {String(object?.ETag ?? "-")}
                       </span>
                     </div>
                     <div className="flex items-center justify-between gap-3 min-w-0">
                       <span className="font-medium text-muted-foreground">{t("Last Modified Time")}</span>
-                      <span className="max-w-[60%] truncate text-right" title={lastModified || "-"}>
+                      <span className="max-w-[60%] truncate text-end" title={lastModified || "-"}>
                         {lastModified || "-"}
                       </span>
                     </div>
                     <div className="flex items-center justify-between gap-3 min-w-0">
-                      <span className="font-medium text-muted-foreground">{t("Legal Hold")}</span>
-                      <Switch checked={lockStatus} onCheckedChange={toggleLegalHold} disabled={!canEditLegalHold} />
+                      <label htmlFor="object-legal-hold" className="font-medium text-muted-foreground">
+                        {t("Legal Hold")}
+                      </label>
+                      <Switch
+                        id="object-legal-hold"
+                        checked={lockStatus}
+                        onCheckedChange={toggleLegalHold}
+                        disabled={!canEditLegalHold}
+                      />
                     </div>
                     <div className="flex flex-col gap-2">
                       <span className="font-medium text-muted-foreground">
@@ -551,11 +561,14 @@ export function ObjectInfo({ bucketName, objectKey, open, onOpenChange, onPrevie
                     </div>
                   </ItemContent>
                 </TabsContent>
-                <TabsContent value="metadata" className="space-y-4 outline-none">
+                <TabsContent
+                  value="metadata"
+                  className="space-y-4 outline-none focus-visible:ring-1 focus-visible:ring-ring/50"
+                >
                   <ItemContent className="min-w-0 space-y-3 text-sm overflow-hidden">
                     <div className="flex items-center justify-between gap-3 min-w-0">
                       <span className="font-medium text-muted-foreground">{t("Content Type")}</span>
-                      <span className="max-w-[60%] truncate text-right" title={String(object?.ContentType ?? "")}>
+                      <span className="max-w-[60%] truncate text-end" title={String(object?.ContentType ?? "")}>
                         {String(object?.ContentType ?? "")}
                       </span>
                     </div>
@@ -564,7 +577,7 @@ export function ObjectInfo({ bucketName, objectKey, open, onOpenChange, onPrevie
                         <React.Fragment key={key}>
                           <div className="flex items-center justify-between gap-3 min-w-0">
                             <span className="font-medium text-muted-foreground">{t(key)}</span>
-                            <span className="max-w-[60%] truncate text-right" title={String(key)}>
+                            <span className="max-w-[60%] truncate text-end" title={String(key)}>
                               {String(value)}
                             </span>
                           </div>
@@ -579,9 +592,12 @@ export function ObjectInfo({ bucketName, objectKey, open, onOpenChange, onPrevie
                   <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
                     <div className="flex items-center gap-1.5 shrink-0">
                       <Input
+                        name="temporary-url-expiration-days"
                         type="number"
+                        inputMode="numeric"
                         min={0}
                         max={7}
+                        aria-label={t("Days")}
                         placeholder={t("Days")}
                         className="w-14 shrink-0"
                         value={expirationDays}
@@ -591,9 +607,12 @@ export function ObjectInfo({ bucketName, objectKey, open, onOpenChange, onPrevie
                     </div>
                     <div className="flex items-center gap-1.5 shrink-0">
                       <Input
+                        name="temporary-url-expiration-hours"
                         type="number"
+                        inputMode="numeric"
                         min={0}
                         max={expirationDays > 0 ? 23 : 24}
+                        aria-label={t("Hours")}
                         placeholder={t("Hours")}
                         className="w-14 shrink-0"
                         value={expirationHours}
@@ -603,9 +622,12 @@ export function ObjectInfo({ bucketName, objectKey, open, onOpenChange, onPrevie
                     </div>
                     <div className="flex items-center gap-1.5 shrink-0">
                       <Input
+                        name="temporary-url-expiration-minutes"
                         type="number"
+                        inputMode="numeric"
                         min={0}
                         max={59}
+                        aria-label={t("Minutes")}
                         placeholder={t("Minutes")}
                         className="w-14 shrink-0"
                         value={expirationMinutes}
@@ -634,7 +656,7 @@ export function ObjectInfo({ bucketName, objectKey, open, onOpenChange, onPrevie
                 <div className="flex flex-col gap-2 min-w-0 w-full">
                   <CopyInput value={signedUrl} readonly copyIcon className="min-w-0 flex-1" />
                   {signedUrl && (
-                    <div className="text-xs text-amber-600 mt-1">
+                    <div className="mt-1 text-xs text-muted-foreground">
                       {t("This link will expire when your session ends or at the specified time.")}
                     </div>
                   )}
@@ -653,15 +675,22 @@ export function ObjectInfo({ bucketName, objectKey, open, onOpenChange, onPrevie
           <div className="space-y-4">
             <div className="flex flex-wrap gap-2">
               {tags.map((tag) => (
-                <Badge key={tag.Key} variant="secondary" className="gap-1 pr-1">
-                  {tag.Key}: {tag.Value}
+                <Badge
+                  key={tag.Key}
+                  variant="secondary"
+                  className="h-auto max-w-full justify-start gap-1 pe-1 whitespace-normal"
+                >
+                  <span className="min-w-0 break-all" title={`${tag.Key}: ${tag.Value}`}>
+                    {tag.Key}: {tag.Value}
+                  </span>
                   {canEditObjectTags ? (
                     <button
                       type="button"
-                      className="hover:text-destructive transition-colors"
+                      aria-label={t("Delete Tag")}
+                      className="inline-flex size-6 shrink-0 items-center justify-center transition-colors hover:text-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50"
                       onClick={() => confirmDeleteTag(tag.Key)}
                     >
-                      <RiCloseLine className="size-3" />
+                      <RiCloseLine className="size-4" aria-hidden />
                     </button>
                   ) : null}
                 </Badge>
@@ -676,9 +705,11 @@ export function ObjectInfo({ bucketName, objectKey, open, onOpenChange, onPrevie
             >
               <div className="grid gap-4 sm:grid-cols-2">
                 <Field>
-                  <FieldLabel>{t("Tag Key")}</FieldLabel>
+                  <FieldLabel htmlFor="object-tag-key">{t("Tag Key")}</FieldLabel>
                   <FieldContent>
                     <Input
+                      id="object-tag-key"
+                      name="object-tag-key"
                       value={tagFormValue.Key}
                       onChange={(e) => setTagFormValue((v) => ({ ...v, Key: e.target.value }))}
                       placeholder={t("Tag Key Placeholder")}
@@ -687,9 +718,11 @@ export function ObjectInfo({ bucketName, objectKey, open, onOpenChange, onPrevie
                   </FieldContent>
                 </Field>
                 <Field>
-                  <FieldLabel>{t("Tag Value")}</FieldLabel>
+                  <FieldLabel htmlFor="object-tag-value">{t("Tag Value")}</FieldLabel>
                   <FieldContent>
                     <Input
+                      id="object-tag-value"
+                      name="object-tag-value"
                       value={tagFormValue.Value}
                       onChange={(e) =>
                         setTagFormValue((v) => ({
@@ -739,9 +772,14 @@ export function ObjectInfo({ bucketName, objectKey, open, onOpenChange, onPrevie
                     ].map((opt) => (
                       <label
                         key={opt.value}
-                        className="flex items-start gap-3 rounded-md border border-border/50 p-3 cursor-pointer"
+                        htmlFor={`object-retention-mode-${opt.value.toLowerCase()}`}
+                        className="flex items-start gap-3 border border-border/50 p-3 cursor-pointer"
                       >
-                        <RadioGroupItem value={opt.value} className="mt-0.5" />
+                        <RadioGroupItem
+                          id={`object-retention-mode-${opt.value.toLowerCase()}`}
+                          value={opt.value}
+                          className="mt-0.5"
+                        />
                         <span className="text-sm font-medium">{opt.label}</span>
                       </label>
                     ))}
diff --git a/components/object/list.tsx b/components/object/list.tsx
index 704dc42f..0c751381 100644
--- a/components/object/list.tsx
+++ b/components/object/list.tsx
@@ -39,7 +39,7 @@ import { useApi } from "@/contexts/api-context"
 import { useMessage } from "@/lib/feedback/message"
 import { exportFile } from "@/lib/export-file"
 import { getContentType } from "@/lib/mime-types"
-import { formatBytes } from "@/lib/functions"
+import { formatBytes, formatDateTime } from "@/lib/functions"
 import { normalizeDateToIso } from "@/lib/safe-date"
 import { buildBucketPath } from "@/lib/bucket-path"
 import {
@@ -66,7 +66,6 @@ import {
 import { TaskStatsButton } from "@/components/tasks/stats-button"
 import { useAddDeleteKeys, useAddDeleteFolder, useTasks } from "@/contexts/task-context"
 import type { ColumnDef } from "@tanstack/react-table"
-import dayjs from "dayjs"
 
 interface ObjectRow {
   Key: string
@@ -348,21 +347,21 @@ export function ObjectList({
             return (
               <Link
                 href={bucketPath(row.original.Key)}
-                className="flex items-center gap-2 text-blue-500 hover:underline"
+                className="flex min-w-0 max-w-full items-center gap-2 text-primary hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50"
               >
-                <RiFolderLine className="size-4" />
-                <span>{display}</span>
+                <RiFolderLine className="size-4 shrink-0" aria-hidden />
+                <span className="min-w-0 truncate">{display}</span>
               </Link>
             )
           }
           return (
             <button
               type="button"
-              className="flex items-center gap-2 text-primary hover:underline text-left"
+              className="flex min-w-0 max-w-full items-center gap-2 text-start text-primary hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50"
               onClick={() => onOpenInfo(bucket, row.original.Key)}
             >
-              <RiFileLine className="size-4" />
-              <span>{display}</span>
+              <RiFileLine className="size-4 shrink-0" aria-hidden />
+              <span className="min-w-0 truncate">{display}</span>
             </button>
           )
         },
@@ -382,8 +381,7 @@ export function ObjectList({
         id: "lastModified",
         header: () => t("Last Modified"),
         accessorFn: (row) => (row.type === "prefix" || !row.LastModified ? "" : new Date(row.LastModified).getTime()),
-        cell: ({ row }) =>
-          row.original.LastModified ? dayjs(row.original.LastModified).format("YYYY-MM-DD HH:mm:ss") : "-",
+        cell: ({ row }) => (row.original.LastModified ? formatDateTime(row.original.LastModified) : "-"),
       },
       {
         id: "actions",
@@ -401,13 +399,13 @@ export function ObjectList({
                       onPreview({ key: row.original.Key })
                     }}
                   >
-                    <RiEyeLine className="size-4" />
+                    <RiEyeLine className="size-4" aria-hidden />
                     <span>{t("Preview")}</span>
                   </Button>
                 ) : null}
                 {canCapability("objects.download", { bucket, objectKey: row.original.Key }) ? (
                   <Button variant="outline" size="sm" onClick={() => downloadFile(row.original.Key)}>
-                    <RiDownloadCloud2Line className="size-4" />
+                    <RiDownloadCloud2Line className="size-4" aria-hidden />
                     <span>{t("Download")}</span>
                   </Button>
                 ) : null}
@@ -415,7 +413,7 @@ export function ObjectList({
             ) : null}
             {canCapability("objects.delete", { bucket, objectKey: row.original.Key }) ? (
               <Button variant="outline" size="sm" onClick={() => openDeleteDialog([row.original.Key])}>
-                <RiDeleteBin5Line className="size-4" />
+                <RiDeleteBin5Line className="size-4" aria-hidden />
                 <span>{t("Delete")}</span>
               </Button>
             ) : null}
@@ -590,7 +588,7 @@ export function ObjectList({
             <TaskStatsButton />
             {canUpload ? (
               <Button variant="outline" onClick={onUploadClick}>
-                <RiFileAddLine className="size-4" />
+                <RiFileAddLine className="size-4" aria-hidden />
                 <span>
                   {t("Upload File")}/{t("Folder")}
                 </span>
@@ -600,13 +598,13 @@ export function ObjectList({
               <>
                 {canBulkDelete ? (
                   <Button variant="outline" className="text-destructive border-destructive" onClick={handleBatchDelete}>
-                    <RiDeleteBin5Line className="size-4" />
+                    <RiDeleteBin5Line className="size-4" aria-hidden />
                     <span>{t("Delete Selected")}</span>
                   </Button>
                 ) : null}
                 {canBulkDownload ? (
                   <Button variant="outline" onClick={downloadMultiple}>
-                    <RiDownloadCloud2Line className="size-4" />
+                    <RiDownloadCloud2Line className="size-4" aria-hidden />
                     <span>{t("Download")}</span>
                   </Button>
                 ) : null}
@@ -616,7 +614,7 @@ export function ObjectList({
               variant="outline"
               onClick={() => (onRefresh ? onRefresh() : void fetchObjects({ resetPagination: true }))}
             >
-              <RiRefreshLine className="size-4" />
+              <RiRefreshLine className="size-4" aria-hidden />
               <span>{t("Refresh")}</span>
             </Button>
           </>
@@ -630,8 +628,15 @@ export function ObjectList({
             clearable
             className="lg:max-w-sm"
           />
-          <label className="flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
-            <Checkbox checked={showDeleted} onCheckedChange={(v) => setShowDeleted(v === true)} />
+          <label
+            htmlFor="object-list-show-deleted"
+            className="flex items-center gap-2 text-sm text-muted-foreground cursor-pointer"
+          >
+            <Checkbox
+              id="object-list-show-deleted"
+              checked={showDeleted}
+              onCheckedChange={(v) => setShowDeleted(v === true)}
+            />
             <span>{t("Show Deleted Objects")}</span>
           </label>
         </div>
@@ -656,7 +661,7 @@ export function ObjectList({
           <div className="flex items-center gap-2">
             <span>{t("Rows per page")}</span>
             <Select value={String(resolvedPageSize)} onValueChange={(value) => handlePageSizeChange(value ?? "")}>
-              <SelectTrigger className="h-9 w-24">
+              <SelectTrigger className="h-9 w-24" aria-label={t("Rows per page")}>
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
@@ -671,12 +676,12 @@ export function ObjectList({
         </div>
         <div className="flex justify-end gap-2">
           <Button variant="outline" disabled={tokenHistory.length === 0} onClick={goToPreviousPage}>
-            <RiArrowLeftSLine className="me-2 size-4 rtl:-scale-x-100" />
+            <RiArrowLeftSLine className="me-2 size-4 rtl:-scale-x-100" aria-hidden />
             <span>{t("Previous Page")}</span>
           </Button>
           <Button variant="outline" disabled={!nextToken} onClick={goToNextPage}>
             <span>{t("Next Page")}</span>
-            <RiArrowRightSLine className="ms-2 size-4 rtl:-scale-x-100" />
+            <RiArrowRightSLine className="ms-2 size-4 rtl:-scale-x-100" aria-hidden />
           </Button>
         </div>
       </div>
@@ -688,8 +693,12 @@ export function ObjectList({
             <AlertDialogDescription>
               {t("Are you sure you want to delete the selected objects?")}
               {shouldShowDeleteAllVersions(bucketVersioningState) && (
-                <label className="mt-4 flex items-center gap-2">
-                  <Checkbox checked={deleteAllVersions} onCheckedChange={(v) => setDeleteAllVersions(v === true)} />
+                <label htmlFor="object-list-delete-all-versions" className="mt-4 flex items-center gap-2">
+                  <Checkbox
+                    id="object-list-delete-all-versions"
+                    checked={deleteAllVersions}
+                    onCheckedChange={(v) => setDeleteAllVersions(v === true)}
+                  />
                   <span>{t("Delete All Versions")}</span>
                 </label>
               )}
diff --git a/components/object/new-form.tsx b/components/object/new-form.tsx
index 46d8c8c5..47ccd6d5 100644
--- a/components/object/new-form.tsx
+++ b/components/object/new-form.tsx
@@ -65,10 +65,13 @@ export function ObjectNewForm({
             <AlertDescription>{t("Overwrite Warning")}</AlertDescription>
           </Alert>
           <Input
+            name="object-key"
             value={objectKey}
             onChange={(e) => setObjectKey(e.target.value)}
+            aria-label={t("Name Placeholder", { type: displayType })}
             placeholder={t("Name Placeholder", { type: displayType })}
             autoComplete="off"
+            spellCheck={false}
           />
         </div>
         <DialogFooter>
diff --git a/components/object/parquet-viewer.tsx b/components/object/parquet-viewer.tsx
index 5e30aeec..4aad2571 100644
--- a/components/object/parquet-viewer.tsx
+++ b/components/object/parquet-viewer.tsx
@@ -135,7 +135,7 @@ export function ParquetViewer({ url, sizeBytes }: ParquetViewerProps) {
 
   return (
     <div className="flex w-full min-w-0 max-h-[70vh] flex-1 flex-col gap-2">
-      <div className="min-h-0 w-full min-w-0 flex-1 overflow-auto rounded-md border">
+      <div className="min-h-0 w-full min-w-0 flex-1 overflow-auto border">
         <Table>
           <TableHeader className="sticky top-0 z-10 bg-background">
             <TableRow>
diff --git a/components/object/path-links.tsx b/components/object/path-links.tsx
index dab658d6..17887c9d 100644
--- a/components/object/path-links.tsx
+++ b/components/object/path-links.tsx
@@ -44,7 +44,7 @@ export function ObjectPathLinks({ objectKey, bucketName, onClick }: ObjectPathLi
     .map((item, index) => ({ value: item, index }))
 
   const displaySegments: Segment[] =
-    segments.length <= 6 ? segments : [...segments.slice(0, 3), { value: "...", index: -1 }, ...segments.slice(-3)]
+    segments.length <= 6 ? segments : [...segments.slice(0, 3), { value: "…", index: -1 }, ...segments.slice(-3)]
 
   const handleClick = (segment: Segment) => {
     if (segment.index === -1) return
@@ -56,24 +56,32 @@ export function ObjectPathLinks({ objectKey, bucketName, onClick }: ObjectPathLi
   }
 
   return (
-    <div className="flex items-center gap-2">
-      <div className="flex items-center">
+    <div className="flex min-w-0 flex-wrap items-center gap-2">
+      <div className="flex min-w-0 flex-wrap items-center">
         {displaySegments.map((segment) => (
           <React.Fragment key={segment.index}>
             <span className="text-muted-foreground">&nbsp;/&nbsp;</span>
-            <button
-              type="button"
-              onClick={() => handleClick(segment)}
-              className={segment.index > -1 ? "text-blue-500 hover:underline" : "cursor-default"}
-            >
-              {segment.value}
-            </button>
+            {segment.index > -1 ? (
+              <button
+                type="button"
+                onClick={() => handleClick(segment)}
+                className="max-w-full break-all text-start text-primary hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50"
+              >
+                {segment.value}
+              </button>
+            ) : (
+              <span className="break-all text-muted-foreground">{segment.value}</span>
+            )}
           </React.Fragment>
         ))}
       </div>
       {objectKey ? (
         <Button variant="ghost" size="sm" className="shrink-0" onClick={copy} title={t("Copy Path")}>
-          {copied ? <RiCheckLine className="size-4 text-green-600" /> : <RiFileCopyLine className="size-4" />}
+          {copied ? (
+            <RiCheckLine className="size-4 text-primary" aria-hidden />
+          ) : (
+            <RiFileCopyLine className="size-4" aria-hidden />
+          )}
           <span className="sr-only">{t("Copy Path")}</span>
         </Button>
       ) : null}
diff --git a/components/object/pdf-viewer.tsx b/components/object/pdf-viewer.tsx
index ebde65c5..1d404358 100644
--- a/components/object/pdf-viewer.tsx
+++ b/components/object/pdf-viewer.tsx
@@ -27,7 +27,7 @@ export function PdfViewer({ url }: PdfViewerProps) {
   }
 
   return (
-    <div className="relative h-[70vh] w-full overflow-hidden rounded-md bg-muted/20 p-3">
+    <div className="relative h-[70vh] w-full overflow-hidden bg-muted/20 p-3">
       {loading && !loadError ? (
         <div className="absolute inset-0 z-10 flex items-center justify-center">
           <Spinner className="size-8 text-muted-foreground" />
@@ -40,7 +40,7 @@ export function PdfViewer({ url }: PdfViewerProps) {
           key={url}
           src={url}
           title={t("Preview")}
-          className="h-full w-full rounded-md border-0 bg-background"
+          className="h-full w-full border-0 bg-background"
           onLoad={() => {
             setLoading(false)
             setLoadError(null)
@@ -57,7 +57,7 @@ export function PdfViewer({ url }: PdfViewerProps) {
       )}
       {loading ? (
         <div className="sr-only" aria-live="polite">
-          {t("Loading...")}
+          {t("Loading…")}
         </div>
       ) : null}
       <noscript>
diff --git a/components/object/preview-modal.tsx b/components/object/preview-modal.tsx
index 0dc8bbcd..31ad295b 100644
--- a/components/object/preview-modal.tsx
+++ b/components/object/preview-modal.tsx
@@ -288,7 +288,7 @@ export function ObjectPreviewModal({ show, onShowChange, object }: ObjectPreview
         return (
           <div
             ref={imagePreviewRef}
-            className={`relative flex overflow-hidden ${isImageFullscreen ? "h-screen w-screen bg-black" : "flex-1 min-h-0 rounded-md bg-muted/20"}`}
+            className={`relative flex overflow-hidden ${isImageFullscreen ? "h-screen w-screen bg-black" : "flex-1 min-h-0 bg-muted/20"}`}
           >
             <div className="absolute end-2 top-2 z-10 flex items-center gap-1 border bg-background/90 p-1 backdrop-blur-xs">
               <Button
@@ -299,14 +299,18 @@ export function ObjectPreviewModal({ show, onShowChange, object }: ObjectPreview
                 aria-label={isImageFullscreen ? t("Exit Fullscreen") : t("Fullscreen")}
                 title={isImageFullscreen ? t("Exit Fullscreen") : t("Fullscreen")}
               >
-                {isImageFullscreen ? <RiFullscreenExitLine /> : <RiFullscreenLine />}
+                {isImageFullscreen ? (
+                  <RiFullscreenExitLine className="size-3" aria-hidden />
+                ) : (
+                  <RiFullscreenLine className="size-3" aria-hidden />
+                )}
               </Button>
             </div>
             <div ref={imageViewportRef} className="h-full w-full overflow-auto p-2">
               <div className="flex min-h-full min-w-full items-center justify-center">
                 <div
                   className={cn(
-                    "shrink-0 flex items-center justify-center transition-opacity",
+                    "relative flex shrink-0 items-center justify-center transition-opacity",
                     imageLayoutReady ? "opacity-100" : "opacity-0",
                   )}
                   style={
@@ -321,11 +325,11 @@ export function ObjectPreviewModal({ show, onShowChange, object }: ObjectPreview
                   <Image
                     src={previewUrl}
                     alt={objectKey || t("Preview")}
+                    fill
+                    sizes="100vw"
+                    unoptimized
                     referrerPolicy="no-referrer"
-                    className={cn(
-                      imageNaturalSize ? "h-full w-full" : "max-h-full max-w-full",
-                      "object-contain cursor-zoom-in",
-                    )}
+                    className="cursor-zoom-in object-contain"
                     onLoad={(event) => {
                       const nextSize = {
                         width: event.currentTarget.naturalWidth || event.currentTarget.clientWidth,
@@ -382,7 +386,7 @@ export function ObjectPreviewModal({ show, onShowChange, object }: ObjectPreview
         </DialogHeader>
         <div
           className={cn(
-            "min-h-[300px] min-w-0 rounded-md border p-4",
+            "min-h-[300px] min-w-0 border p-4",
             isSelfScrollMode ? "flex max-h-[70vh] flex-col overflow-hidden" : "flex flex-col",
           )}
         >
diff --git a/components/object/upload-picker.tsx b/components/object/upload-picker.tsx
index 89aff061..223c7ff5 100644
--- a/components/object/upload-picker.tsx
+++ b/components/object/upload-picker.tsx
@@ -6,7 +6,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/u
 import { Input } from "@/components/ui/input"
 import { Progress } from "@/components/ui/progress"
 import { useAddUploadFiles, useTaskPanelOpen } from "@/contexts/task-context"
-import { formatBytes } from "@/lib/functions"
+import { formatBytes, formatInteger } from "@/lib/functions"
 import { useMessage } from "@/lib/feedback/message"
 import { buildUploadObjectKey, normalizeUploadPrefix } from "@/lib/object-upload"
 import { RiDeleteBinLine, RiFileAddLine, RiFolderAddLine, RiUploadCloudLine } from "@remixicon/react"
@@ -119,7 +119,7 @@ function FileListVirtualized({
       <div className="flex shrink-0 border-b bg-muted text-xs uppercase text-muted-foreground">
         <div className="min-w-0 flex-1 px-3 py-2 font-medium">{t("Name")}</div>
         <div className="w-28 shrink-0 px-3 py-2 font-medium">{t("Size")}</div>
-        <div className="w-24 shrink-0 px-3 py-2 text-right font-medium">{t("Actions")}</div>
+        <div className="w-24 shrink-0 px-3 py-2 text-end font-medium">{t("Actions")}</div>
       </div>
       <div ref={parentRef} className="min-h-64 min-w-0 flex-1 overflow-auto" style={{ contain: "strict" }}>
         <div
@@ -134,7 +134,7 @@ function FileListVirtualized({
             return (
               <div
                 key={`${item.relativePath}-${virtualRow.index}`}
-                className="absolute left-0 top-0 flex w-full border-b last:border-b-0"
+                className="absolute start-0 top-0 flex w-full border-b last:border-b-0"
                 style={{
                   height: `${virtualRow.size}px`,
                   transform: `translateY(${virtualRow.start}px)`,
@@ -144,14 +144,14 @@ function FileListVirtualized({
                   {item.relativePath}
                 </div>
                 <div className="w-28 shrink-0 px-3 py-2 text-muted-foreground">{formatBytes(item.file.size)}</div>
-                <div className="w-24 shrink-0 px-3 py-2 text-right">
+                <div className="w-24 shrink-0 px-3 py-2 text-end">
                   <Button
                     variant="ghost"
                     size="sm"
                     className="h-auto px-2"
                     onClick={() => removeItem(virtualRow.index)}
                   >
-                    <RiDeleteBinLine className="size-4" />
+                    <RiDeleteBinLine className="size-4" aria-hidden />
                     {t("Delete")}
                   </Button>
                 </div>
@@ -449,16 +449,26 @@ export function ObjectUploadPicker({
 
   return (
     <Dialog open={show} onOpenChange={onShowChange} disablePointerDismissal>
-      <DialogContent className="sm:max-w-2xl max-h-[90vh] flex flex-col overflow-hidden">
+      <DialogContent className="flex max-h-[90vh] flex-col overflow-hidden sm:max-w-2xl">
         <DialogHeader>
           <DialogTitle>{t("Upload File")}</DialogTitle>
         </DialogHeader>
         <div className="flex min-h-0 flex-1 flex-col gap-5 overflow-hidden">
-          <input ref={fileInputRef} type="file" multiple className="hidden" onChange={handleFileSelect} />
+          <input
+            ref={fileInputRef}
+            type="file"
+            name="upload-files"
+            multiple
+            className="hidden"
+            aria-label={t("Select File")}
+            onChange={handleFileSelect}
+          />
           <input
             ref={folderInputRef}
             type="file"
+            name="upload-folder"
             className="hidden"
+            aria-label={t("Select Folder")}
             {...({
               webkitdirectory: "",
               directory: "",
@@ -474,11 +484,15 @@ export function ObjectUploadPicker({
               <div className="flex items-center gap-2">
                 <span className="shrink-0 text-xs text-muted-foreground">{t("Current Prefix")}:</span>
                 <Input
+                  name="upload-prefix"
                   value={editablePrefix}
                   onChange={(e) => setEditablePrefix(e.target.value)}
+                  aria-label={t("Current Prefix")}
                   className="h-7 py-1 px-2 text-xs"
-                  placeholder={t("Enter prefix...")}
+                  placeholder={t("Enter prefix…")}
+                  autoComplete="off"
                   disabled={!canUpload || isAdding || isFolderLoading}
+                  spellCheck={false}
                 />
               </div>
             </div>
@@ -489,7 +503,7 @@ export function ObjectUploadPicker({
                 disabled={!canUpload || isAdding || isFolderLoading}
                 onClick={selectFile}
               >
-                <RiFileAddLine className="size-4" />
+                <RiFileAddLine className="size-4" aria-hidden />
                 {t("Select File")}
               </Button>
               <Button
@@ -498,18 +512,18 @@ export function ObjectUploadPicker({
                 disabled={!canUpload || isAdding || isFolderLoading}
                 onClick={selectFolder}
               >
-                <RiFolderAddLine className="size-4" />
+                <RiFolderAddLine className="size-4" aria-hidden />
                 {t("Select Folder")}
               </Button>
             </div>
           </div>
 
-          <Alert className="border-sky-200 bg-sky-50 text-sky-900 dark:border-sky-500/30 dark:bg-sky-500/10 dark:text-sky-100">
+          <Alert>
             <AlertDescription>{t("Overwrite Warning")}</AlertDescription>
           </Alert>
 
           {isMemoryWarning && (
-            <Alert className="border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-100">
+            <Alert variant="destructive">
               <AlertDescription>
                 {t("Large File Count Warning", {
                   count: items.length,
@@ -520,7 +534,7 @@ export function ObjectUploadPicker({
           )}
 
           <div
-            className={`min-h-0 min-w-0 flex flex-col overflow-hidden rounded-md border transition-colors ${
+            className={`min-h-0 min-w-0 flex flex-col overflow-hidden border transition-colors ${
               isDragOver ? "border-primary bg-primary/5" : ""
             }`}
             onDragEnter={handleDragEnter}
@@ -532,7 +546,7 @@ export function ObjectUploadPicker({
               <div className="text-sm text-muted-foreground">
                 {items.length > 0 && (
                   <p>
-                    {t("Total Files")}: {items.length.toLocaleString()} / {MAX_FILES_LIMIT.toLocaleString()}
+                    {t("Total Files")}: {formatInteger(items.length)} / {formatInteger(MAX_FILES_LIMIT)}
                   </p>
                 )}
               </div>
@@ -542,21 +556,21 @@ export function ObjectUploadPicker({
                 disabled={!canUpload || !items.length || isAdding || isFolderLoading}
                 onClick={clearAllFiles}
               >
-                <RiDeleteBinLine className="size-4" />
+                <RiDeleteBinLine className="size-4" aria-hidden />
                 {t("Clear All")}
               </Button>
             </div>
 
             {items.length === 0 ? (
               <div className="flex flex-col items-center justify-center gap-4 p-6 text-center">
-                <RiUploadCloudLine className="size-12 text-muted-foreground" />
+                <RiUploadCloudLine className="size-12 text-muted-foreground" aria-hidden />
                 <p className="text-base font-medium text-muted-foreground">{t("No Selection")}</p>
                 <p className="max-w-[320px] text-xs text-muted-foreground">
                   {t("Chrome and Firefox support drag and drop to this area and selecting multiple files or folders.")}
                   <br />
                   {t("Single file supports up to 512GB, use CLI for larger files.")}
                   <br />
-                  {t("Up to {max} files per upload", { max: MAX_FILES_LIMIT.toLocaleString() })}
+                  {t("Up to {max} files per upload", { max: formatInteger(MAX_FILES_LIMIT) })}
                 </p>
               </div>
             ) : (
@@ -564,7 +578,7 @@ export function ObjectUploadPicker({
             )}
 
             {isFolderLoading && (
-              <div className="space-y-2 rounded-md border border-dashed p-3">
+              <div className="space-y-2 border border-dashed p-3">
                 <div className="flex items-center justify-between text-xs text-muted-foreground">
                   <span>{t("Reading Folder Files")}</span>
                   <span>{folderLoadingProgress}%</span>
@@ -574,7 +588,7 @@ export function ObjectUploadPicker({
             )}
 
             {isAdding && (
-              <div className="space-y-2 rounded-md border border-dashed p-3">
+              <div className="space-y-2 border border-dashed p-3">
                 <div className="flex items-center justify-between text-xs text-muted-foreground">
                   <span>{t("Adding to Upload Queue")}</span>
                   <span>{addProgress}%</span>
diff --git a/components/object/versions.tsx b/components/object/versions.tsx
index 6bf7b434..515134a1 100644
--- a/components/object/versions.tsx
+++ b/components/object/versions.tsx
@@ -13,12 +13,11 @@ import { useMessage } from "@/lib/feedback/message"
 import { copyToClipboard } from "@/lib/clipboard"
 import { exportFile } from "@/lib/export-file"
 import { getContentType } from "@/lib/mime-types"
-import { formatBytes } from "@/lib/functions"
+import { formatBytes, formatDateTime } from "@/lib/functions"
 import { GetObjectCommand } from "@aws-sdk/client-s3"
 import { getSignedUrl } from "@aws-sdk/s3-request-presigner"
 import { useS3 } from "@/contexts/s3-context"
 import type { ColumnDef } from "@tanstack/react-table"
-import dayjs from "dayjs"
 
 interface VersionRow {
   VersionId?: string
@@ -140,16 +139,19 @@ export function ObjectVersions({
         cell: ({ row }) => {
           const versionId = row.original.VersionId ?? ""
           return (
-            <div className="flex items-center gap-2">
-              <span className="font-mono text-sm">{versionId}</span>
+            <div className="flex min-w-0 items-center gap-2">
+              <span className="min-w-0 truncate font-mono text-sm" title={versionId}>
+                {versionId}
+              </span>
               <Button
                 variant="ghost"
-                size="sm"
-                className="h-6 w-6 p-0 shrink-0"
+                size="icon-xs"
+                className="shrink-0"
                 onClick={() => copyVersionId(versionId)}
                 title={t("Copy")}
+                aria-label={t("Copy")}
               >
-                <RiFileCopyLine className="size-3.5" />
+                <RiFileCopyLine className="size-3" aria-hidden />
               </Button>
             </div>
           )
@@ -158,8 +160,7 @@ export function ObjectVersions({
       {
         id: "lastModified",
         header: () => t("LastModified"),
-        cell: ({ row }) =>
-          row.original.LastModified ? dayjs(row.original.LastModified).format("YYYY-MM-DD HH:mm:ss") : "",
+        cell: ({ row }) => (row.original.LastModified ? formatDateTime(row.original.LastModified) : ""),
       },
       {
         id: "size",
@@ -179,13 +180,13 @@ export function ObjectVersions({
             <div className="flex gap-2">
               {canCapability("objects.version.view", objectContext) ? (
                 <Button variant="outline" size="sm" onClick={() => onPreview(row.original.VersionId ?? "")}>
-                  <RiEyeLine className="size-4" />
+                  <RiEyeLine className="size-4" aria-hidden />
                   {t("Preview")}
                 </Button>
               ) : null}
               {canCapability("objects.download", objectContext) ? (
                 <Button variant="outline" size="sm" onClick={() => downloadVersion(row.original)}>
-                  <RiDownloadCloud2Line className="size-4" />
+                  <RiDownloadCloud2Line className="size-4" aria-hidden />
                   {t("Download")}
                 </Button>
               ) : null}
@@ -196,7 +197,7 @@ export function ObjectVersions({
                   className="text-white"
                   onClick={() => deleteVersion(row.original)}
                 >
-                  <RiDeleteBin5Line className="size-4" />
+                  <RiDeleteBin5Line className="size-4" aria-hidden />
                   {t("Delete")}
                 </Button>
               ) : null}
@@ -215,7 +216,7 @@ export function ObjectVersions({
 
   return (
     <Dialog open={visible} onOpenChange={(open) => !open && onClose()} disablePointerDismissal>
-      <DialogContent className="sm:max-w-4xl max-h-[80vh] overflow-auto">
+      <DialogContent className="max-h-[80vh] overflow-y-auto overflow-x-hidden sm:max-w-4xl">
         <DialogHeader>
           <DialogTitle>{t("Object Versions")}</DialogTitle>
         </DialogHeader>
diff --git a/components/object/view.tsx b/components/object/view.tsx
index 8f2e4cb6..ca8d2b1f 100644
--- a/components/object/view.tsx
+++ b/components/object/view.tsx
@@ -56,7 +56,7 @@ export function ObjectView({ bucketName, objectKey }: ObjectViewProps) {
     <div className="space-y-4">
       <div className="flex flex-wrap items-center gap-2">
         <Button variant="outline" size="sm" onClick={download}>
-          <RiDownloadLine className="size-4" />
+          <RiDownloadLine className="size-4" aria-hidden />
           {t("Download")}
         </Button>
       </div>
diff --git a/components/oidc/form.tsx b/components/oidc/form.tsx
index 9cf51d4a..58da742a 100644
--- a/components/oidc/form.tsx
+++ b/components/oidc/form.tsx
@@ -58,7 +58,7 @@ export function OidcForm({
   const showRedirectUri = !values.redirect_uri_dynamic
 
   return (
-    <div className="space-y-4 rounded-md border p-4 md:p-6">
+    <div className="space-y-4 border p-4 md:p-6">
       <div className="flex flex-col gap-3 border-b pb-4 md:flex-row md:items-start md:justify-between">
         <div className="space-y-2">
           <div className="flex flex-wrap items-center gap-2">
@@ -84,12 +84,12 @@ export function OidcForm({
         <div className="flex flex-wrap gap-2">
           {isCreateMode && !isReadOnly ? (
             <Button type="button" variant="outline" onClick={onValidate} disabled={isValidating || isSaving}>
-              {isValidating ? t("Validating...") : t("Validate")}
+              {isValidating ? t("Validating…") : t("Validate")}
             </Button>
           ) : null}
           {!isReadOnly ? (
             <Button type="button" onClick={onSave} disabled={isSaving || isValidating}>
-              {isSaving ? t("Saving...") : t("Save")}
+              {isSaving ? t("Saving…") : t("Save")}
             </Button>
           ) : null}
           {!isCreateMode && !isReadOnly ? (
@@ -142,9 +142,12 @@ export function OidcForm({
           <FieldContent>
             <Input
               id="provider_id"
+              name="provider_id"
               value={values.provider_id}
               onChange={(event) => onChange("provider_id", event.target.value)}
+              autoComplete="off"
               placeholder={t("Provider ID")}
+              spellCheck={false}
               disabled={!isCreateMode || isReadOnly}
             />
           </FieldContent>
@@ -152,12 +155,13 @@ export function OidcForm({
           <FieldError>{errors.provider_id}</FieldError>
         </Field>
 
-        <Field orientation="responsive" className="items-start gap-3 rounded-md border p-3">
+        <Field orientation="responsive" className="items-start gap-3 border p-3">
           <FieldLabel htmlFor="enabled">{t("Enabled")}</FieldLabel>
           <FieldContent className="gap-2">
             <div className="flex items-center gap-3">
               <Switch
                 id="enabled"
+                name="enabled"
                 checked={values.enabled}
                 onCheckedChange={(checked) => onChange("enabled", checked)}
                 disabled={isReadOnly}
@@ -172,8 +176,10 @@ export function OidcForm({
           <FieldContent>
             <Input
               id="display_name"
+              name="display_name"
               value={values.display_name}
               onChange={(event) => onChange("display_name", event.target.value)}
+              autoComplete="off"
               placeholder={t("Display Name")}
               disabled={isReadOnly}
             />
@@ -185,9 +191,13 @@ export function OidcForm({
           <FieldContent>
             <Input
               id="config_url"
+              name="config_url"
+              type="url"
               value={values.config_url}
               onChange={(event) => onChange("config_url", event.target.value)}
+              autoComplete="off"
               placeholder="https://idp.example.com/.well-known/openid-configuration"
+              spellCheck={false}
               disabled={isReadOnly}
             />
           </FieldContent>
@@ -199,9 +209,12 @@ export function OidcForm({
           <FieldContent>
             <Input
               id="client_id"
+              name="client_id"
               value={values.client_id}
               onChange={(event) => onChange("client_id", event.target.value)}
+              autoComplete="off"
               placeholder={t("Client ID")}
+              spellCheck={false}
               disabled={isReadOnly}
             />
           </FieldContent>
@@ -213,10 +226,13 @@ export function OidcForm({
           <FieldContent>
             <Input
               id="client_secret"
+              name="client_secret"
               type="password"
               value={values.client_secret}
               onChange={(event) => onChange("client_secret", event.target.value)}
+              autoComplete="new-password"
               placeholder={isCreateMode ? t("Client Secret") : t("Leave empty to keep current secret")}
+              spellCheck={false}
               disabled={isReadOnly}
             />
           </FieldContent>
@@ -236,9 +252,12 @@ export function OidcForm({
           <FieldContent>
             <Input
               id="scopes"
+              name="scopes"
               value={values.scopes}
               onChange={(event) => onChange("scopes", event.target.value)}
+              autoComplete="off"
               placeholder="openid,profile,email"
+              spellCheck={false}
               disabled={isReadOnly}
             />
           </FieldContent>
@@ -251,9 +270,12 @@ export function OidcForm({
           <FieldContent>
             <Input
               id="other_audiences"
+              name="other_audiences"
               value={values.other_audiences}
               onChange={(event) => onChange("other_audiences", event.target.value)}
+              autoComplete="off"
               placeholder=""
+              spellCheck={false}
               disabled={isReadOnly}
             />
           </FieldContent>
@@ -261,12 +283,13 @@ export function OidcForm({
           <FieldError>{errors.other_audiences}</FieldError>
         </Field>
 
-        <Field orientation="responsive" className="items-start gap-3 rounded-md border p-3">
+        <Field orientation="responsive" className="items-start gap-3 border p-3">
           <FieldLabel htmlFor="redirect_uri_dynamic">{t("Use Dynamic Redirect URI")}</FieldLabel>
           <FieldContent className="gap-2">
             <div className="flex items-center gap-3">
               <Switch
                 id="redirect_uri_dynamic"
+                name="redirect_uri_dynamic"
                 checked={values.redirect_uri_dynamic}
                 onCheckedChange={(checked) => onChange("redirect_uri_dynamic", checked)}
                 disabled={isReadOnly}
@@ -288,9 +311,13 @@ export function OidcForm({
           <FieldContent>
             <Input
               id="redirect_uri"
+              name="redirect_uri"
+              type="url"
               value={values.redirect_uri}
               onChange={(event) => onChange("redirect_uri", event.target.value)}
+              autoComplete="off"
               placeholder="https://rustfs.example.com/rustfs/admin/v3/oidc/callback/default"
+              spellCheck={false}
               disabled={isReadOnly || !showRedirectUri}
             />
           </FieldContent>
@@ -307,9 +334,12 @@ export function OidcForm({
           <FieldContent>
             <Input
               id="claim_name"
+              name="claim_name"
               value={values.claim_name}
               onChange={(event) => onChange("claim_name", event.target.value)}
+              autoComplete="off"
               placeholder={t("Claim Name")}
+              spellCheck={false}
               disabled={isReadOnly}
             />
           </FieldContent>
@@ -320,9 +350,12 @@ export function OidcForm({
           <FieldContent>
             <Input
               id="claim_prefix"
+              name="claim_prefix"
               value={values.claim_prefix}
               onChange={(event) => onChange("claim_prefix", event.target.value)}
+              autoComplete="off"
               placeholder={t("Claim Prefix")}
+              spellCheck={false}
               disabled={isReadOnly}
             />
           </FieldContent>
@@ -333,9 +366,12 @@ export function OidcForm({
           <FieldContent>
             <Input
               id="role_policy"
+              name="role_policy"
               value={values.role_policy}
               onChange={(event) => onChange("role_policy", event.target.value)}
+              autoComplete="off"
               placeholder={t("Role Policy")}
+              spellCheck={false}
               disabled={isReadOnly}
             />
           </FieldContent>
@@ -349,9 +385,12 @@ export function OidcForm({
           <FieldContent>
             <Input
               id="groups_claim"
+              name="groups_claim"
               value={values.groups_claim}
               onChange={(event) => onChange("groups_claim", event.target.value)}
+              autoComplete="off"
               placeholder={t("Groups Claim")}
+              spellCheck={false}
               disabled={isReadOnly}
             />
           </FieldContent>
@@ -362,9 +401,12 @@ export function OidcForm({
           <FieldContent>
             <Input
               id="roles_claim"
+              name="roles_claim"
               value={values.roles_claim}
               onChange={(event) => onChange("roles_claim", event.target.value)}
+              autoComplete="off"
               placeholder="roles"
+              spellCheck={false}
               disabled={isReadOnly}
             />
           </FieldContent>
@@ -378,9 +420,12 @@ export function OidcForm({
           <FieldContent>
             <Input
               id="email_claim"
+              name="email_claim"
               value={values.email_claim}
               onChange={(event) => onChange("email_claim", event.target.value)}
+              autoComplete="off"
               placeholder={t("Email Claim")}
+              spellCheck={false}
               disabled={isReadOnly}
             />
           </FieldContent>
@@ -391,9 +436,12 @@ export function OidcForm({
           <FieldContent>
             <Input
               id="username_claim"
+              name="username_claim"
               value={values.username_claim}
               onChange={(event) => onChange("username_claim", event.target.value)}
+              autoComplete="off"
               placeholder={t("Username Claim")}
+              spellCheck={false}
               disabled={isReadOnly}
             />
           </FieldContent>
diff --git a/components/oidc/provider-list.tsx b/components/oidc/provider-list.tsx
index 3aabb7b4..03d68ba3 100644
--- a/components/oidc/provider-list.tsx
+++ b/components/oidc/provider-list.tsx
@@ -32,7 +32,7 @@ export function ProviderList({
   const { t } = useTranslation()
 
   return (
-    <div className="flex h-full min-h-[28rem] flex-col rounded-md border">
+    <div className="flex h-full min-h-[28rem] flex-col border">
       <div className="flex items-center justify-between gap-3 border-b px-4 py-3">
         <div className="min-w-0">
           <h2 className="text-sm font-semibold">{t("OIDC Providers")}</h2>
@@ -40,7 +40,7 @@ export function ProviderList({
         </div>
         {canAddProvider ? (
           <Button type="button" variant="outline" size="sm" onClick={onAddProvider}>
-            <RiAddLine className="size-4" />
+            <RiAddLine className="size-4" aria-hidden />
             {t("Add Provider")}
           </Button>
         ) : null}
@@ -50,7 +50,7 @@ export function ProviderList({
         {loading ? (
           <div className="flex flex-1 items-center justify-center gap-2 px-4 py-8 text-sm text-muted-foreground">
             <Spinner className="size-4" />
-            <span>{t("Loading...")}</span>
+            <span>{t("Loading…")}</span>
           </div>
         ) : providers.length === 0 ? (
           <div className="flex flex-1 items-center justify-center px-4 py-8 text-center text-sm text-muted-foreground">
@@ -66,9 +66,10 @@ export function ProviderList({
                 <button
                   key={provider.provider_id}
                   type="button"
+                  aria-pressed={selected}
                   onClick={() => onSelectProvider(provider.provider_id)}
                   className={cn(
-                    "flex flex-col items-start gap-2 border-b px-4 py-3 text-left transition-colors last:border-b-0 hover:bg-muted/40",
+                    "flex flex-col items-start gap-2 border-b px-4 py-3 text-start transition-colors last:border-b-0 hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50",
                     selected && "bg-muted/60",
                   )}
                 >
diff --git a/components/page-header.tsx b/components/page-header.tsx
index b495219e..c4c2839e 100644
--- a/components/page-header.tsx
+++ b/components/page-header.tsx
@@ -14,12 +14,19 @@ export function PageHeader({
   className?: string
 }) {
   return (
-    <div className={cn("sticky bg-background top-0 z-5 flex flex-col justify-between gap-2 lg:flex-row", className)}>
-      <div className="space-y-2">
+    <div
+      className={cn(
+        "sticky top-0 z-10 flex flex-col justify-between gap-3 bg-background/95 py-2 backdrop-blur lg:flex-row lg:items-start",
+        className,
+      )}
+    >
+      <div className="min-w-0 space-y-2 [&_h1]:text-pretty [&_h1]:break-words [&_h2]:text-pretty [&_h2]:break-words">
         {children}
-        {description}
+        {description && <div className="max-w-3xl text-pretty break-words">{description}</div>}
       </div>
-      {actions && <div className="flex flex-1 flex-wrap items-center justify-end gap-2">{actions}</div>}
+      {actions && (
+        <div className="flex w-full flex-wrap items-center gap-2 lg:w-auto lg:flex-1 lg:justify-end">{actions}</div>
+      )}
     </div>
   )
 }
diff --git a/components/policies/form.tsx b/components/policies/form.tsx
index c48e2386..aef7eaee 100644
--- a/components/policies/form.tsx
+++ b/components/policies/form.tsx
@@ -114,7 +114,14 @@ export function PolicyForm({ show, onShowChange, policy, onSaved }: PolicyFormPr
           <Field>
             <FieldLabel htmlFor="policy-name">{t("Policy Name")}</FieldLabel>
             <FieldContent>
-              <Input id="policy-name" value={name} onChange={(e) => setName(e.target.value)} autoComplete="off" />
+              <Input
+                id="policy-name"
+                name="policy-name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                autoComplete="off"
+                spellCheck={false}
+              />
             </FieldContent>
             {errors.name && <FieldDescription className="text-destructive">{errors.name}</FieldDescription>}
           </Field>
@@ -122,12 +129,14 @@ export function PolicyForm({ show, onShowChange, policy, onSaved }: PolicyFormPr
           <Field>
             <FieldLabel htmlFor="policy-content">{t("Policy Original")}</FieldLabel>
             <FieldContent>
-              <div className="max-h-[60vh] overflow-auto rounded-md border">
+              <div className="max-h-[60vh] overflow-auto border">
                 <Textarea
                   id="policy-content"
+                  name="policy-content"
                   value={content}
                   onChange={(e) => setContent(e.target.value)}
                   className="min-h-[200px] font-mono text-xs"
+                  spellCheck={false}
                 />
               </div>
             </FieldContent>
diff --git a/components/pools/overview.tsx b/components/pools/overview.tsx
index d48e82d5..57cdbdef 100644
--- a/components/pools/overview.tsx
+++ b/components/pools/overview.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-import { niceBytes } from "@/lib/functions"
+import { formatDateTime, formatInteger, niceBytes } from "@/lib/functions"
 import type { PoolsOverview } from "@/lib/pool-operations"
 
 function Stat({ label, value }: { label: string; value: string }) {
@@ -21,20 +21,10 @@ function formatBytesValue(value?: number) {
   return value === undefined ? "--" : niceBytes(String(value))
 }
 
-function formatNumberValue(value?: number) {
-  return value === undefined ? "--" : value.toLocaleString()
-}
-
 function formatPercentValue(value?: number) {
   return value === undefined ? "--" : `${value.toFixed(2)}%`
 }
 
-function formatDateTime(value?: string) {
-  if (!value) return "--"
-  const date = new Date(value)
-  return Number.isNaN(date.getTime()) ? value : date.toLocaleString()
-}
-
 export function PoolsOverviewCard({
   overview,
   operationLabel,
@@ -128,8 +118,8 @@ export function PoolsOverviewCard({
                         <TableCell>{pool.decommission.complete ? t("Yes") : t("No")}</TableCell>
                         <TableCell>{pool.decommission.failed ? t("Yes") : t("No")}</TableCell>
                         <TableCell>{pool.decommission.canceled ? t("Yes") : t("No")}</TableCell>
-                        <TableCell>{formatNumberValue(pool.decommission.objects)}</TableCell>
-                        <TableCell>{formatNumberValue(pool.decommission.objectsFailed)}</TableCell>
+                        <TableCell>{formatInteger(pool.decommission.objects)}</TableCell>
+                        <TableCell>{formatInteger(pool.decommission.objectsFailed)}</TableCell>
                         <TableCell>{formatBytesValue(pool.decommission.bytes)}</TableCell>
                         <TableCell>{formatBytesValue(pool.decommission.bytesFailed)}</TableCell>
                       </>
diff --git a/components/providers/app-ui-provider.tsx b/components/providers/app-ui-provider.tsx
index 2ff0809a..915da104 100644
--- a/components/providers/app-ui-provider.tsx
+++ b/components/providers/app-ui-provider.tsx
@@ -4,11 +4,13 @@ import { Toaster } from "@/components/ui/sonner"
 import { MessageProvider } from "@/lib/feedback/message"
 import { DialogProvider } from "@/lib/feedback/dialog"
 import { DialogHost } from "@/components/dialog-host"
+import { SkipLink } from "@/components/skip-link"
 
 export function AppUiProvider({ children }: { children: React.ReactNode }) {
   return (
     <MessageProvider>
       <DialogProvider>
+        <SkipLink />
         {children}
         <DialogHost />
         <Toaster position="top-center" richColors closeButton />
diff --git a/components/providers/theme-provider.tsx b/components/providers/theme-provider.tsx
index edebc8f6..33e4c5f0 100644
--- a/components/providers/theme-provider.tsx
+++ b/components/providers/theme-provider.tsx
@@ -1,6 +1,39 @@
 "use client"
 
-import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { useEffect } from "react"
+import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes"
+
+const THEME_COLOR = {
+  light: "#ffffff",
+  dark: "#171717",
+} as const
+
+function ThemeColorSync() {
+  const { resolvedTheme } = useTheme()
+
+  useEffect(() => {
+    if (resolvedTheme !== "dark" && resolvedTheme !== "light") return
+
+    const color = THEME_COLOR[resolvedTheme]
+    let meta = document.querySelector<HTMLMetaElement>('meta[name="theme-color"][data-theme-sync="true"]')
+
+    if (!meta) {
+      meta = document.querySelector<HTMLMetaElement>('meta[name="theme-color"]:not([media])')
+    }
+
+    if (!meta) {
+      meta = document.createElement("meta")
+      meta.name = "theme-color"
+      document.head.appendChild(meta)
+    }
+
+    meta.dataset.themeSync = "true"
+    meta.content = color
+    document.documentElement.style.colorScheme = resolvedTheme
+  }, [resolvedTheme])
+
+  return null
+}
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
   return (
@@ -12,6 +45,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
       storageKey="active_theme"
       themes={["light", "dark", "system"]}
     >
+      <ThemeColorSync />
       {children}
     </NextThemesProvider>
   )
diff --git a/components/replication/new-form.tsx b/components/replication/new-form.tsx
index da9b3842..992e7569 100644
--- a/components/replication/new-form.tsx
+++ b/components/replication/new-form.tsx
@@ -274,20 +274,29 @@ export function ReplicationNewForm({ open, onOpenChange, bucketName, onSuccess }
           </DialogTitle>
         </DialogHeader>
 
-        <div className="min-h-0 flex-1 space-y-6 overflow-y-auto pr-1">
+        <div className="min-h-0 flex-1 space-y-6 overflow-y-auto pe-1">
           <div className="space-y-4">
             <div className="grid gap-3 md:grid-cols-2">
               <Field>
-                <FieldLabel>{t("Priority")}</FieldLabel>
+                <FieldLabel htmlFor="replication-priority">{t("Priority")}</FieldLabel>
                 <FieldContent>
-                  <Input type="number" min={1} value={level} onChange={(e) => setLevel(e.target.value)} />
+                  <Input
+                    id="replication-priority"
+                    name="replication-priority"
+                    type="number"
+                    inputMode="numeric"
+                    min={1}
+                    autoComplete="off"
+                    value={level}
+                    onChange={(e) => setLevel(e.target.value)}
+                  />
                 </FieldContent>
               </Field>
               <Field>
                 <FieldLabel>{t("Mode")}</FieldLabel>
                 <FieldContent>
                   <Select value={modeType} onValueChange={(value) => setModeType(value ?? "")}>
-                    <SelectTrigger className="w-full">
+                    <SelectTrigger className="w-full" aria-label={t("Mode")}>
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
@@ -301,83 +310,109 @@ export function ReplicationNewForm({ open, onOpenChange, bucketName, onSuccess }
                 </FieldContent>
               </Field>
               <Field>
-                <FieldLabel>{t("Endpoint")}</FieldLabel>
+                <FieldLabel htmlFor="replication-endpoint">{t("Endpoint")}</FieldLabel>
                 <FieldContent>
                   <div className="flex items-center gap-2">
-                    <div className="flex h-10 items-center whitespace-nowrap rounded-md border border-input bg-muted px-3 text-sm text-muted-foreground">
+                    <div className="flex h-10 items-center whitespace-nowrap border border-input bg-muted px-3 text-sm text-muted-foreground">
                       {tls ? "https://" : "http://"}
                     </div>
                     <Input
+                      id="replication-endpoint"
+                      name="replication-endpoint"
                       className="flex-1"
                       value={endpoint}
                       onChange={(e) => setEndpoint(e.target.value)}
+                      autoComplete="off"
                       placeholder={t("Please enter endpoint")}
+                      spellCheck={false}
                     />
                   </div>
                 </FieldContent>
               </Field>
               <Field>
-                <FieldLabel>{t("Bucket")}</FieldLabel>
+                <FieldLabel htmlFor="replication-bucket">{t("Bucket")}</FieldLabel>
                 <FieldContent>
                   <Input
+                    id="replication-bucket"
+                    name="replication-bucket"
                     value={bucket}
                     onChange={(e) => setBucket(e.target.value)}
+                    autoComplete="off"
                     placeholder={t("Please enter bucket")}
+                    spellCheck={false}
                   />
                 </FieldContent>
               </Field>
               <Field>
-                <FieldLabel>{t("Access Key")}</FieldLabel>
+                <FieldLabel htmlFor="replication-access-key">{t("Access Key")}</FieldLabel>
                 <FieldContent>
                   <Input
+                    id="replication-access-key"
+                    name="replication-access-key"
                     value={accessKey}
                     onChange={(e) => setAccessKey(e.target.value)}
                     placeholder={t("Please enter Access Key")}
                     autoComplete="off"
+                    spellCheck={false}
                   />
                 </FieldContent>
               </Field>
               <Field>
-                <FieldLabel>{t("Secret Key")}</FieldLabel>
+                <FieldLabel htmlFor="replication-secret-key">{t("Secret Key")}</FieldLabel>
                 <FieldContent>
                   <Input
+                    id="replication-secret-key"
+                    name="replication-secret-key"
                     type="password"
                     value={secretKey}
                     onChange={(e) => setSecretKey(e.target.value)}
                     placeholder={t("Please enter Secret Key")}
                     autoComplete="off"
+                    spellCheck={false}
                   />
                 </FieldContent>
               </Field>
               <Field>
-                <FieldLabel>{t("Region")}</FieldLabel>
+                <FieldLabel htmlFor="replication-region">{t("Region")}</FieldLabel>
                 <FieldContent>
                   <Input
+                    id="replication-region"
+                    name="replication-region"
                     value={region}
                     onChange={(e) => setRegion(e.target.value)}
+                    autoComplete="off"
                     placeholder={t("Please enter region")}
+                    spellCheck={false}
                   />
                 </FieldContent>
               </Field>
               <Field>
-                <FieldLabel>{t("Storage Class")}</FieldLabel>
+                <FieldLabel htmlFor="replication-storage-class">{t("Storage Class")}</FieldLabel>
                 <FieldContent>
                   <Input
+                    id="replication-storage-class"
+                    name="replication-storage-class"
                     value={storageType}
                     onChange={(e) => setStorageType(e.target.value)}
+                    autoComplete="off"
                     placeholder={t("Please enter storage class")}
+                    spellCheck={false}
                   />
                 </FieldContent>
               </Field>
             </div>
 
             <Field>
-              <FieldLabel>{t("Prefix")}</FieldLabel>
+              <FieldLabel htmlFor="replication-prefix">{t("Prefix")}</FieldLabel>
               <FieldContent>
                 <Input
+                  id="replication-prefix"
+                  name="replication-prefix"
                   value={prefix}
                   onChange={(e) => setPrefix(e.target.value)}
+                  autoComplete="off"
                   placeholder={t("Please enter prefix")}
+                  spellCheck={false}
                 />
               </FieldContent>
             </Field>
@@ -393,26 +428,34 @@ export function ReplicationNewForm({ open, onOpenChange, bucketName, onSuccess }
               {tags.length > 0 && (
                 <div className="space-y-3">
                   {tags.map((tag, index) => (
-                    <div
-                      key={index}
-                      className="grid gap-2 rounded-md border p-3 md:grid-cols-2 md:items-center md:gap-4"
-                    >
+                    <div key={index} className="grid gap-2 border p-3 md:grid-cols-2 md:items-center md:gap-4">
                       <Input
+                        id={`replication-tag-key-${index}`}
+                        name={`replication-tag-key-${index}`}
+                        aria-label={t("Tag Name")}
                         value={tag.key}
                         onChange={(e) => updateTag(index, "key", e.target.value)}
+                        autoComplete="off"
                         placeholder={t("Tag Name")}
+                        spellCheck={false}
                       />
                       <div className="flex items-center gap-2">
                         <Input
+                          id={`replication-tag-value-${index}`}
+                          name={`replication-tag-value-${index}`}
+                          aria-label={t("Tag Value")}
                           value={tag.value}
                           onChange={(e) => updateTag(index, "value", e.target.value)}
+                          autoComplete="off"
                           placeholder={t("Tag Value")}
                           className="flex-1"
+                          spellCheck={false}
                         />
                         <Button
                           variant="ghost"
                           size="sm"
                           className="text-destructive"
+                          aria-label={t("Delete")}
                           disabled={tags.length === 1}
                           onClick={() => removeTag(index)}
                         >
@@ -429,48 +472,77 @@ export function ReplicationNewForm({ open, onOpenChange, bucketName, onSuccess }
           <div className="space-y-4">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium">{t("Use TLS")}</p>
+                <label htmlFor="replication-use-tls" className="text-sm font-medium">
+                  {t("Use TLS")}
+                </label>
                 <p className="text-xs text-muted-foreground">
                   {t("Enable secure transport when connecting to endpoint.")}
                 </p>
               </div>
-              <Switch checked={tls} onCheckedChange={setTls} />
+              <Switch id="replication-use-tls" name="replication-use-tls" checked={tls} onCheckedChange={setTls} />
             </div>
 
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium">{t("Replicate Existing Objects")}</p>
+                <label htmlFor="replication-existing-object" className="text-sm font-medium">
+                  {t("Replicate Existing Objects")}
+                </label>
                 <p className="text-xs text-muted-foreground">
                   {t("Include objects that already exist in the source bucket.")}
                 </p>
               </div>
-              <Switch checked={existingObject} onCheckedChange={setExistingObject} />
+              <Switch
+                id="replication-existing-object"
+                name="replication-existing-object"
+                checked={existingObject}
+                onCheckedChange={setExistingObject}
+              />
             </div>
 
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium">{t("Replicate Delete Markers")}</p>
+                <label htmlFor="replication-expired-delete-marker" className="text-sm font-medium">
+                  {t("Replicate Delete Markers")}
+                </label>
                 <p className="text-xs text-muted-foreground">{t("Sync delete markers to destination bucket.")}</p>
               </div>
-              <Switch checked={expiredDeleteMark} onCheckedChange={setExpiredDeleteMark} />
+              <Switch
+                id="replication-expired-delete-marker"
+                name="replication-expired-delete-marker"
+                checked={expiredDeleteMark}
+                onCheckedChange={setExpiredDeleteMark}
+              />
             </div>
 
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium">{t("Replicate Delete")}</p>
+                <label htmlFor="replication-delete" className="text-sm font-medium">
+                  {t("Replicate Delete")}
+                </label>
                 <p className="text-xs text-muted-foreground">{t("Sync delete to destination bucket.")}</p>
               </div>
-              <Switch checked={replicateDelete} onCheckedChange={setReplicateDelete} />
+              <Switch
+                id="replication-delete"
+                name="replication-delete"
+                checked={replicateDelete}
+                onCheckedChange={setReplicateDelete}
+              />
             </div>
 
             {modeType === "async" && (
               <div className="space-y-3">
                 <Field>
-                  <FieldLabel>{t("Health Check Interval (seconds)")}</FieldLabel>
+                  <FieldLabel htmlFor="replication-health-check-interval">
+                    {t("Health Check Interval (seconds)")}
+                  </FieldLabel>
                   <FieldContent>
                     <Input
+                      id="replication-health-check-interval"
+                      name="replication-health-check-interval"
                       type="number"
+                      inputMode="numeric"
                       min={1}
+                      autoComplete="off"
                       value={timecheck}
                       onChange={(e) => setTimecheck(e.target.value)}
                       className="w-32"
@@ -478,18 +550,22 @@ export function ReplicationNewForm({ open, onOpenChange, bucketName, onSuccess }
                   </FieldContent>
                 </Field>
                 <Field>
-                  <FieldLabel>{t("Bandwidth Limit")}</FieldLabel>
+                  <FieldLabel htmlFor="replication-bandwidth-limit">{t("Bandwidth Limit")}</FieldLabel>
                   <FieldContent>
                     <div className="flex items-center gap-2">
                       <Input
+                        id="replication-bandwidth-limit"
+                        name="replication-bandwidth-limit"
                         type="number"
+                        inputMode="numeric"
                         min={0}
+                        autoComplete="off"
                         value={bandwidth}
                         onChange={(e) => setBandwidth(Number(e.target.value))}
                         className="w-32"
                       />
                       <Select value={unit} onValueChange={(value) => setUnit(value ?? "")}>
-                        <SelectTrigger className="w-28">
+                        <SelectTrigger className="w-28" aria-label={t("Bandwidth Unit")}>
                           <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
@@ -513,7 +589,7 @@ export function ReplicationNewForm({ open, onOpenChange, bucketName, onSuccess }
             {t("Cancel")}
           </Button>
           <Button onClick={handleSave} disabled={submitting}>
-            {submitting ? t("Saving...") : t("Save")}
+            {submitting ? t("Saving…") : t("Save")}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/components/search-input.tsx b/components/search-input.tsx
index 62666a5d..cfbbd8b9 100644
--- a/components/search-input.tsx
+++ b/components/search-input.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { useTranslation } from "react-i18next"
 import { RiSearchLine, RiCloseLine } from "@remixicon/react"
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group"
 import { cn } from "@/lib/utils"
@@ -19,8 +20,13 @@ export function SearchInput({
   placeholder = "",
   clearable = false,
   className,
-  ...props
+  "aria-label": ariaLabel,
+  type = "search",
+  autoComplete = "off",
+  spellCheck = false,
+  ...inputProps
 }: SearchInputProps) {
+  const { t } = useTranslation()
   const showClear = clearable && Boolean(value)
 
   const handleClear = () => {
@@ -28,14 +34,29 @@ export function SearchInput({
   }
 
   return (
-    <InputGroup className={cn("w-full", className)} {...props}>
+    <InputGroup className={cn("w-full", className)}>
       <InputGroupAddon className="text-muted-foreground">
-        <RiSearchLine className="size-4" />
+        <RiSearchLine className="size-4" aria-hidden />
       </InputGroupAddon>
-      <InputGroupInput value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} />
+      <InputGroupInput
+        {...inputProps}
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        aria-label={(ariaLabel ?? placeholder) || "Search"}
+        autoComplete={autoComplete}
+        spellCheck={spellCheck}
+      />
       {showClear && (
-        <InputGroupButton variant="ghost" size="icon-xs" type="button" aria-label="Clear" onClick={handleClear}>
-          <RiCloseLine className="size-4" />
+        <InputGroupButton
+          variant="ghost"
+          size="icon-xs"
+          type="button"
+          aria-label={t("Clear search")}
+          onClick={handleClear}
+        >
+          <RiCloseLine className="size-4" aria-hidden />
         </InputGroupButton>
       )}
     </InputGroup>
diff --git a/components/site-replication/edit-form.tsx b/components/site-replication/edit-form.tsx
index 08cb012f..bb74dedf 100644
--- a/components/site-replication/edit-form.tsx
+++ b/components/site-replication/edit-form.tsx
@@ -102,8 +102,8 @@ export function SiteReplicationEditForm({ open, onOpenChange, peer, onSuccess }:
         onOpenChange(nextOpen)
       }}
     >
-      <DialogContent className="max-w-xl">
-        <DialogHeader className="space-y-2 text-left">
+      <DialogContent className="max-h-[90vh] max-w-xl overflow-y-auto overflow-x-hidden">
+        <DialogHeader className="space-y-2 text-start">
           <DialogTitle>{t("Edit Site")}</DialogTitle>
           <DialogDescription>
             {t(
@@ -118,9 +118,12 @@ export function SiteReplicationEditForm({ open, onOpenChange, peer, onSuccess }:
               <Label htmlFor="site-edit-name">{t("Site Name")}</Label>
               <Input
                 id="site-edit-name"
+                name="site-edit-name"
                 value={name}
                 onChange={(event) => setName(event.target.value)}
+                autoComplete="off"
                 placeholder={t("Site Name")}
+                spellCheck={false}
                 disabled={saving}
               />
             </div>
@@ -128,7 +131,7 @@ export function SiteReplicationEditForm({ open, onOpenChange, peer, onSuccess }:
             <div className="space-y-2">
               <Label htmlFor="site-edit-sync">{t("Sync")}</Label>
               <Select value={syncState} onValueChange={(value) => setSyncState(value as SiteReplicationSyncState)}>
-                <SelectTrigger id="site-edit-sync" className="w-full" disabled={saving}>
+                <SelectTrigger id="site-edit-sync" className="w-full" aria-label={t("Sync")} disabled={saving}>
                   <SelectValue placeholder={t("Select")} />
                 </SelectTrigger>
                 <SelectContent>
@@ -143,6 +146,8 @@ export function SiteReplicationEditForm({ open, onOpenChange, peer, onSuccess }:
             <Label htmlFor="site-edit-endpoint">{t("Endpoint *")}</Label>
             <Input
               id="site-edit-endpoint"
+              name="site-edit-endpoint"
+              type="url"
               value={endpoint}
               onChange={(event) => {
                 setEndpoint(event.target.value)
@@ -150,7 +155,9 @@ export function SiteReplicationEditForm({ open, onOpenChange, peer, onSuccess }:
                   setEndpointError("")
                 }
               }}
+              autoComplete="off"
               placeholder="https://remote-rustfs.example.com"
+              spellCheck={false}
               disabled={saving}
             />
             {endpointError ? <p className="text-sm text-destructive">{endpointError}</p> : null}
@@ -160,9 +167,12 @@ export function SiteReplicationEditForm({ open, onOpenChange, peer, onSuccess }:
             <Label htmlFor="site-edit-object-naming-mode">{t("Object Naming Mode")}</Label>
             <Input
               id="site-edit-object-naming-mode"
+              name="site-edit-object-naming-mode"
               value={objectNamingMode}
               onChange={(event) => setObjectNamingMode(event.target.value)}
+              autoComplete="off"
               placeholder={t("Optional")}
+              spellCheck={false}
               disabled={saving}
             />
           </div>
@@ -187,7 +197,7 @@ export function SiteReplicationEditForm({ open, onOpenChange, peer, onSuccess }:
             {t("Cancel")}
           </Button>
           <Button type="button" onClick={handleSave} disabled={saving}>
-            {saving ? t("Saving...") : t("Save")}
+            {saving ? t("Saving…") : t("Save")}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/components/site-replication/new-form.tsx b/components/site-replication/new-form.tsx
index b7f05f40..5ee157b9 100644
--- a/components/site-replication/new-form.tsx
+++ b/components/site-replication/new-form.tsx
@@ -190,8 +190,8 @@ export function SiteReplicationNewForm({
         showCloseButton={false}
       >
         <div className="grid overflow-hidden border bg-background lg:grid-cols-[minmax(0,0.92fr)_minmax(0,1.35fr)]">
-          <section className="relative overflow-hidden border-b bg-[radial-gradient(circle_at_top_left,_rgba(251,191,36,0.26),_transparent_45%),linear-gradient(160deg,_rgba(255,247,237,0.92),_rgba(255,255,255,1)_65%)] px-6 py-6 lg:border-r lg:border-b-0">
-            <div className="absolute inset-y-0 right-0 hidden w-px bg-border/70 lg:block" />
+          <section className="relative overflow-hidden border-b bg-muted/20 px-6 py-6 lg:border-e lg:border-b-0">
+            <div className="absolute inset-y-0 end-0 hidden w-px bg-border/70 lg:block" />
             <div className="relative space-y-6">
               <DialogHeader className="space-y-3">
                 <div className="flex flex-wrap items-center gap-2">
@@ -248,12 +248,20 @@ export function SiteReplicationNewForm({
               <div className="border bg-background/75 p-5">
                 <div className="flex items-start justify-between gap-4">
                   <div className="space-y-1">
-                    <p className="text-sm font-medium">{t("Replicate ILM Expiry")}</p>
+                    <label htmlFor="site-replication-ilm-expiry" className="text-sm font-medium">
+                      {t("Replicate ILM Expiry")}
+                    </label>
                     <p className="text-xs text-muted-foreground">
                       {t("Matches the backend and MinIO site replication option for expiry lifecycle rules.")}
                     </p>
                   </div>
-                  <Switch checked={replicateIlmExpiry} onCheckedChange={setReplicateIlmExpiry} disabled={saving} />
+                  <Switch
+                    id="site-replication-ilm-expiry"
+                    name="site-replication-ilm-expiry"
+                    checked={replicateIlmExpiry}
+                    onCheckedChange={setReplicateIlmExpiry}
+                    disabled={saving}
+                  />
                 </div>
                 <Separator className="my-4" />
                 <div className="space-y-2 text-xs text-muted-foreground">
@@ -284,7 +292,7 @@ export function SiteReplicationNewForm({
                   <RiAddLine className="size-4" aria-hidden />
                   {t("Add Site")}
                 </Button>
-                <Button type="button" variant="ghost" size="icon-sm" onClick={handleCancel} disabled={saving}>
+                <Button type="button" variant="ghost" size="icon" onClick={handleCancel} disabled={saving}>
                   <RiCloseLine className="size-4" aria-hidden />
                   <span className="sr-only">{t("Cancel")}</span>
                 </Button>
@@ -314,7 +322,7 @@ export function SiteReplicationNewForm({
                       {sites.length > 1 ? (
                         <Button
                           type="button"
-                          size="icon-sm"
+                          size="icon"
                           variant="ghost"
                           aria-label={t("Delete")}
                           onClick={() => removeSite(index)}
@@ -330,9 +338,12 @@ export function SiteReplicationNewForm({
                         <Label htmlFor={`site-name-${index}`}>{t("Site Name")}</Label>
                         <Input
                           id={`site-name-${index}`}
+                          name={`site-name-${index}`}
                           value={site.name}
                           onChange={(event) => updateSite(index, "name", event.target.value)}
+                          autoComplete="off"
                           placeholder={t("Site Name")}
+                          spellCheck={false}
                           disabled={saving}
                         />
                       </div>
@@ -341,9 +352,13 @@ export function SiteReplicationNewForm({
                         <Label htmlFor={`site-endpoint-${index}`}>{t("Endpoint *")}</Label>
                         <Input
                           id={`site-endpoint-${index}`}
+                          name={`site-endpoint-${index}`}
+                          type="url"
                           value={site.endpoint}
                           onChange={(event) => updateSite(index, "endpoint", event.target.value)}
+                          autoComplete="off"
                           placeholder="https://remote-rustfs.example.com"
+                          spellCheck={false}
                           disabled={saving}
                         />
                         {errors[index]?.endpoint ? (
@@ -359,9 +374,12 @@ export function SiteReplicationNewForm({
                         <Label htmlFor={`site-access-${index}`}>{t("Access Key *")}</Label>
                         <Input
                           id={`site-access-${index}`}
+                          name={`site-access-${index}`}
                           value={site.accessKey}
                           onChange={(event) => updateSite(index, "accessKey", event.target.value)}
+                          autoComplete="off"
                           placeholder={t("Access Key")}
+                          spellCheck={false}
                           disabled={saving}
                         />
                         {errors[index]?.accessKey ? (
@@ -377,10 +395,13 @@ export function SiteReplicationNewForm({
                         <Label htmlFor={`site-secret-${index}`}>{t("Secret Key *")}</Label>
                         <Input
                           id={`site-secret-${index}`}
+                          name={`site-secret-${index}`}
                           type="password"
                           value={site.secretKey}
                           onChange={(event) => updateSite(index, "secretKey", event.target.value)}
+                          autoComplete="off"
                           placeholder={t("Secret Key")}
+                          spellCheck={false}
                           disabled={saving}
                         />
                         {errors[index]?.secretKey ? (
@@ -402,7 +423,7 @@ export function SiteReplicationNewForm({
                 {t("Cancel")}
               </Button>
               <Button type="button" onClick={handleSave} disabled={saving}>
-                {saving ? t("Saving...") : t("Save")}
+                {saving ? t("Saving…") : t("Save")}
               </Button>
             </DialogFooter>
           </section>
diff --git a/components/skip-link.tsx b/components/skip-link.tsx
new file mode 100644
index 00000000..ebe8d69a
--- /dev/null
+++ b/components/skip-link.tsx
@@ -0,0 +1,16 @@
+"use client"
+
+import { useTranslation } from "react-i18next"
+
+export function SkipLink() {
+  const { t } = useTranslation()
+
+  return (
+    <a
+      href="#main-content"
+      className="sr-only focus:not-sr-only focus:fixed focus:start-4 focus:top-[calc(env(safe-area-inset-top)+1rem)] focus:z-50 focus:border focus:border-border focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:text-foreground focus:shadow-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      {t("Skip to main content")}
+    </a>
+  )
+}
diff --git a/components/tasks/item.tsx b/components/tasks/item.tsx
index 4e513fc5..a026e216 100644
--- a/components/tasks/item.tsx
+++ b/components/tasks/item.tsx
@@ -36,9 +36,10 @@ export function TaskItem({ task }: TaskItemProps) {
           variant="ghost"
           size="sm"
           className="h-auto shrink-0 px-2 text-xs opacity-0 group-hover:opacity-100"
+          aria-label={t("Delete Record")}
           onClick={() => taskManager.removeTask(task.id)}
         >
-          <RiDeleteBinLine className="size-4 text-red-500" />
+          <RiDeleteBinLine className="size-4 text-destructive" aria-hidden />
         </Button>
       </div>
       <Progress value={task.progress} className="h-[2px]" />
diff --git a/components/tasks/panel.tsx b/components/tasks/panel.tsx
index 69fbfed8..daa1b560 100644
--- a/components/tasks/panel.tsx
+++ b/components/tasks/panel.tsx
@@ -54,13 +54,13 @@ export function TaskPanel({ tasks, onClearTasks }: TaskPanelProps) {
 
   return (
     <div className="flex flex-col gap-4">
-      <Alert className="border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-100">
+      <Alert variant="destructive">
         <AlertDescription className="space-y-2 text-sm leading-relaxed">
           <p>
-            <span className="font-medium text-amber-600 dark:text-amber-300">{t("Browser Warning")}</span>
+            <span className="font-medium text-destructive">{t("Browser Warning")}</span>
           </p>
           <p>
-            <span className="font-medium text-amber-600 dark:text-amber-300">{t("Cache Warning")}</span>
+            <span className="font-medium text-destructive">{t("Cache Warning")}</span>
           </p>
         </AlertDescription>
       </Alert>
diff --git a/components/tasks/stats-button.tsx b/components/tasks/stats-button.tsx
index a35c37be..ac4195fa 100644
--- a/components/tasks/stats-button.tsx
+++ b/components/tasks/stats-button.tsx
@@ -39,7 +39,7 @@ export function TaskStatsButton() {
             </div>
           ) : (
             <div className="flex items-center gap-2">
-              <RiCheckLine className="size-4 text-emerald-600" />
+              <RiCheckLine className="size-4 text-primary" aria-hidden />
               <span>{t("Task Completed", { completed: completed.length, failed: failed.length })}</span>
             </div>
           )}
diff --git a/components/theme-switcher.tsx b/components/theme-switcher.tsx
index 46420a59..7e437fe5 100644
--- a/components/theme-switcher.tsx
+++ b/components/theme-switcher.tsx
@@ -28,15 +28,15 @@ export function ThemeSwitcher() {
     <DropdownMenu>
       <DropdownMenuTrigger
         render={
-          <Button variant="ghost">
-            <Icon className="h-4 w-4 shrink-0" />
+          <Button variant="ghost" size="icon" aria-label={t("Theme")}>
+            <Icon className="size-4 shrink-0" aria-hidden />
           </Button>
         }
       />
       <DropdownMenuContent className="w-40" align="start">
         {themeOptions.map(({ labelKey, key, Icon: OptionIcon }) => (
           <DropdownMenuItem key={key} onClick={() => setTheme(key)}>
-            <OptionIcon className="me-2 h-4 w-4" />
+            <OptionIcon className="me-2 size-4" aria-hidden />
             {t(labelKey)}
           </DropdownMenuItem>
         ))}
diff --git a/components/theme/logo.tsx b/components/theme/logo.tsx
index b4b597f2..b79dadff 100644
--- a/components/theme/logo.tsx
+++ b/components/theme/logo.tsx
@@ -10,10 +10,14 @@ type ThemeLogoProps = Omit<ImageProps, "src" | "alt"> & {
   alt?: string
 }
 
-export function ThemeLogo({ alt, onError, ...props }: ThemeLogoProps) {
+export function ThemeLogo({ alt, onError, style, ...props }: ThemeLogoProps) {
   const { resolvedTheme } = useTheme()
   const theme = getThemeManifest()
   const src = resolvedTheme === "dark" ? logoDark : logoLight
+  const width = typeof props.width === "number" ? `${props.width}px` : props.width
+  const height = typeof props.height === "number" ? `${props.height}px` : props.height
 
-  return <Image {...props} src={src} alt={alt ?? theme.brand.name} onError={onError} />
+  return (
+    <Image {...props} src={src} alt={alt ?? theme.brand.name} style={{ width, height, ...style }} onError={onError} />
+  )
 }
diff --git a/components/tiers/change-key.tsx b/components/tiers/change-key.tsx
index 2dbdc5f8..ae48a829 100644
--- a/components/tiers/change-key.tsx
+++ b/components/tiers/change-key.tsx
@@ -70,26 +70,32 @@ export function TiersChangeKey({ open, onOpenChange, tierName, onSuccess }: Tier
         </DialogHeader>
         <div className="space-y-4">
           <Field>
-            <FieldLabel>{t("Access Key")}</FieldLabel>
+            <FieldLabel htmlFor="tier-change-access-key">{t("Access Key")}</FieldLabel>
             <FieldContent>
               <Input
+                id="tier-change-access-key"
+                name="tier-change-access-key"
                 value={accessKey}
                 onChange={(e) => setAccessKey(e.target.value)}
                 placeholder={t("Please enter Access Key")}
                 autoComplete="off"
+                spellCheck={false}
               />
             </FieldContent>
           </Field>
 
           <Field>
-            <FieldLabel>{t("Secret Key")}</FieldLabel>
+            <FieldLabel htmlFor="tier-change-secret-key">{t("Secret Key")}</FieldLabel>
             <FieldContent>
               <Input
+                id="tier-change-secret-key"
+                name="tier-change-secret-key"
                 value={secretKey}
                 onChange={(e) => setSecretKey(e.target.value)}
                 type="password"
                 placeholder={t("Please enter Secret Key")}
                 autoComplete="off"
+                spellCheck={false}
               />
             </FieldContent>
           </Field>
diff --git a/components/tiers/new-form.tsx b/components/tiers/new-form.tsx
index e8b0371e..dbcb86e1 100644
--- a/components/tiers/new-form.tsx
+++ b/components/tiers/new-form.tsx
@@ -10,7 +10,6 @@ import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/
 import { ThemeImage } from "@/components/theme/image"
 import { useTiers } from "@/hooks/use-tiers"
 import { useMessage } from "@/lib/feedback/message"
-import { cn } from "@/lib/utils"
 import { getThemeManifest } from "@/lib/theme/manifest"
 
 interface TiersNewFormProps {
@@ -141,7 +140,7 @@ export function TiersNewForm({ open, onOpenChange, onSuccess }: TiersNewFormProp
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-lg">
+      <DialogContent className="max-h-[90vh] overflow-y-auto overflow-x-hidden sm:max-w-lg">
         <DialogHeader>
           <DialogTitle>{t("Add Tier")}</DialogTitle>
         </DialogHeader>
@@ -153,12 +152,14 @@ export function TiersNewForm({ open, onOpenChange, onSuccess }: TiersNewFormProp
                   key={item.value}
                   type="button"
                   onClick={() => setType(item.value)}
-                  className={cn("cursor-pointer border border-border/70 text-left transition hover:border-primary")}
+                  className="cursor-pointer border border-border/70 text-start transition hover:border-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50"
                 >
                   <div className="flex items-center gap-3 p-4">
                     {renderTypeIcon(item.icon)}
-                    <div>
-                      <p className="text-base font-semibold">{t(item.labelKey)}</p>
+                    <div className="min-w-0">
+                      <p className="truncate text-base font-semibold" title={t(item.labelKey)}>
+                        {t(item.labelKey)}
+                      </p>
                       <p className="text-sm text-muted-foreground">{t(item.descKey)}</p>
                     </div>
                   </div>
@@ -170,51 +171,64 @@ export function TiersNewForm({ open, onOpenChange, onSuccess }: TiersNewFormProp
               <button
                 type="button"
                 onClick={() => setType("")}
-                className="w-full cursor-pointer border text-left transition hover:border-primary"
+                className="w-full cursor-pointer border text-start transition hover:border-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50"
               >
                 <div className="flex items-center gap-3 p-4">
                   {selectedOption ? renderTypeIcon(selectedOption.icon) : null}
-                  <div>
+                  <div className="min-w-0">
                     <p className="text-sm text-muted-foreground">{t("Selected Type")}</p>
-                    <p className="text-base font-semibold">{type === "rustfs" ? theme.brand.name : type}</p>
+                    <p className="truncate text-base font-semibold" title={type === "rustfs" ? theme.brand.name : type}>
+                      {type === "rustfs" ? theme.brand.name : type}
+                    </p>
                   </div>
                 </div>
               </button>
 
               <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                 <Field>
-                  <FieldLabel>{t("Name")} (A-Z,0-9,_)</FieldLabel>
+                  <FieldLabel htmlFor="tier-name">{t("Name")} (A-Z,0-9,_)</FieldLabel>
                   <FieldContent>
                     <Input
+                      id="tier-name"
+                      name="tier-name"
                       value={name}
                       onChange={handleNameChange}
                       placeholder={t("Please enter name")}
                       autoComplete="off"
+                      spellCheck={false}
                     />
                   </FieldContent>
                   {nameError && <FieldDescription className="text-destructive">{nameError}</FieldDescription>}
                 </Field>
 
                 <Field>
-                  <FieldLabel>{t("Endpoint")}</FieldLabel>
+                  <FieldLabel htmlFor="tier-endpoint">{t("Endpoint")}</FieldLabel>
                   <FieldContent>
                     <Input
+                      id="tier-endpoint"
+                      name="tier-endpoint"
+                      type="url"
                       value={endpoint}
                       onChange={(e) => setEndpoint(e.target.value)}
+                      autoComplete="off"
                       placeholder={t("Please enter endpoint")}
+                      spellCheck={false}
                     />
                   </FieldContent>
                 </Field>
 
                 {type === "gcs" ? (
                   <Field className="md:col-span-2">
-                    <FieldLabel>{t("Credentials")} (JSON)</FieldLabel>
+                    <FieldLabel htmlFor="tier-credentials">{t("Credentials")} (JSON)</FieldLabel>
                     <FieldContent>
                       <Textarea
+                        id="tier-credentials"
+                        name="tier-credentials"
                         value={creds}
                         onChange={(e) => setCreds(e.target.value)}
                         placeholder={t("Please enter GCS credentials JSON")}
                         autoComplete="off"
+                        spellCheck={false}
                         rows={6}
                       />
                     </FieldContent>
@@ -222,25 +236,31 @@ export function TiersNewForm({ open, onOpenChange, onSuccess }: TiersNewFormProp
                 ) : (
                   <>
                     <Field>
-                      <FieldLabel>{t("Access Key")}</FieldLabel>
+                      <FieldLabel htmlFor="tier-access-key">{t("Access Key")}</FieldLabel>
                       <FieldContent>
                         <Input
+                          id="tier-access-key"
+                          name="tier-access-key"
                           value={accesskey}
                           onChange={(e) => setAccesskey(e.target.value)}
                           placeholder={t("Please enter Access Key")}
                           autoComplete="off"
+                          spellCheck={false}
                         />
                       </FieldContent>
                     </Field>
                     <Field>
-                      <FieldLabel>{t("Secret Key")}</FieldLabel>
+                      <FieldLabel htmlFor="tier-secret-key">{t("Secret Key")}</FieldLabel>
                       <FieldContent>
                         <Input
+                          id="tier-secret-key"
+                          name="tier-secret-key"
                           value={secretkey}
                           onChange={(e) => setSecretkey(e.target.value)}
                           type="password"
                           placeholder={t("Please enter Secret Key")}
                           autoComplete="off"
+                          spellCheck={false}
                         />
                       </FieldContent>
                     </Field>
@@ -248,45 +268,61 @@ export function TiersNewForm({ open, onOpenChange, onSuccess }: TiersNewFormProp
                 )}
 
                 <Field>
-                  <FieldLabel>{t("Bucket")}</FieldLabel>
+                  <FieldLabel htmlFor="tier-bucket">{t("Bucket")}</FieldLabel>
                   <FieldContent>
                     <Input
+                      id="tier-bucket"
+                      name="tier-bucket"
                       value={bucket}
                       onChange={(e) => setBucket(e.target.value)}
+                      autoComplete="off"
                       placeholder={t("Please enter bucket")}
+                      spellCheck={false}
                     />
                   </FieldContent>
                 </Field>
 
                 <Field>
-                  <FieldLabel>{t("Prefix")}</FieldLabel>
+                  <FieldLabel htmlFor="tier-prefix">{t("Prefix")}</FieldLabel>
                   <FieldContent>
                     <Input
+                      id="tier-prefix"
+                      name="tier-prefix"
                       value={prefix}
                       onChange={(e) => setPrefix(e.target.value)}
+                      autoComplete="off"
                       placeholder={t("Please enter prefix")}
+                      spellCheck={false}
                     />
                   </FieldContent>
                 </Field>
 
                 <Field>
-                  <FieldLabel>{t("Region")}</FieldLabel>
+                  <FieldLabel htmlFor="tier-region">{t("Region")}</FieldLabel>
                   <FieldContent>
                     <Input
+                      id="tier-region"
+                      name="tier-region"
                       value={region}
                       onChange={(e) => setRegion(e.target.value)}
+                      autoComplete="off"
                       placeholder={t("Please enter region")}
+                      spellCheck={false}
                     />
                   </FieldContent>
                 </Field>
 
                 <Field>
-                  <FieldLabel>{t("Storage Class")}</FieldLabel>
+                  <FieldLabel htmlFor="tier-storage-class">{t("Storage Class")}</FieldLabel>
                   <FieldContent>
                     <Input
+                      id="tier-storage-class"
+                      name="tier-storage-class"
                       value={storageclass}
                       onChange={(e) => setStorageclass(e.target.value)}
+                      autoComplete="off"
                       placeholder={t("Please Enter storage class")}
+                      spellCheck={false}
                     />
                   </FieldContent>
                 </Field>
@@ -299,7 +335,7 @@ export function TiersNewForm({ open, onOpenChange, onSuccess }: TiersNewFormProp
             {t("Cancel")}
           </Button>
           <Button onClick={handleSave} disabled={!type} aria-disabled={submitting}>
-            {submitting ? t("Saving...") : t("Save")}
+            {submitting ? t("Saving…") : t("Save")}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/components/top-nav-breadcrumb.tsx b/components/top-nav-breadcrumb.tsx
index 6bcb42eb..15de5733 100644
--- a/components/top-nav-breadcrumb.tsx
+++ b/components/top-nav-breadcrumb.tsx
@@ -1,7 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import Link from "next/link"
+import { usePathname, useSearchParams } from "next/navigation"
 import { useTranslation } from "react-i18next"
 import {
   Breadcrumb,
@@ -25,7 +26,6 @@ function getLabelByPath(pathSegment: string, t: (k: string) => string): string {
 export function TopNavBreadcrumb() {
   const pathname = usePathname()
   const searchParams = useSearchParams()
-  const router = useRouter()
   const { t } = useTranslation()
 
   const segments = pathname?.split("/").filter(Boolean) ?? []
@@ -79,10 +79,10 @@ export function TopNavBreadcrumb() {
 
   if (items.length <= 1) {
     return (
-      <Breadcrumb>
-        <BreadcrumbList>
-          <BreadcrumbItem>
-            <BreadcrumbPage>{items[0]?.label ?? ""}</BreadcrumbPage>
+      <Breadcrumb className="min-w-0 overflow-hidden">
+        <BreadcrumbList className="min-w-0 flex-nowrap overflow-hidden">
+          <BreadcrumbItem className="min-w-0">
+            <BreadcrumbPage className="truncate">{items[0]?.label ?? ""}</BreadcrumbPage>
           </BreadcrumbItem>
         </BreadcrumbList>
       </Breadcrumb>
@@ -90,24 +90,16 @@ export function TopNavBreadcrumb() {
   }
 
   return (
-    <Breadcrumb>
-      <BreadcrumbList>
+    <Breadcrumb className="min-w-0 overflow-hidden">
+      <BreadcrumbList className="min-w-0 flex-nowrap overflow-hidden">
         {items.map((item, i) => (
           <React.Fragment key={i}>
             {i > 0 && <BreadcrumbSeparator />}
-            <BreadcrumbItem>
+            <BreadcrumbItem className="min-w-0">
               {item.href ? (
-                <BreadcrumbLink
-                  href={item.href}
-                  onClick={(e) => {
-                    e.preventDefault()
-                    router.push(item.href!)
-                  }}
-                >
-                  {item.label}
-                </BreadcrumbLink>
+                <BreadcrumbLink className="truncate" render={<Link href={item.href}>{item.label}</Link>} />
               ) : (
-                <BreadcrumbPage>{item.label}</BreadcrumbPage>
+                <BreadcrumbPage className="truncate">{item.label}</BreadcrumbPage>
               )}
             </BreadcrumbItem>
           </React.Fragment>
diff --git a/components/upload-zone.tsx b/components/upload-zone.tsx
index cdbc5cb1..b5f1e38b 100644
--- a/components/upload-zone.tsx
+++ b/components/upload-zone.tsx
@@ -7,6 +7,7 @@ import { cn } from "@/lib/utils"
 interface UploadZoneProps {
   accept?: string
   disabled?: boolean
+  name?: string
   className?: string
   icon?: React.ComponentType<{ className?: string }>
   children: ReactNode
@@ -16,6 +17,7 @@ interface UploadZoneProps {
 export function UploadZone({
   accept,
   disabled = false,
+  name = "upload-file",
   className,
   icon: Icon = RiUploadCloud2Line,
   children,
@@ -56,7 +58,7 @@ export function UploadZone({
   return (
     <label
       className={cn(
-        "flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border/70 px-6 py-10 text-center transition hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "flex cursor-pointer flex-col items-center justify-center gap-3 border border-dashed border-border/70 px-6 py-10 text-center transition hover:border-primary focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
         hovering && !disabled && "border-primary bg-primary/5",
         disabled && "pointer-events-none opacity-60",
         className,
@@ -65,8 +67,8 @@ export function UploadZone({
       onDragOver={onDragOver}
       onDragLeave={onDragLeave}
     >
-      <input type="file" accept={accept} className="hidden" disabled={disabled} onChange={onInputChange} />
-      <Icon className="h-12 w-12 text-muted-foreground" />
+      <input type="file" name={name} accept={accept} className="sr-only" disabled={disabled} onChange={onInputChange} />
+      <Icon className="size-12 text-muted-foreground" aria-hidden />
       {children}
     </label>
   )
diff --git a/components/user-group/edit-form.tsx b/components/user-group/edit-form.tsx
index 0a8a01ec..4127d143 100644
--- a/components/user-group/edit-form.tsx
+++ b/components/user-group/edit-form.tsx
@@ -72,14 +72,16 @@ export function UserGroupEditForm({ open, onOpenChange, row, onSuccess }: UserGr
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange} disablePointerDismissal>
-      <DialogContent className="sm:max-w-lg">
+      <DialogContent className="max-h-[90vh] overflow-y-auto overflow-x-hidden sm:max-w-lg">
         <DialogHeader>
           <DialogTitle>{group.name || t("Members")}</DialogTitle>
         </DialogHeader>
         <div className="space-y-4">
-          <div className="flex items-center justify-between rounded-md border px-3 py-2">
-            <span className="text-sm text-muted-foreground">{t("Status")}</span>
-            <Switch checked={statusBoolean} onCheckedChange={handleStatusToggle} />
+          <div className="flex items-center justify-between border px-3 py-2">
+            <label htmlFor="user-group-status" className="text-sm text-muted-foreground">
+              {t("Status")}
+            </label>
+            <Switch id="user-group-status" checked={statusBoolean} onCheckedChange={handleStatusToggle} />
           </div>
 
           <Tabs value={activeTab} onValueChange={setActiveTab} className="flex flex-col gap-4">
diff --git a/components/user-group/members.tsx b/components/user-group/members.tsx
index 4aa3d2f2..6e9348cc 100644
--- a/components/user-group/members.tsx
+++ b/components/user-group/members.tsx
@@ -117,7 +117,7 @@ export function UserGroupMembers({ group, onSearch }: UserGroupMembersProps) {
                 />
               </div>
               <Button type="button" variant="outline" className="inline-flex items-center gap-2" onClick={startEditing}>
-                <RiAddLine className="size-4" />
+                <RiAddLine className="size-4" aria-hidden />
                 {t("Edit User")}
               </Button>
             </div>
diff --git a/components/user-group/new-form.tsx b/components/user-group/new-form.tsx
index fe2e2461..bfd480a0 100644
--- a/components/user-group/new-form.tsx
+++ b/components/user-group/new-form.tsx
@@ -61,15 +61,24 @@ export function UserGroupNewForm({ open, onOpenChange, onSuccess }: UserGroupNew
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange} disablePointerDismissal>
-      <DialogContent className="sm:max-w-lg">
+      <DialogContent className="max-h-[90vh] overflow-y-auto overflow-x-hidden sm:max-w-lg">
         <DialogHeader>
           <DialogTitle>{t("Add group members")}</DialogTitle>
         </DialogHeader>
         <div className="space-y-6">
           <Field>
-            <FieldLabel className="text-sm font-medium">{t("Name")}</FieldLabel>
+            <FieldLabel htmlFor="user-group-name" className="text-sm font-medium">
+              {t("Name")}
+            </FieldLabel>
             <FieldContent>
-              <Input value={group} onChange={(e) => setGroup(e.target.value)} autoComplete="off" />
+              <Input
+                id="user-group-name"
+                name="user-group-name"
+                value={group}
+                onChange={(e) => setGroup(e.target.value)}
+                autoComplete="off"
+                spellCheck={false}
+              />
             </FieldContent>
           </Field>
           <UserSelector
diff --git a/components/user-group/policies.tsx b/components/user-group/policies.tsx
index a671a825..16038bea 100644
--- a/components/user-group/policies.tsx
+++ b/components/user-group/policies.tsx
@@ -133,7 +133,7 @@ export function UserGroupPolicies({ group, onSearch }: UserGroupPoliciesProps) {
             />
           </div>
           <Button variant="outline" className="inline-flex items-center gap-2" onClick={startEditing}>
-            <RiAddLine className="size-4" />
+            <RiAddLine className="size-4" aria-hidden />
             {t("Edit Policy")}
           </Button>
         </div>
@@ -154,7 +154,7 @@ export function UserGroupPolicies({ group, onSearch }: UserGroupPoliciesProps) {
                       <span className="truncate">
                         {selectedPolicies.length ? selectedPolicies.join(", ") : t("Select user group policies")}
                       </span>
-                      <RiArrowDownSLine className="size-4 text-muted-foreground" />
+                      <RiArrowDownSLine className="size-4 text-muted-foreground" aria-hidden />
                     </Button>
                   }
                 />
diff --git a/components/user-group/set-policies-multiple.tsx b/components/user-group/set-policies-multiple.tsx
index c2145f4e..425b662f 100644
--- a/components/user-group/set-policies-multiple.tsx
+++ b/components/user-group/set-policies-multiple.tsx
@@ -70,6 +70,7 @@ export function UserGroupSetPoliciesMultiple({
         id: "select",
         header: () => (
           <Checkbox
+            aria-label={`${t("Select")} ${t("Policies")}`}
             checked={allVisibleSelected}
             indeterminate={!allVisibleSelected && checked.length > 0}
             onCheckedChange={(v) => toggleSelectAll(v === true)}
@@ -78,6 +79,7 @@ export function UserGroupSetPoliciesMultiple({
         enableSorting: false,
         cell: ({ row }) => (
           <Checkbox
+            aria-label={`${t("Select")} ${row.original.name}`}
             checked={isSelected(row.original.name)}
             onCheckedChange={(v) => toggleSelection(row.original.name, v === true)}
           />
diff --git a/components/user/add-to-group-form.tsx b/components/user/add-to-group-form.tsx
index 47680780..ec4cce80 100644
--- a/components/user/add-to-group-form.tsx
+++ b/components/user/add-to-group-form.tsx
@@ -67,7 +67,7 @@ export function UserAddToGroupForm({ open, onOpenChange, selectedUsers, onSucces
 
   return (
     <Dialog open={open} onOpenChange={closeModal} disablePointerDismissal>
-      <DialogContent className="sm:max-w-lg">
+      <DialogContent className="overflow-x-hidden sm:max-w-lg">
         <DialogHeader>
           <DialogTitle>{t("Add to Group")}</DialogTitle>
         </DialogHeader>
@@ -75,10 +75,12 @@ export function UserAddToGroupForm({ open, onOpenChange, selectedUsers, onSucces
         <div className="space-y-4">
           <div className="space-y-2">
             <div className="text-sm font-medium">{t("Users")}</div>
-            <div className="flex flex-wrap gap-2">
+            <div className="flex min-w-0 flex-wrap gap-2">
               {selectedUsers.map((user) => (
-                <Badge key={user} variant="secondary">
-                  {user}
+                <Badge key={user} variant="secondary" className="h-auto max-w-full justify-start whitespace-normal">
+                  <span className="min-w-0 break-all" title={user}>
+                    {user}
+                  </span>
                 </Badge>
               ))}
             </div>
diff --git a/components/user/change-password.tsx b/components/user/change-password.tsx
index 774a05ad..439d1c0c 100644
--- a/components/user/change-password.tsx
+++ b/components/user/change-password.tsx
@@ -6,7 +6,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Spinner } from "@/components/ui/spinner"
-import { Field, FieldContent, FieldLabel, FieldDescription } from "@/components/ui/field"
+import { Field, FieldContent, FieldError, FieldLabel } from "@/components/ui/field"
 import { useMessage } from "@/lib/feedback/message"
 import { useApiOptional } from "@/contexts/api-context"
 import { useUsers } from "@/hooks/use-users"
@@ -92,7 +92,7 @@ export function ChangePassword({ visible, onVisibleChange }: ChangePasswordProps
 
   return (
     <Dialog open={visible} onOpenChange={closeModal}>
-      <DialogContent className="sm:max-w-lg">
+      <DialogContent className="overflow-x-hidden sm:max-w-lg">
         <DialogHeader>
           <DialogTitle>{t("Change current account password")}</DialogTitle>
         </DialogHeader>
@@ -103,13 +103,16 @@ export function ChangePassword({ visible, onVisibleChange }: ChangePasswordProps
             <FieldContent>
               <Input
                 id="password-current"
+                name="password-current"
                 value={currentSecretKey}
                 onChange={(e) => setCurrentSecretKey(e.target.value)}
                 type="password"
                 autoComplete="off"
+                spellCheck={false}
+                aria-invalid={Boolean(errors.current)}
               />
             </FieldContent>
-            {errors.current && <FieldDescription className="text-destructive">{errors.current}</FieldDescription>}
+            <FieldError>{errors.current}</FieldError>
           </Field>
 
           <Field>
@@ -117,13 +120,16 @@ export function ChangePassword({ visible, onVisibleChange }: ChangePasswordProps
             <FieldContent>
               <Input
                 id="password-new"
+                name="password-new"
                 value={newSecretKey}
                 onChange={(e) => setNewSecretKey(e.target.value)}
                 type="password"
-                autoComplete="off"
+                autoComplete="new-password"
+                spellCheck={false}
+                aria-invalid={Boolean(errors.new)}
               />
             </FieldContent>
-            {errors.new && <FieldDescription className="text-destructive">{errors.new}</FieldDescription>}
+            <FieldError>{errors.new}</FieldError>
           </Field>
 
           <Field>
@@ -131,14 +137,17 @@ export function ChangePassword({ visible, onVisibleChange }: ChangePasswordProps
             <FieldContent>
               <Input
                 id="password-new-confirm"
+                name="password-new-confirm"
                 value={reNewSecretKey}
                 onChange={(e) => setReNewSecretKey(e.target.value)}
                 type="password"
-                autoComplete="off"
+                autoComplete="new-password"
+                spellCheck={false}
                 disabled={!newSecretKey}
+                aria-invalid={Boolean(errors.reNew)}
               />
             </FieldContent>
-            {errors.reNew && <FieldDescription className="text-destructive">{errors.reNew}</FieldDescription>}
+            <FieldError>{errors.reNew}</FieldError>
           </Field>
         </div>
 
diff --git a/components/user/dropdown.tsx b/components/user/dropdown.tsx
index f11ec04c..6865a7a2 100644
--- a/components/user/dropdown.tsx
+++ b/components/user/dropdown.tsx
@@ -71,7 +71,7 @@ export function UserDropdown() {
       <DropdownMenu>
         <DropdownMenuTrigger
           render={
-            <Button variant="ghost">
+            <Button variant="ghost" size={isCollapsed ? "icon" : "default"} aria-label={t("User menu")}>
               <div className="flex items-center gap-3">
                 <span className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full border bg-muted">
                   <Image
@@ -79,7 +79,7 @@ export function UserDropdown() {
                     alt={theme.brand.name}
                     width={32}
                     height={32}
-                    className="h-8 w-8 rounded-full object-cover"
+                    className="rounded-full object-cover"
                     onError={() => {
                       const fallback = resolveAvatarPath(baseAvatarPath)
                       setAvatar((current) => (current === fallback ? current : fallback))
@@ -87,7 +87,7 @@ export function UserDropdown() {
                   />
                 </span>
               </div>
-              {!isCollapsed && <RiMore2Line className="h-4 w-4 text-muted-foreground" />}
+              {!isCollapsed && <RiMore2Line className="size-4 text-muted-foreground" aria-hidden />}
             </Button>
           }
         />
@@ -95,19 +95,19 @@ export function UserDropdown() {
           <DropdownMenuItem
             render={
               <div className="flex cursor-default items-center gap-2">
-                <RiUserLine className="h-4 w-4" />
+                <RiUserLine className="size-4" aria-hidden />
                 <span>{(userInfo as { account_name?: string })?.account_name ?? ""}</span>
               </div>
             }
           />
           {!isAdmin && (
             <DropdownMenuItem onClick={handleChangePassword}>
-              <RiLockPasswordLine className="h-4 w-4" />
+              <RiLockPasswordLine className="size-4" aria-hidden />
               <span>{t("Change Password")}</span>
             </DropdownMenuItem>
           )}
           <DropdownMenuItem onClick={handleLogout}>
-            <RiLogoutBoxRLine className="h-4 w-4" />
+            <RiLogoutBoxRLine className="size-4" aria-hidden />
             <span>{t("Logout")}</span>
           </DropdownMenuItem>
         </DropdownMenuContent>
diff --git a/components/user/edit-form.tsx b/components/user/edit-form.tsx
index 9fe66ef4..cc012952 100644
--- a/components/user/edit-form.tsx
+++ b/components/user/edit-form.tsx
@@ -227,12 +227,12 @@ export function UserEditForm({ open, onOpenChange, row, onSuccess }: UserEditFor
 
   return (
     <Dialog open={open} onOpenChange={closeModal} disablePointerDismissal>
-      <DialogContent className="sm:max-w-5xl">
+      <DialogContent className="overflow-x-hidden sm:max-w-5xl">
         <DialogHeader>
           <DialogTitle>{user.accessKey || row?.accessKey || t("Account")}</DialogTitle>
         </DialogHeader>
 
-        <div className="space-y-4 max-h-[80vh] overflow-auto px-2 -mx-2">
+        <div className="-mx-2 max-h-[80vh] space-y-4 overflow-y-auto overflow-x-hidden px-2">
           <Tabs value={activeTab} onValueChange={setActiveTab} className="flex flex-col gap-4">
             <TabsList className="justify-start overflow-x-auto">
               {canEditAccount ? <TabsTrigger value="account">{t("Account")}</TabsTrigger> : null}
@@ -243,9 +243,12 @@ export function UserEditForm({ open, onOpenChange, row, onSuccess }: UserEditFor
 
             {canEditAccount ? (
               <TabsContent value="account" className="mt-0 space-y-4">
-                <div className="flex items-center justify-start gap-2 rounded-md border px-3 py-2">
-                  <span className="text-sm text-muted-foreground">{t("Status")}</span>
+                <div className="flex items-center justify-start gap-2 border px-3 py-2">
+                  <label htmlFor="edit-user-status" className="text-sm text-muted-foreground">
+                    {t("Status")}
+                  </label>
                   <Switch
+                    id="edit-user-status"
                     checked={statusBoolean}
                     onCheckedChange={handleStatusChange}
                     disabled={loading || submitting}
diff --git a/components/user/edit/access-keys.tsx b/components/user/edit/access-keys.tsx
index 3dbf96ed..83d6f522 100644
--- a/components/user/edit/access-keys.tsx
+++ b/components/user/edit/access-keys.tsx
@@ -9,7 +9,7 @@ import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
 import { Spinner } from "@/components/ui/spinner"
 import { Switch } from "@/components/ui/switch"
-import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/ui/field"
+import { Field, FieldContent, FieldError, FieldLabel } from "@/components/ui/field"
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { SearchInput } from "@/components/search-input"
 import { DateTimePicker } from "@/components/datetime-picker"
@@ -22,7 +22,7 @@ import { usePermissions } from "@/hooks/use-permissions"
 import { usePolicies } from "@/hooks/use-policies"
 import { useDialog } from "@/lib/feedback/dialog"
 import { useMessage } from "@/lib/feedback/message"
-import { makeRandomString } from "@/lib/functions"
+import { formatDateTime, makeRandomString } from "@/lib/functions"
 import { cn } from "@/lib/utils"
 import { useTranslation } from "react-i18next"
 import type { ColumnDef } from "@tanstack/react-table"
@@ -57,7 +57,7 @@ function formatExpiration(value?: string | null) {
   if (!value || value === "9999-01-01T00:00:00Z") return "-"
   const date = dayjs(value)
   if (!date.isValid()) return "-"
-  return date.format("YYYY-MM-DD HH:mm")
+  return formatDateTime(value)
 }
 
 function formatPolicy(value: unknown) {
@@ -201,12 +201,12 @@ function UserAccessKeysNewDialog({ open, onOpenChange, userName, onSuccess, onNo
 
   return (
     <Dialog open={open} onOpenChange={closeModal} disablePointerDismissal>
-      <DialogContent className={cn("sm:max-w-xl", !impliedPolicy && "sm:max-w-6xl")}>
+      <DialogContent className={cn("overflow-x-hidden sm:max-w-xl", !impliedPolicy && "sm:max-w-6xl")}>
         <DialogHeader>
           <DialogTitle>{t("Create Key")}</DialogTitle>
         </DialogHeader>
 
-        <div className="flex max-h-[80vh] flex-col gap-4 overflow-auto px-2 -mx-2 lg:flex-row">
+        <div className="-mx-2 flex max-h-[80vh] flex-col gap-4 overflow-y-auto overflow-x-hidden px-2 lg:flex-row">
           <div
             className={cn(
               impliedPolicy ? "flex flex-1 flex-col gap-4" : "flex w-full flex-col gap-4 lg:w-72 lg:shrink-0",
@@ -217,14 +217,15 @@ function UserAccessKeysNewDialog({ open, onOpenChange, userName, onSuccess, onNo
               <FieldContent>
                 <Input
                   id="create-user-access-key"
+                  name="create-user-access-key"
                   value={accessKey}
                   onChange={(event) => setAccessKey(event.target.value)}
                   autoComplete="off"
+                  spellCheck={false}
+                  aria-invalid={Boolean(errors.accessKey)}
                 />
               </FieldContent>
-              {errors.accessKey ? (
-                <FieldDescription className="text-destructive">{errors.accessKey}</FieldDescription>
-              ) : null}
+              <FieldError>{errors.accessKey}</FieldError>
             </Field>
 
             <Field>
@@ -232,15 +233,16 @@ function UserAccessKeysNewDialog({ open, onOpenChange, userName, onSuccess, onNo
               <FieldContent>
                 <Input
                   id="create-user-secret-key"
+                  name="create-user-secret-key"
                   type="password"
                   value={secretKey}
                   onChange={(event) => setSecretKey(event.target.value)}
                   autoComplete="off"
+                  spellCheck={false}
+                  aria-invalid={Boolean(errors.secretKey)}
                 />
               </FieldContent>
-              {errors.secretKey ? (
-                <FieldDescription className="text-destructive">{errors.secretKey}</FieldDescription>
-              ) : null}
+              <FieldError>{errors.secretKey}</FieldError>
             </Field>
 
             <Field>
@@ -263,12 +265,15 @@ function UserAccessKeysNewDialog({ open, onOpenChange, userName, onSuccess, onNo
               <FieldContent>
                 <Input
                   id="create-user-key-name"
+                  name="create-user-key-name"
                   value={name}
                   onChange={(event) => setName(event.target.value)}
                   autoComplete="off"
+                  spellCheck={false}
+                  aria-invalid={Boolean(errors.name)}
                 />
               </FieldContent>
-              {errors.name ? <FieldDescription className="text-destructive">{errors.name}</FieldDescription> : null}
+              <FieldError>{errors.name}</FieldError>
             </Field>
 
             <Field>
@@ -276,6 +281,7 @@ function UserAccessKeysNewDialog({ open, onOpenChange, userName, onSuccess, onNo
               <FieldContent>
                 <Textarea
                   id="create-user-key-description"
+                  name="create-user-key-description"
                   value={description}
                   onChange={(event) => setDescription(event.target.value)}
                   rows={3}
@@ -283,26 +289,35 @@ function UserAccessKeysNewDialog({ open, onOpenChange, userName, onSuccess, onNo
               </FieldContent>
             </Field>
 
-            <Field orientation="responsive" className="items-start gap-3 rounded-md border p-3">
-              <FieldLabel className="text-sm font-medium">{t("Use main account policy")}</FieldLabel>
+            <Field orientation="responsive" className="items-start gap-3 border p-3">
+              <FieldLabel htmlFor="create-user-access-key-implied-policy" className="text-sm font-medium">
+                {t("Use main account policy")}
+              </FieldLabel>
               <FieldContent className="flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
                 <p className="text-xs text-muted-foreground">
                   {t("Automatically inherit the main account policy when enabled.")}
                 </p>
-                <Switch checked={impliedPolicy} onCheckedChange={setImpliedPolicy} />
+                <Switch
+                  id="create-user-access-key-implied-policy"
+                  checked={impliedPolicy}
+                  onCheckedChange={setImpliedPolicy}
+                />
               </FieldContent>
             </Field>
           </div>
 
           {!impliedPolicy ? (
-            <div className="flex-1 max-h-[60vh] overflow-auto">
+            <div className="max-h-[60vh] flex-1 overflow-y-auto overflow-x-hidden">
               <Field className="h-full">
-                <FieldLabel>{t("Current user policy")}</FieldLabel>
+                <FieldLabel htmlFor="create-user-policy">{t("Current user policy")}</FieldLabel>
                 <FieldContent className="h-full">
                   <Textarea
+                    id="create-user-policy"
+                    name="create-user-policy"
                     value={policy}
                     onChange={(event) => setPolicy(event.target.value)}
                     className="h-full min-h-[200px] font-mono text-xs"
+                    spellCheck={false}
                   />
                 </FieldContent>
               </Field>
@@ -430,72 +445,100 @@ function UserAccessKeysEditDialog({ open, onOpenChange, userName, row, onSuccess
 
   return (
     <Dialog open={open} onOpenChange={closeModal} disablePointerDismissal>
-      <DialogContent className={cn("sm:max-w-xl", !impliedPolicy && "sm:max-w-6xl")}>
+      <DialogContent className={cn("overflow-x-hidden sm:max-w-xl", !impliedPolicy && "sm:max-w-6xl")}>
         <DialogHeader>
           <DialogTitle>{t("Edit Key")}</DialogTitle>
         </DialogHeader>
 
-        <div className="flex max-h-[80vh] flex-col gap-4 overflow-auto px-2 -mx-2 lg:flex-row">
+        <div className="-mx-2 flex max-h-[80vh] flex-col gap-4 overflow-y-auto overflow-x-hidden px-2 lg:flex-row">
           <div
             className={cn(
               impliedPolicy ? "flex flex-1 flex-col gap-4" : "flex w-full flex-col gap-4 lg:w-72 lg:shrink-0",
             )}
           >
             <Field>
-              <FieldLabel>{t("Access Key")}</FieldLabel>
+              <FieldLabel htmlFor="edit-user-access-key">{t("Access Key")}</FieldLabel>
               <FieldContent>
-                <Input value={accessKey} disabled />
+                <Input id="edit-user-access-key" name="edit-user-access-key" value={accessKey} disabled />
               </FieldContent>
             </Field>
 
             <Field>
-              <FieldLabel>{t("Expiry")}</FieldLabel>
+              <FieldLabel htmlFor="edit-user-expiry">{t("Expiry")}</FieldLabel>
               <FieldContent>
-                <DateTimePicker value={expiry} onChange={setExpiry} min={minExpiry} />
+                <DateTimePicker id="edit-user-expiry" value={expiry} onChange={setExpiry} min={minExpiry} />
               </FieldContent>
             </Field>
 
             <Field>
-              <FieldLabel>{t("Name")}</FieldLabel>
+              <FieldLabel htmlFor="edit-user-key-name">{t("Name")}</FieldLabel>
               <FieldContent>
-                <Input value={name} onChange={(event) => setName(event.target.value)} />
+                <Input
+                  id="edit-user-key-name"
+                  name="edit-user-key-name"
+                  value={name}
+                  onChange={(event) => setName(event.target.value)}
+                  autoComplete="off"
+                  spellCheck={false}
+                />
               </FieldContent>
             </Field>
 
             <Field>
-              <FieldLabel>{t("Description")}</FieldLabel>
+              <FieldLabel htmlFor="edit-user-key-description">{t("Description")}</FieldLabel>
               <FieldContent>
-                <Textarea value={description} onChange={(event) => setDescription(event.target.value)} rows={2} />
+                <Textarea
+                  id="edit-user-key-description"
+                  name="edit-user-key-description"
+                  value={description}
+                  onChange={(event) => setDescription(event.target.value)}
+                  rows={2}
+                />
               </FieldContent>
             </Field>
 
-            <Field orientation="responsive" className="items-start gap-3 rounded-md border p-3">
-              <FieldLabel className="text-sm font-medium">{t("Use main account policy")}</FieldLabel>
+            <Field orientation="responsive" className="items-start gap-3 border p-3">
+              <FieldLabel htmlFor="edit-user-access-key-implied-policy" className="text-sm font-medium">
+                {t("Use main account policy")}
+              </FieldLabel>
               <FieldContent className="flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
                 <p className="text-xs text-muted-foreground">
                   {t("Automatically inherit the main account policy when enabled.")}
                 </p>
-                <Switch checked={impliedPolicy} onCheckedChange={setImpliedPolicy} />
+                <Switch
+                  id="edit-user-access-key-implied-policy"
+                  checked={impliedPolicy}
+                  onCheckedChange={setImpliedPolicy}
+                />
               </FieldContent>
             </Field>
 
             <Field orientation="responsive">
-              <FieldLabel className="text-sm font-medium">{t("Status")}</FieldLabel>
+              <FieldLabel htmlFor="edit-user-access-key-status" className="text-sm font-medium">
+                {t("Status")}
+              </FieldLabel>
               <FieldContent className="flex justify-end">
-                <Switch checked={status === "on"} onCheckedChange={(checked) => setStatus(checked ? "on" : "off")} />
+                <Switch
+                  id="edit-user-access-key-status"
+                  checked={status === "on"}
+                  onCheckedChange={(checked) => setStatus(checked ? "on" : "off")}
+                />
               </FieldContent>
             </Field>
           </div>
 
           {!impliedPolicy ? (
-            <div className="flex-1 max-h-[60vh] overflow-auto">
+            <div className="max-h-[60vh] flex-1 overflow-y-auto overflow-x-hidden">
               <Field className="h-full">
-                <FieldLabel>{t("Current user policy")}</FieldLabel>
+                <FieldLabel htmlFor="edit-user-policy">{t("Current user policy")}</FieldLabel>
                 <FieldContent className="h-full">
                   <Textarea
+                    id="edit-user-policy"
+                    name="edit-user-policy"
                     value={policy}
                     onChange={(event) => setPolicy(event.target.value)}
                     className="h-full min-h-[200px] font-mono text-xs"
+                    spellCheck={false}
                   />
                 </FieldContent>
               </Field>
@@ -640,13 +683,13 @@ export function UserEditAccessKeys({ userName }: UserEditAccessKeysProps) {
                   setEditDialogOpen(true)
                 }}
               >
-                <RiEdit2Line className="size-4" />
+                <RiEdit2Line className="size-4" aria-hidden />
                 <span>{t("Edit")}</span>
               </Button>
             ) : null}
             {canDeleteAccessKey ? (
               <Button type="button" variant="outline" size="sm" onClick={() => handleDelete(row.original)}>
-                <RiDeleteBin5Line className="size-4" />
+                <RiDeleteBin5Line className="size-4" aria-hidden />
                 <span>{t("Delete")}</span>
               </Button>
             ) : null}
@@ -686,7 +729,7 @@ export function UserEditAccessKeys({ userName }: UserEditAccessKeysProps) {
         />
         {canCreateAccessKey ? (
           <Button type="button" variant="outline" onClick={() => setNewDialogOpen(true)}>
-            <RiAddLine className="size-4" />
+            <RiAddLine className="size-4" aria-hidden />
             <span>{t("Add Access Key")}</span>
           </Button>
         ) : null}
diff --git a/components/user/edit/groups.tsx b/components/user/edit/groups.tsx
index 3d331557..7b7c5334 100644
--- a/components/user/edit/groups.tsx
+++ b/components/user/edit/groups.tsx
@@ -49,7 +49,7 @@ export function UserEditGroups({ value, options, disabled = false, onChange }: U
                 disabled={disabled}
               >
                 <span className="truncate">{value.length ? value.join(", ") : t("Select Group")}</span>
-                <RiArrowDownSLine className="size-4 text-muted-foreground" />
+                <RiArrowDownSLine className="size-4 text-muted-foreground" aria-hidden />
               </Button>
             }
           />
diff --git a/components/user/edit/policies.tsx b/components/user/edit/policies.tsx
index bb032e2d..cc3b3a64 100644
--- a/components/user/edit/policies.tsx
+++ b/components/user/edit/policies.tsx
@@ -49,7 +49,7 @@ export function UserEditPolicies({ value, options, disabled = false, onChange }:
                 disabled={disabled}
               >
                 <span className="truncate">{value.length ? value.join(", ") : t("Select user group policies")}</span>
-                <RiArrowDownSLine className="size-4 text-muted-foreground" />
+                <RiArrowDownSLine className="size-4 text-muted-foreground" aria-hidden />
               </Button>
             }
           />
diff --git a/components/user/edit/secret-key.tsx b/components/user/edit/secret-key.tsx
index 3e933d97..2a0547b3 100644
--- a/components/user/edit/secret-key.tsx
+++ b/components/user/edit/secret-key.tsx
@@ -2,7 +2,7 @@
 
 import { useTranslation } from "react-i18next"
 import { Input } from "@/components/ui/input"
-import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/ui/field"
+import { Field, FieldContent, FieldError, FieldLabel } from "@/components/ui/field"
 
 interface UserEditSecretKeyProps {
   value: string
@@ -20,14 +20,17 @@ export function UserEditSecretKey({ value, error, disabled = false, onChange }:
       <FieldContent>
         <Input
           id="edit-user-secret-key"
+          name="edit-user-secret-key"
           value={value}
           onChange={(e) => onChange(e.target.value)}
           type="password"
           autoComplete="new-password"
+          spellCheck={false}
           disabled={disabled}
+          aria-invalid={Boolean(error)}
         />
       </FieldContent>
-      {error && <FieldDescription className="text-destructive">{error}</FieldDescription>}
+      <FieldError>{error}</FieldError>
     </Field>
   )
 }
diff --git a/components/user/new-form.tsx b/components/user/new-form.tsx
index cbd4f2d2..520b4dca 100644
--- a/components/user/new-form.tsx
+++ b/components/user/new-form.tsx
@@ -6,7 +6,7 @@ import { RiArrowDownSLine, RiCheckLine } from "@remixicon/react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
-import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/ui/field"
+import { Field, FieldContent, FieldError, FieldLabel } from "@/components/ui/field"
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
@@ -136,42 +136,48 @@ export function UserNewForm({ open, onOpenChange, onSuccess }: UserNewFormProps)
 
   return (
     <Dialog open={open} onOpenChange={closeModal} disablePointerDismissal>
-      <DialogContent className="sm:max-w-lg">
+      <DialogContent className="overflow-x-hidden sm:max-w-lg">
         <DialogHeader>
           <DialogTitle>{t("Create User")}</DialogTitle>
         </DialogHeader>
 
-        <div className="space-y-6 max-h-[80vh] overflow-auto px-2 -mx-2">
+        <div className="-mx-2 max-h-[80vh] space-y-6 overflow-y-auto overflow-x-hidden px-2">
           <div className="grid gap-4 md:grid-cols-2">
             <Field>
-              <FieldLabel>{t("User Name")}</FieldLabel>
+              <FieldLabel htmlFor="new-user-access-key">{t("User Name")}</FieldLabel>
               <FieldContent>
                 <Input
+                  id="new-user-access-key"
+                  name="new-user-access-key"
                   value={accessKey}
                   onChange={(e) => setAccessKey(e.target.value)}
                   minLength={USERNAME_MIN_LENGTH}
                   maxLength={USERNAME_MAX_LENGTH}
-                  name="new-user-access-key"
-                  autoComplete="new-user-access-key"
+                  autoComplete="off"
+                  spellCheck={false}
+                  aria-invalid={Boolean(errors.accessKey)}
                 />
               </FieldContent>
-              {errors.accessKey && <FieldDescription className="text-destructive">{errors.accessKey}</FieldDescription>}
+              <FieldError>{errors.accessKey}</FieldError>
             </Field>
 
             <Field>
-              <FieldLabel>{t("Password")}</FieldLabel>
+              <FieldLabel htmlFor="new-user-password">{t("Password")}</FieldLabel>
               <FieldContent>
                 <Input
+                  id="new-user-password"
+                  name="new-user-password"
                   value={secretKey}
                   onChange={(e) => setSecretKey(e.target.value)}
                   type="password"
                   minLength={PASSWORD_MIN_LENGTH}
                   maxLength={PASSWORD_MAX_LENGTH}
-                  name="new-user-password"
-                  autoComplete="new-user-password"
+                  autoComplete="new-password"
+                  spellCheck={false}
+                  aria-invalid={Boolean(errors.secretKey)}
                 />
               </FieldContent>
-              {errors.secretKey && <FieldDescription className="text-destructive">{errors.secretKey}</FieldDescription>}
+              <FieldError>{errors.secretKey}</FieldError>
             </Field>
           </div>
 
@@ -188,7 +194,7 @@ export function UserNewForm({ open, onOpenChange, onSuccess }: UserNewFormProps)
                       aria-label={t("Groups")}
                     >
                       <span className="truncate">{groups.length ? groups.join(", ") : t("Select Group")}</span>
-                      <RiArrowDownSLine className="size-4 text-muted-foreground" />
+                      <RiArrowDownSLine className="size-4 text-muted-foreground" aria-hidden />
                     </Button>
                   }
                 />
@@ -242,7 +248,7 @@ export function UserNewForm({ open, onOpenChange, onSuccess }: UserNewFormProps)
                       <span className="truncate">
                         {policies.length ? policies.join(", ") : t("Select user group policies")}
                       </span>
-                      <RiArrowDownSLine className="size-4 text-muted-foreground" />
+                      <RiArrowDownSLine className="size-4 text-muted-foreground" aria-hidden />
                     </Button>
                   }
                 />
diff --git a/components/user/selector.tsx b/components/user/selector.tsx
index ef6460e6..f6a1f954 100644
--- a/components/user/selector.tsx
+++ b/components/user/selector.tsx
@@ -71,7 +71,7 @@ export function UserSelector({
                 aria-label={displayLabel}
               >
                 <span className="truncate">{value.length ? value.join(", ") : displayPlaceholder}</span>
-                <RiArrowDownSLine className="size-4 text-muted-foreground" />
+                <RiArrowDownSLine className="size-4 text-muted-foreground" aria-hidden />
               </Button>
             }
           />
diff --git a/eslint.config.js b/eslint.config.js
index c226d89e..28778f5f 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -11,15 +11,16 @@ const eslintConfig = defineConfig([
   globalIgnores([
     // Default ignores of eslint-config-next:
     ".next/**",
+    ".nuxt/**",
     "out/**",
     "build/**",
     "next-env.d.ts",
   ]),
   {
     rules: {
-      "react-hooks/set-state-in-effect": "off"
-    }
-  }
+      "react-hooks/set-state-in-effect": "off",
+    },
+  },
 ])
 
 export default eslintConfig
diff --git a/i18n/locales/ar-MA.json b/i18n/locales/ar-MA.json
index c19cb24a..9437c7a5 100644
--- a/i18n/locales/ar-MA.json
+++ b/i18n/locales/ar-MA.json
@@ -168,7 +168,7 @@
   "Clear All": "مسح الكل",
   "Clear Cache": "مسح التخزين المؤقت",
   "Clear Records": "مسح السجلات",
-  "Clearing cache...": "جارٍ مسح ذاكرة التخزين المؤقت...",
+  "Clearing cache…": "جارٍ مسح ذاكرة التخزين المؤقت…",
   "Click or drag ZIP file to this area to upload": "انقر أو اسحب ملف ZIP إلى هذه المنطقة للتحميل",
   "Client ID": "معرّف العميل",
   "Client ID is required": "معرف العميل مطلوب",
@@ -180,7 +180,7 @@
   "Collects and displays key performance indicators (such as CPU, memory, disk I/O, etc.) through visualized charts to help users understand system operation status and performance bottlenecks": "يجمع ويعرض مؤشرات الأداء الرئيسية مثل المعالج والذاكرة وإدخال/إخراج القرص عبر مخططات مرئية لمساعدة المستخدمين على فهم حالة تشغيل النظام واختناقات الأداء",
   "Comma-separated audience IDs.": "معرفات الجمهور مفصولة بفواصل.",
   "Completed": "مكتمل({count})",
-  "Completing SSO login...": "جارٍ إكمال تسجيل الدخول عبر SSO...",
+  "Completing SSO login…": "جارٍ إكمال تسجيل الدخول عبر SSO…",
   "Configuration": "الإعداد",
   "Configuration Information": "معلومات الإعداد",
   "Configuration URL": "رابط الإعداد",
@@ -284,7 +284,7 @@
   "Delete Tag Confirm": "تأكيد حذف الوسم",
   "Delete task created": "تم إنشاء مهمة الحذف",
   "Deleting": "جارٍ الحذف({count})",
-  "Deleting...": "جارٍ الحذف...",
+  "Deleting…": "جارٍ الحذف…",
   "Deletion Date": "تاريخ الحذف",
   "Deployment ID": "معرّف النشر",
   "Describe the purpose of this key": "صف غرض هذا المفتاح",
@@ -349,7 +349,7 @@
   "Enter AppRole Role ID": "أدخل معرف دور AppRole",
   "Enter AppRole Secret ID": "أدخل معرف سر AppRole",
   "Enter an absolute path such as D:/data/kms-keys": "أدخل مسارًا مطلقًا مثل D:/data/kms-keys",
-  "Enter prefix...": "أدخل البادئة...",
+  "Enter prefix…": "أدخل البادئة…",
   "Enter the default SSE key ID": "أدخل معرّف مفتاح SSE الافتراضي",
   "Enter your Vault authentication token": "أدخل رمز مصادقة Vault الخاص بك",
   "Enterprise": "المؤسسة",
@@ -373,7 +373,7 @@
   "Export": "تصدير",
   "Export Now": "تصدير الآن",
   "Export all IAM configurations including users, groups, policies, and access keys in a ZIP file.": "تصدير جميع إعدادات IAM بما في ذلك المستخدمون والمجموعات والسياسات ومفاتيح الوصول في ملف ZIP.",
-  "Exporting...": "جارٍ التصدير...",
+  "Exporting…": "جارٍ التصدير…",
   "External MinIO tier": "طبقة MinIO الخارجية",
   "Failed": "فشل({count})",
   "Failed Status": "فشل",
@@ -480,7 +480,7 @@
   "Import Now": "استيراد الآن",
   "Import Success": "تم الاستيراد بنجاح",
   "Import/Export": "استيراد/تصدير",
-  "Importing...": "جارٍ الاستيراد...",
+  "Importing…": "جارٍ الاستيراد…",
   "In Progress": "{total} مهمة قيد التنفيذ ({processing} معالجة، {completed} مكتملة)",
   "Inactive": "غير نشط",
   "Include objects that already exist in the source bucket.": "تضمين الكائنات الموجودة بالفعل في الحاوية المصدر.",
@@ -548,6 +548,7 @@
   "Key services and configuration values reported by the cluster.": "خدمات المفاتيح وقيم الإعداد التي أبلغ عنها المجموعة.",
   "Key storage path prefix in KV store": "بادئة مسار تخزين المفتاح في مخزن KV",
   "Keys in PendingDeletion can still be restored or deleted immediately.": "لا يزال بإمكان استعادة المفاتيح في حالة PendingDeletion أو حذفها فورًا.",
+  "Language": "اللغة",
   "Large File Count Warning": "تحذير من كثرة الملفات الكبيرة",
   "Last": "الأخير",
   "Last Modified": "آخر تعديل",
@@ -571,9 +572,9 @@
   "Light": "فاتح",
   "Load Balancing": "موازنة التحميل",
   "Load Failed": "فشل التحميل",
-  "Loading buckets...": "جارٍ تحميل الحاويات...",
-  "Loading keys...": "جارٍ تحميل المفاتيح...",
-  "Loading...": "جارٍ التحميل...",
+  "Loading buckets…": "جارٍ تحميل الحاويات…",
+  "Loading keys…": "جارٍ تحميل المفاتيح…",
+  "Loading…": "جارٍ التحميل…",
   "Local Key Directory": "دليل المفاتيح المحلي",
   "Local development mode set successfully": "تم تعيين وضع التطوير المحلي بنجاح",
   "Local filesystem": "نظام الملفات المحلي",
@@ -971,7 +972,7 @@
   "Save Success": "تم الحفظ بنجاح",
   "Save failed": "فشل الحفظ",
   "Saved": "تم الحفظ",
-  "Saving...": "جارٍ الحفظ...",
+  "Saving…": "جارٍ الحفظ…",
   "Scalability": "قابلية التوسع",
   "Schedule Deletion": "جدولة الحذف",
   "Schedule Key Deletion": "جدولة حذف المفتاح",
@@ -985,7 +986,7 @@
   "Search Policy": "بحث السياسة",
   "Search User": "بحث المستخدم",
   "Search User Group": "بحث مجموعة المستخدمين",
-  "Search buckets...": "بحث الحاويات...",
+  "Search buckets…": "بحث الحاويات…",
   "Secret Configured": "تم إعداد السر",
   "Secret ID": "معرف السر",
   "Secret Key": "المفتاح السري",
@@ -1060,6 +1061,7 @@
   "Size": "الحجم",
   "Skip": "تخطي",
   "Skip TLS verification": "تخطي التحقق من TLS",
+  "Skip to main content": "تخطي إلى المحتوى الرئيسي",
   "Sort by": "ترتيب حسب",
   "Source": "المصدر",
   "Standard AWS S3 tier": "طبقة AWS S3 القياسية",
@@ -1079,7 +1081,7 @@
   "Stop rebalance": "إيقاف إعادة التوازن",
   "Stopped": "متوقف",
   "Stopping": "جارٍ الإيقاف",
-  "Stopping KMS...": "جارٍ إيقاف KMS...",
+  "Stopping KMS…": "جارٍ إيقاف KMS…",
   "Storage Class": "فئة التخزين",
   "Storage Space": "مساحة التخزين",
   "Storage Type": "نوع التخزين",
@@ -1120,6 +1122,7 @@
   "Technical Training": "التدريب التقني",
   "Temporary URL": "URL مؤقت",
   "Temporary URL Expiration": "انتهاء صلاحية URL المؤقت",
+  "Theme": "السمة",
   "The current site is detected automatically by the server. Add one or more remote sites to join the replication group.": "يكتشف الخادم الموقع الحالي تلقائيًا. أضف موقعًا بعيدًا واحدًا أو أكثر للانضمام إلى مجموعة النسخ.",
   "The directory must be an absolute path on the server.": "يجب أن يكون الدليل مسارًا مطلقًا على الخادم.",
   "The exported file contains sensitive information. Please keep it secure.": "يحتوي الملف المُصدَّر على معلومات حساسة. يرجى الحفاظ عليه بأمان.",
@@ -1214,7 +1217,7 @@
   "Username Claim": "مطالبة اسم المستخدم",
   "Users": "المستخدمون",
   "Validate": "تحقق",
-  "Validating...": "جارٍ التحقق...",
+  "Validating…": "جارٍ التحقق…",
   "Validation failed": "فشل التحقق",
   "Validity": "الصلاحية",
   "Vault AppRole is not supported in the first version of this console.": "Vault AppRole غير مدعوم في الإصدار الأول من هذه الوحدة.",
@@ -1323,5 +1326,14 @@
   "ID": "ID",
   "Objects Failed": "Objects Failed",
   "Start Size": "Start Size",
-  "Start Time": "Start Time"
+  "Start Time": "Start Time",
+  "Bandwidth Unit": "وحدة النطاق الترددي",
+  "Clear search": "مسح البحث",
+  "Policy Statement must be an array": "يجب أن يكون Policy Statement مصفوفة",
+  "Policy format is invalid. Please check the JSON syntax.": "تنسيق السياسة غير صالح. يرجى التحقق من صياغة JSON.",
+  "Policy must be a valid JSON object": "يجب أن تكون السياسة كائن JSON صالحا",
+  "Preparing download": "جار تحضير التنزيل",
+  "User menu": "قائمة المستخدم",
+  "Cleanup Warnings": "تحذيرات التنظيف",
+  "Failed to load objects": "فشل تحميل الكائنات"
 }
diff --git a/i18n/locales/de-DE.json b/i18n/locales/de-DE.json
index e970c657..c09d6d7c 100644
--- a/i18n/locales/de-DE.json
+++ b/i18n/locales/de-DE.json
@@ -168,7 +168,7 @@
   "Clear All": "Alle löschen",
   "Clear Cache": "Cache löschen",
   "Clear Records": "Datensätze löschen",
-  "Clearing cache...": "Cache wird geleert...",
+  "Clearing cache…": "Cache wird geleert…",
   "Click or drag ZIP file to this area to upload": "ZIP-Datei in diesen Bereich klicken oder ziehen zum Hochladen",
   "Client ID": "Client-ID",
   "Client ID is required": "Client-ID ist erforderlich",
@@ -180,7 +180,7 @@
   "Collects and displays key performance indicators (such as CPU, memory, disk I/O, etc.) through visualized charts to help users understand system operation status and performance bottlenecks": "Erfasst und visualisiert wichtige Leistungsindikatoren wie CPU, Arbeitsspeicher und Festplatten-I/O, damit Benutzer den Systemzustand und Leistungsengpässe nachvollziehen können",
   "Comma-separated audience IDs.": "Audience-IDs durch Kommas getrennt eingeben.",
   "Completed": "Abgeschlossen({count})",
-  "Completing SSO login...": "SSO-Anmeldung wird abgeschlossen...",
+  "Completing SSO login…": "SSO-Anmeldung wird abgeschlossen…",
   "Configuration": "Konfiguration",
   "Configuration Information": "Konfigurationsinformationen",
   "Configuration URL": "Konfigurations-URL",
@@ -284,7 +284,7 @@
   "Delete Tag Confirm": "Tag löschen bestätigen",
   "Delete task created": "Löschaufgabe erstellt",
   "Deleting": "Löschen ({count})",
-  "Deleting...": "Löschen...",
+  "Deleting…": "Löschen…",
   "Deletion Date": "Löschdatum",
   "Deployment ID": "Bereitstellungs-ID",
   "Describe the purpose of this key": "Zweck dieses Schlüssels beschreiben",
@@ -349,7 +349,7 @@
   "Enter AppRole Role ID": "AppRole-Rollen-ID eingeben",
   "Enter AppRole Secret ID": "AppRole-Geheimnis-ID eingeben",
   "Enter an absolute path such as D:/data/kms-keys": "Absoluten Pfad eingeben, z. B. D:/data/kms-keys",
-  "Enter prefix...": "Präfix eingeben...",
+  "Enter prefix…": "Präfix eingeben…",
   "Enter the default SSE key ID": "Standard-SSE-Schlüssel-ID eingeben",
   "Enter your Vault authentication token": "Ihr Vault-Authentifizierungstoken eingeben",
   "Enterprise": "Unternehmen",
@@ -373,7 +373,7 @@
   "Export": "Exportieren",
   "Export Now": "Jetzt exportieren",
   "Export all IAM configurations including users, groups, policies, and access keys in a ZIP file.": "Alle IAM-Konfigurationen einschließlich Benutzer, Gruppen, Richtlinien und Zugriffsschlüssel in einer ZIP-Datei exportieren.",
-  "Exporting...": "Exportieren...",
+  "Exporting…": "Exportieren…",
   "External MinIO tier": "Externes MinIO-Tier",
   "Failed": "Fehlgeschlagen ({count})",
   "Failed Status": "Fehlgeschlagen",
@@ -480,7 +480,7 @@
   "Import Now": "Jetzt importieren",
   "Import Success": "Import erfolgreich",
   "Import/Export": "Import/Export",
-  "Importing...": "Importieren...",
+  "Importing…": "Importieren…",
   "In Progress": "{total} Aufgaben in Bearbeitung ({processing} wird verarbeitet, {completed} abgeschlossen)",
   "Inactive": "Inaktiv",
   "Include objects that already exist in the source bucket.": "Objekte einschließen, die bereits im Quell-Bucket vorhanden sind.",
@@ -548,6 +548,7 @@
   "Key services and configuration values reported by the cluster.": "Schlüsseldienste und Konfigurationswerte, die vom Cluster gemeldet werden.",
   "Key storage path prefix in KV store": "Schlüsselspeicherpfad-Präfix im KV-Speicher",
   "Keys in PendingDeletion can still be restored or deleted immediately.": "Schlüssel im Status PendingDeletion können weiterhin wiederhergestellt oder sofort gelöscht werden.",
+  "Language": "Sprache",
   "Large File Count Warning": "Warnung bei großer Dateianzahl",
   "Last": "Letzte",
   "Last Modified": "Zuletzt geändert",
@@ -571,9 +572,9 @@
   "Light": "Hell",
   "Load Balancing": "Lastausgleich",
   "Load Failed": "Laden fehlgeschlagen",
-  "Loading buckets...": "Buckets werden geladen...",
-  "Loading keys...": "Schlüssel werden geladen...",
-  "Loading...": "Wird geladen...",
+  "Loading buckets…": "Buckets werden geladen…",
+  "Loading keys…": "Schlüssel werden geladen…",
+  "Loading…": "Wird geladen…",
   "Local Key Directory": "Lokales Schlüsselverzeichnis",
   "Local development mode set successfully": "Lokaler Entwicklungsmodus erfolgreich gesetzt",
   "Local filesystem": "Lokales Dateisystem",
@@ -971,7 +972,7 @@
   "Save Success": "Erfolgreich gespeichert",
   "Save failed": "Speichern fehlgeschlagen",
   "Saved": "Gespeichert",
-  "Saving...": "Wird gespeichert...",
+  "Saving…": "Wird gespeichert…",
   "Scalability": "Skalierbarkeit",
   "Schedule Deletion": "Löschung planen",
   "Schedule Key Deletion": "Schlüssellöschung planen",
@@ -985,7 +986,7 @@
   "Search Policy": "Richtlinie suchen",
   "Search User": "Benutzer suchen",
   "Search User Group": "Benutzergruppe suchen",
-  "Search buckets...": "Buckets suchen...",
+  "Search buckets…": "Buckets suchen…",
   "Secret Configured": "Secret konfiguriert",
   "Secret ID": "Geheimnis-ID",
   "Secret Key": "Geheimschlüssel",
@@ -1060,6 +1061,7 @@
   "Size": "Größe",
   "Skip": "Überspringen",
   "Skip TLS verification": "TLS-Überprüfung überspringen",
+  "Skip to main content": "Zum Hauptinhalt springen",
   "Sort by": "Sortieren nach",
   "Source": "Quelle",
   "Standard AWS S3 tier": "Standard AWS S3-Tier",
@@ -1079,7 +1081,7 @@
   "Stop rebalance": "Neuausgleich stoppen",
   "Stopped": "Gestoppt",
   "Stopping": "Wird gestoppt",
-  "Stopping KMS...": "KMS wird gestoppt...",
+  "Stopping KMS…": "KMS wird gestoppt…",
   "Storage Class": "Speicherklasse",
   "Storage Space": "Speicherplatz",
   "Storage Type": "Speichertyp",
@@ -1120,6 +1122,7 @@
   "Technical Training": "Technische Schulung",
   "Temporary URL": "Temporäre URL",
   "Temporary URL Expiration": "Temporäre URL Ablaufzeit",
+  "Theme": "Design",
   "The current site is detected automatically by the server. Add one or more remote sites to join the replication group.": "Der aktuelle Standort wird automatisch vom Server erkannt. Fügen Sie einen oder mehrere Remote-Standorte hinzu, um der Replikationsgruppe beizutreten.",
   "The directory must be an absolute path on the server.": "Das Verzeichnis muss ein absoluter Pfad auf dem Server sein.",
   "The exported file contains sensitive information. Please keep it secure.": "Die exportierte Datei enthält sensible Informationen. Bitte bewahren Sie sie sicher auf.",
@@ -1214,7 +1217,7 @@
   "Username Claim": "Benutzername-Claim",
   "Users": "Benutzer",
   "Validate": "Validieren",
-  "Validating...": "Wird validiert...",
+  "Validating…": "Wird validiert…",
   "Validation failed": "Validierung fehlgeschlagen",
   "Validity": "Gültigkeit",
   "Vault AppRole is not supported in the first version of this console.": "Vault AppRole wird in der ersten Version dieser Konsole nicht unterstützt.",
@@ -1323,5 +1326,14 @@
   "ID": "ID",
   "Objects Failed": "Objects Failed",
   "Start Size": "Start Size",
-  "Start Time": "Start Time"
+  "Start Time": "Start Time",
+  "Bandwidth Unit": "Bandbreiteneinheit",
+  "Clear search": "Suche leeren",
+  "Policy Statement must be an array": "Policy Statement muss ein Array sein",
+  "Policy format is invalid. Please check the JSON syntax.": "Das Policy-Format ist ungültig. Bitte prüfen Sie die JSON-Syntax.",
+  "Policy must be a valid JSON object": "Policy muss ein gültiges JSON-Objekt sein",
+  "Preparing download": "Download wird vorbereitet",
+  "User menu": "Benutzermenü",
+  "Cleanup Warnings": "Bereinigungswarnungen",
+  "Failed to load objects": "Objekte konnten nicht geladen werden"
 }
diff --git a/i18n/locales/en-US.json b/i18n/locales/en-US.json
index 616bd6ef..4dc3d4f7 100644
--- a/i18n/locales/en-US.json
+++ b/i18n/locales/en-US.json
@@ -168,7 +168,7 @@
   "Clear All": "Clear All",
   "Clear Cache": "Clear Cache",
   "Clear Records": "Clear Records",
-  "Clearing cache...": "Clearing cache...",
+  "Clearing cache…": "Clearing cache…",
   "Click or drag ZIP file to this area to upload": "Click or drag ZIP file to this area to upload",
   "Client ID": "Client ID",
   "Client ID is required": "Client ID is required",
@@ -180,7 +180,7 @@
   "Collects and displays key performance indicators (such as CPU, memory, disk I/O, etc.) through visualized charts to help users understand system operation status and performance bottlenecks": "Collects and displays key performance indicators (such as CPU, memory, disk I/O, etc.) through visualized charts to help users understand system operation status and performance bottlenecks",
   "Comma-separated audience IDs.": "Comma-separated audience IDs.",
   "Completed": "Completed({count})",
-  "Completing SSO login...": "Completing SSO login...",
+  "Completing SSO login…": "Completing SSO login…",
   "Configuration": "Configuration",
   "Configuration Information": "Configuration Information",
   "Configuration URL": "Configuration URL",
@@ -284,7 +284,7 @@
   "Delete Tag Confirm": "Delete Tag Confirm",
   "Delete task created": "Delete task created",
   "Deleting": "Deleting({count})",
-  "Deleting...": "Deleting...",
+  "Deleting…": "Deleting…",
   "Deletion Date": "Deletion Date",
   "Deployment ID": "Deployment ID",
   "Describe the purpose of this key": "Describe the purpose of this key",
@@ -349,7 +349,7 @@
   "Enter AppRole Role ID": "Enter AppRole Role ID",
   "Enter AppRole Secret ID": "Enter AppRole Secret ID",
   "Enter an absolute path such as D:/data/kms-keys": "Enter an absolute path such as D:/data/kms-keys",
-  "Enter prefix...": "Enter prefix...",
+  "Enter prefix…": "Enter prefix…",
   "Enter the default SSE key ID": "Enter the default SSE key ID",
   "Enter your Vault authentication token": "Enter your Vault authentication token",
   "Enterprise": "Enterprise",
@@ -373,7 +373,7 @@
   "Export": "Export",
   "Export Now": "Export Now",
   "Export all IAM configurations including users, groups, policies, and access keys in a ZIP file.": "Export all IAM configurations including users, groups, policies, and access keys in a ZIP file.",
-  "Exporting...": "Exporting...",
+  "Exporting…": "Exporting…",
   "External MinIO tier": "External MinIO tier",
   "Failed": "Failed({count})",
   "Failed Status": "Failed",
@@ -480,7 +480,7 @@
   "Import Now": "Import Now",
   "Import Success": "Import Success",
   "Import/Export": "Import/Export",
-  "Importing...": "Importing...",
+  "Importing…": "Importing…",
   "In Progress": "{total} tasks in progress ({processing} processing, {completed} completed)",
   "Inactive": "Inactive",
   "Include objects that already exist in the source bucket.": "Include objects that already exist in the source bucket.",
@@ -548,6 +548,7 @@
   "Key services and configuration values reported by the cluster.": "Key services and configuration values reported by the cluster.",
   "Key storage path prefix in KV store": "Key storage path prefix in KV store",
   "Keys in PendingDeletion can still be restored or deleted immediately.": "Keys in PendingDeletion can still be restored or deleted immediately.",
+  "Language": "Language",
   "Large File Count Warning": "Large File Count Warning",
   "Last": "Last",
   "Last Modified": "Last Modified",
@@ -571,9 +572,9 @@
   "Light": "Light",
   "Load Balancing": "Load Balancing",
   "Load Failed": "Load Failed",
-  "Loading buckets...": "Loading buckets...",
-  "Loading keys...": "Loading keys...",
-  "Loading...": "Loading...",
+  "Loading buckets…": "Loading buckets…",
+  "Loading keys…": "Loading keys…",
+  "Loading…": "Loading…",
   "Local Key Directory": "Local Key Directory",
   "Local development mode set successfully": "Local development mode set successfully",
   "Local filesystem": "Local filesystem",
@@ -971,7 +972,7 @@
   "Save Success": "Save Success",
   "Save failed": "Save failed",
   "Saved": "Saved",
-  "Saving...": "Saving...",
+  "Saving…": "Saving…",
   "Scalability": "Scalability",
   "Schedule Deletion": "Schedule Deletion",
   "Schedule Key Deletion": "Schedule Key Deletion",
@@ -985,7 +986,7 @@
   "Search Policy": "Search Policy",
   "Search User": "Search User",
   "Search User Group": "Search User Group",
-  "Search buckets...": "Search buckets...",
+  "Search buckets…": "Search buckets…",
   "Secret Configured": "Secret Configured",
   "Secret ID": "Secret ID",
   "Secret Key": "Secret Key",
@@ -1060,6 +1061,7 @@
   "Size": "Size",
   "Skip": "Skip",
   "Skip TLS verification": "Skip TLS verification",
+  "Skip to main content": "Skip to main content",
   "Sort by": "Sort by",
   "Source": "Source",
   "Standard AWS S3 tier": "Standard AWS S3 tier",
@@ -1079,7 +1081,7 @@
   "Stop rebalance": "Stop rebalance",
   "Stopped": "Stopped",
   "Stopping": "Stopping",
-  "Stopping KMS...": "Stopping KMS...",
+  "Stopping KMS…": "Stopping KMS…",
   "Storage Class": "Storage Class",
   "Storage Space": "Storage Space",
   "Storage Type": "Storage Type",
@@ -1120,6 +1122,7 @@
   "Technical Training": "Technical Training",
   "Temporary URL": "Temporary URL",
   "Temporary URL Expiration": "Temporary URL Expiration",
+  "Theme": "Theme",
   "The current site is detected automatically by the server. Add one or more remote sites to join the replication group.": "The current site is detected automatically by the server. Add one or more remote sites to join the replication group.",
   "The directory must be an absolute path on the server.": "The directory must be an absolute path on the server.",
   "The exported file contains sensitive information. Please keep it secure.": "The exported file contains sensitive information. Please keep it secure.",
@@ -1214,7 +1217,7 @@
   "Username Claim": "Username Claim",
   "Users": "Users",
   "Validate": "Validate",
-  "Validating...": "Validating...",
+  "Validating…": "Validating…",
   "Validation failed": "Validation failed",
   "Validity": "Validity",
   "Vault AppRole is not supported in the first version of this console.": "Vault AppRole is not supported in the first version of this console.",
@@ -1323,5 +1326,14 @@
   "ID": "ID",
   "Objects Failed": "Objects Failed",
   "Start Size": "Start Size",
-  "Start Time": "Start Time"
+  "Start Time": "Start Time",
+  "Bandwidth Unit": "Bandwidth Unit",
+  "Clear search": "Clear search",
+  "Policy Statement must be an array": "Policy Statement must be an array",
+  "Policy format is invalid. Please check the JSON syntax.": "Policy format is invalid. Please check the JSON syntax.",
+  "Policy must be a valid JSON object": "Policy must be a valid JSON object",
+  "Preparing download": "Preparing download",
+  "User menu": "User menu",
+  "Cleanup Warnings": "Cleanup Warnings",
+  "Failed to load objects": "Failed to load objects"
 }
diff --git a/i18n/locales/es-ES.json b/i18n/locales/es-ES.json
index 0d8a1d8c..939762a0 100644
--- a/i18n/locales/es-ES.json
+++ b/i18n/locales/es-ES.json
@@ -168,7 +168,7 @@
   "Clear All": "Limpiar Todo",
   "Clear Cache": "Limpiar Caché",
   "Clear Records": "Limpiar Registros",
-  "Clearing cache...": "Limpiando caché...",
+  "Clearing cache…": "Limpiando caché…",
   "Click or drag ZIP file to this area to upload": "Haga clic o arrastre el archivo ZIP a esta área para cargar",
   "Client ID": "ID del cliente",
   "Client ID is required": "El ID de cliente es obligatorio",
@@ -180,7 +180,7 @@
   "Collects and displays key performance indicators (such as CPU, memory, disk I/O, etc.) through visualized charts to help users understand system operation status and performance bottlenecks": "Recopila y muestra indicadores clave de rendimiento, como CPU, memoria y E/S de disco, mediante gráficos para ayudar a comprender el estado del sistema y los cuellos de botella de rendimiento",
   "Comma-separated audience IDs.": "IDs de audiencia separados por comas.",
   "Completed": "Completada ({count})",
-  "Completing SSO login...": "Completando inicio de sesión SSO...",
+  "Completing SSO login…": "Completando inicio de sesión SSO…",
   "Configuration": "Configuración",
   "Configuration Information": "Información de Configuración",
   "Configuration URL": "URL de configuración",
@@ -284,7 +284,7 @@
   "Delete Tag Confirm": "Confirmar Eliminación de Etiqueta",
   "Delete task created": "Tarea de eliminación creada",
   "Deleting": "Eliminando({count})",
-  "Deleting...": "Eliminando...",
+  "Deleting…": "Eliminando…",
   "Deletion Date": "Fecha de eliminación",
   "Deployment ID": "ID de implementación",
   "Describe the purpose of this key": "Describa el propósito de esta clave",
@@ -349,7 +349,7 @@
   "Enter AppRole Role ID": "Ingrese el ID de Rol AppRole",
   "Enter AppRole Secret ID": "Ingrese el ID Secreto AppRole",
   "Enter an absolute path such as D:/data/kms-keys": "Introduzca una ruta absoluta, p. ej. D:/data/kms-keys",
-  "Enter prefix...": "Introducir prefijo...",
+  "Enter prefix…": "Introducir prefijo…",
   "Enter the default SSE key ID": "Introduzca el ID de la clave SSE predeterminada",
   "Enter your Vault authentication token": "Ingrese su token de autenticación de Vault",
   "Enterprise": "Empresa",
@@ -373,7 +373,7 @@
   "Export": "Exportar",
   "Export Now": "Exportar Ahora",
   "Export all IAM configurations including users, groups, policies, and access keys in a ZIP file.": "Exporte todas las configuraciones de IAM incluyendo usuarios, grupos, políticas y claves de acceso en un archivo ZIP.",
-  "Exporting...": "Exportando...",
+  "Exporting…": "Exportando…",
   "External MinIO tier": "Nivel MinIO externo",
   "Failed": "Error({count})",
   "Failed Status": "Fallido",
@@ -480,7 +480,7 @@
   "Import Now": "Importar Ahora",
   "Import Success": "Importación Exitosa",
   "Import/Export": "Importar/Exportar",
-  "Importing...": "Importando...",
+  "Importing…": "Importando…",
   "In Progress": "{total} tareas en progreso ({processing} procesando, {completed} completadas)",
   "Inactive": "Inactivo",
   "Include objects that already exist in the source bucket.": "Incluir objetos que ya existen en el bucket de origen.",
@@ -548,6 +548,7 @@
   "Key services and configuration values reported by the cluster.": "Servicios de claves y valores de configuración reportados por el clúster.",
   "Key storage path prefix in KV store": "Prefijo de ruta de almacenamiento de claves en el almacén KV",
   "Keys in PendingDeletion can still be restored or deleted immediately.": "Las claves en PendingDeletion aún pueden restaurarse o eliminarse de inmediato.",
+  "Language": "Idioma",
   "Large File Count Warning": "Advertencia de Gran Recuento de Archivos",
   "Last": "Último",
   "Last Modified": "Última Modificación",
@@ -571,9 +572,9 @@
   "Light": "Claro",
   "Load Balancing": "Balanceo de Carga",
   "Load Failed": "Error al cargar",
-  "Loading buckets...": "Cargando buckets...",
-  "Loading keys...": "Cargando claves...",
-  "Loading...": "Cargando...",
+  "Loading buckets…": "Cargando buckets…",
+  "Loading keys…": "Cargando claves…",
+  "Loading…": "Cargando…",
   "Local Key Directory": "Directorio local de claves",
   "Local development mode set successfully": "Modo de desarrollo local establecido exitosamente",
   "Local filesystem": "Sistema de archivos local",
@@ -971,7 +972,7 @@
   "Save Success": "Guardado correctamente",
   "Save failed": "Error al guardar",
   "Saved": "Guardado",
-  "Saving...": "Guardando...",
+  "Saving…": "Guardando…",
   "Scalability": "Escalabilidad",
   "Schedule Deletion": "Programar eliminación",
   "Schedule Key Deletion": "Programar eliminación de clave",
@@ -985,7 +986,7 @@
   "Search Policy": "Buscar Política",
   "Search User": "Buscar Usuario",
   "Search User Group": "Buscar Grupo de Usuarios",
-  "Search buckets...": "Buscar buckets...",
+  "Search buckets…": "Buscar buckets…",
   "Secret Configured": "Secreto configurado",
   "Secret ID": "ID Secreto",
   "Secret Key": "Clave Secreta",
@@ -1060,6 +1061,7 @@
   "Size": "Tamaño",
   "Skip": "Omitir",
   "Skip TLS verification": "Omitir verificación TLS",
+  "Skip to main content": "Saltar al contenido principal",
   "Sort by": "Ordenar por",
   "Source": "Origen",
   "Standard AWS S3 tier": "Nivel AWS S3 estándar",
@@ -1079,7 +1081,7 @@
   "Stop rebalance": "Detener reequilibrio",
   "Stopped": "Detenido",
   "Stopping": "Deteniendo",
-  "Stopping KMS...": "Deteniendo KMS...",
+  "Stopping KMS…": "Deteniendo KMS…",
   "Storage Class": "Clase de Almacenamiento",
   "Storage Space": "Espacio de Almacenamiento",
   "Storage Type": "Tipo de Almacenamiento",
@@ -1120,6 +1122,7 @@
   "Technical Training": "Capacitación Técnica",
   "Temporary URL": "URL Temporal",
   "Temporary URL Expiration": "Expiración de URL Temporal",
+  "Theme": "Tema",
   "The current site is detected automatically by the server. Add one or more remote sites to join the replication group.": "El sitio actual se detecta automáticamente por el servidor. Añade uno o más sitios remotos para unirte al grupo de replicación.",
   "The directory must be an absolute path on the server.": "El directorio debe ser una ruta absoluta en el servidor.",
   "The exported file contains sensitive information. Please keep it secure.": "El archivo exportado contiene información sensible. Manténgalo seguro.",
@@ -1214,7 +1217,7 @@
   "Username Claim": "Claim de nombre de usuario",
   "Users": "Usuarios",
   "Validate": "Validar",
-  "Validating...": "Validando...",
+  "Validating…": "Validando…",
   "Validation failed": "Validación fallida",
   "Validity": "Validez",
   "Vault AppRole is not supported in the first version of this console.": "Vault AppRole no está soportado en la primera versión de esta consola.",
@@ -1323,5 +1326,14 @@
   "ID": "ID",
   "Objects Failed": "Objects Failed",
   "Start Size": "Start Size",
-  "Start Time": "Start Time"
+  "Start Time": "Start Time",
+  "Bandwidth Unit": "Unidad de ancho de banda",
+  "Clear search": "Borrar búsqueda",
+  "Policy Statement must be an array": "Policy Statement debe ser un arreglo",
+  "Policy format is invalid. Please check the JSON syntax.": "El formato de la política no es válido. Comprueba la sintaxis JSON.",
+  "Policy must be a valid JSON object": "La política debe ser un objeto JSON válido",
+  "Preparing download": "Preparando descarga",
+  "User menu": "Menú de usuario",
+  "Cleanup Warnings": "Advertencias de limpieza",
+  "Failed to load objects": "No se pudieron cargar los objetos"
 }
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index 6bfa00d0..4f72c52a 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -168,7 +168,7 @@
   "Clear All": "Tout effacer",
   "Clear Cache": "Effacer le cache",
   "Clear Records": "Effacer les enregistrements",
-  "Clearing cache...": "Vidage du cache...",
+  "Clearing cache…": "Vidage du cache…",
   "Click or drag ZIP file to this area to upload": "Cliquez ou glissez un fichier ZIP dans cette zone pour le télécharger",
   "Client ID": "ID client",
   "Client ID is required": "L’ID client est requis",
@@ -180,7 +180,7 @@
   "Collects and displays key performance indicators (such as CPU, memory, disk I/O, etc.) through visualized charts to help users understand system operation status and performance bottlenecks": "Collecte et affiche les indicateurs clés de performance, comme le CPU, la mémoire et les E/S disque, sous forme de graphiques afin d’aider les utilisateurs à comprendre l’état du système et les goulots d’étranglement",
   "Comma-separated audience IDs.": "IDs d’audience séparés par des virgules.",
   "Completed": "Terminé({count})",
-  "Completing SSO login...": "Finalisation de la connexion SSO...",
+  "Completing SSO login…": "Finalisation de la connexion SSO…",
   "Configuration": "Configuration",
   "Configuration Information": "Informations de configuration",
   "Configuration URL": "URL de configuration",
@@ -284,7 +284,7 @@
   "Delete Tag Confirm": "Confirmer la suppression de l'étiquette",
   "Delete task created": "Tâche de suppression créée",
   "Deleting": "Suppression({count})",
-  "Deleting...": "Suppression...",
+  "Deleting…": "Suppression…",
   "Deletion Date": "Date de suppression",
   "Deployment ID": "ID de déploiement",
   "Describe the purpose of this key": "Décrivez l’usage de cette clé",
@@ -349,7 +349,7 @@
   "Enter AppRole Role ID": "Entrez l'ID de rôle AppRole",
   "Enter AppRole Secret ID": "Entrez l'ID secret AppRole",
   "Enter an absolute path such as D:/data/kms-keys": "Saisissez un chemin absolu, ex. D:/data/kms-keys",
-  "Enter prefix...": "Saisir un préfixe...",
+  "Enter prefix…": "Saisir un préfixe…",
   "Enter the default SSE key ID": "Saisissez l’ID de la clé SSE par défaut",
   "Enter your Vault authentication token": "Entrez votre jeton d'authentification Vault",
   "Enterprise": "Entreprise",
@@ -373,7 +373,7 @@
   "Export": "Exporter",
   "Export Now": "Exporter maintenant",
   "Export all IAM configurations including users, groups, policies, and access keys in a ZIP file.": "Exportez toutes les configurations IAM incluant les utilisateurs, les groupes, les politiques et les clés d'accès dans un fichier ZIP.",
-  "Exporting...": "Exportation...",
+  "Exporting…": "Exportation…",
   "External MinIO tier": "Niveau MinIO externe",
   "Failed": "Échec({count})",
   "Failed Status": "Échec",
@@ -480,7 +480,7 @@
   "Import Now": "Importer maintenant",
   "Import Success": "Importation réussie",
   "Import/Export": "Importer/Exporter",
-  "Importing...": "Importation...",
+  "Importing…": "Importation…",
   "In Progress": "{total} tâches en cours ({processing} en traitement, {completed} terminées)",
   "Inactive": "Inactif",
   "Include objects that already exist in the source bucket.": "Inclure les objets qui existent déjà dans le compartiment source.",
@@ -548,6 +548,7 @@
   "Key services and configuration values reported by the cluster.": "Services de clés et valeurs de configuration signalés par le cluster.",
   "Key storage path prefix in KV store": "Préfixe du chemin de stockage de clé dans le magasin KV",
   "Keys in PendingDeletion can still be restored or deleted immediately.": "Les clés en PendingDeletion peuvent encore être restaurées ou supprimées immédiatement.",
+  "Language": "Langue",
   "Large File Count Warning": "Avertissement de nombre de fichiers élevé",
   "Last": "Dernier",
   "Last Modified": "Dernière modification",
@@ -571,9 +572,9 @@
   "Light": "Clair",
   "Load Balancing": "Équilibrage de charge",
   "Load Failed": "Échec du chargement",
-  "Loading buckets...": "Chargement des compartiments...",
-  "Loading keys...": "Chargement des clés...",
-  "Loading...": "Chargement...",
+  "Loading buckets…": "Chargement des compartiments…",
+  "Loading keys…": "Chargement des clés…",
+  "Loading…": "Chargement…",
   "Local Key Directory": "Répertoire local des clés",
   "Local development mode set successfully": "Mode de développement local défini avec succès",
   "Local filesystem": "Système de fichiers local",
@@ -971,7 +972,7 @@
   "Save Success": "Enregistrement réussi",
   "Save failed": "Échec de l'enregistrement",
   "Saved": "Enregistré",
-  "Saving...": "Enregistrement...",
+  "Saving…": "Enregistrement…",
   "Scalability": "Évolutivité",
   "Schedule Deletion": "Planifier la suppression",
   "Schedule Key Deletion": "Planifier la suppression de la clé",
@@ -985,7 +986,7 @@
   "Search Policy": "Rechercher une politique",
   "Search User": "Rechercher un utilisateur",
   "Search User Group": "Rechercher un groupe d'utilisateurs",
-  "Search buckets...": "Rechercher des compartiments...",
+  "Search buckets…": "Rechercher des compartiments…",
   "Secret Configured": "Secret configuré",
   "Secret ID": "ID secret",
   "Secret Key": "Clé secrète",
@@ -1060,6 +1061,7 @@
   "Size": "Taille",
   "Skip": "Ignorer",
   "Skip TLS verification": "Ignorer la vérification TLS",
+  "Skip to main content": "Aller au contenu principal",
   "Sort by": "Trier par",
   "Source": "Source",
   "Standard AWS S3 tier": "Niveau AWS S3 standard",
@@ -1079,7 +1081,7 @@
   "Stop rebalance": "Arrêter le rééquilibrage",
   "Stopped": "Arrêté",
   "Stopping": "Arrêt",
-  "Stopping KMS...": "Arrêt de KMS...",
+  "Stopping KMS…": "Arrêt de KMS…",
   "Storage Class": "Classe de stockage",
   "Storage Space": "Espace de stockage",
   "Storage Type": "Type de stockage",
@@ -1120,6 +1122,7 @@
   "Technical Training": "Formation technique",
   "Temporary URL": "URL temporaire",
   "Temporary URL Expiration": "Expiration de l'URL temporaire",
+  "Theme": "Thème",
   "The current site is detected automatically by the server. Add one or more remote sites to join the replication group.": "Le site actuel est détecté automatiquement par le serveur. Ajoutez un ou plusieurs sites distants pour rejoindre le groupe de réplication.",
   "The directory must be an absolute path on the server.": "Le répertoire doit être un chemin absolu sur le serveur.",
   "The exported file contains sensitive information. Please keep it secure.": "Le fichier exporté contient des informations sensibles. Veuillez le conserver en sécurité.",
@@ -1214,7 +1217,7 @@
   "Username Claim": "Claim du nom d'utilisateur",
   "Users": "Utilisateurs",
   "Validate": "Valider",
-  "Validating...": "Validation...",
+  "Validating…": "Validation…",
   "Validation failed": "La validation a échoué",
   "Validity": "Validité",
   "Vault AppRole is not supported in the first version of this console.": "Vault AppRole n’est pas pris en charge dans la première version de cette console.",
@@ -1323,5 +1326,14 @@
   "ID": "ID",
   "Objects Failed": "Objects Failed",
   "Start Size": "Start Size",
-  "Start Time": "Start Time"
+  "Start Time": "Start Time",
+  "Bandwidth Unit": "Unité de bande passante",
+  "Clear search": "Effacer la recherche",
+  "Policy Statement must be an array": "Policy Statement doit être un tableau",
+  "Policy format is invalid. Please check the JSON syntax.": "Le format de la politique est invalide. Vérifiez la syntaxe JSON.",
+  "Policy must be a valid JSON object": "La politique doit être un objet JSON valide",
+  "Preparing download": "Préparation du téléchargement",
+  "User menu": "Menu utilisateur",
+  "Cleanup Warnings": "Avertissements de nettoyage",
+  "Failed to load objects": "Impossible de charger les objets"
 }
diff --git a/i18n/locales/id-ID.json b/i18n/locales/id-ID.json
index abae09cf..d6efcfd5 100644
--- a/i18n/locales/id-ID.json
+++ b/i18n/locales/id-ID.json
@@ -168,7 +168,7 @@
   "Clear All": "Bersihkan Semua",
   "Clear Cache": "Bersihkan Cache",
   "Clear Records": "Bersihkan Riwayat",
-  "Clearing cache...": "Mengosongkan cache...",
+  "Clearing cache…": "Mengosongkan cache…",
   "Click or drag ZIP file to this area to upload": "Klik atau seret file ZIP ke area ini untuk mengunggah",
   "Client ID": "Client ID",
   "Client ID is required": "ID klien wajib diisi",
@@ -180,7 +180,7 @@
   "Collects and displays key performance indicators (such as CPU, memory, disk I/O, etc.) through visualized charts to help users understand system operation status and performance bottlenecks": "Mengumpulkan dan menampilkan indikator kinerja utama seperti CPU, memori, dan I/O disk melalui grafik, sehingga pengguna dapat memahami status operasi sistem dan hambatan kinerja",
   "Comma-separated audience IDs.": "ID audiens dipisahkan dengan koma.",
   "Completed": "Selesai({count})",
-  "Completing SSO login...": "Menyelesaikan login SSO...",
+  "Completing SSO login…": "Menyelesaikan login SSO…",
   "Configuration": "Konfigurasi",
   "Configuration Information": "Informasi Konfigurasi",
   "Configuration URL": "Configuration URL",
@@ -284,7 +284,7 @@
   "Delete Tag Confirm": "Konfirmasi Hapus Tag",
   "Delete task created": "Tugas penghapusan dibuat",
   "Deleting": "Menghapus({count})",
-  "Deleting...": "Menghapus...",
+  "Deleting…": "Menghapus…",
   "Deletion Date": "Tanggal Penghapusan",
   "Deployment ID": "ID deployment",
   "Describe the purpose of this key": "Jelaskan tujuan kunci ini",
@@ -349,7 +349,7 @@
   "Enter AppRole Role ID": "Masukkan Role ID AppRole",
   "Enter AppRole Secret ID": "Masukkan Secret ID AppRole",
   "Enter an absolute path such as D:/data/kms-keys": "Masukkan path absolut, mis. D:/data/kms-keys",
-  "Enter prefix...": "Masukkan prefiks...",
+  "Enter prefix…": "Masukkan prefiks…",
   "Enter the default SSE key ID": "Masukkan ID kunci SSE default",
   "Enter your Vault authentication token": "Masukkan token autentikasi Vault Anda",
   "Enterprise": "Enterprise",
@@ -373,7 +373,7 @@
   "Export": "Ekspor",
   "Export Now": "Ekspor Sekarang",
   "Export all IAM configurations including users, groups, policies, and access keys in a ZIP file.": "Ekspor semua konfigurasi IAM termasuk pengguna, grup, kebijakan, dan Access Key dalam file ZIP.",
-  "Exporting...": "Mengekspor...",
+  "Exporting…": "Mengekspor…",
   "External MinIO tier": "Tier MinIO eksternal",
   "Failed": "Gagal({count})",
   "Failed Status": "Gagal",
@@ -480,7 +480,7 @@
   "Import Now": "Impor Sekarang",
   "Import Success": "Impor Berhasil",
   "Import/Export": "Impor/Ekspor",
-  "Importing...": "Mengimpor...",
+  "Importing…": "Mengimpor…",
   "In Progress": "{total} tugas sedang berlangsung ({processing} diproses, {completed} selesai)",
   "Inactive": "Tidak Aktif",
   "Include objects that already exist in the source bucket.": "Sertakan objek yang sudah ada di bucket sumber.",
@@ -548,6 +548,7 @@
   "Key services and configuration values reported by the cluster.": "Layanan utama dan nilai konfigurasi dilaporkan oleh klaster.",
   "Key storage path prefix in KV store": "Key storage path prefix in KV store",
   "Keys in PendingDeletion can still be restored or deleted immediately.": "Kunci dalam PendingDeletion masih dapat dipulihkan atau dihapus segera.",
+  "Language": "Bahasa",
   "Large File Count Warning": "Peringatan Jumlah File Besar",
   "Last": "Terakhir",
   "Last Modified": "Terakhir Diubah",
@@ -571,9 +572,9 @@
   "Light": "Terang",
   "Load Balancing": "Load Balancing",
   "Load Failed": "Gagal memuat",
-  "Loading buckets...": "Memuat bucket...",
-  "Loading keys...": "Memuat kunci...",
-  "Loading...": "Memuat...",
+  "Loading buckets…": "Memuat bucket…",
+  "Loading keys…": "Memuat kunci…",
+  "Loading…": "Memuat…",
   "Local Key Directory": "Direktori kunci lokal",
   "Local development mode set successfully": "Mode pengembangan lokal berhasil diatur",
   "Local filesystem": "Sistem file lokal",
@@ -971,7 +972,7 @@
   "Save Success": "Berhasil disimpan",
   "Save failed": "Gagal menyimpan",
   "Saved": "Disimpan",
-  "Saving...": "Menyimpan...",
+  "Saving…": "Menyimpan…",
   "Scalability": "Skalabilitas",
   "Schedule Deletion": "Jadwalkan penghapusan",
   "Schedule Key Deletion": "Jadwalkan penghapusan kunci",
@@ -985,7 +986,7 @@
   "Search Policy": "Cari Kebijakan",
   "Search User": "Cari Pengguna",
   "Search User Group": "Cari Grup Pengguna",
-  "Search buckets...": "Cari bucket...",
+  "Search buckets…": "Cari bucket…",
   "Secret Configured": "Secret Dikonfigurasi",
   "Secret ID": "Secret ID",
   "Secret Key": "Secret Key",
@@ -1060,6 +1061,7 @@
   "Size": "Ukuran",
   "Skip": "Lewati",
   "Skip TLS verification": "Lewati verifikasi TLS",
+  "Skip to main content": "Lewati ke konten utama",
   "Sort by": "Urutkan berdasarkan",
   "Source": "Sumber",
   "Standard AWS S3 tier": "Tier AWS S3 Standar",
@@ -1079,7 +1081,7 @@
   "Stop rebalance": "Hentikan penyeimbangan ulang",
   "Stopped": "Berhenti",
   "Stopping": "Menghentikan",
-  "Stopping KMS...": "Menghentikan KMS...",
+  "Stopping KMS…": "Menghentikan KMS…",
   "Storage Class": "Storage Class",
   "Storage Space": "Ruang Penyimpanan",
   "Storage Type": "Tipe Penyimpanan",
@@ -1120,6 +1122,7 @@
   "Technical Training": "Pelatihan Teknis",
   "Temporary URL": "URL Sementara",
   "Temporary URL Expiration": "Kedaluwarsa URL Sementara",
+  "Theme": "Tema",
   "The current site is detected automatically by the server. Add one or more remote sites to join the replication group.": "Situs saat ini terdeteksi otomatis oleh server. Tambahkan satu atau beberapa situs jarak jauh untuk bergabung ke grup replikasi.",
   "The directory must be an absolute path on the server.": "Direktori harus berupa path absolut di server.",
   "The exported file contains sensitive information. Please keep it secure.": "File yang diekspor berisi informasi sensitif. Harap jaga keamanannya.",
@@ -1214,7 +1217,7 @@
   "Username Claim": "Username Claim",
   "Users": "Pengguna",
   "Validate": "Validasi",
-  "Validating...": "Memvalidasi...",
+  "Validating…": "Memvalidasi…",
   "Validation failed": "Validasi gagal",
   "Validity": "Validitas",
   "Vault AppRole is not supported in the first version of this console.": "Vault AppRole tidak didukung pada versi pertama konsol ini.",
@@ -1323,5 +1326,14 @@
   "ID": "ID",
   "Objects Failed": "Objects Failed",
   "Start Size": "Start Size",
-  "Start Time": "Start Time"
+  "Start Time": "Start Time",
+  "Bandwidth Unit": "Satuan bandwidth",
+  "Clear search": "Hapus pencarian",
+  "Policy Statement must be an array": "Policy Statement harus berupa array",
+  "Policy format is invalid. Please check the JSON syntax.": "Format policy tidak valid. Periksa sintaks JSON.",
+  "Policy must be a valid JSON object": "Policy harus berupa objek JSON yang valid",
+  "Preparing download": "Menyiapkan unduhan",
+  "User menu": "Menu pengguna",
+  "Cleanup Warnings": "Peringatan pembersihan",
+  "Failed to load objects": "Gagal memuat objek"
 }
diff --git a/i18n/locales/it-IT.json b/i18n/locales/it-IT.json
index 8c4226df..f89a6ac7 100644
--- a/i18n/locales/it-IT.json
+++ b/i18n/locales/it-IT.json
@@ -168,7 +168,7 @@
   "Clear All": "Cancella tutto",
   "Clear Cache": "Pulisci cache",
   "Clear Records": "Cancella record",
-  "Clearing cache...": "Svuotamento cache in corso...",
+  "Clearing cache…": "Svuotamento cache in corso…",
   "Click or drag ZIP file to this area to upload": "Clicca o trascina il file ZIP in quest'area per caricare",
   "Client ID": "ID client",
   "Client ID is required": "L’ID client è obbligatorio",
@@ -180,7 +180,7 @@
   "Collects and displays key performance indicators (such as CPU, memory, disk I/O, etc.) through visualized charts to help users understand system operation status and performance bottlenecks": "Raccoglie e visualizza indicatori chiave di prestazione, come CPU, memoria e I/O disco, tramite grafici per aiutare gli utenti a comprendere lo stato del sistema e i colli di bottiglia delle prestazioni",
   "Comma-separated audience IDs.": "ID audience separati da virgole.",
   "Completed": "Completato({count})",
-  "Completing SSO login...": "Completamento dell'accesso SSO...",
+  "Completing SSO login…": "Completamento dell'accesso SSO…",
   "Configuration": "Configurazione",
   "Configuration Information": "Informazioni configurazione",
   "Configuration URL": "URL di configurazione",
@@ -284,7 +284,7 @@
   "Delete Tag Confirm": "Conferma eliminazione tag",
   "Delete task created": "Attività di eliminazione creata",
   "Deleting": "Eliminazione ({count})",
-  "Deleting...": "Eliminazione...",
+  "Deleting…": "Eliminazione…",
   "Deletion Date": "Data di eliminazione",
   "Deployment ID": "ID di distribuzione",
   "Describe the purpose of this key": "Descrivi lo scopo di questa chiave",
@@ -349,7 +349,7 @@
   "Enter AppRole Role ID": "Inserisci ID ruolo AppRole",
   "Enter AppRole Secret ID": "Inserisci ID segreto AppRole",
   "Enter an absolute path such as D:/data/kms-keys": "Inserisci un percorso assoluto, ad es. D:/data/kms-keys",
-  "Enter prefix...": "Inserisci prefisso...",
+  "Enter prefix…": "Inserisci prefisso…",
   "Enter the default SSE key ID": "Inserisci l’ID della chiave SSE predefinita",
   "Enter your Vault authentication token": "Inserisci il tuo token di autenticazione Vault",
   "Enterprise": "Impresa",
@@ -373,7 +373,7 @@
   "Export": "Esporta",
   "Export Now": "Esporta ora",
   "Export all IAM configurations including users, groups, policies, and access keys in a ZIP file.": "Esporta tutte le configurazioni IAM inclusi utenti, gruppi, politiche e chiavi di accesso in un file ZIP.",
-  "Exporting...": "Esportazione...",
+  "Exporting…": "Esportazione…",
   "External MinIO tier": "Tier MinIO esterno",
   "Failed": "Non riuscito ({count})",
   "Failed Status": "Non riuscito",
@@ -480,7 +480,7 @@
   "Import Now": "Importa ora",
   "Import Success": "Importazione riuscita",
   "Import/Export": "Importa/Esporta",
-  "Importing...": "Importazione...",
+  "Importing…": "Importazione…",
   "In Progress": "{total} attività in corso ({processing} elaborazione, {completed} completate)",
   "Inactive": "Inattivo",
   "Include objects that already exist in the source bucket.": "Includi oggetti che esistono già nel bucket sorgente.",
@@ -548,6 +548,7 @@
   "Key services and configuration values reported by the cluster.": "Servizi chiave e valori di configurazione segnalati dal cluster.",
   "Key storage path prefix in KV store": "Prefisso percorso archiviazione chiave nel negozio KV",
   "Keys in PendingDeletion can still be restored or deleted immediately.": "Le chiavi in PendingDeletion possono ancora essere ripristinate o eliminate immediatamente.",
+  "Language": "Lingua",
   "Large File Count Warning": "Avviso conteggio file elevato",
   "Last": "Ultimo",
   "Last Modified": "Ultima modifica",
@@ -571,9 +572,9 @@
   "Light": "Chiaro",
   "Load Balancing": "Bilanciamento del carico",
   "Load Failed": "Caricamento non riuscito",
-  "Loading buckets...": "Caricamento bucket...",
-  "Loading keys...": "Caricamento chiavi...",
-  "Loading...": "Caricamento...",
+  "Loading buckets…": "Caricamento bucket…",
+  "Loading keys…": "Caricamento chiavi…",
+  "Loading…": "Caricamento…",
   "Local Key Directory": "Directory locale chiavi",
   "Local development mode set successfully": "Modalità sviluppo locale impostata con successo",
   "Local filesystem": "File system locale",
@@ -971,7 +972,7 @@
   "Save Success": "Salvataggio riuscito",
   "Save failed": "Salvataggio non riuscito",
   "Saved": "Salvato",
-  "Saving...": "Salvataggio...",
+  "Saving…": "Salvataggio…",
   "Scalability": "Scalabilità",
   "Schedule Deletion": "Pianifica eliminazione",
   "Schedule Key Deletion": "Pianifica eliminazione chiave",
@@ -985,7 +986,7 @@
   "Search Policy": "Cerca politica",
   "Search User": "Cerca utente",
   "Search User Group": "Cerca gruppo utenti",
-  "Search buckets...": "Cerca bucket...",
+  "Search buckets…": "Cerca bucket…",
   "Secret Configured": "Segreto configurato",
   "Secret ID": "ID segreto",
   "Secret Key": "Chiave segreta",
@@ -1060,6 +1061,7 @@
   "Size": "Dimensione",
   "Skip": "Salta",
   "Skip TLS verification": "Salta verifica TLS",
+  "Skip to main content": "Vai al contenuto principale",
   "Sort by": "Ordina per",
   "Source": "Sorgente",
   "Standard AWS S3 tier": "Tier AWS S3 standard",
@@ -1079,7 +1081,7 @@
   "Stop rebalance": "Ferma ribilanciamento",
   "Stopped": "Arrestato",
   "Stopping": "Arresto in corso",
-  "Stopping KMS...": "Arresto KMS in corso...",
+  "Stopping KMS…": "Arresto KMS in corso…",
   "Storage Class": "Classe di archiviazione",
   "Storage Space": "Spazio archiviazione",
   "Storage Type": "Tipo di archiviazione",
@@ -1120,6 +1122,7 @@
   "Technical Training": "Formazione tecnica",
   "Temporary URL": "URL temporaneo",
   "Temporary URL Expiration": "Scadenza URL temporaneo",
+  "Theme": "Tema",
   "The current site is detected automatically by the server. Add one or more remote sites to join the replication group.": "Il sito corrente viene rilevato automaticamente dal server. Aggiungi uno o più siti remoti per entrare nel gruppo di replica.",
   "The directory must be an absolute path on the server.": "La directory deve essere un percorso assoluto sul server.",
   "The exported file contains sensitive information. Please keep it secure.": "Il file esportato contiene informazioni sensibili. Conservalo in modo sicuro.",
@@ -1214,7 +1217,7 @@
   "Username Claim": "Claim nome utente",
   "Users": "Utenti",
   "Validate": "Valida",
-  "Validating...": "Validazione...",
+  "Validating…": "Validazione…",
   "Validation failed": "Validazione non riuscita",
   "Validity": "Validità",
   "Vault AppRole is not supported in the first version of this console.": "Vault AppRole non è supportato nella prima versione di questa console.",
@@ -1323,5 +1326,14 @@
   "ID": "ID",
   "Objects Failed": "Objects Failed",
   "Start Size": "Start Size",
-  "Start Time": "Start Time"
+  "Start Time": "Start Time",
+  "Bandwidth Unit": "Unità larghezza di banda",
+  "Clear search": "Cancella ricerca",
+  "Policy Statement must be an array": "Policy Statement deve essere un array",
+  "Policy format is invalid. Please check the JSON syntax.": "Il formato della policy non è valido. Controlla la sintassi JSON.",
+  "Policy must be a valid JSON object": "La policy deve essere un oggetto JSON valido",
+  "Preparing download": "Preparazione download",
+  "User menu": "Menu utente",
+  "Cleanup Warnings": "Avvisi di pulizia",
+  "Failed to load objects": "Impossibile caricare gli oggetti"
 }
diff --git a/i18n/locales/ja-JP.json b/i18n/locales/ja-JP.json
index 7acb3b98..a571e23a 100644
--- a/i18n/locales/ja-JP.json
+++ b/i18n/locales/ja-JP.json
@@ -168,7 +168,7 @@
   "Clear All": "すべてクリア",
   "Clear Cache": "キャッシュをクリア",
   "Clear Records": "レコードをクリア",
-  "Clearing cache...": "キャッシュをクリアしています...",
+  "Clearing cache…": "キャッシュをクリアしています…",
   "Click or drag ZIP file to this area to upload": "ZIPファイルをクリックまたはドラッグしてこの領域にアップロード",
   "Client ID": "クライアント ID",
   "Client ID is required": "クライアント ID は必須です",
@@ -180,7 +180,7 @@
   "Collects and displays key performance indicators (such as CPU, memory, disk I/O, etc.) through visualized charts to help users understand system operation status and performance bottlenecks": "CPU、メモリ、ディスク I/O などの主要な性能指標をグラフで収集・表示し、システムの稼働状況と性能ボトルネックの把握を支援します",
   "Comma-separated audience IDs.": "複数の Audience ID はカンマで区切ってください。",
   "Completed": "完了しました({count})",
-  "Completing SSO login...": "SSO ログインを完了しています...",
+  "Completing SSO login…": "SSO ログインを完了しています…",
   "Configuration": "設定",
   "Configuration Information": "設定情報",
   "Configuration URL": "設定 URL",
@@ -284,7 +284,7 @@
   "Delete Tag Confirm": "タグ削除の確認",
   "Delete task created": "削除タスクを作成しました",
   "Deleting": "削除中({count})",
-  "Deleting...": "削除中...",
+  "Deleting…": "削除中…",
   "Deletion Date": "削除日",
   "Deployment ID": "デプロイメント ID",
   "Describe the purpose of this key": "このキーの用途を説明",
@@ -349,7 +349,7 @@
   "Enter AppRole Role ID": "AppRoleロールIDを入力",
   "Enter AppRole Secret ID": "AppRoleシークレットIDを入力",
   "Enter an absolute path such as D:/data/kms-keys": "絶対パスを入力（例: D:/data/kms-keys）",
-  "Enter prefix...": "プレフィックスを入力...",
+  "Enter prefix…": "プレフィックスを入力…",
   "Enter the default SSE key ID": "デフォルト SSE キー ID を入力",
   "Enter your Vault authentication token": "Vault認証トークンを入力",
   "Enterprise": "エンタープライズ",
@@ -373,7 +373,7 @@
   "Export": "エクスポート",
   "Export Now": "今すぐエクスポート",
   "Export all IAM configurations including users, groups, policies, and access keys in a ZIP file.": "ユーザー、グループ、ポリシー、アクセスキーを含むすべてのIAM設定をZIPファイルでエクスポートします。",
-  "Exporting...": "エクスポート中...",
+  "Exporting…": "エクスポート中…",
   "External MinIO tier": "外部MinIOティア",
   "Failed": "失敗しました({count})",
   "Failed Status": "失敗",
@@ -480,7 +480,7 @@
   "Import Now": "今すぐインポート",
   "Import Success": "インポートに成功しました",
   "Import/Export": "インポート/エクスポート",
-  "Importing...": "インポート中...",
+  "Importing…": "インポート中…",
   "In Progress": "{total} 個のタスクが進行中（{processing} 個の処理、{completed} 個の完了）",
   "Inactive": "非アクティブ",
   "Include objects that already exist in the source bucket.": "ソースバケットに既に存在するオブジェクトを含めます。",
@@ -548,6 +548,7 @@
   "Key services and configuration values reported by the cluster.": "クラスターによって報告されるキーサービスと設定値。",
   "Key storage path prefix in KV store": "KVストア内のキーストレージパスプレフィックス",
   "Keys in PendingDeletion can still be restored or deleted immediately.": "PendingDeletion のキーは復元または即時削除が可能です。",
+  "Language": "言語",
   "Large File Count Warning": "大きなファイル数の警告",
   "Last": "最後",
   "Last Modified": "最終更新",
@@ -571,9 +572,9 @@
   "Light": "ライト",
   "Load Balancing": "負荷分散",
   "Load Failed": "読み込みに失敗しました",
-  "Loading buckets...": "バケットを読み込み中...",
-  "Loading keys...": "キーを読み込み中...",
-  "Loading...": "読み込み中...",
+  "Loading buckets…": "バケットを読み込み中…",
+  "Loading keys…": "キーを読み込み中…",
+  "Loading…": "読み込み中…",
   "Local Key Directory": "ローカルキー ディレクトリ",
   "Local development mode set successfully": "ローカル開発モードが正常に設定されました",
   "Local filesystem": "ローカルファイルシステム",
@@ -971,7 +972,7 @@
   "Save Success": "保存に成功しました",
   "Save failed": "保存に失敗しました",
   "Saved": "保存済み",
-  "Saving...": "保存中...",
+  "Saving…": "保存中…",
   "Scalability": "スケーラビリティ",
   "Schedule Deletion": "削除をスケジュール",
   "Schedule Key Deletion": "キー削除をスケジュール",
@@ -985,7 +986,7 @@
   "Search Policy": "ポリシーを検索",
   "Search User": "ユーザーを検索",
   "Search User Group": "ユーザーグループを検索",
-  "Search buckets...": "バケットを検索...",
+  "Search buckets…": "バケットを検索…",
   "Secret Configured": "シークレット設定済み",
   "Secret ID": "シークレットID",
   "Secret Key": "シークレットキー",
@@ -1060,6 +1061,7 @@
   "Size": "サイズ",
   "Skip": "スキップ",
   "Skip TLS verification": "TLS 検証をスキップ",
+  "Skip to main content": "メインコンテンツへスキップ",
   "Sort by": "並び替え",
   "Source": "ソース",
   "Standard AWS S3 tier": "標準AWS S3ティア",
@@ -1079,7 +1081,7 @@
   "Stop rebalance": "リバランスを停止",
   "Stopped": "停止済み",
   "Stopping": "停止中",
-  "Stopping KMS...": "KMS を停止しています...",
+  "Stopping KMS…": "KMS を停止しています…",
   "Storage Class": "ストレージクラス",
   "Storage Space": "ストレージスペース",
   "Storage Type": "ストレージタイプ",
@@ -1120,6 +1122,7 @@
   "Technical Training": "技術トレーニング",
   "Temporary URL": "一時URL",
   "Temporary URL Expiration": "一時URL有効期限",
+  "Theme": "テーマ",
   "The current site is detected automatically by the server. Add one or more remote sites to join the replication group.": "現在のサイトはサーバーによって自動検出されます。レプリケーショングループに参加するには、1 つ以上のリモートサイトを追加してください。",
   "The directory must be an absolute path on the server.": "ディレクトリはサーバー上の絶対パスである必要があります。",
   "The exported file contains sensitive information. Please keep it secure.": "エクスポートされたファイルには機密情報が含まれています。安全に保管してください。",
@@ -1214,7 +1217,7 @@
   "Username Claim": "ユーザー名クレーム",
   "Users": "ユーザー",
   "Validate": "検証",
-  "Validating...": "検証中...",
+  "Validating…": "検証中…",
   "Validation failed": "検証に失敗しました",
   "Validity": "有効性",
   "Vault AppRole is not supported in the first version of this console.": "このコンソールの初版では Vault AppRole はサポートしていません。",
@@ -1323,5 +1326,14 @@
   "ID": "ID",
   "Objects Failed": "Objects Failed",
   "Start Size": "Start Size",
-  "Start Time": "Start Time"
+  "Start Time": "Start Time",
+  "Bandwidth Unit": "帯域幅の単位",
+  "Clear search": "検索をクリア",
+  "Policy Statement must be an array": "Policy Statement は配列である必要があります",
+  "Policy format is invalid. Please check the JSON syntax.": "ポリシー形式が無効です。JSON 構文を確認してください。",
+  "Policy must be a valid JSON object": "ポリシーは有効な JSON オブジェクトである必要があります",
+  "Preparing download": "ダウンロードを準備中",
+  "User menu": "ユーザーメニュー",
+  "Cleanup Warnings": "クリーンアップ警告",
+  "Failed to load objects": "オブジェクトの読み込みに失敗しました"
 }
diff --git a/i18n/locales/ko-KR.json b/i18n/locales/ko-KR.json
index 2a086ac5..1b995719 100644
--- a/i18n/locales/ko-KR.json
+++ b/i18n/locales/ko-KR.json
@@ -168,7 +168,7 @@
   "Clear All": "모두 지우기",
   "Clear Cache": "캐시 지우기",
   "Clear Records": "레코드 지우기",
-  "Clearing cache...": "캐시를 비우는 중...",
+  "Clearing cache…": "캐시를 비우는 중…",
   "Click or drag ZIP file to this area to upload": "ZIP 파일을 클릭하거나 이 영역으로 끌어서 업로드",
   "Client ID": "클라이언트 ID",
   "Client ID is required": "클라이언트 ID는 필수입니다",
@@ -180,7 +180,7 @@
   "Collects and displays key performance indicators (such as CPU, memory, disk I/O, etc.) through visualized charts to help users understand system operation status and performance bottlenecks": "CPU, 메모리, 디스크 I/O 등의 핵심 성능 지표를 시각화된 차트로 수집하고 표시하여 시스템 운영 상태와 성능 병목을 파악할 수 있도록 돕습니다",
   "Comma-separated audience IDs.": "여러 Audience ID는 쉼표로 구분하세요.",
   "Completed": "완료({count})",
-  "Completing SSO login...": "SSO 로그인을 완료하는 중...",
+  "Completing SSO login…": "SSO 로그인을 완료하는 중…",
   "Configuration": "구성",
   "Configuration Information": "구성 정보",
   "Configuration URL": "구성 URL",
@@ -284,7 +284,7 @@
   "Delete Tag Confirm": "태그 삭제 확인",
   "Delete task created": "삭제 작업이 생성되었습니다",
   "Deleting": "삭제 중({count})",
-  "Deleting...": "삭제 중...",
+  "Deleting…": "삭제 중…",
   "Deletion Date": "삭제 날짜",
   "Deployment ID": "배포 ID",
   "Describe the purpose of this key": "이 키의 용도를 설명하세요",
@@ -349,7 +349,7 @@
   "Enter AppRole Role ID": "AppRole 역할 ID 입력",
   "Enter AppRole Secret ID": "AppRole 시크릿 ID 입력",
   "Enter an absolute path such as D:/data/kms-keys": "절대 경로 예: D:/data/kms-keys",
-  "Enter prefix...": "접두사 입력...",
+  "Enter prefix…": "접두사 입력…",
   "Enter the default SSE key ID": "기본 SSE 키 ID 입력",
   "Enter your Vault authentication token": "Vault 인증 토큰 입력",
   "Enterprise": "엔터프라이즈",
@@ -373,7 +373,7 @@
   "Export": "내보내기",
   "Export Now": "지금 내보내기",
   "Export all IAM configurations including users, groups, policies, and access keys in a ZIP file.": "사용자, 그룹, 정책 및 액세스 키를 포함한 모든 IAM 구성을 ZIP 파일로 내보냅니다.",
-  "Exporting...": "내보내는 중...",
+  "Exporting…": "내보내는 중…",
   "External MinIO tier": "외부 MinIO 티어",
   "Failed": "실패({count})",
   "Failed Status": "실패",
@@ -480,7 +480,7 @@
   "Import Now": "지금 가져오기",
   "Import Success": "가져오기 성공",
   "Import/Export": "가져오기/내보내기",
-  "Importing...": "가져오는 중...",
+  "Importing…": "가져오는 중…",
   "In Progress": "{total} 작업 진행 중({processing} 처리, {completed} 완료)",
   "Inactive": "비활성",
   "Include objects that already exist in the source bucket.": "소스 버킷에 이미 존재하는 객체를 포함합니다.",
@@ -548,6 +548,7 @@
   "Key services and configuration values reported by the cluster.": "클러스터에서 보고한 키 서비스 및 구성 값.",
   "Key storage path prefix in KV store": "KV 저장소의 키 저장 경로 접두사",
   "Keys in PendingDeletion can still be restored or deleted immediately.": "PendingDeletion 상태의 키는 복원하거나 즉시 삭제할 수 있습니다.",
+  "Language": "언어",
   "Large File Count Warning": "큰 파일 수 경고",
   "Last": "마지막",
   "Last Modified": "마지막 수정",
@@ -571,9 +572,9 @@
   "Light": "라이트",
   "Load Balancing": "로드 밸런싱",
   "Load Failed": "로드 실패",
-  "Loading buckets...": "버킷 로드 중...",
-  "Loading keys...": "키 로드 중...",
-  "Loading...": "불러오는 중...",
+  "Loading buckets…": "버킷 로드 중…",
+  "Loading keys…": "키 로드 중…",
+  "Loading…": "불러오는 중…",
   "Local Key Directory": "로컬 키 디렉터리",
   "Local development mode set successfully": "로컬 개발 모드가 성공적으로 설정됨",
   "Local filesystem": "로컬 파일 시스템",
@@ -971,7 +972,7 @@
   "Save Success": "저장 성공",
   "Save failed": "저장 실패",
   "Saved": "저장됨",
-  "Saving...": "저장 중...",
+  "Saving…": "저장 중…",
   "Scalability": "확장성",
   "Schedule Deletion": "삭제 예약",
   "Schedule Key Deletion": "키 삭제 예약",
@@ -985,7 +986,7 @@
   "Search Policy": "정책 검색",
   "Search User": "사용자 검색",
   "Search User Group": "사용자 그룹 검색",
-  "Search buckets...": "버킷 검색...",
+  "Search buckets…": "버킷 검색…",
   "Secret Configured": "시크릿 구성됨",
   "Secret ID": "시크릿 ID",
   "Secret Key": "시크릿 키",
@@ -1060,6 +1061,7 @@
   "Size": "크기",
   "Skip": "건너뛰기",
   "Skip TLS verification": "TLS 검증 건너뛰기",
+  "Skip to main content": "기본 콘텐츠로 건너뛰기",
   "Sort by": "정렬 기준",
   "Source": "소스",
   "Standard AWS S3 tier": "표준 AWS S3 티어",
@@ -1079,7 +1081,7 @@
   "Stop rebalance": "리밸런스 중지",
   "Stopped": "중지됨",
   "Stopping": "중지 중",
-  "Stopping KMS...": "KMS 중지 중...",
+  "Stopping KMS…": "KMS 중지 중…",
   "Storage Class": "스토리지 클래스",
   "Storage Space": "스토리지 공간",
   "Storage Type": "스토리지 유형",
@@ -1120,6 +1122,7 @@
   "Technical Training": "기술 교육",
   "Temporary URL": "임시 URL",
   "Temporary URL Expiration": "임시 URL 만료",
+  "Theme": "테마",
   "The current site is detected automatically by the server. Add one or more remote sites to join the replication group.": "현재 사이트는 서버에서 자동으로 감지됩니다. 복제 그룹에 참여하려면 하나 이상의 원격 사이트를 추가하세요.",
   "The directory must be an absolute path on the server.": "디렉터리는 서버의 절대 경로여야 합니다.",
   "The exported file contains sensitive information. Please keep it secure.": "내보낸 파일에 민감한 정보가 포함되어 있습니다. 안전하게 보관하세요.",
@@ -1214,7 +1217,7 @@
   "Username Claim": "사용자 이름 클레임",
   "Users": "사용자",
   "Validate": "검증",
-  "Validating...": "검증 중...",
+  "Validating…": "검증 중…",
   "Validation failed": "유효성 검사 실패",
   "Validity": "유효성",
   "Vault AppRole is not supported in the first version of this console.": "이 콘솔 첫 버전에서는 Vault AppRole을 지원하지 않습니다.",
@@ -1323,5 +1326,14 @@
   "ID": "ID",
   "Objects Failed": "Objects Failed",
   "Start Size": "Start Size",
-  "Start Time": "Start Time"
+  "Start Time": "Start Time",
+  "Bandwidth Unit": "대역폭 단위",
+  "Clear search": "검색 지우기",
+  "Policy Statement must be an array": "Policy Statement는 배열이어야 합니다",
+  "Policy format is invalid. Please check the JSON syntax.": "정책 형식이 올바르지 않습니다. JSON 구문을 확인하세요.",
+  "Policy must be a valid JSON object": "정책은 유효한 JSON 객체여야 합니다",
+  "Preparing download": "다운로드 준비 중",
+  "User menu": "사용자 메뉴",
+  "Cleanup Warnings": "정리 경고",
+  "Failed to load objects": "객체를 불러오지 못했습니다"
 }
diff --git a/i18n/locales/pt-BR.json b/i18n/locales/pt-BR.json
index 959ea93f..1ac949d8 100644
--- a/i18n/locales/pt-BR.json
+++ b/i18n/locales/pt-BR.json
@@ -168,7 +168,7 @@
   "Clear All": "Limpar Tudo",
   "Clear Cache": "Limpar Cache",
   "Clear Records": "Limpar Registros",
-  "Clearing cache...": "Limpando cache...",
+  "Clearing cache…": "Limpando cache…",
   "Click or drag ZIP file to this area to upload": "Clique ou arraste o arquivo ZIP para esta área para fazer upload",
   "Client ID": "ID do cliente",
   "Client ID is required": "O ID do cliente é obrigatório",
@@ -180,7 +180,7 @@
   "Collects and displays key performance indicators (such as CPU, memory, disk I/O, etc.) through visualized charts to help users understand system operation status and performance bottlenecks": "Coleta e exibe indicadores-chave de desempenho, como CPU, memória e E/S de disco, por meio de gráficos para ajudar os usuários a entender o estado do sistema e gargalos de desempenho",
   "Comma-separated audience IDs.": "IDs de audiência separados por vírgulas.",
   "Completed": "Concluído({count})",
-  "Completing SSO login...": "Concluindo login SSO...",
+  "Completing SSO login…": "Concluindo login SSO…",
   "Configuration": "Configuração",
   "Configuration Information": "Informações de Configuração",
   "Configuration URL": "URL de configuração",
@@ -284,7 +284,7 @@
   "Delete Tag Confirm": "Confirmar Exclusão de Tag",
   "Delete task created": "Tarefa de exclusão criada",
   "Deleting": "Excluindo({count})",
-  "Deleting...": "Excluindo...",
+  "Deleting…": "Excluindo…",
   "Deletion Date": "Data de exclusão",
   "Deployment ID": "ID da implantação",
   "Describe the purpose of this key": "Descreva o propósito desta chave",
@@ -349,7 +349,7 @@
   "Enter AppRole Role ID": "Digite o ID de Função AppRole",
   "Enter AppRole Secret ID": "Digite o ID Secreto AppRole",
   "Enter an absolute path such as D:/data/kms-keys": "Informe um caminho absoluto, ex.: D:/data/kms-keys",
-  "Enter prefix...": "Digite o prefixo...",
+  "Enter prefix…": "Digite o prefixo…",
   "Enter the default SSE key ID": "Informe o ID da chave SSE padrão",
   "Enter your Vault authentication token": "Digite seu token de autenticação do Vault",
   "Enterprise": "Empresa",
@@ -373,7 +373,7 @@
   "Export": "Exportar",
   "Export Now": "Exportar Agora",
   "Export all IAM configurations including users, groups, policies, and access keys in a ZIP file.": "Exporte todas as configurações do IAM, incluindo usuários, grupos, políticas e chaves de acesso em um arquivo ZIP.",
-  "Exporting...": "Exportando...",
+  "Exporting…": "Exportando…",
   "External MinIO tier": "Tier MinIO externo",
   "Failed": "Falha({count})",
   "Failed Status": "Falhou",
@@ -480,7 +480,7 @@
   "Import Now": "Importar Agora",
   "Import Success": "Importação Bem-sucedida",
   "Import/Export": "Importar/Exportar",
-  "Importing...": "Importando...",
+  "Importing…": "Importando…",
   "In Progress": "{total} tarefas em andamento ({processing} processamento, {completed} concluídas)",
   "Inactive": "Inativo",
   "Include objects that already exist in the source bucket.": "Incluir objetos que já existem no bucket de origem.",
@@ -548,6 +548,7 @@
   "Key services and configuration values reported by the cluster.": "Serviços de chave e valores de configuração relatados pelo cluster.",
   "Key storage path prefix in KV store": "Prefixo do caminho de armazenamento de chave no armazenamento KV",
   "Keys in PendingDeletion can still be restored or deleted immediately.": "Chaves em PendingDeletion ainda podem ser restauradas ou excluídas imediatamente.",
+  "Language": "Idioma",
   "Large File Count Warning": "Aviso de Grande Contagem de Arquivos",
   "Last": "Último",
   "Last Modified": "Última Modificação",
@@ -571,9 +572,9 @@
   "Light": "Claro",
   "Load Balancing": "Balanceamento de Carga",
   "Load Failed": "Falha ao carregar",
-  "Loading buckets...": "Carregando buckets...",
-  "Loading keys...": "Carregando chaves...",
-  "Loading...": "Carregando...",
+  "Loading buckets…": "Carregando buckets…",
+  "Loading keys…": "Carregando chaves…",
+  "Loading…": "Carregando…",
   "Local Key Directory": "Diretório local de chaves",
   "Local development mode set successfully": "Modo de desenvolvimento local definido com sucesso",
   "Local filesystem": "Sistema de arquivos local",
@@ -971,7 +972,7 @@
   "Save Success": "Salvo com sucesso",
   "Save failed": "Falha ao salvar",
   "Saved": "Salvo",
-  "Saving...": "Salvando...",
+  "Saving…": "Salvando…",
   "Scalability": "Escalabilidade",
   "Schedule Deletion": "Agendar exclusão",
   "Schedule Key Deletion": "Agendar exclusão da chave",
@@ -985,7 +986,7 @@
   "Search Policy": "Pesquisar Política",
   "Search User": "Pesquisar Usuário",
   "Search User Group": "Pesquisar Grupo de Usuários",
-  "Search buckets...": "Pesquisar buckets...",
+  "Search buckets…": "Pesquisar buckets…",
   "Secret Configured": "Segredo configurado",
   "Secret ID": "ID Secreto",
   "Secret Key": "Chave Secreta",
@@ -1060,6 +1061,7 @@
   "Size": "Tamanho",
   "Skip": "Pular",
   "Skip TLS verification": "Ignorar verificação TLS",
+  "Skip to main content": "Ir para o conteúdo principal",
   "Sort by": "Ordenar por",
   "Source": "Origem",
   "Standard AWS S3 tier": "Tier AWS S3 padrão",
@@ -1079,7 +1081,7 @@
   "Stop rebalance": "Parar rebalanceamento",
   "Stopped": "Parado",
   "Stopping": "Parando",
-  "Stopping KMS...": "Parando KMS...",
+  "Stopping KMS…": "Parando KMS…",
   "Storage Class": "Classe de Armazenamento",
   "Storage Space": "Espaço de Armazenamento",
   "Storage Type": "Tipo de Armazenamento",
@@ -1120,6 +1122,7 @@
   "Technical Training": "Treinamento Técnico",
   "Temporary URL": "URL Temporário",
   "Temporary URL Expiration": "Expiração de URL Temporário",
+  "Theme": "Tema",
   "The current site is detected automatically by the server. Add one or more remote sites to join the replication group.": "O site atual é detectado automaticamente pelo servidor. Adicione um ou mais sites remotos para entrar no grupo de replicação.",
   "The directory must be an absolute path on the server.": "O diretório deve ser um caminho absoluto no servidor.",
   "The exported file contains sensitive information. Please keep it secure.": "O arquivo exportado contém informações sensíveis. Mantenha-o seguro.",
@@ -1214,7 +1217,7 @@
   "Username Claim": "Claim de nome de usuário",
   "Users": "Usuários",
   "Validate": "Validar",
-  "Validating...": "Validando...",
+  "Validating…": "Validando…",
   "Validation failed": "Validação falhou",
   "Validity": "Validade",
   "Vault AppRole is not supported in the first version of this console.": "Vault AppRole não é suportado na primeira versão deste console.",
@@ -1323,5 +1326,14 @@
   "ID": "ID",
   "Objects Failed": "Objects Failed",
   "Start Size": "Start Size",
-  "Start Time": "Start Time"
+  "Start Time": "Start Time",
+  "Bandwidth Unit": "Unidade de largura de banda",
+  "Clear search": "Limpar busca",
+  "Policy Statement must be an array": "Policy Statement deve ser um array",
+  "Policy format is invalid. Please check the JSON syntax.": "O formato da política é inválido. Verifique a sintaxe JSON.",
+  "Policy must be a valid JSON object": "A política deve ser um objeto JSON válido",
+  "Preparing download": "Preparando download",
+  "User menu": "Menu do usuário",
+  "Cleanup Warnings": "Avisos de limpeza",
+  "Failed to load objects": "Falha ao carregar objetos"
 }
diff --git a/i18n/locales/ru-RU.json b/i18n/locales/ru-RU.json
index 57c606e5..5e76a8b8 100644
--- a/i18n/locales/ru-RU.json
+++ b/i18n/locales/ru-RU.json
@@ -168,7 +168,7 @@
   "Clear All": "Очистить все",
   "Clear Cache": "Очистить кэш",
   "Clear Records": "Очистить записи",
-  "Clearing cache...": "Очистка кэша...",
+  "Clearing cache…": "Очистка кэша…",
   "Click or drag ZIP file to this area to upload": "Нажмите или перетащите ZIP-файл в эту область для загрузки",
   "Client ID": "ID клиента",
   "Client ID is required": "ID клиента обязателен",
@@ -180,7 +180,7 @@
   "Collects and displays key performance indicators (such as CPU, memory, disk I/O, etc.) through visualized charts to help users understand system operation status and performance bottlenecks": "Собирает и отображает ключевые показатели производительности, такие как CPU, память и дисковый I/O, в виде графиков, помогая понять состояние системы и узкие места производительности",
   "Comma-separated audience IDs.": "ID аудиторий, разделенные запятыми.",
   "Completed": "Завершено({count})",
-  "Completing SSO login...": "Завершение входа через SSO...",
+  "Completing SSO login…": "Завершение входа через SSO…",
   "Configuration": "Конфигурация",
   "Configuration Information": "Информация о конфигурации",
   "Configuration URL": "URL конфигурации",
@@ -284,7 +284,7 @@
   "Delete Tag Confirm": "Подтвердить удаление тега",
   "Delete task created": "Задача удаления создана",
   "Deleting": "Удаление({count})",
-  "Deleting...": "Удаление...",
+  "Deleting…": "Удаление…",
   "Deletion Date": "Дата удаления",
   "Deployment ID": "ID развертывания",
   "Describe the purpose of this key": "Опишите назначение этого ключа",
@@ -349,7 +349,7 @@
   "Enter AppRole Role ID": "Введите ID роли AppRole",
   "Enter AppRole Secret ID": "Введите секретный ID AppRole",
   "Enter an absolute path such as D:/data/kms-keys": "Введите абсолютный путь, например D:/data/kms-keys",
-  "Enter prefix...": "Введите префикс...",
+  "Enter prefix…": "Введите префикс…",
   "Enter the default SSE key ID": "Введите ID ключа SSE по умолчанию",
   "Enter your Vault authentication token": "Введите токен аутентификации Vault",
   "Enterprise": "Предприятие",
@@ -373,7 +373,7 @@
   "Export": "Экспорт",
   "Export Now": "Экспортировать сейчас",
   "Export all IAM configurations including users, groups, policies, and access keys in a ZIP file.": "Экспортируйте все конфигурации IAM, включая пользователей, группы, политики и ключи доступа в ZIP-файл.",
-  "Exporting...": "Экспорт...",
+  "Exporting…": "Экспорт…",
   "External MinIO tier": "Внешний уровень MinIO",
   "Failed": "Не удалось({count})",
   "Failed Status": "Ошибка",
@@ -480,7 +480,7 @@
   "Import Now": "Импортировать сейчас",
   "Import Success": "Импорт успешен",
   "Import/Export": "Импорт/Экспорт",
-  "Importing...": "Импорт...",
+  "Importing…": "Импорт…",
   "In Progress": "Выполняется задач: {total} (обработка: {processing}, завершено: {completed})",
   "Inactive": "Неактивный",
   "Include objects that already exist in the source bucket.": "Включить объекты, которые уже существуют в исходном бакете.",
@@ -548,6 +548,7 @@
   "Key services and configuration values reported by the cluster.": "Службы ключей и значения конфигурации, о которых сообщает кластер.",
   "Key storage path prefix in KV store": "Префикс пути хранения ключа в хранилище KV",
   "Keys in PendingDeletion can still be restored or deleted immediately.": "Ключи в состоянии PendingDeletion всё ещё можно восстановить или удалить немедленно.",
+  "Language": "Язык",
   "Large File Count Warning": "Предупреждение о большом количестве файлов",
   "Last": "Последний",
   "Last Modified": "Последнее изменение",
@@ -571,9 +572,9 @@
   "Light": "Светлая",
   "Load Balancing": "Балансировка нагрузки",
   "Load Failed": "Не удалось загрузить",
-  "Loading buckets...": "Загрузка бакетов...",
-  "Loading keys...": "Загрузка ключей...",
-  "Loading...": "Загрузка...",
+  "Loading buckets…": "Загрузка бакетов…",
+  "Loading keys…": "Загрузка ключей…",
+  "Loading…": "Загрузка…",
   "Local Key Directory": "Локальный каталог ключей",
   "Local development mode set successfully": "Режим локальной разработки успешно установлен",
   "Local filesystem": "Локальная файловая система",
@@ -971,7 +972,7 @@
   "Save Success": "Успешно сохранено",
   "Save failed": "Ошибка сохранения",
   "Saved": "Сохранено",
-  "Saving...": "Сохранение...",
+  "Saving…": "Сохранение…",
   "Scalability": "Масштабируемость",
   "Schedule Deletion": "Запланировать удаление",
   "Schedule Key Deletion": "Запланировать удаление ключа",
@@ -985,7 +986,7 @@
   "Search Policy": "Поиск политики",
   "Search User": "Поиск пользователя",
   "Search User Group": "Поиск группы пользователей",
-  "Search buckets...": "Поиск бакетов...",
+  "Search buckets…": "Поиск бакетов…",
   "Secret Configured": "Секрет настроен",
   "Secret ID": "Секретный ID",
   "Secret Key": "Секретный ключ",
@@ -1060,6 +1061,7 @@
   "Size": "Размер",
   "Skip": "Пропустить",
   "Skip TLS verification": "Пропустить проверку TLS",
+  "Skip to main content": "Перейти к основному содержимому",
   "Sort by": "Сортировать по",
   "Source": "Источник",
   "Standard AWS S3 tier": "Стандартный уровень AWS S3",
@@ -1079,7 +1081,7 @@
   "Stop rebalance": "Остановить перебалансировку",
   "Stopped": "Остановлено",
   "Stopping": "Остановка",
-  "Stopping KMS...": "Остановка KMS...",
+  "Stopping KMS…": "Остановка KMS…",
   "Storage Class": "Класс хранилища",
   "Storage Space": "Пространство хранилища",
   "Storage Type": "Тип хранилища",
@@ -1120,6 +1122,7 @@
   "Technical Training": "Техническое обучение",
   "Temporary URL": "Временный URL",
   "Temporary URL Expiration": "Истечение срока действия временного URL",
+  "Theme": "Тема",
   "The current site is detected automatically by the server. Add one or more remote sites to join the replication group.": "Текущий сайт определяется сервером автоматически. Добавьте один или несколько удаленных сайтов, чтобы присоединиться к группе репликации.",
   "The directory must be an absolute path on the server.": "Каталог должен быть абсолютным путём на сервере.",
   "The exported file contains sensitive information. Please keep it secure.": "Экспортированный файл содержит конфиденциальную информацию. Храните его в безопасности.",
@@ -1214,7 +1217,7 @@
   "Username Claim": "Claim имени пользователя",
   "Users": "Пользователи",
   "Validate": "Проверить",
-  "Validating...": "Проверка...",
+  "Validating…": "Проверка…",
   "Validation failed": "Проверка не удалась",
   "Validity": "Действительность",
   "Vault AppRole is not supported in the first version of this console.": "Vault AppRole не поддерживается в первой версии этой консоли.",
@@ -1323,5 +1326,14 @@
   "ID": "ID",
   "Objects Failed": "Objects Failed",
   "Start Size": "Start Size",
-  "Start Time": "Start Time"
+  "Start Time": "Start Time",
+  "Bandwidth Unit": "Единица пропускной способности",
+  "Clear search": "Очистить поиск",
+  "Policy Statement must be an array": "Policy Statement должен быть массивом",
+  "Policy format is invalid. Please check the JSON syntax.": "Недопустимый формат политики. Проверьте синтаксис JSON.",
+  "Policy must be a valid JSON object": "Политика должна быть допустимым объектом JSON",
+  "Preparing download": "Подготовка загрузки",
+  "User menu": "Меню пользователя",
+  "Cleanup Warnings": "Предупреждения очистки",
+  "Failed to load objects": "Не удалось загрузить объекты"
 }
diff --git a/i18n/locales/tr-TR.json b/i18n/locales/tr-TR.json
index 13d77926..3ccd5710 100644
--- a/i18n/locales/tr-TR.json
+++ b/i18n/locales/tr-TR.json
@@ -168,7 +168,7 @@
   "Clear All": "Tümünü Temizle",
   "Clear Cache": "Önbelleği Temizle",
   "Clear Records": "Kayıtları Temizle",
-  "Clearing cache...": "Önbellek temizleniyor...",
+  "Clearing cache…": "Önbellek temizleniyor…",
   "Click or drag ZIP file to this area to upload": "Yüklemek için bu alana ZIP dosyasını tıklayın veya sürükleyin",
   "Client ID": "İstemci Kimliği",
   "Client ID is required": "İstemci ID zorunludur",
@@ -180,7 +180,7 @@
   "Collects and displays key performance indicators (such as CPU, memory, disk I/O, etc.) through visualized charts to help users understand system operation status and performance bottlenecks": "CPU, bellek ve disk G/Ç gibi temel performans göstergelerini grafiklerle toplar ve gösterir; kullanıcıların sistem çalışma durumunu ve performans darboğazlarını anlamasına yardımcı olur",
   "Comma-separated audience IDs.": "Virgülle ayrılmış hedef kitle ID'leri.",
   "Completed": "Tamamlandı({count})",
-  "Completing SSO login...": "SSO girişi tamamlanıyor...",
+  "Completing SSO login…": "SSO girişi tamamlanıyor…",
   "Configuration": "Yapılandırma",
   "Configuration Information": "Yapılandırma Bilgisi",
   "Configuration URL": "Yapılandırma URL'si",
@@ -284,7 +284,7 @@
   "Delete Tag Confirm": "Etiket Silmeyi Onayla",
   "Delete task created": "Silme görevi oluşturuldu",
   "Deleting": "Siliniyor({count})",
-  "Deleting...": "Siliniyor...",
+  "Deleting…": "Siliniyor…",
   "Deletion Date": "Silme tarihi",
   "Deployment ID": "Dağıtım Kimliği",
   "Describe the purpose of this key": "Bu anahtarın amacını açıklayın",
@@ -349,7 +349,7 @@
   "Enter AppRole Role ID": "AppRole Rol Kimliğini girin",
   "Enter AppRole Secret ID": "AppRole Secret ID girin",
   "Enter an absolute path such as D:/data/kms-keys": "Mutlak yol girin, örn. D:/data/kms-keys",
-  "Enter prefix...": "Önek girin...",
+  "Enter prefix…": "Önek girin…",
   "Enter the default SSE key ID": "Varsayılan SSE anahtar kimliğini girin",
   "Enter your Vault authentication token": "Vault kimlik doğrulama token'ınızı girin",
   "Enterprise": "Kurumsal",
@@ -373,7 +373,7 @@
   "Export": "Dışa Aktar",
   "Export Now": "Şimdi Dışa Aktar",
   "Export all IAM configurations including users, groups, policies, and access keys in a ZIP file.": "Kullanıcıları, grupları, politikaları ve erişim anahtarlarını içeren tüm IAM yapılandırmalarını ZIP dosyası olarak dışa aktarın.",
-  "Exporting...": "Dışa Aktarılıyor...",
+  "Exporting…": "Dışa Aktarılıyor…",
   "External MinIO tier": "Harici MinIO katmanı",
   "Failed": "Başarısız({count})",
   "Failed Status": "Başarısız",
@@ -480,7 +480,7 @@
   "Import Now": "Şimdi İçe Aktar",
   "Import Success": "İçe Aktarma Başarısı",
   "Import/Export": "İçe/Dışa Aktar",
-  "Importing...": "İçe Aktarılıyor...",
+  "Importing…": "İçe Aktarılıyor…",
   "In Progress": "{total} görev devam ediyor ({processing} işleniyor, {completed} tamamlandı)",
   "Inactive": "Pasif",
   "Include objects that already exist in the source bucket.": "Kaynak pakette zaten mevcut olan nesneleri ekleyin.",
@@ -548,6 +548,7 @@
   "Key services and configuration values reported by the cluster.": "Küme tarafından bildirilen temel hizmetler ve yapılandırma değerleri.",
   "Key storage path prefix in KV store": "KV deposundaki anahtar depolama yolu öneki",
   "Keys in PendingDeletion can still be restored or deleted immediately.": "PendingDeletion durumundaki anahtarlar hâlâ geri yüklenebilir veya hemen silinebilir.",
+  "Language": "Dil",
   "Large File Count Warning": "Büyük Dosya Sayısı Uyarısı",
   "Last": "Son",
   "Last Modified": "Son Değiştirme",
@@ -571,9 +572,9 @@
   "Light": "Açık",
   "Load Balancing": "Yük Dengeleme",
   "Load Failed": "Yükleme başarısız",
-  "Loading buckets...": "Kovalar yükleniyor...",
-  "Loading keys...": "Anahtarlar yükleniyor...",
-  "Loading...": "Yükleniyor...",
+  "Loading buckets…": "Kovalar yükleniyor…",
+  "Loading keys…": "Anahtarlar yükleniyor…",
+  "Loading…": "Yükleniyor…",
   "Local Key Directory": "Yerel anahtar dizini",
   "Local development mode set successfully": "Yerel geliştirme modu başarıyla ayarlandı",
   "Local filesystem": "Yerel dosya sistemi",
@@ -971,7 +972,7 @@
   "Save Success": "Kaydetme başarılı",
   "Save failed": "Kaydetme başarısız oldu",
   "Saved": "Kaydedildi",
-  "Saving...": "Kaydediliyor...",
+  "Saving…": "Kaydediliyor…",
   "Scalability": "Ölçeklenebilirlik",
   "Schedule Deletion": "Silme planla",
   "Schedule Key Deletion": "Anahtar silme planla",
@@ -985,7 +986,7 @@
   "Search Policy": "Politika Ara",
   "Search User": "Kullanıcı Ara",
   "Search User Group": "Kullanıcı Grubu Ara",
-  "Search buckets...": "Kovaları ara...",
+  "Search buckets…": "Kovaları ara…",
   "Secret Configured": "Sır Yapılandırıldı",
   "Secret ID": "Gizli Kimlik",
   "Secret Key": "Gizli Anahtar",
@@ -1060,6 +1061,7 @@
   "Size": "Boyut",
   "Skip": "Atla",
   "Skip TLS verification": "TLS doğrulamasını atla",
+  "Skip to main content": "Ana içeriğe geç",
   "Sort by": "Göre sırala",
   "Source": "Kaynak",
   "Standard AWS S3 tier": "Standart AWS S3 katmanı",
@@ -1079,7 +1081,7 @@
   "Stop rebalance": "Yeniden dengelemeyi durdur",
   "Stopped": "Durduruldu",
   "Stopping": "Durduruluyor",
-  "Stopping KMS...": "KMS durduruluyor...",
+  "Stopping KMS…": "KMS durduruluyor…",
   "Storage Class": "Depolama Sınıfı",
   "Storage Space": "Depolama Alanı",
   "Storage Type": "Depolama Türü",
@@ -1120,6 +1122,7 @@
   "Technical Training": "Teknik Eğitim",
   "Temporary URL": "Geçici URL",
   "Temporary URL Expiration": "Geçici URL Son Kullanma",
+  "Theme": "Tema",
   "The current site is detected automatically by the server. Add one or more remote sites to join the replication group.": "Geçerli site sunucu tarafından otomatik olarak algılanır. Çoğaltma grubuna katılmak için bir veya daha fazla uzak site ekleyin.",
   "The directory must be an absolute path on the server.": "Dizin sunucuda mutlak yol olmalıdır.",
   "The exported file contains sensitive information. Please keep it secure.": "Dışa aktarılan dosya hassas bilgiler içerir. Lütfen güvende tutun.",
@@ -1214,7 +1217,7 @@
   "Username Claim": "Kullanıcı Adı Claim",
   "Users": "Kullanıcılar",
   "Validate": "Doğrula",
-  "Validating...": "Doğrulanıyor...",
+  "Validating…": "Doğrulanıyor…",
   "Validation failed": "Doğrulama başarısız",
   "Validity": "Geçerlilik",
   "Vault AppRole is not supported in the first version of this console.": "Vault AppRole bu konsolun ilk sürümünde desteklenmez.",
@@ -1323,5 +1326,14 @@
   "ID": "ID",
   "Objects Failed": "Objects Failed",
   "Start Size": "Start Size",
-  "Start Time": "Start Time"
+  "Start Time": "Start Time",
+  "Bandwidth Unit": "Bant genişliği birimi",
+  "Clear search": "Aramayı temizle",
+  "Policy Statement must be an array": "Policy Statement bir dizi olmalıdır",
+  "Policy format is invalid. Please check the JSON syntax.": "Policy biçimi geçersiz. Lütfen JSON söz dizimini kontrol edin.",
+  "Policy must be a valid JSON object": "Policy geçerli bir JSON nesnesi olmalıdır",
+  "Preparing download": "İndirme hazırlanıyor",
+  "User menu": "Kullanıcı menüsü",
+  "Cleanup Warnings": "Temizleme uyarıları",
+  "Failed to load objects": "Nesneler yüklenemedi"
 }
diff --git a/i18n/locales/vi-VN.json b/i18n/locales/vi-VN.json
index b19d95ca..ba4b37d7 100644
--- a/i18n/locales/vi-VN.json
+++ b/i18n/locales/vi-VN.json
@@ -168,7 +168,7 @@
   "Clear All": "Xóa tất cả",
   "Clear Cache": "Xóa bộ nhớ đệm",
   "Clear Records": "Xóa lịch sử",
-  "Clearing cache...": "Đang xóa bộ nhớ đệm...",
+  "Clearing cache…": "Đang xóa bộ nhớ đệm…",
   "Click or drag ZIP file to this area to upload": "Nhấp hoặc kéo tệp ZIP vào khu vực này để tải lên",
   "Client ID": "Client ID",
   "Client ID is required": "Client ID là bắt buộc",
@@ -180,7 +180,7 @@
   "Collects and displays key performance indicators (such as CPU, memory, disk I/O, etc.) through visualized charts to help users understand system operation status and performance bottlenecks": "Thu thập và hiển thị các chỉ số hiệu năng chính như CPU, bộ nhớ, I/O đĩa qua biểu đồ trực quan, giúp người dùng hiểu trạng thái vận hành hệ thống và các điểm nghẽn hiệu năng",
   "Comma-separated audience IDs.": "Các ID đối tượng, phân tách bằng dấu phẩy.",
   "Completed": "Đã hoàn thành ({count})",
-  "Completing SSO login...": "Đang hoàn tất đăng nhập SSO...",
+  "Completing SSO login…": "Đang hoàn tất đăng nhập SSO…",
   "Configuration": "Cấu hình",
   "Configuration Information": "Thông tin cấu hình",
   "Configuration URL": "URL cấu hình",
@@ -284,7 +284,7 @@
   "Delete Tag Confirm": "Xác nhận xóa thẻ",
   "Delete task created": "Đã tạo tác vụ xóa",
   "Deleting": "Đang xóa ({count})",
-  "Deleting...": "Đang xóa...",
+  "Deleting…": "Đang xóa…",
   "Deletion Date": "Ngày xóa",
   "Deployment ID": "ID triển khai",
   "Describe the purpose of this key": "Mô tả mục đích của khóa này",
@@ -349,7 +349,7 @@
   "Enter AppRole Role ID": "Nhập mã vai trò ứng dụng (Role ID)",
   "Enter AppRole Secret ID": "Nhập mã bảo mật ứng dụng (Secret ID)",
   "Enter an absolute path such as D:/data/kms-keys": "Nhập đường dẫn tuyệt đối, ví dụ D:/data/kms-keys",
-  "Enter prefix...": "Nhập tiền tố...",
+  "Enter prefix…": "Nhập tiền tố…",
   "Enter the default SSE key ID": "Nhập ID khóa SSE mặc định",
   "Enter your Vault authentication token": "Nhập mã xác thực (token) của Vault",
   "Enterprise": "Doanh nghiệp",
@@ -373,7 +373,7 @@
   "Export": "Xuất dữ liệu",
   "Export Now": "Xuất ngay",
   "Export all IAM configurations including users, groups, policies, and access keys in a ZIP file.": "Xuất toàn bộ cấu hình IAM bao gồm người dùng, nhóm, chính sách và khóa truy cập vào một tệp ZIP.",
-  "Exporting...": "Đang xuất...",
+  "Exporting…": "Đang xuất…",
   "External MinIO tier": "Lớp lưu trữ MinIO bên ngoài",
   "Failed": "Thất bại ({count})",
   "Failed Status": "Thất bại",
@@ -480,7 +480,7 @@
   "Import Now": "Nhập ngay",
   "Import Success": "Nhập thành công",
   "Import/Export": "Nhập/Xuất",
-  "Importing...": "Đang nhập...",
+  "Importing…": "Đang nhập…",
   "In Progress": "{total} tác vụ đang thực hiện ({processing} đang xử lý, {completed} đã hoàn thành)",
   "Inactive": "Ngưng hoạt động",
   "Include objects that already exist in the source bucket.": "Bao gồm các đối tượng đã tồn tại trong thùng chứa nguồn.",
@@ -548,6 +548,7 @@
   "Key services and configuration values reported by the cluster.": "Các dịch vụ chính và giá trị cấu hình được báo cáo bởi cụm máy chủ.",
   "Key storage path prefix in KV store": "Tiền tố đường dẫn lưu trữ khóa trong kho KV",
   "Keys in PendingDeletion can still be restored or deleted immediately.": "Khóa ở trạng thái PendingDeletion vẫn có thể khôi phục hoặc xóa ngay.",
+  "Language": "Ngôn ngữ",
   "Large File Count Warning": "Cảnh báo số lượng tệp lớn",
   "Last": "Cuối cùng",
   "Last Modified": "Chỉnh sửa lần cuối",
@@ -571,9 +572,9 @@
   "Light": "Sáng",
   "Load Balancing": "Cân bằng tải",
   "Load Failed": "Tải thất bại",
-  "Loading buckets...": "Đang tải danh sách thùng chứa...",
-  "Loading keys...": "Đang tải danh sách khóa...",
-  "Loading...": "Đang tải...",
+  "Loading buckets…": "Đang tải danh sách thùng chứa…",
+  "Loading keys…": "Đang tải danh sách khóa…",
+  "Loading…": "Đang tải…",
   "Local Key Directory": "Thư mục khóa cục bộ",
   "Local development mode set successfully": "Đã thiết lập chế độ phát triển cục bộ thành công",
   "Local filesystem": "Hệ thống tệp cục bộ",
@@ -971,7 +972,7 @@
   "Save Success": "Lưu thành công",
   "Save failed": "Lưu thất bại",
   "Saved": "Đã lưu",
-  "Saving...": "Đang lưu...",
+  "Saving…": "Đang lưu…",
   "Scalability": "Khả năng mở rộng",
   "Schedule Deletion": "Lên lịch xóa",
   "Schedule Key Deletion": "Lên lịch xóa khóa",
@@ -985,7 +986,7 @@
   "Search Policy": "Tìm kiếm chính sách",
   "Search User": "Tìm kiếm người dùng",
   "Search User Group": "Tìm kiếm nhóm người dùng",
-  "Search buckets...": "Tìm kiếm thùng chứa...",
+  "Search buckets…": "Tìm kiếm thùng chứa…",
   "Secret Configured": "Đã cấu hình Secret",
   "Secret ID": "Mã bí mật",
   "Secret Key": "Khóa bí mật",
@@ -1060,6 +1061,7 @@
   "Size": "Kích thước",
   "Skip": "Bỏ qua",
   "Skip TLS verification": "Bỏ qua xác minh TLS",
+  "Skip to main content": "Chuyển đến nội dung chính",
   "Sort by": "Sắp xếp theo",
   "Source": "Nguồn",
   "Standard AWS S3 tier": "Lớp lưu trữ AWS S3 tiêu chuẩn",
@@ -1079,7 +1081,7 @@
   "Stop rebalance": "Dừng cân bằng lại",
   "Stopped": "Đã dừng",
   "Stopping": "Đang dừng",
-  "Stopping KMS...": "Đang dừng KMS...",
+  "Stopping KMS…": "Đang dừng KMS…",
   "Storage Class": "Loại lưu trữ",
   "Storage Space": "Không gian lưu trữ",
   "Storage Type": "Loại lưu trữ",
@@ -1120,6 +1122,7 @@
   "Technical Training": "Đào tạo kỹ thuật",
   "Temporary URL": "Đường dẫn tạm thời",
   "Temporary URL Expiration": "Thời gian hết hạn đường dẫn tạm thời",
+  "Theme": "Giao diện",
   "The current site is detected automatically by the server. Add one or more remote sites to join the replication group.": "Site hiện tại được máy chủ tự động phát hiện. Thêm một hoặc nhiều site từ xa để tham gia nhóm sao chép.",
   "The directory must be an absolute path on the server.": "Thư mục phải là đường dẫn tuyệt đối trên máy chủ.",
   "The exported file contains sensitive information. Please keep it secure.": "Tệp được xuất chứa thông tin nhạy cảm. Vui lòng bảo mật tệp này.",
@@ -1214,7 +1217,7 @@
   "Username Claim": "Claim tên người dùng",
   "Users": "Người dùng",
   "Validate": "Xác thực",
-  "Validating...": "Đang xác thực...",
+  "Validating…": "Đang xác thực…",
   "Validation failed": "Xác thực dữ liệu thất bại",
   "Validity": "Hiệu lực",
   "Vault AppRole is not supported in the first version of this console.": "Phiên bản đầu của console này không hỗ trợ Vault AppRole.",
@@ -1323,5 +1326,14 @@
   "ID": "ID",
   "Objects Failed": "Objects Failed",
   "Start Size": "Start Size",
-  "Start Time": "Start Time"
+  "Start Time": "Start Time",
+  "Bandwidth Unit": "Đơn vị băng thông",
+  "Clear search": "Xóa tìm kiếm",
+  "Policy Statement must be an array": "Policy Statement phải là một mảng",
+  "Policy format is invalid. Please check the JSON syntax.": "Định dạng policy không hợp lệ. Vui lòng kiểm tra cú pháp JSON.",
+  "Policy must be a valid JSON object": "Policy phải là một đối tượng JSON hợp lệ",
+  "Preparing download": "Đang chuẩn bị tải xuống",
+  "User menu": "Menu người dùng",
+  "Cleanup Warnings": "Cảnh báo dọn dẹp",
+  "Failed to load objects": "Không thể tải đối tượng"
 }
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 23c9714c..53acc8f5 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -168,7 +168,7 @@
   "Clear All": "清除全部",
   "Clear Cache": "清除缓存",
   "Clear Records": "清空记录",
-  "Clearing cache...": "正在清理缓存...",
+  "Clearing cache…": "正在清理缓存…",
   "Click or drag ZIP file to this area to upload": "点击或拖拽ZIP文件到此区域上传",
   "Client ID": "客户端 ID",
   "Client ID is required": "客户端 ID 为必填项",
@@ -180,7 +180,7 @@
   "Collects and displays key performance indicators (such as CPU, memory, disk I/O, etc.) through visualized charts to help users understand system operation status and performance bottlenecks": "通过可视化图表收集并展示 CPU、内存、磁盘 I/O 等关键性能指标，帮助用户了解系统运行状态和性能瓶颈",
   "Comma-separated audience IDs.": "多个受众 ID 请用逗号分隔。",
   "Completed": "已完成({count})",
-  "Completing SSO login...": "正在完成 SSO 登录...",
+  "Completing SSO login…": "正在完成 SSO 登录…",
   "Configuration": "配置",
   "Configuration Information": "配置信息",
   "Configuration URL": "配置 URL",
@@ -284,7 +284,7 @@
   "Delete Tag Confirm": "你确定要删除这个标签吗？",
   "Delete task created": "删除任务已创建",
   "Deleting": "进行中({count})",
-  "Deleting...": "删除中...",
+  "Deleting…": "删除中…",
   "Deletion Date": "删除日期",
   "Deployment ID": "部署 ID",
   "Describe the purpose of this key": "描述该密钥的用途",
@@ -349,7 +349,7 @@
   "Enter AppRole Role ID": "输入 AppRole 角色 ID",
   "Enter AppRole Secret ID": "输入AppRole Secret ID",
   "Enter an absolute path such as D:/data/kms-keys": "输入绝对路径，例如 D:/data/kms-keys",
-  "Enter prefix...": "输入前缀...",
+  "Enter prefix…": "输入前缀…",
   "Enter the default SSE key ID": "输入默认 SSE 密钥 ID",
   "Enter your Vault authentication token": "输入您的Vault认证令牌",
   "Enterprise": "企业版",
@@ -373,7 +373,7 @@
   "Export": "导出",
   "Export Now": "立即导出",
   "Export all IAM configurations including users, groups, policies, and access keys in a ZIP file.": "导出所有IAM配置，包括用户、用户组、策略和访问密钥，打包为ZIP文件。",
-  "Exporting...": "导出中...",
+  "Exporting…": "导出中…",
   "External MinIO tier": "外部 MinIO 存储层",
   "Failed": "已失败({count})",
   "Failed Status": "失败",
@@ -480,7 +480,7 @@
   "Import Now": "立即导入",
   "Import Success": "导入成功",
   "Import/Export": "导入 / 导出",
-  "Importing...": "导入中...",
+  "Importing…": "导入中…",
   "In Progress": "{total} 任务进行中（进行中 {processing} 个，已成功 {completed} 个）",
   "Inactive": "未激活",
   "Include objects that already exist in the source bucket.": "包含源存储桶中已存在的对象。",
@@ -548,6 +548,7 @@
   "Key services and configuration values reported by the cluster.": "集群报告的密钥服务和配置值。",
   "Key storage path prefix in KV store": "KV 存储中的密钥存储路径前缀",
   "Keys in PendingDeletion can still be restored or deleted immediately.": "处于 PendingDeletion 状态的密钥仍可恢复或立即删除。",
+  "Language": "语言",
   "Large File Count Warning": "大文件数量警告",
   "Last": "最后一页",
   "Last Modified": "更新时间",
@@ -571,9 +572,9 @@
   "Light": "亮色",
   "Load Balancing": "负载均衡",
   "Load Failed": "加载失败",
-  "Loading buckets...": "正在加载存储桶...",
-  "Loading keys...": "正在加载密钥...",
-  "Loading...": "加载中...",
+  "Loading buckets…": "正在加载存储桶…",
+  "Loading keys…": "正在加载密钥…",
+  "Loading…": "加载中…",
   "Local Key Directory": "本地密钥目录",
   "Local development mode set successfully": "本地开发模式设置成功",
   "Local filesystem": "本地文件系统",
@@ -971,7 +972,7 @@
   "Save Success": "保存成功",
   "Save failed": "保存失败",
   "Saved": "已保存",
-  "Saving...": "保存中...",
+  "Saving…": "保存中…",
   "Scalability": "可扩展性",
   "Schedule Deletion": "计划删除",
   "Schedule Key Deletion": "计划删除密钥",
@@ -985,7 +986,7 @@
   "Search Policy": "搜索策略",
   "Search User": "搜索访问用户",
   "Search User Group": "搜索用户组",
-  "Search buckets...": "搜索存储桶...",
+  "Search buckets…": "搜索存储桶…",
   "Secret Configured": "已配置密钥",
   "Secret ID": "密钥 ID",
   "Secret Key": "密钥",
@@ -1060,6 +1061,7 @@
   "Size": "大小",
   "Skip": "跳过",
   "Skip TLS verification": "跳过 TLS 校验",
+  "Skip to main content": "跳到主要内容",
   "Sort by": "排序方式",
   "Source": "来源",
   "Standard AWS S3 tier": "标准 AWS S3 存储层",
@@ -1079,7 +1081,7 @@
   "Stop rebalance": "停止再平衡",
   "Stopped": "已停止",
   "Stopping": "停止中",
-  "Stopping KMS...": "正在停止 KMS...",
+  "Stopping KMS…": "正在停止 KMS…",
   "Storage Class": "存储类型",
   "Storage Space": "存储空间",
   "Storage Type": "存储类型",
@@ -1120,6 +1122,7 @@
   "Technical Training": "技术培训",
   "Temporary URL": "临时链接",
   "Temporary URL Expiration": "临时链接有效期",
+  "Theme": "主题",
   "The current site is detected automatically by the server. Add one or more remote sites to join the replication group.": "当前站点由服务器自动检测。请添加一个或多个远程站点以加入复制组。",
   "The directory must be an absolute path on the server.": "该目录必须是服务端的绝对路径。",
   "The exported file contains sensitive information. Please keep it secure.": "导出的文件包含敏感信息，请妥善保管。",
@@ -1214,7 +1217,7 @@
   "Username Claim": "用户名声明",
   "Users": "用户",
   "Validate": "校验",
-  "Validating...": "校验中...",
+  "Validating…": "校验中…",
   "Validation failed": "验证失败",
   "Validity": "有效期",
   "Vault AppRole is not supported in the first version of this console.": "当前控制台首版不支持 Vault AppRole。",
@@ -1323,5 +1326,14 @@
   "ID": "ID",
   "Objects Failed": "失败对象数",
   "Start Size": "开始大小",
-  "Start Time": "开始时间"
+  "Start Time": "开始时间",
+  "Bandwidth Unit": "带宽单位",
+  "Clear search": "清除搜索",
+  "Policy Statement must be an array": "Policy Statement 必须是数组",
+  "Policy format is invalid. Please check the JSON syntax.": "Policy 格式无效，请检查 JSON 语法。",
+  "Policy must be a valid JSON object": "Policy 必须是有效的 JSON 对象",
+  "Preparing download": "正在准备下载",
+  "User menu": "用户菜单",
+  "Cleanup Warnings": "清理警告",
+  "Failed to load objects": "加载对象失败"
 }
diff --git a/lib/functions.ts b/lib/functions.ts
index 7b37fec8..d55d1e0e 100644
--- a/lib/functions.ts
+++ b/lib/functions.ts
@@ -16,6 +16,32 @@ export function formatBytes(n: number, isK8sUnits = false): string {
   return `${value.toFixed(1)} ${isK8sUnits ? K8S_UNITS[l] : UNITS[l]}`
 }
 
+function getRuntimeLocale() {
+  if (typeof document !== "undefined") {
+    return document.documentElement.lang || undefined
+  }
+
+  return undefined
+}
+
+export function formatInteger(value?: number | null, fallback = "--"): string {
+  if (typeof value !== "number" || !Number.isFinite(value)) return fallback
+
+  return new Intl.NumberFormat(getRuntimeLocale(), { maximumFractionDigits: 0 }).format(value)
+}
+
+export function formatDateTime(value?: string | number | Date | null, fallback = "--"): string {
+  if (!value) return fallback
+
+  const date = value instanceof Date ? value : new Date(value)
+  if (Number.isNaN(date.getTime())) return String(value)
+
+  return new Intl.DateTimeFormat(getRuntimeLocale(), {
+    dateStyle: "medium",
+    timeStyle: "medium",
+  }).format(date)
+}
+
 export function getBytes(value: string, unit: string, fromK8s = false): string {
   return convertToBytes(value, unit, fromK8s).toString(10)
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d000be88..fbf68b8b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,202 +1,3 @@
----
-lockfileVersion: '9.0'
-
-importers:
-
-  .:
-    configDependencies: {}
-    packageManagerDependencies:
-      '@pnpm/exe':
-        specifier: 11.5.0
-        version: 11.5.0
-      pnpm:
-        specifier: 11.5.0
-        version: 11.5.0
-
-packages:
-
-  '@pnpm/exe@11.5.0':
-    resolution: {integrity: sha512-4hzOXq1HHrNPjwI8k1rt7Ot/Yrdx1JX3pn/L/M95ii1gid1Q6ZK6dVg4+gbSgUdPsYmYDZ4/Yfc0A7vd5C0ndg==}
-    hasBin: true
-
-  '@pnpm/linux-arm64@11.5.0':
-    resolution: {integrity: sha512-NV9HdzzCB0epuI9LqZZeTaqjH3OweNQSQCS76GzEkFxJHS9e5Gvu7tgex91gxVL7bCZ+R4yr/3d3yexBFtr2ug==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@pnpm/linux-x64@11.5.0':
-    resolution: {integrity: sha512-vH83rRx4iPk/bwm9pBVCn+5hXbcQI66I/4zk6Vc09SusJgTqOdbN4U6VhMcGIqSEdr901ksYGCyIbMv7f6Guew==}
-    cpu: [x64]
-    os: [linux]
-
-  '@pnpm/linuxstatic-arm64@11.5.0':
-    resolution: {integrity: sha512-2nOnMW1rSwGv22q2yZz1HlGT3ly/Ij8wUlX0NB4n+Krx7nETRHA3MgWsbkVejxHknDcTulRVudAghuX9rgrXcw==}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@pnpm/linuxstatic-x64@11.5.0':
-    resolution: {integrity: sha512-ONOC1Mg0JusHtjzkRlre9di1QO+GAjy4HP7jMjDx21yGhrSheNdUweTXbekMH1EflRd19kTU6d8M3zewJFPtVg==}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@pnpm/macos-arm64@11.5.0':
-    resolution: {integrity: sha512-od0ALdTxs4A7s5vAH5q2l2phzCJb98+PVOW1rq7BGpWGeYxQ+EwvL+vq0KaO6iLsn/eVVoncCkgZ/k6QNYuTgw==}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@pnpm/win-arm64@11.5.0':
-    resolution: {integrity: sha512-9HqbI80FjVVqFx4+EPxYYNfeP9Sx69W6kYqUDvOJn9G7RJ/2NNNQ898cVHTMpXlW1/PrMEcijmdpa/NjZIrWiQ==}
-    cpu: [arm64]
-    os: [win32]
-
-  '@pnpm/win-x64@11.5.0':
-    resolution: {integrity: sha512-Q89CQqFGAsWmfvHZs5Kbbar45q3GBYtfAdPUCiVMVNJoLi3dsBS2LCvUq8ak3AufkFDaJBpvhaFcDP2M1NXr3A==}
-    cpu: [x64]
-    os: [win32]
-
-  '@reflink/reflink-darwin-arm64@0.1.19':
-    resolution: {integrity: sha512-ruy44Lpepdk1FqDz38vExBY/PVUsjxZA+chd9wozjUH9JjuDT/HEaQYA6wYN9mf041l0yLVar6BCZuWABJvHSA==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@reflink/reflink-darwin-x64@0.1.19':
-    resolution: {integrity: sha512-By85MSWrMZa+c26TcnAy8SDk0sTUkYlNnwknSchkhHpGXOtjNDUOxJE9oByBnGbeuIE1PiQsxDG3Ud+IVV9yuA==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@reflink/reflink-linux-arm64-gnu@0.1.19':
-    resolution: {integrity: sha512-7P+er8+rP9iNeN+bfmccM4hTAaLP6PQJPKWSA4iSk2bNvo6KU6RyPgYeHxXmzNKzPVRcypZQTpFgstHam6maVg==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@reflink/reflink-linux-arm64-musl@0.1.19':
-    resolution: {integrity: sha512-37iO/Dp6m5DDaC2sf3zPtx/hl9FV3Xze4xoYidrxxS9bgP3S8ALroxRK6xBG/1TtfXKTvolvp+IjrUU6ujIGmA==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@reflink/reflink-linux-x64-gnu@0.1.19':
-    resolution: {integrity: sha512-jbI8jvuYCaA3MVUdu8vLoLAFqC+iNMpiSuLbxlAgg7x3K5bsS8nOpTRnkLF7vISJ+rVR8W+7ThXlXlUQ93ulkw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@reflink/reflink-linux-x64-musl@0.1.19':
-    resolution: {integrity: sha512-e9FBWDe+lv7QKAwtKOt6A2W/fyy/aEEfr0g6j/hWzvQcrzHCsz07BNQYlNOjTfeytrtLU7k449H1PI95jA4OjQ==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@reflink/reflink-win32-arm64-msvc@0.1.19':
-    resolution: {integrity: sha512-09PxnVIQcd+UOn4WAW73WU6PXL7DwGS6wPlkMhMg2zlHHG65F3vHepOw06HFCq+N42qkaNAc8AKIabWvtk6cIQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@reflink/reflink-win32-x64-msvc@0.1.19':
-    resolution: {integrity: sha512-E//yT4ni2SyhwP8JRjVGWr3cbnhWDiPLgnQ66qqaanjjnMiu3O/2tjCPQXlcGc/DEYofpDc9fvhv6tALQsMV9w==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
-
-  '@reflink/reflink@0.1.19':
-    resolution: {integrity: sha512-DmCG8GzysnCZ15bres3N5AHCmwBwYgp0As6xjhQ47rAUTUXxJiK+lLUxaGsX3hd/30qUpVElh05PbGuxRPgJwA==}
-    engines: {node: '>= 10'}
-
-  detect-libc@2.1.2:
-    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
-    engines: {node: '>=8'}
-
-  pnpm@11.5.0:
-    resolution: {integrity: sha512-2/zE+Bz0hZev1Lw5H/3xLBHxqfuDo5W/prCi2cwv2P/rr9scy9UpYyFT95OQTCYVt/Cf4aNFRz/Rw1hFFyqOsQ==}
-    engines: {node: '>=22.13'}
-    hasBin: true
-
-snapshots:
-
-  '@pnpm/exe@11.5.0':
-    dependencies:
-      '@reflink/reflink': 0.1.19
-      detect-libc: 2.1.2
-    optionalDependencies:
-      '@pnpm/linux-arm64': 11.5.0
-      '@pnpm/linux-x64': 11.5.0
-      '@pnpm/linuxstatic-arm64': 11.5.0
-      '@pnpm/linuxstatic-x64': 11.5.0
-      '@pnpm/macos-arm64': 11.5.0
-      '@pnpm/win-arm64': 11.5.0
-      '@pnpm/win-x64': 11.5.0
-
-  '@pnpm/linux-arm64@11.5.0':
-    optional: true
-
-  '@pnpm/linux-x64@11.5.0':
-    optional: true
-
-  '@pnpm/linuxstatic-arm64@11.5.0':
-    optional: true
-
-  '@pnpm/linuxstatic-x64@11.5.0':
-    optional: true
-
-  '@pnpm/macos-arm64@11.5.0':
-    optional: true
-
-  '@pnpm/win-arm64@11.5.0':
-    optional: true
-
-  '@pnpm/win-x64@11.5.0':
-    optional: true
-
-  '@reflink/reflink-darwin-arm64@0.1.19':
-    optional: true
-
-  '@reflink/reflink-darwin-x64@0.1.19':
-    optional: true
-
-  '@reflink/reflink-linux-arm64-gnu@0.1.19':
-    optional: true
-
-  '@reflink/reflink-linux-arm64-musl@0.1.19':
-    optional: true
-
-  '@reflink/reflink-linux-x64-gnu@0.1.19':
-    optional: true
-
-  '@reflink/reflink-linux-x64-musl@0.1.19':
-    optional: true
-
-  '@reflink/reflink-win32-arm64-msvc@0.1.19':
-    optional: true
-
-  '@reflink/reflink-win32-x64-msvc@0.1.19':
-    optional: true
-
-  '@reflink/reflink@0.1.19':
-    optionalDependencies:
-      '@reflink/reflink-darwin-arm64': 0.1.19
-      '@reflink/reflink-darwin-x64': 0.1.19
-      '@reflink/reflink-linux-arm64-gnu': 0.1.19
-      '@reflink/reflink-linux-arm64-musl': 0.1.19
-      '@reflink/reflink-linux-x64-gnu': 0.1.19
-      '@reflink/reflink-linux-x64-musl': 0.1.19
-      '@reflink/reflink-win32-arm64-msvc': 0.1.19
-      '@reflink/reflink-win32-x64-msvc': 0.1.19
-
-  detect-libc@2.1.2: {}
-
-  pnpm@11.5.0: {}
-
----
 lockfileVersion: '9.0'
 
 settings:
@@ -808,105 +609,89 @@ packages:
     resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-arm@1.2.4':
     resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-ppc64@1.2.4':
     resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-riscv64@1.2.4':
     resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-s390x@1.2.4':
     resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-x64@1.2.4':
     resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
     resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-libvips-linuxmusl-x64@1.2.4':
     resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-linux-arm64@0.34.5':
     resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-arm@0.34.5':
     resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-ppc64@0.34.5':
     resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-riscv64@0.34.5':
     resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-s390x@0.34.5':
     resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-x64@0.34.5':
     resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linuxmusl-arm64@0.34.5':
     resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-linuxmusl-x64@0.34.5':
     resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-wasm32@0.34.5':
     resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
@@ -983,28 +768,24 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@next/swc-linux-arm64-musl@16.2.9':
     resolution: {integrity: sha512-qZTI3pf9SGc/obr8NkQAekBxmp1QK+kVm+VAf3BALLfFAj+1kUhkTxmrWpVos9R/UYIA8AWX2p6cGI5WdwzVUA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@next/swc-linux-x64-gnu@16.2.9':
     resolution: {integrity: sha512-xm0HfRNX+UkH4R3c18ynswjj5o5uEj/7iI9p9omdtTSIsRCzQqkGMA+10nzJ4EHnYC3as65IMhbbl5fWRUWHYg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@next/swc-linux-x64-musl@16.2.9':
     resolution: {integrity: sha512-QumimHkGEG6vM3PfEDWKyKen03NcqLOkeKB1EfcPe7VxzmEiCa4jNnMyBn/US5zcd/VE1CI+O8Ovb3lfjVHfGw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@next/swc-win32-arm64-msvc@16.2.9':
     resolution: {integrity: sha512-hzQpKZvw8rAwI6A2uQh6SacCSvNAXaIkPNsWwzqqfRiIMiXMfH936skDhz1OO6KpvdKkJrgHHtqQOq5PIXOvdQ==}
@@ -1510,28 +1291,24 @@ packages:
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
     resolution: {integrity: sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
     resolution: {integrity: sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.3.0':
     resolution: {integrity: sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.3.0':
     resolution: {integrity: sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==}
@@ -1744,49 +1521,41 @@ packages:
     resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
     resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
     resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
     resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
     resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
     resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
     resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-x64-musl@1.11.1':
     resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@unrs/resolver-binding-wasm32-wasi@1.11.1':
     resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
@@ -3066,28 +2835,24 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.32.0:
     resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.32.0:
     resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.32.0:
     resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.32.0:
     resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
diff --git a/skills/ui-audit/SKILL.md b/skills/ui-audit/SKILL.md
new file mode 100644
index 00000000..d73a340c
--- /dev/null
+++ b/skills/ui-audit/SKILL.md
@@ -0,0 +1,140 @@
+---
+name: ui-audit
+description: Audit and fix UI quality issues across web apps, dashboards, landing pages, product sites, forms, dialogs, tables, component libraries, and rendered frontend flows. Use when the user asks for UI walkthrough, visual QA, pixel/detail review, dimensions, spacing, whitespace, color hierarchy, alignment, typography, icon sizing, theme switching checks, accessibility pass, design-system consistency, component migration follow-up, before/after screenshots, or broad frontend best-practice cleanup.
+---
+
+# UI Audit
+
+## Operating Mode
+
+Treat the request as implementation work unless the user asks for analysis only. Read local instructions first, preserve unrelated changes, and keep edits surgical. Do not create project summary documents or reports unless explicitly requested.
+
+If the user asks to pull latest, do it before editing after checking `git status`. If local unrelated work is present, preserve it and avoid destructive git commands.
+
+## Classify The Surface
+
+Before scanning, identify the primary UI type and adjust emphasis:
+
+- **Operational apps**: prioritize density, tables, forms, keyboard flow, data states, batch actions, and predictable navigation.
+- **Landing/product sites**: prioritize first viewport, real visual assets, responsive hero composition, contrast, content hierarchy, and scroll rhythm.
+- **Developer/docs sites**: prioritize reading flow, code block overflow, navigation state, search, anchors, and dark theme.
+- **Interactive tools/games**: prioritize canvas/scene nonblank state, controls, motion, hit targets, and viewport fit.
+- **Component libraries/migrations**: prioritize primitive usage, wrapper boundaries, design tokens, API consistency, and regression patterns.
+
+## Baseline
+
+1. Read project guidance: local instructions, package scripts, existing component patterns, theme config, and design-system conventions.
+2. Prefer existing wrappers and utilities. Do not edit base UI primitives directly unless explicitly required; fix usage sites or create wrappers.
+3. Start or reuse the local dev server. Use Docker Compose only when the app needs it.
+4. Fetch current UI guidance when available, especially:
+   - `https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md`
+5. Define target flows: first screen, navigation shell, forms, dialogs, tables/lists, media, upload flows, theme switch, and one mobile breakpoint.
+
+## Static Audit Checklist
+
+Run focused scans before editing. Prefer `rg` and inspect matches manually.
+
+```bash
+git status --short
+rg -n "rounded-(sm|md|lg|xl|2xl|3xl|full)|rounded\b" app components src --glob '*.{tsx,jsx,html,css}' --glob '!**/node_modules/**'
+rg -n "transition-all|outline-none|#[0-9a-fA-F]{3,8}|text-(red|green|blue|yellow|orange|purple|gray|slate|zinc|neutral|stone)-|bg-(red|green|blue|yellow|orange|purple|gray|slate|zinc|neutral|stone)-|border-(red|green|blue|yellow|orange|purple|gray|slate|zinc|neutral|stone)-" app components src --glob '*.{tsx,jsx,html,css}' --glob '!**/node_modules/**'
+rg -n "(w|h|min-w|min-h|max-w|max-h|p|px|py|pt|pr|pb|pl|m|mx|my|mt|mr|mb|ml|gap|space-x|space-y|text|leading|tracking)-\\[" app components src --glob '*.{tsx,jsx,html,css}' --glob '!**/node_modules/**'
+rg -n "<Image|<img|from \"next/image\"|from 'next/image'" app components src --glob '*.{tsx,jsx,html}'
+rg -n "<DialogContent|<AlertDialogContent|<DrawerContent|<SheetContent|<PopoverContent|<DropdownMenuContent|role=\"dialog\"" app components src --glob '*.{tsx,jsx,html}'
+rg -n "aria-invalid|role=\"alert\"|aria-live|FieldError|FieldDescription className=\"text-destructive\"" app components src --glob '*.{tsx,jsx,html}'
+```
+
+Use small Node scripts when regex needs structure:
+
+- Native `<button>` without `type`.
+- Icon-only buttons without `aria-label`, `aria-labelledby`, `title` plus hidden text, or visible text.
+- Inputs/textareas/selects with `id` but missing `name`, except disabled/read-only cases.
+- Images missing `alt`, intrinsic size, fill strategy, or stable aspect-ratio container.
+- Clickable non-interactive elements missing keyboard support.
+
+If the project is not React/Next, translate the checks to the local stack rather than forcing these exact paths.
+
+## Inspection Matrix
+
+Audit every target surface through these lenses. Do not stop at the first visible issue.
+
+- Dimensions: button/input/select heights, icon-only button square size, touch target size, modal/drawer max width and height, table column widths, chart/media aspect ratios, avatar/status/badge sizes, loading skeleton size, and stable dimensions that prevent layout shift.
+- Spacing: page gutters, section rhythm, card/list item padding, form label-control gaps, field group gaps, toolbar gaps, button group spacing, table cell padding, dialog header/body/footer spacing, popover padding, and responsive breakpoint spacing.
+- Whitespace and density: excessive empty regions, cramped clusters, first viewport balance, scroll rhythm, empty states, dense operational pages versus more open marketing pages, and whether related controls visually belong together.
+- Alignment: page grid alignment, header/action alignment, button text and icon baselines, form labels, inline validation text, table numeric/text alignment, row actions, dropdown triggers, dialog footer actions, and vertical centering inside fixed-height controls.
+- Color hierarchy: token usage, foreground/muted/subtle contrast, semantic status colors, destructive/warning/success/info distinction, selection and active states, border/background layering, hardcoded colors, single-hue palettes, and disabled/placeholder readability.
+- Theme switching: light, dark, and system themes; root theme class; `color-scheme`; hover/focus/selected/error colors after switching; token regressions; charts, images, code blocks, tables, and overlays in each theme.
+- Typography hierarchy: page title, section title, panel title, body, caption, badge, table, code, and helper/error text tiers; line-height; weight; wrapping; long translated text; no viewport-scaled font sizes; no negative letter spacing unless the design system requires it.
+- Icon system: standard icon size by context, stroke width, optical alignment, icon/text gap, decorative `aria-hidden`, icon-only accessible names, direction-aware icons, and replacement of text labels with familiar icons only where the command is unambiguous.
+- Shape, border, and elevation: radius scale, square-table or square-card policies, nested card avoidance, border contrast, divider consistency, shadow use, focus rings, surface boundaries, table wrapper shape, and overlay surface hierarchy.
+- Component states: default, hover, focus-visible, active, selected, loading, disabled, read-only, empty, error, success, warning, skeleton, optimistic, and permission-denied states.
+- Forms: label/control association, `name`, `autocomplete`, `spellCheck`, required/optional semantics, `aria-invalid`, error `role="alert"`, help text placement, password manager behavior, disabled/read-only affordance, keyboard submission, reset/cancel actions, and multi-step form navigation.
+- Dialogs/drawers/popovers: trigger affordance, focus return, close/cancel layout, destructive action hierarchy, scroll containment, mobile viewport fit, overlay contrast, escape/outside-click behavior, and footer button order.
+- Tables/lists: stable columns, responsive horizontal overflow, sticky header/action behavior, tabular numbers, sorting/filtering affordance, pagination density, row hover/selection, bulk actions, empty/loading/error states, and long identifiers.
+- Navigation: active route clarity, breadcrumbs, tabs, sidebar collapse, command menus, overflow menus, keyboard focus order, and mobile navigation fit.
+- Media/assets: intrinsic dimensions, alt semantics, nonblank load, object-fit/crop, responsive art direction, image optimization constraints, dark-theme visibility, and whether the asset shows the real subject when inspection matters.
+- Data stress and localization: long object keys, ARNs, URLs, email addresses, usernames, product names, tags, code snippets, large numbers, dates, currencies, CJK text, RTL layout, and localized ellipsis.
+- Responsive and viewport: mobile, tablet, desktop, wide desktop, zoomed text, virtual keyboard overlap, safe-area insets, horizontal overflow, and button/card text containment.
+- Accessibility: keyboard reachability, visible focus, accessible names, heading order, landmark roles, color contrast, reduced-motion behavior, live regions for async feedback, and non-pointer alternatives for drag/drop/upload.
+- Motion and interaction: transition scope, no `transition-all` by default, animation timing, hover intent, pointer targets, loading feedback, prevented double-submit, and stable layout during async updates.
+- Visual evidence: capture before/after or current-state screenshots for meaningful fixes, including at least one desktop and one mobile view when practical.
+
+## Fix Rules
+
+Keep each patch small and tied to one audit issue.
+
+- Prefer design tokens and semantic classes over hardcoded palettes.
+- Replace `text-left/right` with `text-start/end` when direction can vary.
+- Replace visible `...` loading text with localized or typographic ellipsis when the project uses it.
+- Use `min-w-0`, `truncate`, `break-all`, and `max-w-full` around object keys, user names, version IDs, tags, ARNs, URLs, product names, and policy names.
+- For code/policy textareas, use monospace, `spellCheck={false}`, and explicit labels/names.
+- For hidden file inputs triggered by buttons, include `name` and an accessible label; prefer a visually-hidden input over unreachable hidden controls when direct label activation is needed.
+- For dynamic signed/temporary image URLs, prefer bypassing image optimization when optimization cannot fetch the resource.
+- Do not add decorative cards inside cards. Do not introduce new rounded cards if the project standard is square.
+- For landing-page heroes, use meaningful real/generated bitmap imagery or an interactive scene; avoid abstract gradient-only hero sections unless the product style explicitly requires it.
+
+## Browser Validation
+
+Use the preferred local browser automation surface when available for local targets. Validate after meaningful UI edits:
+
+1. Page identity: URL and title match the target.
+2. Not blank: DOM snapshot or screenshot contains meaningful content.
+3. No framework overlay.
+4. Console health: no relevant warnings/errors.
+5. Visual evidence: screenshot at desktop and one mobile viewport when practical.
+6. Interaction proof: exercise at least one relevant control, such as theme switch, menu, tab, dialog open/close, form validation, upload trigger, table action, carousel, or primary CTA.
+
+For theme work, explicitly test:
+
+- dark -> light -> dark or light -> dark -> light
+- root theme class and `color-scheme` when applicable
+- horizontal overflow at mobile width
+- token regressions and hardcoded-color outliers
+
+Save screenshots outside the repo, usually under `/tmp`, and include them in the final answer. Do not create report artifacts in the project unless asked.
+
+## Quality Gates
+
+Run the narrow checks for touched files first, then broader checks using the project's package manager:
+
+```bash
+pnpm prettier --check <touched files>
+pnpm type-check
+pnpm lint
+git diff --check
+pnpm exec prettier --check $(rg --files -g '*.{ts,tsx,js,jsx,json,css,md,yml,yaml}' -g '!node_modules' -g '!pnpm-lock.yaml')
+```
+
+Adapt command names to the repo: `npm`, `yarn`, `bun`, `cargo`, `swift`, or platform-specific test/build commands when appropriate.
+
+Also run project-mandated commands when present. If a mandated command fails because the repository is already misconfigured, report the exact blocker and continue validating what can be validated.
+
+## Final Response
+
+Respond in the user's language. Keep it concise:
+
+- Summarize main UI fixes by category.
+- List validation commands and pass/fail status.
+- Call out known blockers separately.
+- Include before/after or current-state screenshots using absolute local paths.
+- Mention untested areas only when they materially affect confidence.
diff --git a/skills/ui-audit/agents/openai.yaml b/skills/ui-audit/agents/openai.yaml
new file mode 100644
index 00000000..c8a69cd9
--- /dev/null
+++ b/skills/ui-audit/agents/openai.yaml
@@ -0,0 +1,4 @@
+interface:
+  display_name: "UI Audit"
+  short_description: "Audit UI dimensions, spacing, colors, states, and theme quality"
+  default_prompt: "Use $ui-audit to audit and fix UI dimensions, spacing, whitespace, colors, typography, states, and theme quality, then verify with screenshots."