diff --git a/frontend/src/components/article/PopularArticle/PopularArticle.styles.tsx b/frontend/src/components/article/PopularArticleCarousel/PopularArticleCarousel.styles.tsx
similarity index 100%
rename from frontend/src/components/article/PopularArticle/PopularArticle.styles.tsx
rename to frontend/src/components/article/PopularArticleCarousel/PopularArticleCarousel.styles.tsx
diff --git a/frontend/src/components/article/PopularArticle/PopularArticle.tsx b/frontend/src/components/article/PopularArticleCarousel/PopularArticleCarousel.tsx
similarity index 91%
rename from frontend/src/components/article/PopularArticle/PopularArticle.tsx
rename to frontend/src/components/article/PopularArticleCarousel/PopularArticleCarousel.tsx
index abbba2612..7ca47d3e5 100644
--- a/frontend/src/components/article/PopularArticle/PopularArticle.tsx
+++ b/frontend/src/components/article/PopularArticleCarousel/PopularArticleCarousel.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import Loading from '@/components/@common/Loading/Loading';
-import * as S from '@/components/article/PopularArticle/PopularArticle.styles';
+import * as S from '@/components/article/PopularArticleCarousel/PopularArticleCarousel.styles';
 import PopularArticleItem from '@/components/article/PopularArticleItem/PopularArticleItem';
 import useGetPopularArticles from '@/hooks/article/useGetPopularArticles';
 import useCarousel from '@/hooks/common/useCarousel';
@@ -10,7 +10,7 @@ import { Category } from '@/types/articleResponse';
 
 const EmptyMessage = React.lazy(() => import('@/components/@common/EmptyMessage/EmptyMessage'));
 
-const PopularArticle = () => {
+const PopularArticleCarousel = () => {
 	const { handleCarouselElementRef, handleLeftSlideEvent, handleRightSlideEvent, currentIndex } =
 		useCarousel();
 	const { data, isLoading } = useGetPopularArticles();
@@ -59,4 +59,4 @@ const PopularArticle = () => {
 	) : null;
 };
 
-export default PopularArticle;
+export default PopularArticleCarousel;
diff --git a/frontend/src/components/article/PopularArticleItem/PopularArticleItem.styles.tsx b/frontend/src/components/article/PopularArticleItem/PopularArticleItem.styles.tsx
index 0d5716a34..7f77e3503 100644
--- a/frontend/src/components/article/PopularArticleItem/PopularArticleItem.styles.tsx
+++ b/frontend/src/components/article/PopularArticleItem/PopularArticleItem.styles.tsx
@@ -1,4 +1,4 @@
-import { AiOutlineEye, AiOutlineMessage, AiFillHeart } from 'react-icons/ai';
+import { AiOutlineEye, AiOutlineMessage, AiFillHeart, AiOutlineHeart } from 'react-icons/ai';
 
 import {
 	UserProfile,
@@ -32,7 +32,13 @@ export const ViewIcon = styled(AiOutlineEye)`
 	color: ${({ theme }) => theme.colors.BLACK_600};
 `;
 
-export const HeartIcon = styled(AiFillHeart)`
+export const FillHeartIcon = styled(AiFillHeart)`
+	font-size: ${({ theme }) => theme.size.SIZE_016};
+
+	color: ${({ theme }) => theme.colors.RED_600};
+`;
+
+export const EmptyHeartIcon = styled(AiOutlineHeart)`
 	font-size: ${({ theme }) => theme.size.SIZE_016};
 
 	color: ${({ theme }) => theme.colors.RED_600};
diff --git a/frontend/src/components/article/PopularArticleItem/PopularArticleItem.tsx b/frontend/src/components/article/PopularArticleItem/PopularArticleItem.tsx
index 829536ef5..ae6aee870 100644
--- a/frontend/src/components/article/PopularArticleItem/PopularArticleItem.tsx
+++ b/frontend/src/components/article/PopularArticleItem/PopularArticleItem.tsx
@@ -64,7 +64,11 @@ const PopularArticleItem = ({
 								{views.toLocaleString()}
 							</PopularS.IconContainer>
 							<PopularS.IconContainer>
-								<PopularS.HeartIcon aria-label="좋아요수" />
+								{article.isLike ? (
+									<PopularS.FillHeartIcon aria-label="좋아요수" />
+								) : (
+									<PopularS.EmptyHeartIcon aria-label="좋아요수" />
+								)}
 								{likeCount.toLocaleString()}
 							</PopularS.IconContainer>
 						</S.ArticleInfoSubBox>
diff --git a/frontend/src/pages/Home/index.tsx b/frontend/src/pages/Home/index.tsx
index fad51bf79..68f2e894b 100644
--- a/frontend/src/pages/Home/index.tsx
+++ b/frontend/src/pages/Home/index.tsx
@@ -13,7 +13,7 @@ const ResponsiveInfiniteCardList = React.lazy(
 );
 const ArticleItem = React.lazy(() => import('@/components/article/ArticleItem/ArticleItem'));
 const PopularArticle = React.lazy(
-	() => import('@/components/article/PopularArticle/PopularArticle'),
+	() => import('@/components/article/PopularArticleCarousel/PopularArticleCarousel'),
 );
 const EmptyMessage = React.lazy(() => import('@/components/@common/EmptyMessage/EmptyMessage'));
 
diff --git a/frontend/src/storybook/Article/PopularArticle.stories.tsx b/frontend/src/storybook/Article/PopularArticle.stories.tsx
index b2a1cc90a..4c86b1ae0 100644
--- a/frontend/src/storybook/Article/PopularArticle.stories.tsx
+++ b/frontend/src/storybook/Article/PopularArticle.stories.tsx
@@ -1,13 +1,13 @@
 import { rest } from 'msw';
 import { BrowserRouter } from 'react-router-dom';
 
-import PopularArticle from '@/components/article/PopularArticle/PopularArticle';
+import PopularArticleCarousel from '@/components/article/PopularArticleCarousel/PopularArticleCarousel';
 import { HOME_URL } from '@/constants/apiUrl';
 import { Meta, Story } from '@storybook/react';
 
 export default {
 	title: 'Article/PopularArticle',
-	component: PopularArticle,
+	component: PopularArticleCarousel,
 	decorators: [
 		(Story) => (
 			<BrowserRouter>
@@ -19,7 +19,7 @@ export default {
 	],
 } as Meta;
 
-const Template: Story = (args) => <PopularArticle {...args} />;
+const Template: Story = (args) => <PopularArticleCarousel {...args} />;
 
 export const DefaultPopularArticle = Template.bind({});
 DefaultPopularArticle.args = {};