diff --git a/package-lock.json b/package-lock.json
index 384ba66..634daef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "html-to-react": "^1.5.1",
         "javascript-time-ago": "^2.5.9",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -8757,6 +8758,86 @@
         "node": ">=12"
       }
     },
+    "node_modules/html-to-react": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/html-to-react/-/html-to-react-1.5.1.tgz",
+      "integrity": "sha512-dFLZRBjpMk89Ukwa6Fq7oApinn3TEZD0gGFUkmI9DqNQxTjN7gF9owhyu+t8h+bpEZrX2DMxZLYjEfw0C/iL7A==",
+      "dependencies": {
+        "domhandler": "^5.0",
+        "htmlparser2": "^8.0",
+        "lodash.camelcase": "^4.3.0",
+        "react": "^18.0"
+      }
+    },
+    "node_modules/html-to-react/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/html-to-react/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/html-to-react/node_modules/domutils": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
+      "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/html-to-react/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/html-to-react/node_modules/htmlparser2": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "entities": "^4.4.0"
+      }
+    },
     "node_modules/html-webpack-plugin": {
       "version": "5.5.1",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.1.tgz",
@@ -11773,6 +11854,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA=="
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
diff --git a/package.json b/package.json
index 6b5ee99..5f014ea 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "html-to-react": "^1.5.1",
     "javascript-time-ago": "^2.5.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/src/App.css b/src/App.css
index 73839ac..d63cf42 100644
--- a/src/App.css
+++ b/src/App.css
@@ -515,3 +515,49 @@ nav ul li a:hover {
 .Footer-list ul li a:hover {
   color: var(--accent);
 }
+
+.Comment {
+  flex-direction: column;
+  padding: 1.5rem;
+  max-width: 800px;
+  align-items: start;
+  color: var(--text);
+}
+
+/* .Comment * { */
+/* } */
+
+.Comment a {
+  color: var(--accent);
+  text-decoration: none;
+  transition: all 0.2s;
+}
+
+.Comment a:hover {
+  color: var(--accent_light);
+  text-decoration: underline;
+}
+
+.Comment__title {
+  color: var(--accent);
+  margin-top: 1.5rem;
+}
+
+.btn--back {
+  position: fixed;
+  top: 5.5rem;
+  left: 3rem;
+  border: 2px solid var(--accent_border);
+  padding: 0.5rem 2rem;
+  border-radius: 1rem;
+  cursor: pointer;
+  color: var(--text);
+  font-weight: 600;
+  font-family: inherit;
+}
+
+.btn--back:hover {
+  background: var(--accent_light);
+  color: var(--text_light);
+  border: 3px solid var(--text_light);
+}
diff --git a/src/App.jsx b/src/App.jsx
index a24f99a..15160cb 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,19 +7,21 @@ import Reagan from "./components/Reagan";
 
 function App() {
   const [fetchedData, setFetchedData] = useState([]);
+  const [fetchedComments, setFetchedComments] = useState([]);
   const [query, setQuery] = useState("");
+  const [objectID, setObjectID] = useState("");
   const [hitsPerPage, setHitsPerPage] = useState(1000);
   const [pageNum, setPageNum] = useState(0);
   const [isLoadingFront, setIsLoadingFront] = useState(true);
   const [loading, setLoading] = useState(true);
   const [sortBy, setSortBy] = useState("");
 
-  const fetchData = async function (url) {
+  const fetchData = async function (url, loadingData = true) {
     try {
       const res = await fetch(url);
       const data = await res.json();
       setLoading(false);
-      setFetchedData(data);
+      loadingData ? setFetchedData(data) : setFetchedComments(data);
     } catch (err) {
       console.error(err);
     }
@@ -37,6 +39,13 @@ function App() {
     );
   };
 
+  const fetchComments = (objectID) => {
+    fetchData(
+      `http://hn.algolia.com/api/v1/search?hitsPerPage=1000&tags=comment,story_${objectID}`,
+      false
+    );
+  };
+
   useEffect(() => {
     if (isLoadingFront) return;
     if (query) fetchByQuery(query, hitsPerPage, pageNum);
@@ -49,12 +58,19 @@ function App() {
     setIsLoadingFront(false);
   }, [isLoadingFront]);
 
+  // fetch Comments
+  useEffect(() => {
+    if (isLoadingFront) return;
+    fetchComments(objectID);
+  }, [objectID]);
+
   return (
     <div className="App">
       <Header
         setIsLoadingFront={setIsLoadingFront}
         fetchedData={fetchedData}
         setSortBy={setSortBy}
+        setObjectID={setObjectID}
       />
 
       <Body
@@ -68,6 +84,9 @@ function App() {
         filterBy={sortBy}
         query={query}
         setLoading={setLoading}
+        setObjectID={setObjectID}
+        objectID={objectID}
+        fetchedComments={fetchedComments}
       />
       <Footer />
       <Reagan />
diff --git a/src/components/Article.jsx b/src/components/Article.jsx
index 12f3441..85075bd 100644
--- a/src/components/Article.jsx
+++ b/src/components/Article.jsx
@@ -12,6 +12,8 @@ export default function Article({
   id,
   setHits,
   query,
+  setObjectID,
+  setLoading,
 }) {
   const [displayedPoints, setDisplayedPoints] = useState(points);
   const [arePointsIncreased, setArePointsIncreased] = useState(false);
@@ -68,6 +70,11 @@ export default function Article({
 
   const urlText = url?.split("/")[2];
 
+  const handleFetchComments = () => {
+    setObjectID(id);
+    setLoading(true);
+  };
+
   return (
     <li className="Article__wrapper">
       <span className="Article__num">{articleNum}.</span>
@@ -104,7 +111,10 @@ export default function Article({
           <span className="Article__hide" onClick={hide}>
             hide
           </span>{" "}
-          | <span>{comments}</span> Comments
+          |{" "}
+          <span className="Article__hide" onClick={handleFetchComments}>
+            {comments} Comments
+          </span>
         </p>
       </div>
       <button className="Article__btn-up" onClick={increasePoints}>
diff --git a/src/components/Body.jsx b/src/components/Body.jsx
index 7cf228a..3956cbf 100644
--- a/src/components/Body.jsx
+++ b/src/components/Body.jsx
@@ -10,6 +10,9 @@ export default function Body({
   query,
   sortBy,
   setLoading,
+  fetchedComments,
+  setObjectID,
+  objectID,
 }) {
   const [hits, setHits] = useState([]);
 
@@ -41,6 +44,7 @@ export default function Body({
         fetchedData={fetchedData}
         setQuery={setQuery}
         setLoading={setLoading}
+        setObjectID={setObjectID}
       />
       <ClimbingBoxLoader
         color="var(--accent)"
@@ -53,9 +57,13 @@ export default function Body({
         <div className="pagination">
           <Pagination
             setHits={setHits}
-            itemsPerPage={20}
+            itemsPerPage={objectID ? 6 : 20}
             hits={hits}
             query={query}
+            setObjectID={setObjectID}
+            objectID={objectID}
+            fetchedComments={fetchedComments}
+            setLoading={setLoading}
           />
         </div>
       )}
diff --git a/src/components/Comments.jsx b/src/components/Comments.jsx
new file mode 100644
index 0000000..24a5300
--- /dev/null
+++ b/src/components/Comments.jsx
@@ -0,0 +1,13 @@
+import { Parser } from "html-to-react";
+
+export default function Comments({ author, text }) {
+  const parser = new Parser();
+  return (
+    <div className="Article__wrapper Comment">
+      <h3>
+        by <span className="Article__title">{author}</span>
+      </h3>
+      {parser.parse(text)}
+    </div>
+  );
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 5c9d7cc..c2868d1 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,9 +1,14 @@
-export default function Header({ setIsLoadingFront, setSortBy }) {
+export default function Header({ setIsLoadingFront, setSortBy, setObjectID }) {
+  const handleFrontLoad = () => {
+    setIsLoadingFront(true);
+    setObjectID("");
+  };
+
   return (
     <div className="Header">
       <div className="navigation">
         <svg
-          onClick={() => setIsLoadingFront(true)}
+          onClick={handleFrontLoad}
           version="1.1"
           id="Layer_1"
           xmlns="http://www.w3.org/2000/svg"
@@ -19,7 +24,7 @@ export default function Header({ setIsLoadingFront, setSortBy }) {
           </g>
         </svg>
         <nav>
-          <span onClick={() => setIsLoadingFront(true)}>Hacker News</span>
+          <span onClick={handleFrontLoad}>Hacker News</span>
           <ul>
             <li>
               <a href="#" onClick={() => setSortBy("created_at_i")}>
diff --git a/src/components/Pagination.jsx b/src/components/Pagination.jsx
index 1abaa83..f67d78f 100644
--- a/src/components/Pagination.jsx
+++ b/src/components/Pagination.jsx
@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import ReactPaginate from "react-paginate";
 import Article from "./Article";
 import NoResult from "./NoResult";
+import Comments from "./Comments";
 
 const hits = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
 
@@ -18,8 +19,17 @@ function Items({ currentItems }) {
   );
 }
 
-export default function Pagination({ itemsPerPage, hits, setHits, query }) {
-  const items = hits;
+export default function Pagination({
+  itemsPerPage,
+  hits,
+  setHits,
+  query,
+  setObjectID,
+  objectID,
+  fetchedComments,
+  setLoading,
+}) {
+  const items = objectID !== "" ? fetchedComments.hits : hits;
 
   function Items({ currentItems }) {
     return (
@@ -41,8 +51,8 @@ export default function Pagination({ itemsPerPage, hits, setHits, query }) {
   // (This could be items from props; or items loaded in a local state
   // from an API endpoint with useEffect and useState)
   const endOffset = itemOffset + itemsPerPage;
-  const currentItems = items.slice(itemOffset, endOffset);
-  const pageCount = Math.ceil(items.length / itemsPerPage);
+  const currentItems = items?.slice(itemOffset, endOffset);
+  const pageCount = Math.ceil(items?.length / itemsPerPage);
 
   // Invoke when user click to request another page.
   const handlePageClick = (event) => {
@@ -54,38 +64,72 @@ export default function Pagination({ itemsPerPage, hits, setHits, query }) {
     // console.log(items);
   };
 
-  if (items.length) {
-    return (
-      <>
-        {/* <Items currentItems={currentItems} /> */}
-        <ol>
-          {currentItems.map((item, index) => (
-            <Article
-              articleNum={itemOffset + index + 1}
-              title={item.title}
-              url={item.url}
-              points={item.points}
-              author={item.author}
-              time={Date.parse(item.created_at)}
-              comments={item.num_comments}
-              key={item.objectID}
-              id={item.objectID}
-              setHits={setHits}
-              query={query}
+  const handleBack = () => {
+    setObjectID("");
+  };
+
+  if (items?.length > 0) {
+    if (objectID) {
+      return (
+        <>
+          <button className="btn--back" onClick={handleBack}>
+            Back
+          </button>
+          <h2 className="Comment__title">
+            {fetchedComments.hits[0].story_title}
+          </h2>
+          {currentItems.map((comment, index) => (
+            <Comments
+              author={comment.author}
+              text={comment.comment_text}
+              key={comment.author + index}
             />
           ))}
-        </ol>
-        <ReactPaginate
-          breakLabel="..."
-          nextLabel="next"
-          onPageChange={handlePageClick}
-          pageRangeDisplayed={5}
-          pageCount={pageCount}
-          previousLabel="previous"
-          renderOnZeroPageCount={null}
-        />
-      </>
-    );
+          <ReactPaginate
+            breakLabel="..."
+            nextLabel="next"
+            onPageChange={handlePageClick}
+            pageRangeDisplayed={5}
+            pageCount={pageCount}
+            previousLabel="previous"
+            renderOnZeroPageCount={null}
+          />
+        </>
+      );
+    } else {
+      return (
+        <>
+          <ol>
+            {currentItems.map((item, index) => (
+              <Article
+                articleNum={itemOffset + index + 1}
+                title={item.title}
+                url={item.url}
+                points={item.points}
+                author={item.author}
+                time={Date.parse(item.created_at)}
+                comments={item.num_comments}
+                key={item.created_at_i}
+                id={item.objectID}
+                setHits={setHits}
+                query={query}
+                setObjectID={setObjectID}
+                setLoading={setLoading}
+              />
+            ))}
+          </ol>
+          <ReactPaginate
+            breakLabel="..."
+            nextLabel="next"
+            onPageChange={handlePageClick}
+            pageRangeDisplayed={5}
+            pageCount={pageCount}
+            previousLabel="previous"
+            renderOnZeroPageCount={null}
+          />
+        </>
+      );
+    }
   } else {
     return <NoResult />;
   }
diff --git a/src/components/Search.jsx b/src/components/Search.jsx
index 9050155..e3b7338 100644
--- a/src/components/Search.jsx
+++ b/src/components/Search.jsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-export default function Search({ setQuery, setLoading }) {
+export default function Search({ setQuery, setLoading, setObjectID }) {
   const [inputText, setInputText] = useState("");
 
   let inputHandler = (e) => {
@@ -15,6 +15,7 @@ export default function Search({ setQuery, setLoading }) {
     e.preventDefault();
     setLoading(true);
     setQuery(inputText);
+    setObjectID("");
     setInputText("");
   };