diff --git a/client/src/components/ScrollToBottom.tsx b/client/src/components/ScrollToBottom.tsx
index 1c199c7..f353cdb 100644
--- a/client/src/components/ScrollToBottom.tsx
+++ b/client/src/components/ScrollToBottom.tsx
@@ -37,7 +37,7 @@ const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; cla
       </div>
       <button
         onClick={() => node?.scrollIntoView({ behavior: 'smooth' })}
-        className={'absolute right-3 transition-all' + (show ? ' bottom-3' : ' -mb-10')}
+        className={'absolute right-3 ' + (show ? 'animate-show bottom-3 block' : 'animate-hide hidden bottom-0 -mb-10')}
       >
         <div className="popup-btn cursor-pointer rounded-full shadow-lg shadow-slate-900 bg-grey-dark hover:bg-grey-light transition-all">
           <FaChevronDown className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />
diff --git a/client/tailwind.config.cjs b/client/tailwind.config.cjs
index c6a6a85..07ba566 100644
--- a/client/tailwind.config.cjs
+++ b/client/tailwind.config.cjs
@@ -19,6 +19,22 @@ module.exports = {
       padding: {
         '2.5': '0.625rem',
       },
+      keyframes: {
+        'hide': {
+          '0%': { opacity: 1, display: 'block' },
+          '99%': { opacity: 0, display: 'block' },
+          '100%': { opacity: 0, display: 'none' },
+        },
+        'show': {
+          '0%': { opacity: 0, display: 'none' },
+          '1%': { opacity: 0, display: 'block' },
+          '100%': { opacity: 1, display: 'block' },
+        },
+      },
+      animation: {
+        'hide': 'hide 0.2s ease-in-out',
+        'show': 'show 0.2s ease-in-out',
+      },
     },
   },
   plugins: [],