diff --git a/stylesheets/components/StoryListItem.scss b/stylesheets/components/StoryListItem.scss
index de182135b1..c75e15e20b 100644
--- a/stylesheets/components/StoryListItem.scss
+++ b/stylesheets/components/StoryListItem.scss
@@ -23,6 +23,13 @@
     }
   }
 
+  &--active-opacity,
+  &--active-opacity__button {
+    &:active {
+      opacity: 0.3;
+    }
+  }
+
   &__click-container {
     align-items: center;
     display: flex;
@@ -139,4 +146,14 @@
       );
     }
   }
+
+  &__chevron::after {
+    content: '';
+    display: inline-block;
+    height: 20px;
+    margin-left: 6px;
+    vertical-align: middle;
+    width: 12px;
+    @include color-svg('../images/icons/v2/chevron-right-20.svg', $color-white);
+  }
 }
diff --git a/ts/components/MyStoriesButton.tsx b/ts/components/MyStoriesButton.tsx
index c34a24606d..b608deaf5d 100644
--- a/ts/components/MyStoriesButton.tsx
+++ b/ts/components/MyStoriesButton.tsx
@@ -8,6 +8,7 @@ import type { LocalizerType } from '../types/Util';
 import type { ShowToastActionCreatorType } from '../state/ducks/toast';
 import type { StoryViewType } from '../types/Stories';
 import { Avatar, AvatarSize } from './Avatar';
+import { HasStories } from '../types/Stories';
 import { StoryImage } from './StoryImage';
 import { getAvatarColor } from '../types/Colors';
 import { MessageTimestamp } from './conversation/MessageTimestamp';
@@ -50,7 +51,7 @@ export const MyStoriesButton = ({
     return (
       <StoriesAddStoryButton
         i18n={i18n}
-        moduleClassName="StoryListItem"
+        moduleClassName="StoryListItem StoryListItem--active-opactiy"
         onAddStory={onAddStory}
         showToast={showToast}
       >
@@ -93,6 +94,7 @@ export const MyStoriesButton = ({
       <div className="MyStories__avatar-container">
         <StoriesAddStoryButton
           i18n={i18n}
+          moduleClassName="StoryListItem--active-opacity"
           onAddStory={onAddStory}
           showToast={showToast}
         >
@@ -108,6 +110,7 @@ export const MyStoriesButton = ({
             profileName={profileName}
             sharedGroupNames={sharedGroupNames}
             size={AvatarSize.FORTY_EIGHT}
+            storyRing={HasStories.Read}
             title={title}
           />
           <div
@@ -117,7 +120,7 @@ export const MyStoriesButton = ({
         </StoriesAddStoryButton>
       </div>
       <div
-        className="StoryListItem__click-container"
+        className="StoryListItem__click-container StoryListItem--active-opacity"
         onClick={onClick}
         onKeyDown={ev => {
           if (ev.key === 'Enter') {
@@ -130,7 +133,7 @@ export const MyStoriesButton = ({
         tabIndex={0}
       >
         <div className="StoryListItem__info">
-          <div className="StoryListItem__info--title">
+          <div className="StoryListItem__info--title StoryListItem__chevron">
             {i18n('Stories__mine')}
           </div>
           <MessageTimestamp