diff --git a/package.json b/package.json
index 488cd224..2f9db88b 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@angular/platform-browser-dynamic": "~9.0.1",
     "@angular/router": "~9.0.1",
     "@angular/service-worker": "~9.0.1",
+    "dompurify": "3.4.13",
     "node-fetch": "^2.6.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/src-react/App.tsx b/src-react/App.tsx
index d455b443..e1a1153f 100644
--- a/src-react/App.tsx
+++ b/src-react/App.tsx
@@ -4,6 +4,7 @@ import { useSettings } from './shared/settings/SettingsContext';
 import Footer from './core/footer/Footer';
 import Header from './core/header/Header';
 import Feed from './feeds/feed/Feed';
+import ItemDetails from './item-details/ItemDetails';
 import type { FeedName } from './shared/models';
 import './App.scss';
 
@@ -26,6 +27,7 @@ function App() {
                             element={<Feed key={feedName} feedType={feedName} />}
                         />
                     ))}
+                    <Route path="item/:id" element={<ItemDetails />} />
                 </Routes>
                 <Footer />
             </div>
diff --git a/src-react/item-details/ItemDetails.scss b/src-react/item-details/ItemDetails.scss
new file mode 100644
index 00000000..adde0bd7
--- /dev/null
+++ b/src-react/item-details/ItemDetails.scss
@@ -0,0 +1,151 @@
+@import "../shared/scss/media";
+@import "../shared/scss/theme_variables";
+
+.main-content {
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+  -webkit-transition: opacity .2s ease;
+  transition: opacity .2s ease;
+  box-sizing: border-box;
+  padding: 8px 0;
+  z-index: 0;
+}
+
+.item {
+  box-sizing: border-box;
+  padding: 10px 40px 0 40px;
+  z-index: 0;
+}
+
+@media #{$tablet-only} {
+  .item {
+    padding: 10px 20px 0 40px;
+  }
+}
+
+@media #{$mobile-only} {
+  .item {
+    box-sizing: border-box;
+    padding: 110px 15px 0 15px;
+  }
+}
+
+.head-margin {
+  margin-bottom: 15px;
+}
+
+p {
+  margin: 2px 0;
+}
+
+.subject {
+  word-wrap: break-word;
+  margin-top: 20px;
+}
+
+a {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+@media #{$mobile-only} {
+  .laptop {
+    display: none;
+  }
+}
+
+@media #{$laptop-only} {
+  .mobile {
+    display: none;
+  }
+}
+
+.title {
+  font-size: 16px;
+  font-family: Verdana, Geneva, sans-serif;
+}
+
+.title-block {
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  margin: 0 75px;
+}
+
+@media #{$mobile-only} {
+  .title {
+    font-size: 15px;
+  }
+  .back-button {
+    position: absolute;
+    top: 52%;
+    width: 0.6rem;
+    height: 0.6rem;
+    background: transparent;
+    box-shadow: 0 0 0 lightgray;
+    transition: all 200ms ease;
+    left: 4%;
+    transform: translate3d(0, -50%, 0) rotate(-135deg);
+  }
+}
+
+.subtext {
+  font-size: 12px;
+  font-weight: bold;
+  letter-spacing: 0.5px;
+}
+
+.domain {
+  letter-spacing: 0.5px;
+}
+
+.subtext a {
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.item-details {
+  padding: 10px;
+}
+
+.item-header {
+  padding-bottom: 10px;
+}
+
+@media #{$mobile-only} {
+  .item-header {
+    padding: 10px 0 10px 0;
+    position: fixed;
+    width: 100%;
+    left: 0;
+    top: 62px;
+  }
+}
+
+.pollResults {
+  margin-bottom: 1em;
+}
+
+.pollContent {
+  * {
+    padding-bottom: 0;
+    margin-bottom: -1em;
+    margin-top: 1em;
+  }
+  .pollBar {
+    height: 10px;
+    margin-bottom: 1em;
+  }
+}
+
+ul {
+  list-style-type: none;
+  padding: 10px 0;
+}
+
+li {
+  display: list-item;
+}
diff --git a/src-react/item-details/ItemDetails.tsx b/src-react/item-details/ItemDetails.tsx
new file mode 100644
index 00000000..39149cdc
--- /dev/null
+++ b/src-react/item-details/ItemDetails.tsx
@@ -0,0 +1,144 @@
+import { useEffect, useState } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+
+import { fetchItemContent } from '../shared/api/hackernewsApi';
+import ErrorMessage from '../shared/components/error-message/ErrorMessage';
+import Loader from '../shared/components/loader/Loader';
+import type { Story } from '../shared/models';
+import { useSettings } from '../shared/settings/SettingsContext';
+import { formatComments } from '../shared/utils/formatComments';
+import { sanitizeHtml } from '../shared/utils/sanitizeHtml';
+import Comment from './comment/Comment';
+import './ItemDetails.scss';
+
+function ItemDetails() {
+    const params = useParams<{ id?: string }>();
+    const itemID = Number(params.id);
+    const navigate = useNavigate();
+    const { settings } = useSettings();
+    const [item, setItem] = useState<Story>();
+    const [errorMessage, setErrorMessage] = useState('');
+
+    useEffect(() => {
+        let ignore = false;
+        window.scrollTo(0, 0);
+        setErrorMessage('');
+
+        fetchItemContent(itemID)
+            .then((nextItem) => {
+                if (!ignore) {
+                    setItem(nextItem);
+                }
+            })
+            .catch(() => {
+                if (!ignore) {
+                    setErrorMessage('Could not load item comments.');
+                }
+            });
+
+        return () => {
+            ignore = true;
+        };
+    }, [itemID]);
+
+    const goBack = () => {
+        navigate(-1);
+    };
+
+    const hasUrl = item?.url?.indexOf('http') === 0;
+
+    return (
+        <div className="main-content">
+            {!item && !errorMessage && <Loader />}
+            {!item && errorMessage !== '' && <ErrorMessage message={errorMessage} />}
+            {item && (
+                <div className="item">
+                    <div className="mobile item-header">
+                        <p className="title-block">
+                            <span className="back-button" onClick={goBack} />
+                            {hasUrl ? (
+                                <a
+                                    className="title"
+                                    href={item.url}
+                                    target={settings.openLinkInNewTab ? '_blank' : undefined}
+                                    rel={settings.openLinkInNewTab ? 'noopener' : undefined}
+                                >
+                                    {item.title}
+                                </a>
+                            ) : (
+                                <Link className="title" to={`/item/${item.id}`}>
+                                    {item.title}
+                                </Link>
+                            )}
+                        </p>
+                    </div>
+                    <div
+                        className={`laptop${item.comments_count > 0 || item.type === 'job' ? ' item-header' : ''}${
+                            item.text ? ' head-margin' : ''
+                        }`}
+                    >
+                        {hasUrl ? (
+                            <p>
+                                <a
+                                    className="title"
+                                    href={item.url}
+                                    target={settings.openLinkInNewTab ? '_blank' : undefined}
+                                    rel={settings.openLinkInNewTab ? 'noopener' : undefined}
+                                >
+                                    {item.title}
+                                </a>
+                                {item.domain && <span className="domain">({item.domain})</span>}
+                            </p>
+                        ) : (
+                            <p>
+                                <Link className="title" to={`/item/${item.id}`}>
+                                    {item.title}
+                                </Link>
+                            </p>
+                        )}
+                        <div className="subtext">
+                            {item.type !== 'job' && (
+                                <span>
+                                    {item.points} points by <Link to={`/user/${item.user}`}>{item.user}</Link>
+                                </span>
+                            )}
+                            <span className={item.type !== 'job' ? 'item-details' : undefined}>
+                                {item.time_ago}
+                                {item.type !== 'job' && (
+                                    <span>
+                                        {' | '}
+                                        <Link to={`/item/${item.id}`}>{formatComments(item.comments_count)}</Link>
+                                    </span>
+                                )}
+                            </span>
+                        </div>
+                    </div>
+                    {item.type === 'poll' && (
+                        <div className="pollResults">
+                            {item.poll.map((pollResult, index) => (
+                                <div className="pollContent" key={index}>
+                                    <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(pollResult.content) }} />
+                                    <div className="subtext">{pollResult.points} points</div>
+                                    <div
+                                        className="pollBar"
+                                        style={{ width: `${(pollResult.points / item.poll_votes_count) * 100}%` }}
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                    <p className="subject" dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.content ?? '') }} />
+                    <ul className="comment-list">
+                        {(item.comments ?? []).map((comment) => (
+                            <li key={comment.id}>
+                                <Comment comment={comment} />
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default ItemDetails;
diff --git a/src-react/item-details/comment/Comment.scss b/src-react/item-details/comment/Comment.scss
new file mode 100644
index 00000000..f3ec0087
--- /dev/null
+++ b/src-react/item-details/comment/Comment.scss
@@ -0,0 +1,85 @@
+@import "../../shared/scss/media";
+@import "../../shared/scss/theme_variables";
+
+.comment-text {
+  a {
+    font-weight: bold;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.meta {
+  font-size: 13px;
+  color: #696969;
+  font-weight: bold;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+  a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  .time {
+    padding-left: 5px;
+  }
+}
+
+@media #{$mobile-only} {
+  .meta {
+    font-size: 14px;
+    margin-bottom: 10px;
+    .time {
+      padding: 0;
+      float: right;
+    }
+  }
+}
+
+.meta-collapse {
+  margin-bottom: 20px;
+}
+
+.deleted-meta {
+  font-size: 12px;
+  font-weight: bold;
+  letter-spacing: 0.5px;
+  margin: 30px 0;
+  a {
+    text-decoration: none;
+  }
+}
+
+.collapse {
+  font-size: 13px;
+  letter-spacing: 2px;
+  cursor: pointer;
+}
+
+.comment-tree {
+  margin-left: 24px;
+}
+
+@media #{$tablet-only} {
+  .comment-tree {
+    margin-left: 8px;
+  }
+}
+
+.comment-text {
+  font-size: 15px;
+  margin-top: 0;
+  margin-bottom: 20px;
+  word-wrap: break-word;
+  line-height: 1.5em;
+}
+
+.subtree {
+  margin-left: 0;
+  padding: 0;
+  list-style-type: none;
+}
diff --git a/src-react/item-details/comment/Comment.tsx b/src-react/item-details/comment/Comment.tsx
new file mode 100644
index 00000000..25297ebb
--- /dev/null
+++ b/src-react/item-details/comment/Comment.tsx
@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import type { Comment as CommentModel } from '../../shared/models';
+import { sanitizeHtml } from '../../shared/utils/sanitizeHtml';
+import './Comment.scss';
+
+interface CommentProps {
+    comment: CommentModel;
+}
+
+function Comment({ comment }: CommentProps) {
+    const [collapse, setCollapse] = useState(false);
+
+    return (
+        <>
+            {!comment.deleted && (
+                <div>
+                    <div className={`meta${collapse ? ' meta-collapse' : ''}`}>
+                        <span className="collapse" onClick={() => setCollapse((current) => !current)}>
+                            [{collapse ? '+' : '-'}]
+                        </span>{' '}
+                        <Link to={`/user/${comment.user}`}>{comment.user}</Link>
+                        <span className="time">{comment.time_ago}</span>
+                    </div>
+                    <div className="comment-tree">
+                        <div hidden={collapse}>
+                            <p
+                                className="comment-text"
+                                dangerouslySetInnerHTML={{ __html: sanitizeHtml(comment.content) }}
+                            />
+                            <ul className="subtree">
+                                {(comment.comments ?? []).map((subComment) => (
+                                    <li key={subComment.id}>
+                                        <Comment comment={subComment} />
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            )}
+            {comment.deleted && (
+                <div className="deleted-meta">
+                    <span className="collapse">[deleted]</span> | Comment Deleted
+                </div>
+            )}
+        </>
+    );
+}
+
+export default Comment;
diff --git a/src-react/shared/utils/sanitizeHtml.ts b/src-react/shared/utils/sanitizeHtml.ts
new file mode 100644
index 00000000..de0650b2
--- /dev/null
+++ b/src-react/shared/utils/sanitizeHtml.ts
@@ -0,0 +1,5 @@
+import DOMPurify from 'dompurify';
+
+export function sanitizeHtml(html: string): string {
+    return DOMPurify.sanitize(html);
+}
diff --git a/yarn.lock b/yarn.lock
index aa77d268..641062a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1668,6 +1668,11 @@
   resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
   integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
 
+"@types/trusted-types@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
+  integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
+
 "@types/webpack-sources@^0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-0.1.5.tgz#be47c10f783d3d6efe1471ff7f042611bd464a92"
@@ -3754,6 +3759,13 @@ domelementtype@^2.0.1:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.1.tgz#1f8bdfe91f5a78063274e803b4bdcedf6e94f94d"
   integrity sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==
 
+dompurify@3.4.13:
+  version "3.4.13"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.4.13.tgz#fc28949d59f92d62e28a3a764bcbeee35897a1be"
+  integrity sha512-2vmYIoqjze2d+kakP8S/nS5shfsl587kzwEjcGlTdiksUVgFHnFCsLYDVj/JNqJVOQZGSYBTmuycv0PodwmnMQ==
+  optionalDependencies:
+    "@types/trusted-types" "^2.0.7"
+
 domutils@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"