diff --git a/app/components/Input/index.tsx b/app/components/Input/index.tsx
index 04f86a826..9e28e886a 100644
--- a/app/components/Input/index.tsx
+++ b/app/components/Input/index.tsx
@@ -57,7 +57,7 @@ export default function Input(props: CommonInputProps & InputProps) {
 
   return (
     <div
-      className={` group/input w-[100%] rounded-chat-input bg-input flex gap-3 items-center px-3 py-2 ${className} hover:bg-select-hover ${inputClassName}`}
+      className={` group/input w-[100%] rounded-chat-input bg-input transition-colors duration-300 ease-in-out flex gap-3 items-center px-3 py-2 ${className} hover:bg-select-hover ${inputClassName}`}
     >
       <input
         {...rest}
diff --git a/app/components/Select/index.tsx b/app/components/Select/index.tsx
index fe8581b77..50c60d1de 100644
--- a/app/components/Select/index.tsx
+++ b/app/components/Select/index.tsx
@@ -94,7 +94,7 @@ const Select = <Value extends number | string>(props: SearchProps<Value>) => {
       className={selectClassName}
     >
       <div
-        className={`flex items-center gap-3 py-2 px-3 bg-select rounded-action-btn font-time text-sm-title  cursor-pointer hover:bg-select-hover`}
+        className={`flex items-center gap-3 py-2 px-3 bg-select rounded-action-btn font-time text-sm-title  cursor-pointer hover:bg-select-hover transition duration-300 ease-in-out`}
         ref={contentRef}
       >
         <div className={`flex items-center gap-2 flex-1`}>
diff --git a/app/components/Switch/index.tsx b/app/components/Switch/index.tsx
index 5f88c3f43..395e58bb8 100644
--- a/app/components/Switch/index.tsx
+++ b/app/components/Switch/index.tsx
@@ -15,7 +15,7 @@ export default function Switch(props: SwitchProps) {
     <RadixSwitch.Root
       checked={value}
       onCheckedChange={onChange}
-      className={` cursor-pointer flex w-switch h-switch p-0.5 box-content rounded-md ${switchClassName} ${
+      className={` cursor-pointer flex w-switch h-switch p-0.5 box-content transition-colors duration-300 ease-in-out rounded-md ${switchClassName} ${
         value
           ? "bg-switch-checked justify-end"
           : "bg-switch-unchecked justify-start"