diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx
index c5edf10690..a0504f084b 100644
--- a/packages/features/settings/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@@ -209,7 +209,7 @@ const BackButtonInSidebar = ({ name }: { name: string }) => {
   return (
     <Link
       href="/"
-      className="hover:bg-subtle todesktop:mt-10 [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-emphasis group my-6 flex h-6 max-h-6 w-full flex-row items-center rounded-md px-3 py-2 text-sm font-medium leading-4"
+      className="hover:bg-subtle todesktop:mt-10 [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-emphasis group my-6 flex h-6 max-h-6 w-full flex-row items-center rounded-md px-3 py-2 text-sm font-medium leading-4 transition"
       data-testid={`vertical-tab-${name}`}>
       <Icon
         name="arrow-left"
diff --git a/packages/features/settings/layouts/SettingsLayoutAppDir.tsx b/packages/features/settings/layouts/SettingsLayoutAppDir.tsx
index 178fad4dd5..9e436f1b0e 100644
--- a/packages/features/settings/layouts/SettingsLayoutAppDir.tsx
+++ b/packages/features/settings/layouts/SettingsLayoutAppDir.tsx
@@ -164,7 +164,7 @@ const BackButtonInSidebar = ({ name }: { name: string }) => {
   return (
     <Link
       href="/"
-      className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-emphasis group my-6 flex h-6 max-h-6 w-full flex-row items-center rounded-md px-3 py-2 text-sm font-medium leading-4"
+      className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-emphasis group my-6 flex h-6 max-h-6 w-full flex-row items-center rounded-md px-3 py-2 text-sm font-medium leading-4 transition"
       data-testid={`vertical-tab-${name}`}>
       <Icon
         name="arrow-left"
diff --git a/packages/ui/components/apps/AllApps.tsx b/packages/ui/components/apps/AllApps.tsx
index b12467b6db..2f2e751a6e 100644
--- a/packages/ui/components/apps/AllApps.tsx
+++ b/packages/ui/components/apps/AllApps.tsx
@@ -102,7 +102,7 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
           }}
           className={classNames(
             selectedCategory === null ? "bg-emphasis text-default" : "bg-muted text-emphasis",
-            "hover:bg-emphasis min-w-max rounded-md px-4 py-2.5 text-sm font-medium hover:cursor-pointer"
+            "hover:bg-emphasis min-w-max rounded-md px-4 py-2.5 text-sm font-medium transition hover:cursor-pointer"
           )}>
           {t("all")}
         </li>
@@ -122,7 +122,7 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
             }}
             className={classNames(
               selectedCategory === cat ? "bg-emphasis text-default" : "bg-muted text-emphasis",
-              "hover:bg-emphasis rounded-md px-4 py-2.5 text-sm font-medium hover:cursor-pointer"
+              "hover:bg-emphasis rounded-md px-4 py-2.5 text-sm font-medium transition hover:cursor-pointer"
             )}>
             {cat[0].toUpperCase() + cat.slice(1)}
           </li>
diff --git a/packages/ui/components/card/Card.tsx b/packages/ui/components/card/Card.tsx
index 5775a9304c..56478788dc 100644
--- a/packages/ui/components/card/Card.tsx
+++ b/packages/ui/components/card/Card.tsx
@@ -179,7 +179,7 @@ export function Card({
           href={mediaLink}
           data-testId={actionButton?.["data-testId"]}
           className="group relative my-3 flex aspect-video items-center overflow-hidden rounded">
-          <div className="absolute inset-0 bg-black bg-opacity-50 transition-opacity group-hover:bg-opacity-40" />
+          <div className="absolute inset-0 bg-black bg-opacity-50 transition group-hover:bg-opacity-40" />
           <svg
             className="text-inverted absolute left-1/2 top-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 transform rounded-full shadow-lg hover:-mt-px"
             viewBox="0 0 32 32"
diff --git a/packages/ui/components/editor/Editor.tsx b/packages/ui/components/editor/Editor.tsx
index a5abba0e3c..3cd7799e3f 100644
--- a/packages/ui/components/editor/Editor.tsx
+++ b/packages/ui/components/editor/Editor.tsx
@@ -71,7 +71,7 @@ export const Editor = (props: TextEditorProps) => {
   return (
     <div className="editor rounded-md">
       <LexicalComposer initialConfig={{ ...editorConfig, editable }}>
-        <div className="editor-container hover:border-emphasis focus-within:ring-brand-default rounded-md p-0 focus-within:ring-2">
+        <div className="editor-container hover:border-emphasis focus-within:ring-brand-default rounded-md p-0 transition focus-within:ring-2">
           <ToolbarPlugin
             getText={props.getText}
             setText={props.setText}
diff --git a/packages/ui/components/form/inputs/TextField.tsx b/packages/ui/components/form/inputs/TextField.tsx
index ed4ff6e11e..df2720cdea 100644
--- a/packages/ui/components/form/inputs/TextField.tsx
+++ b/packages/ui/components/form/inputs/TextField.tsx
@@ -114,7 +114,7 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
       {addOnLeading || addOnSuffix ? (
         <div
           dir="ltr"
-          className="focus-within:ring-brand-default group relative mb-1 flex items-center rounded-md focus-within:outline-none focus-within:ring-2">
+          className="focus-within:ring-brand-default group relative mb-1 flex items-center rounded-md transition focus-within:outline-none focus-within:ring-2">
           {addOnLeading && (
             <Addon
               isFilled={addOnFilled}
diff --git a/packages/ui/components/form/switch/Switch.tsx b/packages/ui/components/form/switch/Switch.tsx
index 6a04ef360f..b734f8deab 100644
--- a/packages/ui/components/form/switch/Switch.tsx
+++ b/packages/ui/components/form/switch/Switch.tsx
@@ -47,7 +47,7 @@ const Switch = (
             isChecked ? "bg-brand-default dark:bg-brand-emphasis" : "bg-emphasis",
             primitiveProps.disabled && "cursor-not-allowed",
             small ? "h-4 w-[27px]" : "h-5 w-[34px]",
-            "focus:ring-brand-default rounded-full shadow-none focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1",
+            "focus:ring-brand-default rounded-full shadow-none transition focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1",
             props.className
           )}
           {...primitiveProps}>
diff --git a/packages/ui/components/form/toggleGroup/ToggleGroup.tsx b/packages/ui/components/form/toggleGroup/ToggleGroup.tsx
index 75d545e1db..5b7f5f73ed 100644
--- a/packages/ui/components/form/toggleGroup/ToggleGroup.tsx
+++ b/packages/ui/components/form/toggleGroup/ToggleGroup.tsx
@@ -58,7 +58,7 @@ export const ToggleGroup = ({
               value={option.value}
               data-testid={`toggle-group-item-${option.value}`}
               className={classNames(
-                "aria-checked:bg-emphasis relative rounded-[4px] px-3 py-1 text-sm leading-tight transition-colors",
+                "aria-checked:bg-emphasis relative rounded-[4px] px-3 py-1 text-sm leading-tight transition",
                 option.disabled
                   ? "text-gray-400 hover:cursor-not-allowed"
                   : "text-default [&[aria-checked='false']]:hover:text-emphasis",