diff --git a/components/i/SearchHistory.vue b/components/i/SearchHistory.vue
index 982b1cbd139c61dfb93cf15eed7051f9b4b907b8..b0d7aae6a5794c3892ef3c07138d2a31e428cbec 100644
--- a/components/i/SearchHistory.vue
+++ b/components/i/SearchHistory.vue
@@ -18,8 +18,8 @@
             />
         </div>
         <ClientOnly>
-            <div class="flex overflow-y-auto flex-col gap-1 border-l border-gray-200 dark:border-gray-800 pl-2 ml-5">
-                <template v-for="(item, index) in $searchHistory.reverse()" :key="index">
+            <div v-auto-animate class="flex overflow-y-auto flex-col gap-1 border-l border-gray-200 dark:border-gray-800 pl-2 ml-5">
+                <template v-for="item in $searchHistory.reverse()" :key="item.c_id">
                     <UButton
                         class="flex text-gray-400"
                         color="gray"
@@ -37,6 +37,7 @@
     </div>
 </template>
 <script setup>
+import { vAutoAnimate } from '@formkit/auto-animate'
 const emits = defineEmits(['sign', 'clear'])
 const Layout = inject('Layout')
 const modal = useModal()
diff --git a/package-lock.json b/package-lock.json
index 19f0fe5bdf90c3a6b4cf074a111c76272576976e..2be98db8bc68952f1bf2bfd2359b9f06870ea1a6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
       "name": "nuxt-app",
       "hasInstallScript": true,
       "dependencies": {
+        "@formkit/auto-animate": "^0.8.2",
         "@iconify-json/simple-icons": "^1.1.101",
         "@microsoft/fetch-event-source": "^2.0.1",
         "@nuxt/image": "^1.7.0",
@@ -2334,6 +2335,11 @@
       "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==",
       "peer": true
     },
+    "node_modules/@formkit/auto-animate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.8.2.tgz",
+      "integrity": "sha512-SwPWfeRa5veb1hOIBMdzI+73te5puUBHmqqaF1Bu7FjvxlYSz/kJcZKSa9Cg60zL0uRNeJL2SbRxV6Jp6Q1nFQ=="
+    },
     "node_modules/@headlessui/tailwindcss": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@headlessui/tailwindcss/-/tailwindcss-0.2.0.tgz",
@@ -19435,6 +19441,11 @@
       "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==",
       "peer": true
     },
+    "@formkit/auto-animate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.8.2.tgz",
+      "integrity": "sha512-SwPWfeRa5veb1hOIBMdzI+73te5puUBHmqqaF1Bu7FjvxlYSz/kJcZKSa9Cg60zL0uRNeJL2SbRxV6Jp6Q1nFQ=="
+    },
     "@headlessui/tailwindcss": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@headlessui/tailwindcss/-/tailwindcss-0.2.0.tgz",
diff --git a/package.json b/package.json
index ae8839ccdc27259e441463022874bfef0e30106f..58972bf9be5c303f454302fc5ca181b10576e3c3 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@formkit/auto-animate": "^0.8.2",
     "@iconify-json/simple-icons": "^1.1.101",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@nuxt/image": "^1.7.0",