diff --git a/components/review-item.js b/components/review-item.js
new file mode 100644
index 0000000..d263077
--- /dev/null
+++ b/components/review-item.js
@@ -0,0 +1,91 @@
+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 = `
+      <style>
+        .review-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          border-radius: 10px;
+          padding: 41px 51px 31px;
+          background-color: #efefef;
+          max-width: 568px;
+        }
+        .review-item blockquote,
+          figure {
+          margin: 0;
+        }
+        .review-content {
+          display: flex;
+          align-items: center;
+        }
+        .review-content figure {
+          width: 104px;
+          height: 104px;
+          flex-shrink: 0;
+          object-fit: cover;
+          margin-right: 31px;
+        }
+        .review-content figure > img {
+          width: 100%;
+          height: 100%;
+          padding-top: 7px;
+          border-radius: 48%;
+          background-color: #ffffff;
+        }
+        .review-content blockquote {
+          font-size: 14px;
+        }
+        .review-footer {
+          width: 100%;
+          margin-top: 14px;
+        }
+        .review-footer figcaption {
+          font-size: 16px;
+          text-align: right;
+        }
+      </style>
+      <article class="review-item">
+        <section class="review-content">
+          <figure>
+            <img src="${this.img}" alt="Reviewer">
+          </figure>
+          <blockquote>${this.text}</blockquote>
+        </section>
+        <footer class="review-footer">
+          <figcaption>${this.name}</figcaption>
+        </footer>
+      </article>
+      `;
+    } catch (error) {
+      // log any rendering errors.
+      console.error("Error during render:", error);
+    }
+  }
+}
+
+customElements.define("review-item", ReviewItem);
diff --git a/components/review-item/review-item.css b/components/review-item/review-item.css
deleted file mode 100644
index 2a9e74a..0000000
--- a/components/review-item/review-item.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.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
deleted file mode 100644
index 88757e9..0000000
--- a/components/review-item/review-item.js
+++ /dev/null
@@ -1,46 +0,0 @@
-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/main.js b/main.js
index a6eabec..0ddbe34 100644
--- a/main.js
+++ b/main.js
@@ -1,6 +1,10 @@
 import "./components/button-link.js";
 import "./components/footer-link/footer-link.js";
 import "./components/header.js";
+import "./components/hero/hero.js";
+import "./components/link-button/link-button.js";
+import "./components/review-item.js";
+import "./components/button-link.js";
 import "./components/hero.js";
 import "./components/image.js";
 import "./components/review-item/review-item.js";