diff --git a/src/components/CustomButton/index.jsx b/src/components/CustomButton/index.jsx
index 59ed298..c902e55 100644
--- a/src/components/CustomButton/index.jsx
+++ b/src/components/CustomButton/index.jsx
@@ -2,7 +2,7 @@
 /* eslint-disable react/require-default-props */
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import { motion } from 'framer-motion';
 import s from './styles.module.scss';
 
 /**
@@ -27,7 +27,9 @@ const CustomButton = ({
   children,
 }) => {
   return (
-    <button
+    <motion.button
+      initial={{ scale: 1 }}
+      whileTap={{ scale: 0.9 }}
       className={s.button}
       type="button"
       onClick={onClick}
@@ -41,7 +43,7 @@ const CustomButton = ({
         </div>
       )}
       {btnText}
-    </button>
+    </motion.button>
   );
 };
 
diff --git a/src/pages/ListPage/Credit/index.jsx b/src/pages/ListPage/Credit/index.jsx
index 56a3391..e53d515 100644
--- a/src/pages/ListPage/Credit/index.jsx
+++ b/src/pages/ListPage/Credit/index.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styles from './styles.module.scss';
 import CreditIcon from '@/assets/icons/Credit';
+import { motion } from 'framer-motion';
 
 const Credit = () => {
   return (
@@ -13,7 +14,13 @@ const Credit = () => {
         </div>
       </div>
       <div>
-        <button className={styles.charge}>충전하기</button>
+        <motion.button
+          initial={{ scale: 1 }}
+          whileTap={{ scale: 0.9 }}
+          className={styles.charge}
+        >
+          충전하기
+        </motion.button>
       </div>
     </section>
   );
diff --git a/src/pages/ListPage/MonthlyChart/components/ChartElement/index.jsx b/src/pages/ListPage/MonthlyChart/components/ChartElement/index.jsx
index f47341a..1b64590 100644
--- a/src/pages/ListPage/MonthlyChart/components/ChartElement/index.jsx
+++ b/src/pages/ListPage/MonthlyChart/components/ChartElement/index.jsx
@@ -3,19 +3,25 @@ import PropTypes from 'prop-types';
 import styles from './styles.module.scss';
 import { numberWithCommas } from '@/utils/numberWithCommas';
 import Profile from '@/components/Profile';
+import { motion } from 'framer-motion';
 
 /**
- * 
+ *
  * @param {object} idol 아이돌 객체
  * @param {number} ranking 아이돌 순위
  */
-
 const ChartElement = ({ idol, ranking }) => {
   const { name, profilePicture } = idol;
   const totalVotes = numberWithCommas(idol.totalVotes);
 
   return (
-    <li className={styles.container}>
+    <motion.li
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 1 }}
+      className={styles.container}
+    >
       <div className={styles.idolInfo}>
         <div className={styles.img}>
           <Profile size="sm" imageUrl={profilePicture} />
@@ -24,11 +30,13 @@ const ChartElement = ({ idol, ranking }) => {
         <div className={styles.name}>{name}</div>
       </div>
       <div className={styles.totalVotes}>{totalVotes}</div>
-    </li>
+    </motion.li>
   );
 };
+
 ChartElement.propTypes = {
   idol: PropTypes.object,
   ranking: PropTypes.number,
 };
+
 export default ChartElement;