diff --git a/lemmy-translations b/lemmy-translations
index 7c1b691a..7c394574 160000
--- a/lemmy-translations
+++ b/lemmy-translations
@@ -1 +1 @@
-Subproject commit 7c1b691af63845a2fe2f8219b4620b8db3c9c3ba
+Subproject commit 7c3945745dcd07774b19453803f7f14ab80ab3d3
diff --git a/src/shared/components/comment/comment-form.tsx b/src/shared/components/comment/comment-form.tsx
index 7abf39b7..64841e78 100644
--- a/src/shared/components/comment/comment-form.tsx
+++ b/src/shared/components/comment/comment-form.tsx
@@ -3,6 +3,7 @@ import { Component } from "inferno";
 import { T } from "inferno-i18next-dess";
 import { Link } from "inferno-router";
 import {
+  CommentNode as CommentNodeI,
   CommentResponse,
   CreateComment,
   EditComment,
@@ -12,7 +13,6 @@ import {
 } from "lemmy-js-client";
 import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
-import { CommentNode as CommentNodeI } from "../../interfaces";
 import { UserService, WebSocketService } from "../../services";
 import {
   auth,
diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index 27e209ee..a75d7a05 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -8,12 +8,16 @@ import {
   BanFromCommunity,
   BanPerson,
   BlockPerson,
+  CommentNode as CommentNodeI,
+  CommentReplyView,
   CommentView,
   CommunityModeratorView,
   CreateCommentLike,
   CreateCommentReport,
   DeleteComment,
-  MarkCommentAsRead,
+  GetComments,
+  ListingType,
+  MarkCommentReplyAsRead,
   MarkPersonMentionAsRead,
   PersonMentionView,
   PersonViewSafe,
@@ -26,11 +30,7 @@ import {
 } from "lemmy-js-client";
 import moment from "moment";
 import { i18n } from "../../i18next";
-import {
-  BanType,
-  CommentNode as CommentNodeI,
-  PurgeType,
-} from "../../interfaces";
+import { BanType, CommentViewType, PurgeType } from "../../interfaces";
 import { UserService, WebSocketService } from "../../services";
 import {
   amCommunityCreator,
@@ -38,6 +38,7 @@ import {
   canAdmin,
   canMod,
   colorList,
+  commentTreeMaxDepth,
   futureDaysToUnixTime,
   isAdmin,
   isBanned,
@@ -82,7 +83,6 @@ interface CommentNodeState {
   score: number;
   upvotes: number;
   downvotes: number;
-  borderColor: string;
   readLoading: boolean;
   saveLoading: boolean;
 }
@@ -99,6 +99,7 @@ interface CommentNodeProps {
   showContext?: boolean;
   showCommunity?: boolean;
   enableDownvotes: boolean;
+  viewType: CommentViewType;
 }
 
 export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
@@ -129,9 +130,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     score: this.props.node.comment_view.counts.score,
     upvotes: this.props.node.comment_view.counts.upvotes,
     downvotes: this.props.node.comment_view.counts.downvotes,
-    borderColor: this.props.node.depth
-      ? colorList[this.props.node.depth % colorList.length]
-      : colorList[0],
     readLoading: false,
     saveLoading: false,
   };
@@ -181,10 +179,23 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
       cv.creator.id
     );
 
+    let borderColor = this.props.node.depth
+      ? colorList[(this.props.node.depth - 1) % colorList.length]
+      : colorList[0];
+    let moreRepliesBorderColor = this.props.node.depth
+      ? colorList[this.props.node.depth % colorList.length]
+      : colorList[0];
+
+    let showMoreChildren =
+      this.props.viewType == CommentViewType.Tree &&
+      !this.state.collapsed &&
+      node.children.length == 0 &&
+      node.comment_view.counts.child_count > 0;
+
     return (
       <div
         className={`comment ${
-          cv.comment.parent_id.isSome() && !this.props.noIndent ? "ml-1" : ""
+          this.props.node.depth && !this.props.noIndent ? "ml-1" : ""
         }`}
       >
         <div
@@ -194,14 +205,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
           } ${this.isCommentNew ? "mark" : ""}`}
           style={
             !this.props.noIndent &&
-            cv.comment.parent_id.isSome() &&
-            `border-left: 2px ${this.state.borderColor} solid !important`
+            this.props.node.depth &&
+            `border-left: 2px ${borderColor} solid !important`
           }
         >
           <div
-            class={`${
-              !this.props.noIndent && cv.comment.parent_id.isSome() && "ml-2"
-            }`}
+            class={`${!this.props.noIndent && this.props.node.depth && "ml-2"}`}
           >
             <div class="d-flex flex-wrap align-items-center text-muted small">
               <span class="mr-2">
@@ -262,7 +271,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 <>
                   <a
                     className={`unselectable pointer ${this.scoreColor}`}
-                    onClick={linkEvent(node, this.handleCommentUpvote)}
+                    onClick={this.handleCommentUpvote}
                     data-tippy-content={this.pointsTippy}
                   >
                     <span
@@ -314,12 +323,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       class="btn btn-link btn-animate text-muted"
                       onClick={linkEvent(this, this.handleMarkRead)}
                       data-tippy-content={
-                        this.commentOrMentionRead
+                        this.commentReplyOrMentionRead
                           ? i18n.t("mark_as_unread")
                           : i18n.t("mark_as_read")
                       }
                       aria-label={
-                        this.commentOrMentionRead
+                        this.commentReplyOrMentionRead
                           ? i18n.t("mark_as_unread")
                           : i18n.t("mark_as_read")
                       }
@@ -330,7 +339,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                         <Icon
                           icon="check"
                           classes={`icon-inline ${
-                            this.commentOrMentionRead && "text-success"
+                            this.commentReplyOrMentionRead && "text-success"
                           }`}
                         />
                       )}
@@ -345,7 +354,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                               ? "text-info"
                               : "text-muted"
                           }`}
-                          onClick={linkEvent(node, this.handleCommentUpvote)}
+                          onClick={this.handleCommentUpvote}
                           data-tippy-content={i18n.t("upvote")}
                           aria-label={i18n.t("upvote")}
                         >
@@ -364,10 +373,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                                 ? "text-danger"
                                 : "text-muted"
                             }`}
-                            onClick={linkEvent(
-                              node,
-                              this.handleCommentDownvote
-                            )}
+                            onClick={this.handleCommentDownvote}
                             data-tippy-content={i18n.t("downvote")}
                             aria-label={i18n.t("downvote")}
                           >
@@ -772,6 +778,21 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             )}
           </div>
         </div>
+        {showMoreChildren && (
+          <div
+            className={`details ml-1 comment-node py-2 ${
+              !this.props.noBorder ? "border-top border-light" : ""
+            }`}
+            style={`border-left: 2px ${moreRepliesBorderColor} solid !important`}
+          >
+            <button
+              class="btn btn-link text-muted"
+              onClick={linkEvent(this, this.handleFetchChildren)}
+            >
+              {node.comment_view.counts.child_count} more replies ➔
+            </button>
+          </div>
+        )}
         {/* end of details */}
         {this.state.showRemoveDialog && (
           <form
@@ -931,7 +952,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             focus
           />
         )}
-        {!this.state.collapsed && node.children && (
+        {!this.state.collapsed && node.children.length > 0 && (
           <CommentNodes
             nodes={node.children}
             locked={this.props.locked}
@@ -939,6 +960,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             admins={this.props.admins}
             maxCommentsShown={None}
             enableDownvotes={this.props.enableDownvotes}
+            viewType={this.props.viewType}
           />
         )}
         {/* A collapsed clearfix */}
@@ -947,11 +969,16 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     );
   }
 
-  get commentOrMentionRead() {
+  get commentReplyOrMentionRead(): boolean {
     let cv = this.props.node.comment_view;
-    return this.isPersonMentionType(cv)
-      ? cv.person_mention.read
-      : cv.comment.read;
+
+    if (this.isPersonMentionType(cv)) {
+      return cv.person_mention.read;
+    } else if (this.isCommentReplyType(cv)) {
+      return cv.comment_reply.read;
+    } else {
+      return false;
+    }
   }
 
   linkBtn(small = false) {
@@ -968,7 +995,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
       <>
         <Link
           className={classnames}
-          to={`/post/${cv.post.id}/comment/${cv.comment.id}`}
+          to={`/comment/${cv.comment.id}`}
           title={title}
         >
           <Icon icon="link" classes="icon-inline" />
@@ -1061,7 +1088,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     this.setState(this.state);
   }
 
-  handleCommentUpvote(i: CommentNodeI, event: any) {
+  handleCommentUpvote(event: any) {
     event.preventDefault();
     let myVote = this.state.my_vote.unwrapOr(0);
     let newVote = myVote == 1 ? 0 : 1;
@@ -1081,17 +1108,16 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     this.state.my_vote = Some(newVote);
 
     let form = new CreateCommentLike({
-      comment_id: i.comment_view.comment.id,
+      comment_id: this.props.node.comment_view.comment.id,
       score: newVote,
       auth: auth().unwrap(),
     });
-
     WebSocketService.Instance.send(wsClient.likeComment(form));
     this.setState(this.state);
     setupTippy();
   }
 
-  handleCommentDownvote(i: CommentNodeI, event: any) {
+  handleCommentDownvote(event: any) {
     event.preventDefault();
     let myVote = this.state.my_vote.unwrapOr(0);
     let newVote = myVote == -1 ? 0 : -1;
@@ -1111,7 +1137,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     this.state.my_vote = Some(newVote);
 
     let form = new CreateCommentLike({
-      comment_id: i.comment_view.comment.id,
+      comment_id: this.props.node.comment_view.comment.id,
       score: newVote,
       auth: auth().unwrap(),
     });
@@ -1175,11 +1201,17 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
   }
 
   isPersonMentionType(
-    item: CommentView | PersonMentionView
+    item: CommentView | PersonMentionView | CommentReplyView
   ): item is PersonMentionView {
     return (item as PersonMentionView).person_mention?.id !== undefined;
   }
 
+  isCommentReplyType(
+    item: CommentView | PersonMentionView | CommentReplyView
+  ): item is CommentReplyView {
+    return (item as CommentReplyView).comment_reply?.id !== undefined;
+  }
+
   handleMarkRead(i: CommentNode) {
     if (i.isPersonMentionType(i.props.node.comment_view)) {
       let form = new MarkPersonMentionAsRead({
@@ -1188,13 +1220,13 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
         auth: auth().unwrap(),
       });
       WebSocketService.Instance.send(wsClient.markPersonMentionAsRead(form));
-    } else {
-      let form = new MarkCommentAsRead({
-        comment_id: i.props.node.comment_view.comment.id,
-        read: !i.props.node.comment_view.comment.read,
+    } else if (i.isCommentReplyType(i.props.node.comment_view)) {
+      let form = new MarkCommentReplyAsRead({
+        comment_reply_id: i.props.node.comment_view.comment_reply.id,
+        read: !i.props.node.comment_view.comment_reply.read,
         auth: auth().unwrap(),
       });
-      WebSocketService.Instance.send(wsClient.markCommentAsRead(form));
+      WebSocketService.Instance.send(wsClient.markCommentReplyAsRead(form));
     }
 
     i.state.readLoading = true;
@@ -1419,6 +1451,24 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     setupTippy();
   }
 
+  handleFetchChildren(i: CommentNode) {
+    let form = new GetComments({
+      post_id: Some(i.props.node.comment_view.post.id),
+      parent_id: Some(i.props.node.comment_view.comment.id),
+      max_depth: Some(commentTreeMaxDepth),
+      page: None,
+      sort: None,
+      limit: Some(999),
+      type_: Some(ListingType.All),
+      community_name: None,
+      community_id: None,
+      saved_only: Some(false),
+      auth: auth(false).ok(),
+    });
+
+    WebSocketService.Instance.send(wsClient.getComments(form));
+  }
+
   get scoreColor() {
     if (this.state.my_vote.unwrapOr(0) == 1) {
       return "text-info";
diff --git a/src/shared/components/comment/comment-nodes.tsx b/src/shared/components/comment/comment-nodes.tsx
index 62167ec8..f9484c2d 100644
--- a/src/shared/components/comment/comment-nodes.tsx
+++ b/src/shared/components/comment/comment-nodes.tsx
@@ -1,7 +1,11 @@
 import { Option } from "@sniptt/monads";
 import { Component } from "inferno";
-import { CommunityModeratorView, PersonViewSafe } from "lemmy-js-client";
-import { CommentNode as CommentNodeI } from "../../interfaces";
+import {
+  CommentNode as CommentNodeI,
+  CommunityModeratorView,
+  PersonViewSafe,
+} from "lemmy-js-client";
+import { CommentViewType } from "../../interfaces";
 import { CommentNode } from "./comment-node";
 
 interface CommentNodesProps {
@@ -17,6 +21,7 @@ interface CommentNodesProps {
   showContext?: boolean;
   showCommunity?: boolean;
   enableDownvotes?: boolean;
+  viewType: CommentViewType;
 }
 
 export class CommentNodes extends Component<CommentNodesProps, any> {
@@ -45,6 +50,7 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
             showContext={this.props.showContext}
             showCommunity={this.props.showCommunity}
             enableDownvotes={this.props.enableDownvotes}
+            viewType={this.props.viewType}
           />
         ))}
       </div>
diff --git a/src/shared/components/comment/comment-report.tsx b/src/shared/components/comment/comment-report.tsx
index 0a652263..a2d2b10c 100644
--- a/src/shared/components/comment/comment-report.tsx
+++ b/src/shared/components/comment/comment-report.tsx
@@ -2,13 +2,14 @@ import { None } from "@sniptt/monads";
 import { Component, linkEvent } from "inferno";
 import { T } from "inferno-i18next-dess";
 import {
+  CommentNode as CommentNodeI,
   CommentReportView,
   CommentView,
   ResolveCommentReport,
   SubscribedType,
 } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { CommentNode as CommentNodeI } from "../../interfaces";
+import { CommentViewType } from "../../interfaces";
 import { WebSocketService } from "../../services";
 import { auth, wsClient } from "../../utils";
 import { Icon } from "../common/icon";
@@ -44,18 +45,20 @@ export class CommentReport extends Component<CommentReportProps, any> {
       subscribed: SubscribedType.NotSubscribed,
       saved: false,
       creator_blocked: false,
-      recipient: None,
       my_vote: r.my_vote,
     };
 
     let node: CommentNodeI = {
       comment_view,
+      children: [],
+      depth: 0,
     };
 
     return (
       <div>
         <CommentNode
           node={node}
+          viewType={CommentViewType.Flat}
           moderators={None}
           admins={None}
           enableDownvotes={true}
diff --git a/src/shared/components/common/sort-select.tsx b/src/shared/components/common/sort-select.tsx
index 11880647..3f815f5b 100644
--- a/src/shared/components/common/sort-select.tsx
+++ b/src/shared/components/common/sort-select.tsx
@@ -51,6 +51,7 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
             <option value={SortType.Active}>{i18n.t("active")}</option>,
           ]}
           <option value={SortType.New}>{i18n.t("new")}</option>
+          <option value={SortType.Old}>{i18n.t("old")}</option>
           {!this.props.hideMostComments && [
             <option value={SortType.MostComments}>
               {i18n.t("most_comments")}
diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx
index 29e3a97d..8c8c2763 100644
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@@ -28,7 +28,11 @@ import {
 } from "lemmy-js-client";
 import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
-import { DataType, InitialFetchRequest } from "../../interfaces";
+import {
+  CommentViewType,
+  DataType,
+  InitialFetchRequest,
+} from "../../interfaces";
 import { UserService, WebSocketService } from "../../services";
 import {
   auth,
@@ -45,6 +49,7 @@ import {
   getPageFromProps,
   getSortTypeFromProps,
   notifyPost,
+  postToCommentSortType,
   relTags,
   restoreScrollPosition,
   saveCommentRes,
@@ -231,9 +236,12 @@ export class Community extends Component<any, State> {
         community_id: None,
         page,
         limit: Some(fetchLimit),
-        sort,
+        max_depth: None,
+        sort: sort.map(postToCommentSortType),
         type_: Some(ListingType.Community),
         saved_only: Some(false),
+        post_id: None,
+        parent_id: None,
         auth: req.auth,
       });
       promises.push(Promise.resolve());
@@ -387,6 +395,7 @@ export class Community extends Component<any, State> {
     ) : (
       <CommentNodes
         nodes={commentsToFlatNodes(this.state.comments)}
+        viewType={CommentViewType.Flat}
         noIndent
         showContext
         enableDownvotes={enableDownvotes(this.state.siteRes)}
@@ -497,11 +506,14 @@ export class Community extends Component<any, State> {
       let form = new GetComments({
         page: Some(this.state.page),
         limit: Some(fetchLimit),
-        sort: Some(this.state.sort),
+        max_depth: None,
+        sort: Some(postToCommentSortType(this.state.sort)),
         type_: Some(ListingType.Community),
         community_name: Some(this.state.communityName),
         community_id: None,
         saved_only: Some(false),
+        post_id: None,
+        parent_id: None,
         auth: auth(false).ok(),
       });
       WebSocketService.Instance.send(wsClient.getComments(form));
diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 66180342..53559df9 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -30,7 +30,11 @@ import {
 } from "lemmy-js-client";
 import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
-import { DataType, InitialFetchRequest } from "../../interfaces";
+import {
+  CommentViewType,
+  DataType,
+  InitialFetchRequest,
+} from "../../interfaces";
 import { UserService, WebSocketService } from "../../services";
 import {
   auth,
@@ -48,6 +52,7 @@ import {
   getSortTypeFromProps,
   isBrowser,
   notifyPost,
+  postToCommentSortType,
   relTags,
   restoreScrollPosition,
   saveCommentRes,
@@ -263,9 +268,12 @@ export class Home extends Component<any, HomeState> {
         community_name: None,
         page,
         limit: Some(fetchLimit),
-        sort,
+        max_depth: None,
+        sort: sort.map(postToCommentSortType),
         type_,
         saved_only: Some(false),
+        post_id: None,
+        parent_id: None,
         auth: req.auth,
       });
       promises.push(Promise.resolve());
@@ -565,6 +573,7 @@ export class Home extends Component<any, HomeState> {
     ) : (
       <CommentNodes
         nodes={commentsToFlatNodes(this.state.comments)}
+        viewType={CommentViewType.Flat}
         moderators={None}
         admins={None}
         maxCommentsShown={None}
@@ -694,8 +703,11 @@ export class Home extends Component<any, HomeState> {
         community_name: None,
         page: Some(this.state.page),
         limit: Some(fetchLimit),
-        sort: Some(this.state.sort),
+        max_depth: None,
+        sort: Some(postToCommentSortType(this.state.sort)),
         saved_only: Some(false),
+        post_id: None,
+        parent_id: None,
         auth: auth(false).ok(),
         type_: Some(this.state.listingType),
       });
diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx
index e2faffcc..2a8a7b29 100644
--- a/src/shared/components/person/inbox.tsx
+++ b/src/shared/components/person/inbox.tsx
@@ -2,8 +2,11 @@ import { None, Some } from "@sniptt/monads";
 import { Component, linkEvent } from "inferno";
 import {
   BlockPersonResponse,
+  CommentReplyResponse,
+  CommentReplyView,
   CommentReportResponse,
   CommentResponse,
+  CommentSortType,
   CommentView,
   GetPersonMentions,
   GetPersonMentionsResponse,
@@ -17,14 +20,13 @@ import {
   PrivateMessageResponse,
   PrivateMessagesResponse,
   PrivateMessageView,
-  SortType,
   UserOperation,
   wsJsonToRes,
   wsUserOp,
 } from "lemmy-js-client";
 import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
-import { InitialFetchRequest } from "../../interfaces";
+import { CommentViewType, InitialFetchRequest } from "../../interfaces";
 import { UserService, WebSocketService } from "../../services";
 import {
   auth,
@@ -44,10 +46,10 @@ import {
   wsSubscribe,
 } from "../../utils";
 import { CommentNodes } from "../comment/comment-nodes";
+import { CommentSortSelect } from "../common/comment-sort-select";
 import { HtmlTags } from "../common/html-tags";
 import { Icon, Spinner } from "../common/icon";
 import { Paginator } from "../common/paginator";
-import { SortSelect } from "../common/sort-select";
 import { PrivateMessage } from "../private_message/private-message";
 
 enum UnreadOrAll {
@@ -70,18 +72,18 @@ enum ReplyEnum {
 type ReplyType = {
   id: number;
   type_: ReplyEnum;
-  view: CommentView | PrivateMessageView | PersonMentionView;
+  view: CommentView | PrivateMessageView | PersonMentionView | CommentReplyView;
   published: string;
 };
 
 interface InboxState {
   unreadOrAll: UnreadOrAll;
   messageType: MessageType;
-  replies: CommentView[];
+  replies: CommentReplyView[];
   mentions: PersonMentionView[];
   messages: PrivateMessageView[];
   combined: ReplyType[];
-  sort: SortType;
+  sort: CommentSortType;
   page: number;
   siteRes: GetSiteResponse;
   loading: boolean;
@@ -102,7 +104,7 @@ export class Inbox extends Component<any, InboxState> {
     mentions: [],
     messages: [],
     combined: [],
-    sort: SortType.New,
+    sort: CommentSortType.New,
     page: 1,
     siteRes: this.isoData.site_res,
     loading: true,
@@ -323,19 +325,17 @@ export class Inbox extends Component<any, InboxState> {
       <div className="mb-2">
         <span class="mr-3">{this.unreadOrAllRadios()}</span>
         <span class="mr-3">{this.messageTypeRadios()}</span>
-        <SortSelect
+        <CommentSortSelect
           sort={this.state.sort}
           onChange={this.handleSortChange}
-          hideHot
-          hideMostComments
         />
       </div>
     );
   }
 
-  replyToReplyType(r: CommentView): ReplyType {
+  replyToReplyType(r: CommentReplyView): ReplyType {
     return {
-      id: r.comment.id,
+      id: r.comment_reply.id,
       type_: ReplyEnum.Reply,
       view: r,
       published: r.comment.published,
@@ -382,7 +382,10 @@ export class Inbox extends Component<any, InboxState> {
         return (
           <CommentNodes
             key={i.id}
-            nodes={[{ comment_view: i.view as CommentView }]}
+            nodes={[
+              { comment_view: i.view as CommentView, children: [], depth: 0 },
+            ]}
+            viewType={CommentViewType.Flat}
             moderators={None}
             admins={None}
             maxCommentsShown={None}
@@ -397,7 +400,14 @@ export class Inbox extends Component<any, InboxState> {
         return (
           <CommentNodes
             key={i.id}
-            nodes={[{ comment_view: i.view as PersonMentionView }]}
+            nodes={[
+              {
+                comment_view: i.view as PersonMentionView,
+                children: [],
+                depth: 0,
+              },
+            ]}
+            viewType={CommentViewType.Flat}
             moderators={None}
             admins={None}
             maxCommentsShown={None}
@@ -429,6 +439,7 @@ export class Inbox extends Component<any, InboxState> {
       <div>
         <CommentNodes
           nodes={commentsToFlatNodes(this.state.replies)}
+          viewType={CommentViewType.Flat}
           moderators={None}
           admins={None}
           maxCommentsShown={None}
@@ -448,7 +459,8 @@ export class Inbox extends Component<any, InboxState> {
         {this.state.mentions.map(umv => (
           <CommentNodes
             key={umv.person_mention.id}
-            nodes={[{ comment_view: umv }]}
+            nodes={[{ comment_view: umv, children: [], depth: 0 }]}
+            viewType={CommentViewType.Flat}
             moderators={None}
             admins={None}
             maxCommentsShown={None}
@@ -498,9 +510,11 @@ export class Inbox extends Component<any, InboxState> {
   static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
     let promises: Promise<any>[] = [];
 
+    let sort = Some(CommentSortType.New);
+
     // It can be /u/me, or /username/1
     let repliesForm = new GetReplies({
-      sort: Some(SortType.New),
+      sort,
       unread_only: Some(true),
       page: Some(1),
       limit: Some(fetchLimit),
@@ -509,7 +523,7 @@ export class Inbox extends Component<any, InboxState> {
     promises.push(req.client.getReplies(repliesForm));
 
     let personMentionsForm = new GetPersonMentions({
-      sort: Some(SortType.New),
+      sort,
       unread_only: Some(true),
       page: Some(1),
       limit: Some(fetchLimit),
@@ -565,7 +579,7 @@ export class Inbox extends Component<any, InboxState> {
     );
   }
 
-  handleSortChange(val: SortType) {
+  handleSortChange(val: CommentSortType) {
     this.state.sort = val;
     this.state.page = 1;
     this.setState(this.state);
@@ -581,6 +595,7 @@ export class Inbox extends Component<any, InboxState> {
     i.state.replies = [];
     i.state.mentions = [];
     i.state.messages = [];
+    i.state.combined = i.buildCombined();
     UserService.Instance.unreadInboxCountSub.next(0);
     window.scrollTo(0, 0);
     i.setState(i.state);
@@ -716,34 +731,51 @@ export class Inbox extends Component<any, InboxState> {
       let data = wsJsonToRes<CommentResponse>(msg, CommentResponse);
       editCommentRes(data.comment_view, this.state.replies);
       this.setState(this.state);
-    } else if (op == UserOperation.MarkCommentAsRead) {
-      let data = wsJsonToRes<CommentResponse>(msg, CommentResponse);
+    } else if (op == UserOperation.MarkCommentReplyAsRead) {
+      let data = wsJsonToRes<CommentReplyResponse>(msg, CommentReplyResponse);
+      console.log(data);
 
-      // If youre in the unread view, just remove it from the list
-      if (
-        this.state.unreadOrAll == UnreadOrAll.Unread &&
-        data.comment_view.comment.read
-      ) {
-        this.state.replies = this.state.replies.filter(
-          r => r.comment.id !== data.comment_view.comment.id
-        );
-        this.state.combined = this.state.combined.filter(
-          r => r.id !== data.comment_view.comment.id
-        );
-      } else {
-        let found = this.state.replies.find(
-          c => c.comment.id == data.comment_view.comment.id
-        );
+      let found = this.state.replies.find(
+        c => c.comment_reply.id == data.comment_reply_view.comment_reply.id
+      );
+
+      if (found) {
         let combinedView = this.state.combined.find(
-          i => i.id == data.comment_view.comment.id
-        ).view as CommentView;
-        found.comment.read = combinedView.comment.read =
-          data.comment_view.comment.read;
-      }
+          i => i.id == data.comment_reply_view.comment_reply.id
+        ).view as CommentReplyView;
+        found.comment.content = combinedView.comment.content =
+          data.comment_reply_view.comment.content;
+        found.comment.updated = combinedView.comment.updated =
+          data.comment_reply_view.comment.updated;
+        found.comment.removed = combinedView.comment.removed =
+          data.comment_reply_view.comment.removed;
+        found.comment.deleted = combinedView.comment.deleted =
+          data.comment_reply_view.comment.deleted;
+        found.counts.upvotes = combinedView.counts.upvotes =
+          data.comment_reply_view.counts.upvotes;
+        found.counts.downvotes = combinedView.counts.downvotes =
+          data.comment_reply_view.counts.downvotes;
+        found.counts.score = combinedView.counts.score =
+          data.comment_reply_view.counts.score;
 
-      this.sendUnreadCount(data.comment_view.comment.read);
+        // If youre in the unread view, just remove it from the list
+        if (
+          this.state.unreadOrAll == UnreadOrAll.Unread &&
+          data.comment_reply_view.comment_reply.read
+        ) {
+          this.state.replies = this.state.replies.filter(
+            r => r.comment_reply.id !== data.comment_reply_view.comment_reply.id
+          );
+          this.state.combined = this.state.combined.filter(
+            r => r.id !== data.comment_reply_view.comment_reply.id
+          );
+        } else {
+          found.comment_reply.read = combinedView.comment_reply.read =
+            data.comment_reply_view.comment_reply.read;
+        }
+      }
+      this.sendUnreadCount(data.comment_reply_view.comment_reply.read);
       this.setState(this.state);
-      setupTippy();
     } else if (op == UserOperation.MarkPersonMentionAsRead) {
       let data = wsJsonToRes<PersonMentionResponse>(msg, PersonMentionResponse);
 
@@ -791,71 +823,6 @@ export class Inbox extends Component<any, InboxState> {
       }
       this.sendUnreadCount(data.person_mention_view.person_mention.read);
       this.setState(this.state);
-    } else if (op == UserOperation.CreateComment) {
-      let data = wsJsonToRes<CommentResponse>(msg, CommentResponse);
-
-      UserService.Instance.myUserInfo.match({
-        some: mui => {
-          if (data.recipient_ids.includes(mui.local_user_view.local_user.id)) {
-            this.state.replies.unshift(data.comment_view);
-            this.state.combined.unshift(
-              this.replyToReplyType(data.comment_view)
-            );
-            this.setState(this.state);
-          } else if (
-            data.comment_view.creator.id == mui.local_user_view.person.id
-          ) {
-            // If youre in the unread view, just remove it from the list
-            if (this.state.unreadOrAll == UnreadOrAll.Unread) {
-              this.state.replies = this.state.replies.filter(
-                r =>
-                  r.comment.id !==
-                  data.comment_view.comment.parent_id.unwrapOr(0)
-              );
-              this.state.mentions = this.state.mentions.filter(
-                m =>
-                  m.comment.id !==
-                  data.comment_view.comment.parent_id.unwrapOr(0)
-              );
-              this.state.combined = this.state.combined.filter(r => {
-                if (this.isMention(r.view))
-                  return (
-                    r.view.comment.id !==
-                    data.comment_view.comment.parent_id.unwrapOr(0)
-                  );
-                else
-                  return (
-                    r.id !== data.comment_view.comment.parent_id.unwrapOr(0)
-                  );
-              });
-            } else {
-              let mention_found = this.state.mentions.find(
-                i =>
-                  i.comment.id ==
-                  data.comment_view.comment.parent_id.unwrapOr(0)
-              );
-              if (mention_found) {
-                mention_found.person_mention.read = true;
-              }
-              let reply_found = this.state.replies.find(
-                i =>
-                  i.comment.id ==
-                  data.comment_view.comment.parent_id.unwrapOr(0)
-              );
-              if (reply_found) {
-                reply_found.comment.read = true;
-              }
-              this.state.combined = this.buildCombined();
-            }
-            this.sendUnreadCount(true);
-            this.setState(this.state);
-            setupTippy();
-            // TODO this seems wrong, you should be using form_id
-            toast(i18n.t("reply_sent"));
-          }
-        },
-        none: void 0,
-      });
     } else if (op == UserOperation.CreatePrivateMessage) {
       let data = wsJsonToRes<PrivateMessageResponse>(
         msg,
@@ -904,4 +871,8 @@ export class Inbox extends Component<any, InboxState> {
   isMention(view: any): view is PersonMentionView {
     return (view as PersonMentionView).person_mention !== undefined;
   }
+
+  isReply(view: any): view is CommentReplyView {
+    return (view as CommentReplyView).comment_reply !== undefined;
+  }
 }
diff --git a/src/shared/components/person/person-details.tsx b/src/shared/components/person/person-details.tsx
index 0dabf2af..6ce7a8b8 100644
--- a/src/shared/components/person/person-details.tsx
+++ b/src/shared/components/person/person-details.tsx
@@ -7,7 +7,7 @@ import {
   PostView,
   SortType,
 } from "lemmy-js-client";
-import { PersonDetailsView } from "../../interfaces";
+import { CommentViewType, PersonDetailsView } from "../../interfaces";
 import { commentsToFlatNodes, setupTippy } from "../../utils";
 import { CommentNodes } from "../comment/comment-nodes";
 import { Paginator } from "../common/paginator";
@@ -89,7 +89,8 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
         return (
           <CommentNodes
             key={i.id}
-            nodes={[{ comment_view: c }]}
+            nodes={[{ comment_view: c, children: [], depth: 0 }]}
+            viewType={CommentViewType.Flat}
             admins={Some(this.props.admins)}
             moderators={None}
             maxCommentsShown={None}
@@ -159,6 +160,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
       <div>
         <CommentNodes
           nodes={commentsToFlatNodes(this.props.personRes.comments)}
+          viewType={CommentViewType.Flat}
           admins={Some(this.props.admins)}
           moderators={None}
           maxCommentsShown={None}
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index cbe84d91..672d3d69 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -408,7 +408,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           className={`btn-animate btn btn-link p-0 ${
             this.state.my_vote.unwrapOr(0) == 1 ? "text-info" : "text-muted"
           }`}
-          onClick={linkEvent(this, this.handlePostLike)}
+          onClick={this.handlePostLike}
           data-tippy-content={i18n.t("upvote")}
           aria-label={i18n.t("upvote")}
         >
@@ -431,7 +431,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                 ? "text-danger"
                 : "text-muted"
             }`}
-            onClick={linkEvent(this, this.handlePostDisLike)}
+            onClick={this.handlePostDisLike}
             data-tippy-content={i18n.t("downvote")}
             aria-label={i18n.t("downvote")}
           >
@@ -647,7 +647,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               this.state.my_vote.unwrapOr(0) == 1 ? "text-info" : "text-muted"
             }`}
             {...tippy}
-            onClick={linkEvent(this, this.handlePostLike)}
+            onClick={this.handlePostLike}
             aria-label={i18n.t("upvote")}
           >
             <Icon icon="arrow-up1" classes="icon-inline small" />
@@ -662,7 +662,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                   ? "text-danger"
                   : "text-muted"
               }`}
-              onClick={linkEvent(this, this.handlePostDisLike)}
+              onClick={this.handlePostDisLike}
               {...tippy}
               aria-label={i18n.t("downvote")}
             >
@@ -1250,7 +1250,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     });
   }
 
-  handlePostLike(i: PostListing, event: any) {
+  handlePostLike(event: any) {
     event.preventDefault();
     if (UserService.Instance.myUserInfo.isNone()) {
       this.context.router.history.push(`/login`);
@@ -1260,31 +1260,31 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     let newVote = myVote == 1 ? 0 : 1;
 
     if (myVote == 1) {
-      i.state.score--;
-      i.state.upvotes--;
+      this.state.score--;
+      this.state.upvotes--;
     } else if (myVote == -1) {
-      i.state.downvotes--;
-      i.state.upvotes++;
-      i.state.score += 2;
+      this.state.downvotes--;
+      this.state.upvotes++;
+      this.state.score += 2;
     } else {
-      i.state.upvotes++;
-      i.state.score++;
+      this.state.upvotes++;
+      this.state.score++;
     }
 
-    i.state.my_vote = Some(newVote);
+    this.state.my_vote = Some(newVote);
 
     let form = new CreatePostLike({
-      post_id: i.props.post_view.post.id,
+      post_id: this.props.post_view.post.id,
       score: newVote,
       auth: auth().unwrap(),
     });
 
     WebSocketService.Instance.send(wsClient.likePost(form));
-    i.setState(i.state);
+    this.setState(this.state);
     setupTippy();
   }
 
-  handlePostDisLike(i: PostListing, event: any) {
+  handlePostDisLike(event: any) {
     event.preventDefault();
     if (UserService.Instance.myUserInfo.isNone()) {
       this.context.router.history.push(`/login`);
@@ -1294,27 +1294,27 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     let newVote = myVote == -1 ? 0 : -1;
 
     if (myVote == 1) {
-      i.state.score -= 2;
-      i.state.upvotes--;
-      i.state.downvotes++;
+      this.state.score -= 2;
+      this.state.upvotes--;
+      this.state.downvotes++;
     } else if (myVote == -1) {
-      i.state.downvotes--;
-      i.state.score++;
+      this.state.downvotes--;
+      this.state.score++;
     } else {
-      i.state.downvotes++;
-      i.state.score--;
+      this.state.downvotes++;
+      this.state.score--;
     }
 
-    i.state.my_vote = Some(newVote);
+    this.state.my_vote = Some(newVote);
 
     let form = new CreatePostLike({
-      post_id: i.props.post_view.post.id,
+      post_id: this.props.post_view.post.id,
       score: newVote,
       auth: auth().unwrap(),
     });
 
     WebSocketService.Instance.send(wsClient.likePost(form));
-    i.setState(i.state);
+    this.setState(this.state);
     setupTippy();
   }
 
diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index 1306caec..c54b2d22 100644
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -26,8 +26,8 @@ import {
   wsUserOp,
 } from "lemmy-js-client";
 import { Subscription } from "rxjs";
-import { InitialFetchRequest } from "shared/interfaces";
 import { i18n } from "../i18next";
+import { CommentViewType, InitialFetchRequest } from "../interfaces";
 import { WebSocketService } from "../services";
 import {
   auth,
@@ -594,7 +594,14 @@ export class Search extends Component<any, SearchState> {
               {i.type_ == "comments" && (
                 <CommentNodes
                   key={(i.data as CommentView).comment.id}
-                  nodes={[{ comment_view: i.data as CommentView }]}
+                  nodes={[
+                    {
+                      comment_view: i.data as CommentView,
+                      children: [],
+                      depth: 0,
+                    },
+                  ]}
+                  viewType={CommentViewType.Flat}
                   moderators={None}
                   admins={None}
                   maxCommentsShown={None}
@@ -631,6 +638,7 @@ export class Search extends Component<any, SearchState> {
     return (
       <CommentNodes
         nodes={commentsToFlatNodes(comments)}
+        viewType={CommentViewType.Flat}
         locked
         noIndent
         moderators={None}
diff --git a/src/shared/interfaces.ts b/src/shared/interfaces.ts
index 0a157b57..c25f5b16 100644
--- a/src/shared/interfaces.ts
+++ b/src/shared/interfaces.ts
@@ -1,10 +1,5 @@
 import { Either, Option } from "@sniptt/monads";
-import {
-  CommentView,
-  GetSiteResponse,
-  LemmyHttp,
-  PersonMentionView,
-} from "lemmy-js-client";
+import { GetSiteResponse, LemmyHttp } from "lemmy-js-client";
 
 /**
  * This contains serialized data, it needs to be deserialized before use.
@@ -32,12 +27,6 @@ export interface InitialFetchRequest {
   path: string;
 }
 
-export interface CommentNode {
-  comment_view: CommentView | PersonMentionView;
-  children?: CommentNode[];
-  depth?: number;
-}
-
 export interface PostFormParams {
   name: Option<string>;
   url: Option<string>;
@@ -45,16 +34,9 @@ export interface PostFormParams {
   nameOrId: Option<Either<string, number>>;
 }
 
-export enum CommentSortType {
-  Hot,
-  Top,
-  New,
-  Old,
-}
-
 export enum CommentViewType {
   Tree,
-  Chat,
+  Flat,
 }
 
 export enum DataType {
diff --git a/src/shared/routes.ts b/src/shared/routes.ts
index 8035471b..336503f2 100644
--- a/src/shared/routes.ts
+++ b/src/shared/routes.ts
@@ -72,12 +72,12 @@ export const routes: IRoutePropsWithFetch[] = [
     fetchInitialData: req => Communities.fetchInitialData(req),
   },
   {
-    path: `/post/:id/comment/:comment_id`,
+    path: `/post/:post_id`,
     component: Post,
     fetchInitialData: req => Post.fetchInitialData(req),
   },
   {
-    path: `/post/:id`,
+    path: `/comment/:comment_id`,
     component: Post,
     fetchInitialData: req => Post.fetchInitialData(req),
   },