diff --git a/components/review-item/review-item.css b/components/review-item/review-item.css
new file mode 100644
index 0000000..2a9e74a
--- /dev/null
+++ b/components/review-item/review-item.css
@@ -0,0 +1,34 @@
+.review-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 10px;
+  padding: 41px 51px 31px;
+  background-color: #efefef;
+  max-width: 568px;
+}
+.review-img-text-container {
+  display: flex;
+  align-items: center;
+}
+.review-img {
+  width: 104px;
+  height: 104px;
+  flex-shrink: 0;
+  margin-right: 31px;
+}
+.review-img img {
+  width: 100%;
+  height: 100%;
+  padding-top: 7px;
+  border-radius: 50%;
+  background-color: #ffffff;
+}
+.review-text {
+  font-size: 14px;
+}
+.review-name {
+  width: 100%;
+  margin-top: 14px;
+  text-align: right;
+}
diff --git a/components/review-item/review-item.js b/components/review-item/review-item.js
new file mode 100644
index 0000000..88757e9
--- /dev/null
+++ b/components/review-item/review-item.js
@@ -0,0 +1,46 @@
+class ReviewItem extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  // initial render in here to ensure the element is fully connected to the DOM.
+  connectedCallback() {
+    this.attachShadow({ mode: "open" });
+    this.render();
+  }
+
+  // getter to make it clean to access the attribute value and ensure a default empty string if the attribute is missing.
+  get text() {
+    return this.getAttribute("text") || "";
+  }
+
+  get name() {
+    return this.getAttribute("name") || "";
+  }
+
+  get img() {
+    return this.getAttribute("img") || "";
+  }
+
+  render() {
+    try {
+      this.shadowRoot.innerHTML = `
+        <link rel="stylesheet" href="components/review-item/review-item.css">
+        <div class="review-item">
+          <div class="review-img-text-container">
+            <div class="review-img">
+              <img src="${this.img}" alt="Reviewer">
+            </div>
+            <div class="review-text">${this.text}</div>
+          </div>
+          <div class="review-name">${this.name}</div>
+        </div>
+      `;
+    } catch (error) {
+      // log any rendering errors.
+      console.error("Error during render:", error);
+    }
+  }
+}
+
+customElements.define("review-item", ReviewItem);
diff --git a/index.html b/index.html
index b160ec6..d9c7fe8 100644
--- a/index.html
+++ b/index.html
@@ -143,10 +143,10 @@
       }
 
       .review-card-list {
-        margin-top: 4rem;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.9rem;
+        display: grid;
+        grid-template-columns: repeat(2, 568px);
+        gap: 10px 9px;
+        padding-top: 40px;
       }
 
       .review-card {
@@ -279,91 +279,36 @@
     <div id="member-review-container">
       <span>참가자 후기</span>
       <div class="review-card-list">
-        <div class="review-card">
-          <div class="picture-placeholder">
-            <img src="images/human.png" />
-          </div>
-          <div class="review">
-            <p>
-              해외취업을 목표로 리트코드 스터디 모임에 참여한 것은 좋은
-              선택이었습니다. 특히 혼자 공부하는 것보다 멤버들과 함께 문제를
-              풀며 시너지를 낼 수 있었습니다. 모임 중에 다양한 질문을 주고받으며
-              실력을 쌓을 수 있었고, 해외 취업 준비에 실질적인 도움을 받을 수
-              있었습니다.
-            </p>
-            <div class="name">
-              <span>Sam</span>
-            </div>
-          </div>
-        </div>
-        <div class="review-card">
-          <div class="picture-placeholder">
-            <img src="images/human.png" />
-          </div>
-          <div class="review">
-            <p>
-              해외취업을 목표로 리트코드 스터디 모임에 참여한 것은 좋은
-              선택이었습니다. 특히 혼자 공부하는 것보다 멤버들과 함께 문제를
-              풀며 시너지를 낼 수 있었습니다. 모임 중에 다양한 질문을 주고받으며
-              실력을 쌓을 수 있었고, 해외 취업 준비에 실질적인 도움을 받을 수
-              있었습니다.
-            </p>
-            <div class="name">
-              <span>Sam</span>
-            </div>
-          </div>
-        </div>
-        <div class="review-card">
-          <div class="picture-placeholder">
-            <img src="images/human.png" />
-          </div>
-          <div class="review">
-            <p>
-              해외취업을 목표로 리트코드 스터디 모임에 참여한 것은 좋은
-              선택이었습니다. 특히 혼자 공부하는 것보다 멤버들과 함께 문제를
-              풀며 시너지를 낼 수 있었습니다. 모임 중에 다양한 질문을 주고받으며
-              실력을 쌓을 수 있었고, 해외 취업 준비에 실질적인 도움을 받을 수
-              있었습니다.
-            </p>
-            <div class="name">
-              <span>Sam</span>
-            </div>
-          </div>
-        </div>
-        <div class="review-card">
-          <div class="picture-placeholder">
-            <img src="images/human.png" />
-          </div>
-          <div class="review">
-            <p>
-              해외취업을 목표로 리트코드 스터디 모임에 참여한 것은 좋은
-              선택이었습니다. 특히 혼자 공부하는 것보다 멤버들과 함께 문제를
-              풀며 시너지를 낼 수 있었습니다. 모임 중에 다양한 질문을 주고받으며
-              실력을 쌓을 수 있었고, 해외 취업 준비에 실질적인 도움을 받을 수
-              있었습니다.
-            </p>
-            <div class="name">
-              <span>Sam</span>
-            </div>
-          </div>
-        </div>
-        <div class="review-card">
-          <div class="picture-placeholder">
-            <img src="images/human.png" />
-          </div>
-          <div class="review">
-            <p>
-              해외취업을 목표로 리트코드 스터디 모임에 참여한 것은 좋은
-              선택이었습니다. 특히 혼자 공부하는 것보다 멤버들과 함께 문제를
-              풀며 시너지를 낼 수 있었습니다. 모임 중에 다양한 질문을 주고받으며
-              실력을 쌓을 수 있었고, 해외 취업 준비에 실질적인 도움을 받을 수
-              있었습니다.
-            </p>
-            <div class="name">
-              <span>Sam</span>
-            </div>
-          </div>
-        </div>
+        <review-item
+          img="images/human.png"
+          text="해외취업을 목표로 리트코드 스터디 모임에 참여한 것은 좋은 선택이었습니다. 특히 혼자 공부하는 것보다 멤버들과 함께 문제를 풀며 시너지를 낼 수 있었습니다. 모임 중에 다양한 질문을 주고받으며 실력을 쌓을 수 있었고, 해외 취업 준비에 실질적인 도움을 받을 수 있었습니다."
+          name="John Doe"
+        >
+        </review-item>
+        <review-item
+          img="images/human.png"
+          text="해외취업을 목표로 리트코드 스터디 모임에 참여한 것은 좋은 선택이었습니다. 특히 혼자 공부하는 것보다 멤버들과 함께 문제를 풀며 시너지를 낼 수 있었습니다. 모임 중에 다양한 질문을 주고받으며 실력을 쌓을 수 있었고, 해외 취업 준비에 실질적인 도움을 받을 수 있었습니다."
+          name="John Doe"
+        >
+        </review-item>
+        <review-item
+          img="images/human.png"
+          text="해외취업을 목표로 리트코드 스터디 모임에 참여한 것은 좋은 선택이었습니다. 특히 혼자 공부하는 것보다 멤버들과 함께 문제를 풀며 시너지를 낼 수 있었습니다. 모임 중에 다양한 질문을 주고받으며 실력을 쌓을 수 있었고, 해외 취업 준비에 실질적인 도움을 받을 수 있었습니다."
+          name="John Doe"
+        >
+        </review-item>
+        <review-item
+          img="images/human.png"
+          text="해외취업을 목표로 리트코드 스터디 모임에 참여한 것은 좋은 선택이었습니다. 특히 혼자 공부하는 것보다 멤버들과 함께 문제를 풀며 시너지를 낼 수 있었습니다. 모임 중에 다양한 질문을 주고받으며 실력을 쌓을 수 있었고, 해외 취업 준비에 실질적인 도움을 받을 수 있었습니다."
+          name="John Doe"
+        >
+        </review-item>
+        <review-item
+          img="images/human.png"
+          text="해외취업을 목표로 리트코드 스터디 모임에 참여한 것은 좋은 선택이었습니다. 특히 혼자 공부하는 것보다 멤버들과 함께 문제를 풀며 시너지를 낼 수 있었습니다. 모임 중에 다양한 질문을 주고받으며 실력을 쌓을 수 있었고, 해외 취업 준비에 실질적인 도움을 받을 수 있었습니다."
+          name="John Doe"
+        >
+        </review-item>
       </div>
     </div>
 
diff --git a/main.js b/main.js
index 54ed34d..16d65c9 100644
--- a/main.js
+++ b/main.js
@@ -2,4 +2,5 @@ import "./components/divider/divider.js";
 import "./components/footer-link/footer-link.js";
 import "./components/hero/hero.js";
 import "./components/link-button/link-button.js";
+import "./components/review-item/review-item.js";
 import "./components/seo-meta-tag/seo-meta-tag.js";