diff --git a/frontend/src/components/CommentCard.jsx b/frontend/src/components/CommentCard.jsx
index 4f80a0b..1057275 100644
--- a/frontend/src/components/CommentCard.jsx
+++ b/frontend/src/components/CommentCard.jsx
@@ -4,6 +4,7 @@ import { Spinner, Alert } from '@patternfly/react-core';
 import { getDaysSince, formatDate } from '../utils/dateUtils';
 import { fetchCommentReactions } from '../services/api';
 import Reactions from './Reactions';
+import UserAvatar from './UserAvatar';
 
 const CommentCard = ({ comment }) => {
   const daysSince = getDaysSince(comment.created_at);
@@ -56,30 +57,40 @@ const CommentCard = ({ comment }) => {
       <div
         style={{
           display: 'flex',
+          flexDirection: 'column',
           alignItems: 'flex-start',
-          gap: '0.5rem',
           marginBottom: '0.75rem',
         }}
       >
-        {comment.user?.avatar_url && (
-          <img
-            src={comment.user.avatar_url}
-            alt={comment.user.login}
+        {comment.user?.html_url ? (
+          <a
+            href={comment.user.html_url}
+            target="_blank"
+            rel="noopener noreferrer"
             style={{
-              width: '32px',
-              height: '32px',
-              borderRadius: '50%',
-              flexShrink: 0,
+              textDecoration: 'none',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '0.5rem',
             }}
-          />
-        )}
-        <div style={{ flex: '1', minWidth: 0 }}>
-          <div style={{ fontWeight: '500' }}>
-            {comment.user?.login || 'Unknown'}
-          </div>
-          <div style={{ fontSize: '0.875rem', color: '#6a6e73' }}>
-            {formatDate(comment.created_at)} ({daysSince} days ago)
+          >
+            <UserAvatar user={comment.user} size={32} />
+            <div style={{ fontWeight: '500', color: '#0066cc' }}>
+              {comment.user.login || 'Unknown'}
+            </div>
+          </a>
+        ) : (
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <UserAvatar user={comment.user} size={32} />
+            <div style={{ fontWeight: '500' }}>
+              {comment.user?.login || 'Unknown'}
+            </div>
           </div>
+        )}
+        <div
+          style={{ fontSize: '0.875rem', color: '#6a6e73', marginLeft: '40px' }}
+        >
+          {formatDate(comment.created_at)} ({daysSince} days ago)
         </div>
       </div>
       <div dangerouslySetInnerHTML={{ __html: comment.body_html || '' }} />
diff --git a/frontend/src/components/IssueCard.jsx b/frontend/src/components/IssueCard.jsx
index 975d1a4..1a37d72 100644
--- a/frontend/src/components/IssueCard.jsx
+++ b/frontend/src/components/IssueCard.jsx
@@ -31,6 +31,7 @@ import {
 } from '../services/api';
 import CommentCard from './CommentCard';
 import Reactions from './Reactions';
+import UserAvatar from './UserAvatar';
 import labelsCache, { clearLabelsCache } from '../utils/labelsCache';
 import milestonesCache from '../utils/milestonesCache';
 
@@ -566,52 +567,51 @@ const IssueCard = ({ issue, onMilestoneChange }) => {
             marginBottom: '0rem',
             display: 'flex',
             alignItems: 'flex-start',
+            justifyContent: 'space-between',
             gap: '0.5rem',
             padding: '0.75rem',
           }}
         >
-          {issue.user?.avatar_url && (
-            <a
-              href={issue.user.html_url}
-              target="_blank"
-              rel="noopener noreferrer"
-              style={{ textDecoration: 'none' }}
-            >
-              <img
-                src={issue.user.avatar_url}
-                alt={issue.user.login}
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'flex-start',
+            }}
+          >
+            {issue.user?.html_url ? (
+              <a
+                href={issue.user.html_url}
+                target="_blank"
+                rel="noopener noreferrer"
                 style={{
-                  width: '32px',
-                  height: '32px',
-                  borderRadius: '50%',
-                  flexShrink: 0,
+                  textDecoration: 'none',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '0.5rem',
                 }}
-              />
-            </a>
-          )}
-          <div style={{ flex: '1', minWidth: 0 }}>
-            <div style={{ fontWeight: '500' }}>
-              {issue.user?.html_url ? (
-                <a
-                  href={issue.user.html_url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  style={{ textDecoration: 'none', color: '#0066cc' }}
-                >
+              >
+                <UserAvatar user={issue.user} size={32} />
+                <div style={{ fontWeight: '500', color: '#0066cc' }}>
                   {issue.user.login || 'Unknown'}
-                </a>
-              ) : (
-                issue.user?.login || 'Unknown'
-              )}
-            </div>
-            <div style={{ fontSize: '0.875rem', color: '#6a6e73' }}>
-              {formatDate(issue.created_at)} ({daysSince} days ago)
-            </div>
+                </div>
+              </a>
+            ) : (
+              <div
+                style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}
+              >
+                <UserAvatar user={issue.user} size={32} />
+                <div style={{ fontWeight: '500' }}>
+                  {issue.user?.login || 'Unknown'}
+                </div>
+              </div>
+            )}
             {issue.assignees && issue.assignees.length > 0 && (
               <div
                 style={{
                   fontSize: '0.875rem',
                   color: '#6a6e73',
+                  marginLeft: '40px',
                   marginTop: '0.25rem',
                   display: 'flex',
                   alignItems: 'center',
@@ -629,25 +629,7 @@ const IssueCard = ({ issue, onMilestoneChange }) => {
                       gap: '0.25rem',
                     }}
                   >
-                    {assignee.avatar_url && (
-                      <a
-                        href={assignee.html_url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        style={{ textDecoration: 'none' }}
-                      >
-                        <img
-                          src={assignee.avatar_url}
-                          alt={assignee.login}
-                          style={{
-                            width: '20px',
-                            height: '20px',
-                            borderRadius: '50%',
-                            verticalAlign: 'middle',
-                          }}
-                        />
-                      </a>
-                    )}
+                    <UserAvatar user={assignee} size={20} />
                     <a
                       href={assignee.html_url}
                       target="_blank"
@@ -663,6 +645,16 @@ const IssueCard = ({ issue, onMilestoneChange }) => {
                 ))}
               </div>
             )}
+            <div
+              style={{
+                fontSize: '0.875rem',
+                color: '#6a6e73',
+                marginLeft: '40px',
+                marginTop: '0.25rem',
+              }}
+            >
+              {formatDate(issue.created_at)} ({daysSince} days ago)
+            </div>
           </div>
           <div
             style={{
@@ -670,7 +662,7 @@ const IssueCard = ({ issue, onMilestoneChange }) => {
               flexDirection: 'column',
               alignItems: 'flex-end',
               gap: '0.5rem',
-              maxWidth: '50%',
+              flexShrink: 0,
             }}
           >
             {/* Milestone control */}
diff --git a/frontend/src/components/UserAvatar.jsx b/frontend/src/components/UserAvatar.jsx
new file mode 100644
index 0000000..a46b3a5
--- /dev/null
+++ b/frontend/src/components/UserAvatar.jsx
@@ -0,0 +1,61 @@
+// ai-generated: Cursor
+import React from 'react';
+
+const UserAvatar = ({ user, size = 32, showName = false }) => {
+  if (!user?.avatar_url) {
+    return null;
+  }
+
+  const avatarImage = (
+    <img
+      src={user.avatar_url}
+      alt={user.login || 'User'}
+      style={{
+        width: `${size}px`,
+        height: `${size}px`,
+        borderRadius: '50%',
+        flexShrink: 0,
+      }}
+    />
+  );
+
+  const username = user.login || 'Unknown';
+
+  // If showName is true, we need to return just the avatar
+  // The username will be handled separately in the parent to allow proper layout
+  // This maintains backward compatibility for cases where showName is false
+  if (showName) {
+    // Just return the linked avatar - username will be in parent
+    if (user.html_url) {
+      return (
+        <a
+          href={user.html_url}
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{ textDecoration: 'none' }}
+        >
+          {avatarImage}
+        </a>
+      );
+    }
+    return avatarImage;
+  }
+
+  // If showName is false, just return the avatar (for backward compatibility)
+  if (user.html_url) {
+    return (
+      <a
+        href={user.html_url}
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ textDecoration: 'none' }}
+      >
+        {avatarImage}
+      </a>
+    );
+  }
+
+  return avatarImage;
+};
+
+export default UserAvatar;