diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index f6c73bc2ad42..0c83b3fd7376 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -7026,6 +7026,10 @@
     "message": "Type a reply...",
     "description": "Placeholder text for the story reply modal"
   },
+  "StoryViewsNRepliesModal__no-replies": {
+    "message": "No replies yet",
+    "description": "Placeholder text for when there are no replies"
+  },
   "StoryViewsNRepliesModal__tab--views": {
     "message": "Views",
     "description": "Title for views tab"
diff --git a/stylesheets/components/StoryViewsNRepliesModal.scss b/stylesheets/components/StoryViewsNRepliesModal.scss
index a7989d385235..b8e291c6914d 100644
--- a/stylesheets/components/StoryViewsNRepliesModal.scss
+++ b/stylesheets/components/StoryViewsNRepliesModal.scss
@@ -3,9 +3,27 @@
 
 .StoryViewsNRepliesModal {
   min-width: 320px;
+  overflow: hidden;
 
   &--group {
-    min-height: 360px;
+    display: flex;
+    flex-direction: column;
+    min-height: 400px;
+  }
+
+  &__replies {
+    flex: 1;
+    max-height: 75vh;
+    overflow-y: overlay;
+
+    &--none {
+      align-items: center;
+      color: $color-gray-45;
+      display: flex;
+      flex: 1;
+      justify-content: center;
+      user-select: none;
+    }
   }
 
   &__overlay-container {
diff --git a/stylesheets/components/TextAttachment.scss b/stylesheets/components/TextAttachment.scss
index a4f48bc22a96..0fac488441ca 100644
--- a/stylesheets/components/TextAttachment.scss
+++ b/stylesheets/components/TextAttachment.scss
@@ -6,7 +6,6 @@
 
   &__story {
     align-items: center;
-    border-radius: 12px;
     display: flex;
     flex-direction: column;
     height: 1280px;
diff --git a/ts/components/StoryViewer.tsx b/ts/components/StoryViewer.tsx
index 5dc369ad423c..be95a03b3813 100644
--- a/ts/components/StoryViewer.tsx
+++ b/ts/components/StoryViewer.tsx
@@ -60,6 +60,7 @@ export type PropsType = {
   replyState?: ReplyStateType;
   skinTone?: number;
   stories: Array<StoryViewType>;
+  views?: Array<string>;
 };
 
 const CAPTION_BUFFER = 20;
@@ -88,6 +89,7 @@ export const StoryViewer = ({
   replyState,
   skinTone,
   stories,
+  views,
 }: PropsType): JSX.Element => {
   const [currentStoryIndex, setCurrentStoryIndex] = useState(0);
   const [storyDuration, setStoryDuration] = useState<number | undefined>();
@@ -268,7 +270,7 @@ export const StoryViewer = ({
   const replies =
     replyState && replyState.messageId === messageId ? replyState.replies : [];
 
-  const viewCount = 0;
+  const viewCount = (views || []).length;
   const replyCount = replies.length;
 
   return (
@@ -388,49 +390,46 @@ export const StoryViewer = ({
                 ))}
               </div>
               <div className="StoryViewer__actions">
-                {isMe ? (
-                  <>
-                    {viewCount &&
-                      (viewCount === 1 ? (
-                        <Intl
-                          i18n={i18n}
-                          id="MyStories__views--singular"
-                          components={[<strong>{viewCount}</strong>]}
-                        />
-                      ) : (
-                        <Intl
-                          i18n={i18n}
-                          id="MyStories__views--plural"
-                          components={[<strong>{viewCount}</strong>]}
-                        />
-                      ))}
-                    {viewCount && replyCount && ' '}
-                    {replyCount &&
-                      (replyCount === 1 ? (
-                        <Intl
-                          i18n={i18n}
-                          id="MyStories__replies--singular"
-                          components={[<strong>{replyCount}</strong>]}
-                        />
-                      ) : (
-                        <Intl
-                          i18n={i18n}
-                          id="MyStories__replies--plural"
-                          components={[<strong>{replyCount}</strong>]}
-                        />
-                      ))}
-                  </>
-                ) : (
-                  canReply && (
-                    <button
-                      className="StoryViewer__reply"
-                      onClick={() => setHasReplyModal(true)}
-                      tabIndex={0}
-                      type="button"
-                    >
-                      {i18n('StoryViewer__reply')}
-                    </button>
-                  )
+                {canReply && (
+                  <button
+                    className="StoryViewer__reply"
+                    onClick={() => setHasReplyModal(true)}
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <>
+                      {viewCount > 0 &&
+                        (viewCount === 1 ? (
+                          <Intl
+                            i18n={i18n}
+                            id="MyStories__views--singular"
+                            components={[<strong>{viewCount}</strong>]}
+                          />
+                        ) : (
+                          <Intl
+                            i18n={i18n}
+                            id="MyStories__views--plural"
+                            components={[<strong>{viewCount}</strong>]}
+                          />
+                        ))}
+                      {viewCount > 0 && replyCount > 0 && ' '}
+                      {replyCount > 0 &&
+                        (replyCount === 1 ? (
+                          <Intl
+                            i18n={i18n}
+                            id="MyStories__replies--singular"
+                            components={[<strong>{replyCount}</strong>]}
+                          />
+                        ) : (
+                          <Intl
+                            i18n={i18n}
+                            id="MyStories__replies--plural"
+                            components={[<strong>{replyCount}</strong>]}
+                          />
+                        ))}
+                      {!viewCount && !replyCount && i18n('StoryViewer__reply')}
+                    </>
+                  </button>
                 )}
               </div>
             </div>
@@ -454,13 +453,16 @@ export const StoryViewer = ({
             authorTitle={title}
             getPreferredBadge={getPreferredBadge}
             i18n={i18n}
+            isGroupStory={isGroupStory}
             isMyStory={isMe}
             onClose={() => setHasReplyModal(false)}
             onReact={emoji => {
               onReactToStory(emoji, visibleStory);
             }}
             onReply={(message, mentions, replyTimestamp) => {
-              setHasReplyModal(false);
+              if (!isGroupStory) {
+                setHasReplyModal(false);
+              }
               onReplyToStory(message, mentions, replyTimestamp, visibleStory);
             }}
             onSetSkinTone={onSetSkinTone}
diff --git a/ts/components/StoryViewsNRepliesModal.stories.tsx b/ts/components/StoryViewsNRepliesModal.stories.tsx
index a7faa3fe3634..72cf82721f68 100644
--- a/ts/components/StoryViewsNRepliesModal.stories.tsx
+++ b/ts/components/StoryViewsNRepliesModal.stories.tsx
@@ -112,12 +112,17 @@ story.add('Views only', () => (
   />
 ));
 
+story.add('In a group (no replies)', () => (
+  <StoryViewsNRepliesModal {...getDefaultProps()} isGroupStory />
+));
+
 story.add('In a group', () => {
   const { views, replies } = getViewsAndReplies();
 
   return (
     <StoryViewsNRepliesModal
       {...getDefaultProps()}
+      isGroupStory
       replies={replies}
       views={views}
     />
diff --git a/ts/components/StoryViewsNRepliesModal.tsx b/ts/components/StoryViewsNRepliesModal.tsx
index 6d1bfa16e70d..15e12120c1d6 100644
--- a/ts/components/StoryViewsNRepliesModal.tsx
+++ b/ts/components/StoryViewsNRepliesModal.tsx
@@ -1,7 +1,7 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { usePopper } from 'react-popper';
 import type { AttachmentType } from '../types/Attachment';
@@ -52,6 +52,7 @@ export type PropsType = {
   authorTitle: string;
   getPreferredBadge: PreferredBadgeSelectorType;
   i18n: LocalizerType;
+  isGroupStory?: boolean;
   isMyStory?: boolean;
   onClose: () => unknown;
   onReact: (emoji: string) => unknown;
@@ -76,6 +77,7 @@ export const StoryViewsNRepliesModal = ({
   authorTitle,
   getPreferredBadge,
   i18n,
+  isGroupStory,
   isMyStory,
   onClose,
   onReact,
@@ -91,7 +93,8 @@ export const StoryViewsNRepliesModal = ({
   storyPreviewAttachment,
   views,
 }: PropsType): JSX.Element => {
-  const inputApiRef = React.useRef<InputApi | undefined>();
+  const inputApiRef = useRef<InputApi | undefined>();
+  const [bottom, setBottom] = useState<HTMLDivElement | null>(null);
   const [messageBodyText, setMessageBodyText] = useState('');
   const [showReactionPicker, setShowReactionPicker] = useState(false);
 
@@ -122,13 +125,19 @@ export const StoryViewsNRepliesModal = ({
     strategy: 'fixed',
   });
 
+  useEffect(() => {
+    if (replies.length) {
+      bottom?.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [bottom, replies.length]);
+
   let composerElement: JSX.Element | undefined;
 
   if (!isMyStory) {
     composerElement = (
       <div className="StoryViewsNRepliesModal__compose-container">
         <div className="StoryViewsNRepliesModal__composer">
-          {!replies.length && (
+          {!isGroupStory && (
             <Quote
               authorTitle={authorTitle}
               conversationColor="ultramarine"
@@ -154,7 +163,10 @@ export const StoryViewsNRepliesModal = ({
               setMessageBodyText(messageText);
             }}
             onPickEmoji={insertEmoji}
-            onSubmit={onReply}
+            onSubmit={(...args) => {
+              inputApiRef.current?.reset();
+              onReply(...args);
+            }}
             onTextTooLong={onTextTooLong}
             placeholder={i18n('StoryViewsNRepliesModal__placeholder')}
             theme={ThemeType.dark}
@@ -204,12 +216,48 @@ export const StoryViewsNRepliesModal = ({
     );
   }
 
-  const repliesElement = replies.length ? (
-    <div className="StoryViewsNRepliesModal__replies">
-      {replies.map(reply =>
-        reply.reactionEmoji ? (
-          <div className="StoryViewsNRepliesModal__reaction" key={reply.id}>
-            <div className="StoryViewsNRepliesModal__reaction--container">
+  let repliesElement: JSX.Element | undefined;
+
+  if (replies.length) {
+    repliesElement = (
+      <div className="StoryViewsNRepliesModal__replies">
+        {replies.map(reply =>
+          reply.reactionEmoji ? (
+            <div className="StoryViewsNRepliesModal__reaction" key={reply.id}>
+              <div className="StoryViewsNRepliesModal__reaction--container">
+                <Avatar
+                  acceptedMessageRequest={reply.acceptedMessageRequest}
+                  avatarPath={reply.avatarPath}
+                  badge={undefined}
+                  color={getAvatarColor(reply.color)}
+                  conversationType="direct"
+                  i18n={i18n}
+                  isMe={Boolean(reply.isMe)}
+                  name={reply.name}
+                  profileName={reply.profileName}
+                  sharedGroupNames={reply.sharedGroupNames || []}
+                  size={AvatarSize.TWENTY_EIGHT}
+                  title={reply.title}
+                />
+                <div className="StoryViewsNRepliesModal__reaction--body">
+                  <div className="StoryViewsNRepliesModal__reply--title">
+                    <ContactName
+                      contactNameColor={reply.contactNameColor}
+                      title={reply.title}
+                    />
+                  </div>
+                  {i18n('StoryViewsNRepliesModal__reacted')}
+                  <MessageTimestamp
+                    i18n={i18n}
+                    module="StoryViewsNRepliesModal__reply--timestamp"
+                    timestamp={reply.timestamp}
+                  />
+                </div>
+              </div>
+              <Emojify text={reply.reactionEmoji} />
+            </div>
+          ) : (
+            <div className="StoryViewsNRepliesModal__reply" key={reply.id}>
               <Avatar
                 acceptedMessageRequest={reply.acceptedMessageRequest}
                 avatarPath={reply.avatarPath}
@@ -224,14 +272,32 @@ export const StoryViewsNRepliesModal = ({
                 size={AvatarSize.TWENTY_EIGHT}
                 title={reply.title}
               />
-              <div className="StoryViewsNRepliesModal__reaction--body">
+              <div
+                className={classNames(
+                  'StoryViewsNRepliesModal__message-bubble',
+                  {
+                    'StoryViewsNRepliesModal__message-bubble--doe': Boolean(
+                      reply.deletedForEveryone
+                    ),
+                  }
+                )}
+              >
                 <div className="StoryViewsNRepliesModal__reply--title">
                   <ContactName
                     contactNameColor={reply.contactNameColor}
                     title={reply.title}
                   />
                 </div>
-                {i18n('StoryViewsNRepliesModal__reacted')}
+
+                <MessageBody
+                  i18n={i18n}
+                  text={
+                    reply.deletedForEveryone
+                      ? i18n('message--deletedForEveryone')
+                      : String(reply.body)
+                  }
+                />
+
                 <MessageTimestamp
                   i18n={i18n}
                   module="StoryViewsNRepliesModal__reply--timestamp"
@@ -239,58 +305,18 @@ export const StoryViewsNRepliesModal = ({
                 />
               </div>
             </div>
-            <Emojify text={reply.reactionEmoji} />
-          </div>
-        ) : (
-          <div className="StoryViewsNRepliesModal__reply" key={reply.id}>
-            <Avatar
-              acceptedMessageRequest={reply.acceptedMessageRequest}
-              avatarPath={reply.avatarPath}
-              badge={undefined}
-              color={getAvatarColor(reply.color)}
-              conversationType="direct"
-              i18n={i18n}
-              isMe={Boolean(reply.isMe)}
-              name={reply.name}
-              profileName={reply.profileName}
-              sharedGroupNames={reply.sharedGroupNames || []}
-              size={AvatarSize.TWENTY_EIGHT}
-              title={reply.title}
-            />
-            <div
-              className={classNames('StoryViewsNRepliesModal__message-bubble', {
-                'StoryViewsNRepliesModal__message-bubble--doe': Boolean(
-                  reply.deletedForEveryone
-                ),
-              })}
-            >
-              <div className="StoryViewsNRepliesModal__reply--title">
-                <ContactName
-                  contactNameColor={reply.contactNameColor}
-                  title={reply.title}
-                />
-              </div>
-
-              <MessageBody
-                i18n={i18n}
-                text={
-                  reply.deletedForEveryone
-                    ? i18n('message--deletedForEveryone')
-                    : String(reply.body)
-                }
-              />
-
-              <MessageTimestamp
-                i18n={i18n}
-                module="StoryViewsNRepliesModal__reply--timestamp"
-                timestamp={reply.timestamp}
-              />
-            </div>
-          </div>
-        )
-      )}
-    </div>
-  ) : undefined;
+          )
+        )}
+        <div ref={setBottom} />
+      </div>
+    );
+  } else if (isGroupStory) {
+    repliesElement = (
+      <div className="StoryViewsNRepliesModal__replies--none">
+        {i18n('StoryViewsNRepliesModal__no-replies')}
+      </div>
+    );
+  }
 
   const viewsElement = views.length ? (
     <div className="StoryViewsNRepliesModal__views">
@@ -358,28 +384,26 @@ export const StoryViewsNRepliesModal = ({
       </Tabs>
     ) : undefined;
 
-  const hasOnlyViewsElement =
-    viewsElement && !repliesElement && !composerElement;
-
   return (
     <Modal
       i18n={i18n}
-      moduleClassName={classNames('StoryViewsNRepliesModal', {
-        'StoryViewsNRepliesModal--group': Boolean(
-          views.length && replies.length
-        ),
-      })}
+      moduleClassName="StoryViewsNRepliesModal"
       onClose={onClose}
-      useFocusTrap={!hasOnlyViewsElement}
+      useFocusTrap={Boolean(composerElement)}
       theme={Theme.Dark}
     >
-      {tabsElement || (
-        <>
-          {viewsElement}
-          {repliesElement}
-          {composerElement}
-        </>
-      )}
+      <div
+        className={classNames({
+          'StoryViewsNRepliesModal--group': Boolean(isGroupStory),
+        })}
+      >
+        {tabsElement || (
+          <>
+            {viewsElement || repliesElement}
+            {composerElement}
+          </>
+        )}
+      </div>
     </Modal>
   );
 };
diff --git a/ts/util/lint/exceptions.json b/ts/util/lint/exceptions.json
index 6bbb9cbc0e05..d071fdf1d3ec 100644
--- a/ts/util/lint/exceptions.json
+++ b/ts/util/lint/exceptions.json
@@ -7702,7 +7702,7 @@
   {
     "rule": "React-useRef",
     "path": "ts/components/StoryViewsNRepliesModal.tsx",
-    "line": "  const inputApiRef = React.useRef<InputApi | undefined>();",
+    "line": "  const inputApiRef = useRef<InputApi | undefined>();",
     "reasonCategory": "usageTrusted",
     "updated": "2022-02-15T17:57:06.507Z"
   },