diff --git a/src/assets/icons/default-profile.svg b/src/assets/icons/default-profile.svg
new file mode 100644
index 0000000..9d33eac
--- /dev/null
+++ b/src/assets/icons/default-profile.svg
@@ -0,0 +1,7 @@
+<svg width="100%" height="100%" viewBox="0 0 375 375" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="375" height="375" fill="#4D3B7C" />
+    <path
+        d="M123.06 227.178C129.139 215.142 138.976 205.416 151.081 199.475C174.051 188.201 200.949 188.201 223.919 199.475C236.024 205.416 245.861 215.142 251.94 227.178L255.23 233.692C260.537 244.201 255.933 257.01 245.15 261.736C208.404 277.839 166.596 277.839 129.85 261.736C119.067 257.01 114.463 244.201 119.77 233.692L123.06 227.178Z"
+        fill="white" fill-opacity="0.2" />
+    <rect x="150.301" y="101" width="74.4" height="74.4" rx="37.2" fill="white" fill-opacity="0.2" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
index 320b328..ba61255 100644
--- a/src/assets/icons/index.ts
+++ b/src/assets/icons/index.ts
@@ -14,6 +14,7 @@ import CheckIcon from './check.svg?react';
 import ClockIcon from './clock.svg?react';
 import CloseIcon from './close.svg?react';
 import CommentIcon from './comment.svg?react';
+import DefaultProfileIcon from './default-profile.svg?react';
 import DownChevronIcon from './down-chevron.svg?react';
 import GoogleIcon from './google.svg?react';
 import HideIcon from './hide.svg?react';
@@ -51,6 +52,7 @@ export {
   ClockIcon,
   CloseIcon,
   CommentIcon,
+  DefaultProfileIcon,
   DownChevronIcon,
   GoogleIcon,
   HideIcon,
diff --git a/src/components/Home/Comment/Comment.tsx b/src/components/Home/Comment/Comment.tsx
index a78f60e..a1f5e61 100644
--- a/src/components/Home/Comment/Comment.tsx
+++ b/src/components/Home/Comment/Comment.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import { useReactComment } from '@apis/comment/useComment';
 import { Col, Row } from '@components/commons/Flex/Flex';
+import ProfileImg from '@components/commons/ProfileImg/ProfileImg';
 import Text from '@components/commons/Text/Text';
 import useModal from '@hooks/useModal/useModal';
 import { CommentResponse } from '@interfaces/api/comment';
@@ -69,7 +70,7 @@ const Comment = React.memo(({ comment }: CommentProps) => {
       <Col padding={'14px 20px 24px'}>
         <Row justifyContent={'space-between'} alignItems={'flex-start'}>
           <Row gap={8}>
-            <CommentAuthorProfileImg src={'https://picsum.photos/50/50'} alt={'profile'} />
+            <ProfileImg url={comment.writer.profileImageUrl} size={22} />
             <Col gap={2}>
               <Row>
                 <Text size={14} color={colors.black_60}>
diff --git a/src/components/Home/TopicComments/TopicComments.tsx b/src/components/Home/TopicComments/TopicComments.tsx
index 6b42656..3734e9c 100644
--- a/src/components/Home/TopicComments/TopicComments.tsx
+++ b/src/components/Home/TopicComments/TopicComments.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { memo, useState } from 'react';
 
 import { useComments, useCreateComment } from '@apis/comment/useComment';
 import { Row } from '@components/commons/Flex/Flex';
@@ -21,7 +21,7 @@ interface TopicCommentsProps {
   topic: TopicResponse;
 }
 
-const TopicComments = ({ topic }: TopicCommentsProps) => {
+const TopicComments = memo(({ topic }: TopicCommentsProps) => {
   const { data: comments, fetchNextPage } = useComments(
     topic.topicId,
     topic.selectedOption !== null
@@ -71,6 +71,6 @@ const TopicComments = ({ topic }: TopicCommentsProps) => {
       </CommentInputContainer>
     </TopicCommentsContainer>
   );
-};
+});
 
 export default TopicComments;
diff --git a/src/components/commons/ProfileImg/ProfileImg.tsx b/src/components/commons/ProfileImg/ProfileImg.tsx
new file mode 100644
index 0000000..38eb7b9
--- /dev/null
+++ b/src/components/commons/ProfileImg/ProfileImg.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { DefaultProfileIcon } from '@icons/index';
+
+interface ProfileImgProps {
+  url: string | null;
+  size?: string | number;
+  rounded?: boolean;
+}
+
+const ProfileImg = ({ url, size = '100%', rounded = true }: ProfileImgProps) => {
+  if (!url) {
+    return (
+      <div>
+        <DefaultProfileIcon
+          width={size}
+          height={size}
+          style={rounded ? { borderRadius: '50%' } : {}}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <img
+      src={url}
+      alt="프로필 이미지"
+      width={size}
+      height={size}
+      style={rounded ? { borderRadius: '50%' } : {}}
+    />
+  );
+};
+
+export default ProfileImg;
diff --git a/src/hooks/useBottomSheet/useBottomSheet.tsx b/src/hooks/useBottomSheet/useBottomSheet.tsx
index 25ae377..495ce6e 100644
--- a/src/hooks/useBottomSheet/useBottomSheet.tsx
+++ b/src/hooks/useBottomSheet/useBottomSheet.tsx
@@ -28,7 +28,7 @@ const useBottomSheet = (props: UseBottomSheetProps) => {
     </BottomSheet>
   );
 
-  return { BottomSheet: isOpen ? Sheet : () => null, toggleSheet };
+  return { BottomSheet: Sheet, toggleSheet };
 };
 
 export default useBottomSheet;