diff --git a/client/src/components/Nav/SettingsTabs/ApiKeys/Item.tsx b/client/src/components/Nav/SettingsTabs/ApiKeys/Item.tsx
index f0e0092a24..7a1786fd2c 100644
--- a/client/src/components/Nav/SettingsTabs/ApiKeys/Item.tsx
+++ b/client/src/components/Nav/SettingsTabs/ApiKeys/Item.tsx
@@ -18,7 +18,7 @@ export default function Item({ apiKey }: ItemProps) {
   const status = getExpiryStatus(apiKey.expiresAt);
 
   return (
-    <li className="hover:bg-surface-secondary/50 group flex items-start justify-between gap-3 px-4 py-3 transition-colors first:rounded-t-xl last:rounded-b-xl">
+    <li className="group flex items-start justify-between gap-3 px-4 py-3 transition-colors first:rounded-t-xl last:rounded-b-xl hover:bg-surface-secondary/50">
       <div className="min-w-0 flex-1 space-y-1">
         <div className="flex items-center gap-2">
           <span className="truncate font-medium text-text-primary">{apiKey.name}</span>
diff --git a/client/src/components/Share/ShareView.tsx b/client/src/components/Share/ShareView.tsx
index cb25be4232..862713ce61 100644
--- a/client/src/components/Share/ShareView.tsx
+++ b/client/src/components/Share/ShareView.tsx
@@ -9,6 +9,7 @@ import {
   Spinner,
   Button,
   OGDialog,
+  Separator,
   ThemeContext,
   OGDialogTitle,
   useMediaQuery,
@@ -263,7 +264,7 @@ function ShareHeader({
 
   return (
     <section className="mx-auto w-full px-2 pb-3 pt-4 md:px-5 md:pb-4 md:pt-6">
-      <div className="bg-surface-primary/80 relative mx-auto flex w-full max-w-[60rem] flex-col gap-3 rounded-2xl border border-border-light px-4 py-4 shadow-xl backdrop-blur md:gap-4 md:rounded-3xl md:px-6 md:py-5">
+      <div className="relative mx-auto flex w-full max-w-[60rem] flex-col gap-3 rounded-2xl border border-border-light bg-surface-primary/80 px-4 py-4 shadow-xl backdrop-blur md:gap-4 md:rounded-3xl md:px-6 md:py-5">
         <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
           <div className="min-w-0 space-y-1.5 md:space-y-2">
             <h1 className="line-clamp-2 break-words text-2xl font-semibold text-text-primary md:text-4xl">
@@ -325,7 +326,7 @@ function ShareHeader({
                     onChange={onThemeChange}
                     popoverClassName="z-[150]"
                   />
-                  <div className="bg-border-medium/60 h-px w-full" />
+                  <Separator orientation="horizontal" className="bg-border-medium/60" />
                   <LangSelector
                     langcode={langcode}
                     onChange={onLangChange}
diff --git a/client/src/components/Sharing/PublicSharingToggle.tsx b/client/src/components/Sharing/PublicSharingToggle.tsx
index 35a70dd9d9..61ca48d0c8 100644
--- a/client/src/components/Sharing/PublicSharingToggle.tsx
+++ b/client/src/components/Sharing/PublicSharingToggle.tsx
@@ -106,7 +106,7 @@ export default function PublicSharingToggle({
         <div
           className={cn(
             'rounded-lg transition-all duration-300',
-            isPublic ? 'bg-surface-secondary/50 translate-y-0' : '-translate-y-2',
+            isPublic ? 'translate-y-0 bg-surface-secondary/50' : '-translate-y-2',
           )}
         >
           <div className="flex items-center justify-between">
diff --git a/client/src/routes/RouteErrorBoundary.tsx b/client/src/routes/RouteErrorBoundary.tsx
index f7ca1db5fa..28a875511c 100644
--- a/client/src/routes/RouteErrorBoundary.tsx
+++ b/client/src/routes/RouteErrorBoundary.tsx
@@ -129,7 +129,7 @@ export default function RouteErrorBoundary() {
       role="alert"
       className="flex min-h-screen flex-col items-center justify-center bg-surface-primary bg-gradient-to-br"
     >
-      <div className="bg-surface-primary/60 mx-4 w-11/12 max-w-4xl rounded-2xl border border-border-light p-8 shadow-2xl backdrop-blur-xl">
+      <div className="mx-4 w-11/12 max-w-4xl rounded-2xl border border-border-light bg-surface-primary/60 p-8 shadow-2xl backdrop-blur-xl">
         <h2 className="mb-6 text-center text-3xl font-medium tracking-tight text-text-primary">
           {localize('com_ui_error_unexpected')}
         </h2>
diff --git a/packages/client/src/components/DataTable/DataTableErrorBoundary.tsx b/packages/client/src/components/DataTable/DataTableErrorBoundary.tsx
index ea583cdd67..03d722ff0e 100644
--- a/packages/client/src/components/DataTable/DataTableErrorBoundary.tsx
+++ b/packages/client/src/components/DataTable/DataTableErrorBoundary.tsx
@@ -73,7 +73,7 @@ class DataTableErrorBoundaryInner extends Component<
             aria-labelledby="datatable-error-title"
             aria-describedby="datatable-error-desc"
             tabIndex={-1}
-            className="before:bg-surface-destructive/80 relative w-full max-w-md overflow-hidden rounded-lg border border-border-light bg-surface-primary-alt p-6 shadow-sm outline-none before:absolute before:left-0 before:top-0 before:h-full before:w-1 focus:ring-2 focus:ring-text-primary focus:ring-offset-2"
+            className="relative w-full max-w-md overflow-hidden rounded-lg border border-border-light bg-surface-primary-alt p-6 shadow-sm outline-none before:absolute before:left-0 before:top-0 before:h-full before:w-1 before:bg-surface-destructive/80 focus:ring-2 focus:ring-text-primary focus:ring-offset-2"
           >
             <div className="flex items-center gap-2">
               <RefreshCw className="h-4 w-4 text-surface-destructive" />