diff --git a/package-lock.json b/package-lock.json
index 2456b2a1..7ed267f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2752,15 +2752,6 @@
         "tslib": "^2.4.0"
       }
     },
-    "node_modules/@trysound/sax": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
-      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/@tanstack/query-core": {
       "version": "5.54.1",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.54.1.tgz",
@@ -2785,6 +2776,15 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
diff --git a/public/images/mock-image.png b/public/images/mock-image.png
new file mode 100644
index 00000000..0fecfc46
Binary files /dev/null and b/public/images/mock-image.png differ
diff --git a/src/app/components/Review/Review.tsx b/src/app/components/Review/Review.tsx
new file mode 100644
index 00000000..3d7e45a9
--- /dev/null
+++ b/src/app/components/Review/Review.tsx
@@ -0,0 +1,76 @@
+import Image from 'next/image';
+
+import { IconHeart } from '@/public/icons';
+import { Profile } from '@/public/images';
+
+interface ReviewProps {
+  image_source?: string;
+  rating: number;
+  description: string;
+  place?: string;
+  location?: string;
+  user_name: string;
+  date: string;
+}
+
+const TOTAL_RATING = 5;
+
+const Review = ({
+  image_source,
+  rating,
+  description,
+  place,
+  location,
+  user_name,
+  date,
+}: ReviewProps) => {
+  return (
+    <div className='flex-col space-x-6 p-[10px] font-medium md:flex md:flex-row'>
+      {image_source ? (
+        <div className='relative h-[252px] w-full md:h-auto md:w-[378px]'>
+          <Image
+            className='rounded-[20px] object-cover'
+            src={image_source}
+            alt='review image'
+            fill
+            quality={85}
+            sizes='(max-width: 768px) 100vw, 378px'
+          />
+        </div>
+      ) : null}
+
+      <div>
+        <div className='mt-[10px] flex md:mt-0'>
+          {Array.from({ length: TOTAL_RATING }).map((_, index) => (
+            <IconHeart
+              key={index}
+              className={`h-24 w-24 ${
+                index < rating ? 'text-var-orange-600' : 'text-gray-200'
+              }`}
+            />
+          ))}
+        </div>
+
+        <div className='mt-[10px] text-[14px] text-black'>
+          <div>{description}</div>
+        </div>
+
+        <div className='mt-[10px] text-var-gray-700'>
+          {place} 이용 · {location}
+        </div>
+
+        <div className='mt-8 flex items-center space-x-[8px] divide-x divide-var-gray-700 md:mt-10'>
+          <div>
+            <div className='flex items-center space-x-[8px]'>
+              <Profile className='h-24 w-24' />
+              <div className='text-[12px] text-var-gray-700'>{user_name}</div>
+            </div>
+          </div>
+          <div className='pl-[12px] text-[12px] text-var-gray-500'>{date}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Review;