diff --git a/packages/shared/src/components/cards/common/ActionButtons.tsx b/packages/shared/src/components/cards/common/ActionButtons.tsx
index 5b21184be11..23b33a76c0e 100644
--- a/packages/shared/src/components/cards/common/ActionButtons.tsx
+++ b/packages/shared/src/components/cards/common/ActionButtons.tsx
@@ -6,11 +6,14 @@ import InteractionCounter from '../../InteractionCounter';
 import { QuaternaryButton } from '../../buttons/QuaternaryButton';
 import {
   DiscussIcon as CommentIcon,
+  DiscussIconV2 as CommentIconV2,
   LinkIcon,
   DownvoteIcon,
 } from '../../icons';
 import { ButtonColor, ButtonSize, ButtonVariant } from '../../buttons/Button';
 import { useFeedPreviewMode } from '../../../hooks';
+import { useFeature } from '../../GrowthBookProvider';
+import { featureCommentFirstAction } from '../../../lib/featureManagement';
 import { UpvoteButtonIcon } from './UpvoteButtonIcon';
 import { BookmarkButton } from '../../buttons';
 import { IconSize } from '../../Icon';
@@ -79,6 +82,11 @@ const ActionButtonsV1 = ({
   const config = variantConfig[variant];
   const isFeedPreview = useFeedPreviewMode();
   const { getUpvoteAnimation } = useBrandSponsorship();
+  // The experiment only reorders the comment action and swaps its icon;
+  // copy and click behavior stay identical to the control so the only
+  // variable is order.
+  const isCommentFirst = useFeature(featureCommentFirstAction);
+  const CommentIconComponent = isCommentFirst ? CommentIconV2 : CommentIcon;
 
   const {
     isUpvoteActive,
@@ -120,6 +128,17 @@ const ActionButtonsV1 = ({
 
   const commentCount = post.numComments ?? 0;
   const upvoteCount = post.numUpvotes ?? 0;
+  // Keep every count in the action row on the same typography as the upvote
+  // counter so the numbers match in size/style across variants. `!leading-5`
+  // forces the footnote line to fill the counter's h-5 box (it must beat
+  // typo-footnote's own line-height, which is emitted later in the same
+  // utilities layer) so the digits center against the icons instead of
+  // riding high.
+  const counterClassName = classNames(
+    'tabular-nums !leading-5',
+    variant === 'grid' && 'typo-footnote',
+  );
+  const counterLabelClassName = variant === 'grid' ? '!pl-[1px]' : '!pl-0';
 
   const commentButton = config.useCommentLink ? (
     <LinkWithTooltip
@@ -127,7 +146,7 @@ const ActionButtonsV1 = ({
       href={post.commentsPermalink}
     >
       <QuaternaryButton
-        labelClassName="!pl-0"
+        labelClassName={counterLabelClassName}
         id={`post-${post.id}-comment-btn`}
         className="btn-tertiary-blueCheese pointer-events-auto"
         color={ButtonColor.BlueCheese}
@@ -136,12 +155,17 @@ const ActionButtonsV1 = ({
         pressed={post.commented}
         variant={ButtonVariant.Tertiary}
         size={config.buttonSize}
-        icon={<CommentIcon secondary={post.commented} size={config.iconSize} />}
+        icon={
+          <CommentIconComponent
+            secondary={post.commented}
+            size={config.iconSize}
+          />
+        }
         onClick={() => onCommentClick?.(post)}
       >
         {commentCount > 0 && (
           <InteractionCounter
-            className={classNames('tabular-nums', !commentCount && 'invisible')}
+            className={counterClassName}
             value={commentCount}
           />
         )}
@@ -150,9 +174,14 @@ const ActionButtonsV1 = ({
   ) : (
     <Tooltip content="Comments" side="bottom">
       <QuaternaryButton
-        labelClassName="!pl-[1px]"
+        labelClassName={counterLabelClassName}
         id={`post-${post.id}-comment-btn`}
-        icon={<CommentIcon secondary={post.commented} size={config.iconSize} />}
+        icon={
+          <CommentIconComponent
+            secondary={post.commented}
+            size={config.iconSize}
+          />
+        }
         pressed={post.commented}
         onClick={() => onCommentClick?.(post)}
         size={config.buttonSize}
@@ -160,10 +189,7 @@ const ActionButtonsV1 = ({
       >
         {commentCount > 0 && (
           <InteractionCounter
-            className={classNames(
-              'tabular-nums !typo-footnote',
-              !commentCount && 'invisible',
-            )}
+            className={counterClassName}
             value={commentCount}
           />
         )}
@@ -171,70 +197,82 @@ const ActionButtonsV1 = ({
     </Tooltip>
   );
 
-  const buttons = (
-    <div
-      className={classNames(
-        'flex flex-row items-center justify-between',
-        config.containerClassName,
-        className,
-      )}
-    >
-      <div className="flex flex-1 items-center justify-between">
+  const voteButtons = (
+    <>
+      <Tooltip
+        content={isUpvoteActive ? 'Remove upvote' : 'More like this'}
+        side={variant === 'grid' ? 'bottom' : undefined}
+      >
+        <QuaternaryButton
+          labelClassName={counterLabelClassName}
+          className="btn-tertiary-avocado pointer-events-auto"
+          id={`post-${post.id}-upvote-btn`}
+          color={ButtonColor.Avocado}
+          pressed={isUpvoteActive}
+          onClick={onToggleUpvote}
+          variant={ButtonVariant.Tertiary}
+          size={config.buttonSize}
+          icon={
+            <UpvoteButtonIcon
+              secondary={isUpvoteActive}
+              size={config.iconSize}
+              brandAnimation={brandAnimation}
+            />
+          }
+        >
+          {upvoteCount > 0 && (
+            <InteractionCounter
+              className={counterClassName}
+              value={upvoteCount}
+            />
+          )}
+        </QuaternaryButton>
+      </Tooltip>
+      {showDownvoteAction && (
         <Tooltip
-          content={isUpvoteActive ? 'Remove upvote' : 'More like this'}
+          content={isDownvoteActive ? 'Remove downvote' : 'Less like this'}
           side={variant === 'grid' ? 'bottom' : undefined}
         >
           <QuaternaryButton
-            labelClassName={variant === 'grid' ? '!pl-[1px]' : '!pl-0'}
-            className="btn-tertiary-avocado pointer-events-auto"
-            id={`post-${post.id}-upvote-btn`}
-            color={ButtonColor.Avocado}
-            pressed={isUpvoteActive}
-            onClick={onToggleUpvote}
-            variant={ButtonVariant.Tertiary}
-            size={config.buttonSize}
+            className="pointer-events-auto"
+            id={`post-${post.id}-downvote-btn`}
+            color={ButtonColor.Ketchup}
             icon={
-              <UpvoteButtonIcon
-                secondary={isUpvoteActive}
+              <DownvoteIcon
+                secondary={isDownvoteActive}
                 size={config.iconSize}
-                brandAnimation={brandAnimation}
               />
             }
-          >
-            {upvoteCount > 0 && (
-              <InteractionCounter
-                className={classNames(
-                  'tabular-nums',
-                  variant === 'grid' && 'typo-footnote',
-                )}
-                value={upvoteCount}
-              />
-            )}
-          </QuaternaryButton>
+            pressed={isDownvoteActive}
+            onClick={onToggleDownvote}
+            variant={ButtonVariant.Tertiary}
+            size={config.buttonSize}
+          />
         </Tooltip>
-        {showDownvoteAction && (
-          <Tooltip
-            content={isDownvoteActive ? 'Remove downvote' : 'Less like this'}
-            side={variant === 'grid' ? 'bottom' : undefined}
-          >
-            <QuaternaryButton
-              className="pointer-events-auto"
-              id={`post-${post.id}-downvote-btn`}
-              color={ButtonColor.Ketchup}
-              icon={
-                <DownvoteIcon
-                  secondary={isDownvoteActive}
-                  size={config.iconSize}
-                />
-              }
-              pressed={isDownvoteActive}
-              onClick={onToggleDownvote}
-              variant={ButtonVariant.Tertiary}
-              size={config.buttonSize}
-            />
-          </Tooltip>
+      )}
+    </>
+  );
+
+  const buttons = (
+    <div
+      className={classNames(
+        'flex flex-row items-center justify-between',
+        config.containerClassName,
+        className,
+      )}
+    >
+      <div className="flex flex-1 items-center justify-between">
+        {isCommentFirst ? (
+          <>
+            {commentButton}
+            {voteButtons}
+          </>
+        ) : (
+          <>
+            {voteButtons}
+            {commentButton}
+          </>
         )}
-        {commentButton}
         {showAwardAction && (
           <PostAwardAction post={post} iconSize={config.iconSize} />
         )}
diff --git a/packages/shared/src/components/icons/Discuss/filled-v2.svg b/packages/shared/src/components/icons/Discuss/filled-v2.svg
new file mode 100644
index 00000000000..b679e8e6b7d
--- /dev/null
+++ b/packages/shared/src/components/icons/Discuss/filled-v2.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 3.24933L16.8352 3.28658C17.9335 3.40866 18.6137 3.64233 19.1998 4.01299C19.7858 4.38366 20.2359 4.88668 20.5394 5.51029C20.843 6.13391 21 6.83604 21 7.94155V12.7115C21 14.4672 19.7312 15.9655 18 16.2542L15.2566 16.7134L15.152 16.737L15.1107 16.7491C15.0425 16.7703 14.9835 16.7966 14.9221 16.8333L14.8113 16.9083L14.6559 17.0297L11.0577 20.7925C10.6432 21.1242 10.0507 21.0467 9.70664 20.6423C9.39803 20.2796 9.46544 19.4364 9.59837 18.6813L9.67551 18.2816L9.87292 17.3923C9.88456 17.333 9.8909 17.2903 9.89007 17.2675C9.88137 17.0288 9.7087 16.8977 9.56684 16.8038C9.42498 16.7099 9.28268 16.6518 8.87674 16.5938L6.5 16.2542C5.81467 16.1562 5.19734 15.9059 4.67882 15.5386C4.1603 15.1714 3.7406 14.6873 3.45052 14.1219C3.16045 13.5564 3 12.9097 3 12.2171V7.94155C3 6.83604 3.15703 6.13391 3.46057 5.51029C3.76412 4.88668 4.21417 4.38366 4.80022 4.01299C5.38627 3.64233 6.06651 3.40866 7.16485 3.28658L7.5 3.24933C10.4908 2.91689 13.5092 2.91689 16.5 3.24933Z" fill="currentColor"/>
+</svg>
diff --git a/packages/shared/src/components/icons/Discuss/index.tsx b/packages/shared/src/components/icons/Discuss/index.tsx
index 4d68ef70e83..578a884b066 100644
--- a/packages/shared/src/components/icons/Discuss/index.tsx
+++ b/packages/shared/src/components/icons/Discuss/index.tsx
@@ -4,7 +4,13 @@ import type { IconProps } from '../../Icon';
 import Icon from '../../Icon';
 import OutlinedIcon from './outlined.svg';
 import FilledIcon from './filled.svg';
+import OutlinedIconV2 from './outlined-v2.svg';
+import FilledIconV2 from './filled-v2.svg';
 
 export const DiscussIcon = (props: IconProps): ReactElement => (
   <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
 );
+
+export const DiscussIconV2 = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={OutlinedIconV2} IconSecondary={FilledIconV2} />
+);
diff --git a/packages/shared/src/components/icons/Discuss/outlined-v2.svg b/packages/shared/src/components/icons/Discuss/outlined-v2.svg
new file mode 100644
index 00000000000..748a9ebc3fa
--- /dev/null
+++ b/packages/shared/src/components/icons/Discuss/outlined-v2.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.08435 3.21693C10.4265 2.95661 12.7882 2.93058 15.1342 3.13884L15.9156 3.21693L16.1949 3.24797C17.2836 3.36897 18.08 3.62007 18.8014 4.07631C19.5254 4.53416 20.0898 5.16501 20.4648 5.9353C20.8011 6.62613 20.9656 7.35902 20.9951 8.29742L21 8.61806V12.5927C21 14.7183 19.5133 16.5423 17.4552 16.9849L17.2475 17.0245L15.159 17.3712L12.2987 20.3635L12.1518 20.4979C11.1658 21.287 9.75308 21.1214 8.94661 20.1737C8.41509 19.549 8.33064 18.8343 8.43787 17.8834L8.4659 17.6596L8.50442 17.4057L8.537 17.2191L7.20453 17.03C6.6073 16.9447 6.04129 16.7583 5.52766 16.4807L5.27532 16.3344L5.03229 16.1731C4.40312 15.7275 3.89289 15.139 3.54092 14.453C3.23002 13.847 3.04905 13.1779 3.00867 12.481L3 12.1808V8.61806C3 7.5224 3.16154 6.70289 3.53519 5.9353C3.91016 5.16501 4.47463 4.53416 5.19859 4.07631C5.84786 3.66569 6.55788 3.42124 7.48702 3.28825L7.80506 3.24797L8.08435 3.21693ZM15.75 4.70819C13.5069 4.45889 11.2452 4.43396 8.99834 4.6334L8.25 4.70819L7.97071 4.73923C7.05542 4.84096 6.48856 5.03567 6.00018 5.34453C5.51181 5.65339 5.13676 6.07254 4.88381 6.59218C4.65615 7.05985 4.52739 7.58052 4.50392 8.35152L4.5 8.61806V12.1808C4.5 12.7578 4.63371 13.2968 4.87543 13.7679C5.11716 14.2391 5.46692 14.6425 5.89902 14.9485C6.26939 15.2107 6.70026 15.4015 7.17545 15.502L7.41667 15.5447L9.39728 15.8277C9.73557 15.876 9.85415 15.9245 9.97237 16.0027C10.0906 16.0809 10.2345 16.1901 10.2417 16.3891L10.2405 16.4135L10.2274 16.4931L10.0629 17.2341L9.99864 17.5671C9.88787 18.1963 9.83169 18.8989 10.0889 19.2012C10.3517 19.51 10.7885 19.5901 11.1255 19.3883L11.2148 19.3263L14.2132 16.1909L14.3427 16.0897L14.4351 16.0272L14.5115 15.9873L14.5923 15.9571L14.6267 15.947L14.7138 15.9273L17 15.5447C18.3825 15.3142 19.4112 14.1579 19.4945 12.7744L19.5 12.5927V8.61806C19.5 7.69688 19.3691 7.11181 19.1162 6.59218C18.8632 6.07254 18.4882 5.65339 17.9998 5.34453C17.5603 5.06655 17.0572 4.88104 16.2937 4.77256L16.0293 4.73923L15.75 4.70819Z" fill="currentColor"/>
+</svg>
diff --git a/packages/shared/src/components/post/MobilePostFloatingBar.tsx b/packages/shared/src/components/post/MobilePostFloatingBar.tsx
index 4f595daff2a..ce098b1c5a4 100644
--- a/packages/shared/src/components/post/MobilePostFloatingBar.tsx
+++ b/packages/shared/src/components/post/MobilePostFloatingBar.tsx
@@ -3,10 +3,13 @@ import React, { useCallback } from 'react';
 import classNames from 'classnames';
 import {
   DiscussIcon as CommentIcon,
+  DiscussIconV2 as CommentIconV2,
   DownvoteIcon,
   LinkIcon,
   UpvoteIcon,
 } from '../icons';
+import { useFeature } from '../GrowthBookProvider';
+import { featureCommentFirstAction } from '../../lib/featureManagement';
 import type { Post } from '../../graphql/posts';
 import { UserVote } from '../../graphql/posts';
 import { QuaternaryButton } from '../buttons/QuaternaryButton';
@@ -63,6 +66,8 @@ function MobilePostFloatingBarV1({
   const { onClose, onShowPanel } = useBlockPostPanel(post);
   const { toggleUpvote, toggleDownvote } = useVotePost();
   const { toggleBookmark } = useBookmarkPost();
+  const isCommentFirst = useFeature(featureCommentFirstAction);
+  const CommentIconComponent = isCommentFirst ? CommentIconV2 : CommentIcon;
 
   // Match the desktop `PostActions` copy flow: fetch the short URL imperatively
   // on click so anonymous users still get a usable (long) link instead of a no-op.
@@ -110,45 +115,67 @@ function MobilePostFloatingBarV1({
     );
   }, [copyLink, getShortUrl, logEvent, origin, post]);
 
+  const upvoteButton = (
+    <QuaternaryButton
+      id="mobile-upvote-post-btn"
+      aria-label={isUpvoteActive ? 'Remove upvote' : 'Upvote'}
+      pressed={isUpvoteActive}
+      onClick={onToggleUpvote}
+      icon={<UpvoteIcon secondary={isUpvoteActive} />}
+      variant={ButtonVariant.Tertiary}
+      color={ButtonColor.Avocado}
+      size={ButtonSize.Medium}
+    >
+      {upvoteCount > 0 && (
+        <InteractionCounter className={counterClasses} value={upvoteCount} />
+      )}
+    </QuaternaryButton>
+  );
+
+  const downvoteButton = (
+    <QuaternaryButton
+      id="mobile-downvote-post-btn"
+      aria-label={isDownvoteActive ? 'Remove downvote' : 'Downvote'}
+      pressed={isDownvoteActive}
+      onClick={onToggleDownvote}
+      icon={<DownvoteIcon secondary={isDownvoteActive} />}
+      variant={ButtonVariant.Tertiary}
+      color={ButtonColor.Ketchup}
+      size={ButtonSize.Medium}
+    />
+  );
+
+  const commentButton = (
+    <QuaternaryButton
+      id="mobile-comment-post-btn"
+      aria-label="Comment"
+      pressed={post.commented}
+      onClick={() => onCommentClick(LogOrigin.PostCommentButton)}
+      icon={<CommentIconComponent secondary={post.commented} />}
+      size={ButtonSize.Medium}
+      className="btn-tertiary-blueCheese"
+    >
+      {commentCount > 0 && (
+        <InteractionCounter className={counterClasses} value={commentCount} />
+      )}
+    </QuaternaryButton>
+  );
+
   return (
     <div className={classNames(containerClasses, className)}>
-      <QuaternaryButton
-        id="mobile-upvote-post-btn"
-        aria-label={isUpvoteActive ? 'Remove upvote' : 'Upvote'}
-        pressed={isUpvoteActive}
-        onClick={onToggleUpvote}
-        icon={<UpvoteIcon secondary={isUpvoteActive} />}
-        variant={ButtonVariant.Tertiary}
-        color={ButtonColor.Avocado}
-        size={ButtonSize.Medium}
-      >
-        {upvoteCount > 0 && (
-          <InteractionCounter className={counterClasses} value={upvoteCount} />
-        )}
-      </QuaternaryButton>
-      <QuaternaryButton
-        id="mobile-downvote-post-btn"
-        aria-label={isDownvoteActive ? 'Remove downvote' : 'Downvote'}
-        pressed={isDownvoteActive}
-        onClick={onToggleDownvote}
-        icon={<DownvoteIcon secondary={isDownvoteActive} />}
-        variant={ButtonVariant.Tertiary}
-        color={ButtonColor.Ketchup}
-        size={ButtonSize.Medium}
-      />
-      <QuaternaryButton
-        id="mobile-comment-post-btn"
-        aria-label="Comment"
-        pressed={post.commented}
-        onClick={() => onCommentClick(LogOrigin.PostCommentButton)}
-        icon={<CommentIcon secondary={post.commented} />}
-        size={ButtonSize.Medium}
-        className="btn-tertiary-blueCheese"
-      >
-        {commentCount > 0 && (
-          <InteractionCounter className={counterClasses} value={commentCount} />
-        )}
-      </QuaternaryButton>
+      {isCommentFirst ? (
+        <>
+          {commentButton}
+          {upvoteButton}
+          {downvoteButton}
+        </>
+      ) : (
+        <>
+          {upvoteButton}
+          {downvoteButton}
+          {commentButton}
+        </>
+      )}
       <BookmarkButton
         post={post}
         iconSize={IconSize.Medium}
diff --git a/packages/shared/src/components/post/PostActions.tsx b/packages/shared/src/components/post/PostActions.tsx
index 5b0acf6a5dd..f0610cafd19 100644
--- a/packages/shared/src/components/post/PostActions.tsx
+++ b/packages/shared/src/components/post/PostActions.tsx
@@ -4,10 +4,13 @@ import type { QueryKey } from '@tanstack/react-query';
 import classNames from 'classnames';
 import {
   DiscussIcon as CommentIcon,
+  DiscussIconV2 as CommentIconV2,
   DownvoteIcon,
   LinkIcon,
   MedalBadgeIcon,
 } from '../icons';
+import { useFeature } from '../GrowthBookProvider';
+import { featureCommentFirstAction } from '../../lib/featureManagement';
 import type { Post } from '../../graphql/posts';
 import { UserVote } from '../../graphql/posts';
 import { QuaternaryButton } from '../buttons/QuaternaryButton';
@@ -60,6 +63,9 @@ function PostActionsV1({
     receivingUser: post.author as LoggedUser | undefined,
   });
   const { getUpvoteAnimation } = useBrandSponsorship();
+  const CommentIconComponent = useFeature(featureCommentFirstAction)
+    ? CommentIconV2
+    : CommentIcon;
 
   const { toggleUpvote, toggleDownvote } = useVotePost();
   const isUpvoteActive = post?.userState?.vote === UserVote.Up;
@@ -212,6 +218,19 @@ function PostActionsV1({
     // for labels is executed after the DOM is updated with the new state.
   }, [post?.userState?.awarded, canAward]);
 
+  const commentButton = (
+    <QuaternaryButton
+      id="comment-post-btn"
+      pressed={post.commented}
+      onClick={onComment}
+      icon={<CommentIconComponent secondary={post.commented} />}
+      aria-label="Comment"
+      className="btn-tertiary-blueCheese"
+    >
+      Comment
+    </QuaternaryButton>
+  );
+
   return (
     <div className="flex flex-col gap-4">
       <div className="flex items-center rounded-16 border border-border-subtlest-tertiary">
@@ -250,16 +269,7 @@ function PostActionsV1({
               color={ButtonColor.Ketchup}
             />
           </Tooltip>
-          <QuaternaryButton
-            id="comment-post-btn"
-            pressed={post.commented}
-            onClick={onComment}
-            icon={<CommentIcon secondary={post.commented} />}
-            aria-label="Comment"
-            className="btn-tertiary-blueCheese"
-          >
-            Comment
-          </QuaternaryButton>
+          {commentButton}
           {canAward && (
             <ConditionalWrapper
               condition={post?.userState?.awarded ?? false}
diff --git a/packages/shared/src/components/post/reader/ReaderFloatingActionBar.tsx b/packages/shared/src/components/post/reader/ReaderFloatingActionBar.tsx
index c2a00364d9b..1564ad17693 100644
--- a/packages/shared/src/components/post/reader/ReaderFloatingActionBar.tsx
+++ b/packages/shared/src/components/post/reader/ReaderFloatingActionBar.tsx
@@ -5,10 +5,13 @@ import type { Post } from '../../../graphql/posts';
 import { UserVote } from '../../../graphql/posts';
 import {
   DiscussIcon as CommentIcon,
+  DiscussIconV2 as CommentIconV2,
   DownvoteIcon,
   ShareIcon,
   UpvoteIcon,
 } from '../../icons';
+import { useFeature } from '../../GrowthBookProvider';
+import { featureCommentFirstAction } from '../../../lib/featureManagement';
 import { Button, ButtonVariant, ButtonColor } from '../../buttons/Button';
 import { BookmarkButton } from '../../buttons';
 import { useBookmarkPost } from '../../../hooks/useBookmarkPost';
@@ -42,18 +45,45 @@ function ReaderFloatingActionBarV1({
   const { toggleBookmark } = useBookmarkPost();
   const { toggleUpvote, toggleDownvote } = useVotePost();
   const { openSharePost } = useSharePost(Origin.ReaderModal);
+  const isCommentFirst = useFeature(featureCommentFirstAction);
+  const CommentIconComponent = isCommentFirst ? CommentIconV2 : CommentIcon;
 
   const isUpvoteActive = post?.userState?.vote === UserVote.Up;
   const isDownvoteActive = post?.userState?.vote === UserVote.Down;
   const upvotes = largeNumberFormat(post.numUpvotes ?? 0) ?? '0';
   const comments = largeNumberFormat(post.numComments ?? 0) ?? '0';
 
+  const commentButton = (
+    <Tooltip content="Comment">
+      <Button
+        type="button"
+        pressed={post.commented}
+        onClick={onCommentClick}
+        icon={
+          <CommentIconComponent
+            secondary={post.commented}
+            size={FLOATING_ICON_SIZE}
+          />
+        }
+        aria-label="Comment"
+        variant={ButtonVariant.Tertiary}
+        className={classNames(
+          countActionButtonClasses,
+          'btn-tertiary-blueCheese',
+        )}
+      >
+        <span className={countClasses}>{comments}</span>
+      </Button>
+    </Tooltip>
+  );
+
   return (
     <div
       className="z-20 pointer-events-auto absolute bottom-6 left-1/2 flex -translate-x-1/2 items-center gap-2 rounded-20 border border-border-subtlest-tertiary bg-background-default px-3 py-2 shadow-3"
       role="toolbar"
       aria-label="Post actions"
     >
+      {isCommentFirst && commentButton}
       <Tooltip content={isUpvoteActive ? 'Remove upvote' : 'Upvote'}>
         <Button
           type="button"
@@ -95,24 +125,7 @@ function ReaderFloatingActionBarV1({
           className={iconActionButtonClasses}
         />
       </Tooltip>
-      <Tooltip content="Comment">
-        <Button
-          type="button"
-          pressed={post.commented}
-          onClick={onCommentClick}
-          icon={
-            <CommentIcon secondary={post.commented} size={FLOATING_ICON_SIZE} />
-          }
-          aria-label="Comment"
-          variant={ButtonVariant.Tertiary}
-          className={classNames(
-            countActionButtonClasses,
-            'btn-tertiary-blueCheese',
-          )}
-        >
-          <span className={countClasses}>{comments}</span>
-        </Button>
-      </Tooltip>
+      {!isCommentFirst && commentButton}
       <BookmarkButton
         post={post}
         iconSize={FLOATING_ICON_SIZE}
diff --git a/packages/shared/src/components/post/reader/ReaderRailActionBar.tsx b/packages/shared/src/components/post/reader/ReaderRailActionBar.tsx
index 40595a0b660..bdb8e9dcec6 100644
--- a/packages/shared/src/components/post/reader/ReaderRailActionBar.tsx
+++ b/packages/shared/src/components/post/reader/ReaderRailActionBar.tsx
@@ -5,11 +5,14 @@ import type { Post } from '../../../graphql/posts';
 import { UserVote } from '../../../graphql/posts';
 import {
   DiscussIcon as CommentIcon,
+  DiscussIconV2 as CommentIconV2,
   DownvoteIcon,
   LinkIcon,
   MedalBadgeIcon,
   UpvoteIcon,
 } from '../../icons';
+import { useFeature } from '../../GrowthBookProvider';
+import { featureCommentFirstAction } from '../../../lib/featureManagement';
 import { Button, ButtonColor, ButtonVariant } from '../../buttons/Button';
 import { BookmarkButton } from '../../buttons';
 import { useBookmarkPost } from '../../../hooks/useBookmarkPost';
@@ -47,10 +50,27 @@ function ReaderRailActionBarV1({
     sendingUser: user,
     receivingUser: post.author as LoggedUser | undefined,
   });
+  const isCommentFirst = useFeature(featureCommentFirstAction);
+  const CommentIconComponent = isCommentFirst ? CommentIconV2 : CommentIcon;
 
   const isUpvoteActive = post?.userState?.vote === UserVote.Up;
   const isDownvoteActive = post?.userState?.vote === UserVote.Down;
 
+  const commentButton = (
+    <Tooltip content="Comment">
+      <Button
+        id="reader-comment-btn"
+        type="button"
+        pressed={post.commented}
+        onClick={onCommentClick}
+        icon={<CommentIconComponent secondary={post.commented} />}
+        aria-label="Comment"
+        variant={ButtonVariant.Tertiary}
+        color={ButtonColor.BlueCheese}
+      />
+    </Tooltip>
+  );
+
   return (
     <div
       className={classNames(
@@ -60,6 +80,7 @@ function ReaderRailActionBarV1({
       role="toolbar"
       aria-label="Post actions"
     >
+      {isCommentFirst && commentButton}
       <Tooltip content={isUpvoteActive ? 'Remove upvote' : 'More like this'}>
         <Button
           id="reader-upvote-btn"
@@ -95,18 +116,7 @@ function ReaderRailActionBarV1({
           color={ButtonColor.Ketchup}
         />
       </Tooltip>
-      <Tooltip content="Comment">
-        <Button
-          id="reader-comment-btn"
-          type="button"
-          pressed={post.commented}
-          onClick={onCommentClick}
-          icon={<CommentIcon secondary={post.commented} />}
-          aria-label="Comment"
-          variant={ButtonVariant.Tertiary}
-          color={ButtonColor.BlueCheese}
-        />
-      </Tooltip>
+      {!isCommentFirst && commentButton}
       {canAward && (
         <ConditionalWrapper
           condition={post?.userState?.awarded ?? false}
diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index 5d493efa846..87b292d768f 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -230,3 +230,8 @@ export const featureOnboardingPermissionPrimer = new Feature(
 );
 
 export const featureAuthGoogleOneTap = new Feature('auth_google_onetap', false);
+
+export const featureCommentFirstAction = new Feature(
+  'comment_first_action',
+  false,
+);