diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx
index d006fc9ea..f91e1f86b 100644
--- a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx
+++ b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx
@@ -14,6 +14,21 @@ beforeEach(() => {
 });
 
 describe('ProgressUpdateCard Component', () => {
+    it('should check if the onCardClick function is called when user click on card', () => {
+        renderWithRouter(
+            <Provider store={store()}>
+                <ProgressUpdateCard data={mockGetTaskProgress.data[2]} />
+            </Provider>
+        );
+        const progressUpdateCardContainer = screen.getByTestId(
+            'progress-update-card-container'
+        );
+        fireEvent.click(progressUpdateCardContainer);
+        expect(progressUpdateCardContainer).toHaveClass(
+            'progress-update-card__container expand'
+        );
+    });
+
     it('should render completed section string as title in card', () => {
         renderWithRouter(
             <Provider store={store()}>
diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx
index 3660fc1ae..260d5bffd 100644
--- a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx
+++ b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx
@@ -2,11 +2,12 @@ import moment from 'moment';
 import { MouseEvent } from 'react';
 import { Provider } from 'react-redux';
 import { fireEvent, screen } from '@testing-library/react';
-
+import { useRouter } from 'next/router';
 import { mockGetTaskProgress } from '../../../../../__mocks__/db/progresses';
 import { renderWithRouter } from '@/test_utils/createMockRouter';
 import { readMoreFormatter } from '@/utils/common';
 import { store } from '@/app/store';
+import { DEFAULT_AVATAR, USER_MANAGEMENT_URL } from '@/constants/url';
 
 import {
     ProgressUpdateCardPresentationProps,
@@ -17,6 +18,8 @@ import ProgressUpdateCardPresentation from '@/components/taskDetails/ProgressUpd
 
 let initialProps: ProgressUpdateCardPresentationProps;
 const titleToShow = mockGetTaskProgress.data[1].completed;
+const username = 'mock-user-name';
+const userProfileImageUrl = 'random-profile-pic-url';
 const momentDate = moment(mockGetTaskProgress.data[2].createdAt);
 const fullDate = momentDate.format('DD-MM-YY');
 const time = momentDate.format('hh:mmA');
@@ -29,6 +32,9 @@ let mockedOnMoreOrLessButtonClick: jest.Mock<
     [React.MouseEvent<HTMLElement>]
 >;
 let mockedOnCardClick: jest.Mock<void, [MouseEvent<HTMLElement>]>;
+jest.mock('next/router', () => ({
+    useRouter: jest.fn(),
+}));
 const charactersToShow = 70;
 const dataToShowState = [
     {
@@ -114,6 +120,8 @@ describe('ProgressUpdateCardPresentation Component', () => {
             jest.fn<void, [React.MouseEvent<HTMLElement>]>();
         mockedOnCardClick = jest.fn<void, [React.MouseEvent<HTMLElement>]>();
         initialProps = {
+            username: username,
+            userProfileImageUrl: userProfileImageUrl,
             titleToShow: titleToShow,
             isExpanded: false,
             dateInAgoFormat: dateInAgoFormat,
@@ -123,7 +131,76 @@ describe('ProgressUpdateCardPresentation Component', () => {
             onCardClick: mockedOnCardClick,
         };
     });
+
+    it('should rotate the angle icon when expanded', () => {
+        (useRouter as jest.Mock).mockReturnValue({
+            query: { dev: 'false' },
+        });
+        const props = { ...initialProps, isExpanded: true };
+        renderWithRouter(
+            <Provider store={store()}>
+                <ProgressUpdateCardPresentation {...props} />
+            </Provider>
+        );
+        const angleIcon = screen.getByTestId('progress-update-card-angle-icon');
+        expect(angleIcon).toHaveStyle('transform: rotate(90deg)');
+    });
+    it('should have respective classes on date container and date text', () => {
+        (useRouter as jest.Mock).mockReturnValue({
+            query: { dev: 'false' },
+        });
+        renderWithRouter(
+            <Provider store={store()}>
+                <ProgressUpdateCardPresentation {...initialProps} />
+            </Provider>
+        );
+        const dateContainer = screen.getByTestId('progress-update-card-date');
+        const dateText = screen.getByText(dateInAgoFormat);
+
+        expect(dateContainer).toHaveClass(
+            'progress-update-card__date-container'
+        );
+        expect(dateText).toHaveClass('progress-update-card__date-text');
+    });
+
+    it('should not rotate the angle icon when not expanded', () => {
+        (useRouter as jest.Mock).mockReturnValue({
+            query: { dev: 'false' },
+        });
+        const props = { ...initialProps, isExpanded: false };
+        renderWithRouter(
+            <Provider store={store()}>
+                <ProgressUpdateCardPresentation {...props} />
+            </Provider>
+        );
+        const angleIcon = screen.getByTestId('progress-update-card-angle-icon');
+        expect(angleIcon).toHaveStyle('transform: none');
+    });
+
+    it('should prevent event propagation when clicking on the date container', () => {
+        (useRouter as jest.Mock).mockReturnValue({
+            query: { dev: 'false' },
+        });
+        renderWithRouter(
+            <Provider store={store()}>
+                <ProgressUpdateCardPresentation {...initialProps} />
+            </Provider>
+        );
+
+        const dateContainer = screen.getByTestId('progress-update-card-date');
+        const stopPropagationMock = jest.fn();
+        dateContainer.addEventListener(
+            'click',
+            (event) => (event.stopPropagation = stopPropagationMock)
+        );
+        fireEvent.click(dateContainer);
+        expect(stopPropagationMock).toHaveBeenCalled();
+    });
+
     it('should render completed section string as title in card', () => {
+        (useRouter as jest.Mock).mockReturnValue({
+            query: { dev: 'false' },
+        });
         renderWithRouter(
             <Provider store={store()}>
                 <ProgressUpdateCardPresentation {...initialProps} />
@@ -135,6 +212,9 @@ describe('ProgressUpdateCardPresentation Component', () => {
         );
     });
     it('should render date with ago format', () => {
+        (useRouter as jest.Mock).mockReturnValue({
+            query: { dev: 'false' },
+        });
         renderWithRouter(
             <Provider store={store()}>
                 <ProgressUpdateCardPresentation {...initialProps} />
@@ -144,6 +224,106 @@ describe('ProgressUpdateCardPresentation Component', () => {
         expect(date).toHaveTextContent(dateInAgoFormat);
     });
 
+    it('should render the name and profile picture of the updater', () => {
+        (useRouter as jest.Mock).mockReturnValue({
+            query: { dev: 'true' },
+        });
+        const props: ProgressUpdateCardPresentationProps = {
+            ...initialProps,
+        };
+        renderWithRouter(
+            <Provider store={store()}>
+                <ProgressUpdateCardPresentation {...props} />
+            </Provider>
+        );
+        const usernameElement = screen.getByTestId(
+            'progress-update-card-user-info-container'
+        );
+        expect(usernameElement).toBeInTheDocument();
+        expect(usernameElement.textContent).toContain('mock-user-name');
+        const userProfileImageUrlElement = screen.getByTestId(
+            'progress-update-card-profile-picture'
+        );
+
+        expect(userProfileImageUrlElement).toBeInTheDocument();
+        expect(userProfileImageUrlElement).toHaveAttribute(
+            'src',
+            userProfileImageUrl
+        );
+        expect(userProfileImageUrlElement).toHaveAttribute('alt', 'Avatar');
+    });
+    it('should display the default avatar if profile url is empty', () => {
+        (useRouter as jest.Mock).mockReturnValue({
+            query: { dev: 'true' },
+        });
+        const props: ProgressUpdateCardPresentationProps = {
+            ...initialProps,
+            userProfileImageUrl: '',
+        };
+        renderWithRouter(
+            <Provider store={store()}>
+                <ProgressUpdateCardPresentation {...props} />
+            </Provider>
+        );
+        const userProfileImageUrlElement = screen.getByTestId(
+            'progress-update-card-profile-picture'
+        );
+
+        expect(userProfileImageUrlElement).toBeInTheDocument();
+        expect(userProfileImageUrlElement).toHaveAttribute(
+            'src',
+            DEFAULT_AVATAR
+        );
+    });
+    it('should render the updater name as a link with the correct href', () => {
+        (useRouter as jest.Mock).mockReturnValue({
+            query: { dev: 'true' },
+        });
+        const props: ProgressUpdateCardPresentationProps = {
+            ...initialProps,
+        };
+        renderWithRouter(
+            <Provider store={store()}>
+                <ProgressUpdateCardPresentation {...props} />
+            </Provider>
+        );
+
+        const linkElement = screen
+            .getByTestId('progress-update-card-user-info-container')
+            .querySelector('a');
+        expect(linkElement).toBeInTheDocument();
+        expect(linkElement).toHaveAttribute(
+            'href',
+            `${USER_MANAGEMENT_URL}?username=${username}`
+        );
+        expect(linkElement?.textContent).toContain(username);
+    });
+    it('should prevent event propagation when clicking on the user info container', () => {
+        (useRouter as jest.Mock).mockReturnValue({
+            query: { dev: 'true' },
+        });
+
+        renderWithRouter(
+            <Provider store={store()}>
+                <ProgressUpdateCardPresentation {...initialProps} />
+            </Provider>
+        );
+
+        const userInfoContainer = screen.getByTestId(
+            'progress-update-card-user-info-container'
+        );
+
+        const stopPropagationMock = jest.fn();
+
+        userInfoContainer.addEventListener(
+            'click',
+            (event) => (event.stopPropagation = stopPropagationMock)
+        );
+
+        fireEvent.click(userInfoContainer);
+        expect(stopPropagationMock).toHaveBeenCalled();
+    });
+
     it('should not render the tooltip when isToolisTooltipVisible is false', () => {
         const props: ProgressUpdateCardPresentationProps = {
             ...initialProps,
diff --git a/src/app/services/usersApi.ts b/src/app/services/usersApi.ts
index 94984f134..9d528482a 100644
--- a/src/app/services/usersApi.ts
+++ b/src/app/services/usersApi.ts
@@ -15,6 +15,10 @@ type UsernameQueryArgs = {
     searchString?: string;
     size?: number;
 };
+type UserResponse = {
+    message: string;
+    user: userDataType;
+};
 
 export const usersApi = api.injectEndpoints({
     endpoints: (build) => ({
@@ -39,6 +43,10 @@ export const usersApi = api.injectEndpoints({
             query: ({ searchString }) => `/users?search=${searchString}`,
             providesTags: ['Users'],
         }),
+        getUserDetailsById: build.query<UserResponse, UsernameQueryArgs>({
+            query: ({ searchString }) => `/users?id=${searchString}`,
+            providesTags: ['Users'],
+        }),
     }),
 });
 
@@ -48,4 +56,5 @@ export const {
     useGetUsersQuery,
     useGetAllUsersByUsernameQuery,
     useGetAllUsersQuery,
+    useGetUserDetailsByIdQuery,
 } = usersApi;
diff --git a/src/components/common/Tooltip/tooltip.module.scss b/src/components/common/Tooltip/tooltip.module.scss
index ec48ad4ef..21906382c 100644
--- a/src/components/common/Tooltip/tooltip.module.scss
+++ b/src/components/common/Tooltip/tooltip.module.scss
@@ -2,7 +2,7 @@
 
 .tooltip {
     position: absolute;
-    width: 17rem;
+    width: 18rem;
     // position - top, bottom, right, left will come from props for reusability
     background-color: $theme-primary;
     border: 1px solid $theme-primary;
diff --git a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx
index 564b5bd61..8ae6ba79a 100644
--- a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx
+++ b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx
@@ -3,6 +3,7 @@ import React, { MouseEvent, useState } from 'react';
 import { readMoreFormatter } from '@/utils/common';
 import { ProgressDetailsData } from '@/types/standup.type';
 import LatestProgressUpdateCardPresentation from './LatestProgressUpdateCardPresentation';
+import { useGetUserDetailsByIdQuery } from '@/app/services/usersApi';
 
 type LatestProgressUpdateCardProps = {
     data: ProgressDetailsData;
@@ -21,11 +22,17 @@ export default function LatestProgressUpdateCard({
     data,
 }: LatestProgressUpdateCardProps) {
     const momentDate = moment(data?.createdAt);
+    const userId = data?.userId;
+    const { data: userData } = useGetUserDetailsByIdQuery({
+        searchString: userId,
+    });
+    const username = userData?.user?.username ?? '';
+    const userProfileImageUrl = userData?.user?.picture?.url ?? '';
+
     const dateInAgoFormat = momentDate.fromNow();
     const fullDate = momentDate.format('dddd, MMMM DD, YYYY, hh:mm A [GMT] Z');
     const tooltipText = `Updated at ${fullDate}`;
     const charactersToShow = 70;
-
     const dataToShow = [
         {
             id: `completed-${data.id}`,
@@ -55,7 +62,6 @@ export default function LatestProgressUpdateCard({
 
     const [dataToShowState, setDataToShowState] =
         useState<ProgressUpdateDataToShow[]>(dataToShow);
-
     function onMoreOrLessButtonClick(
         e: MouseEvent<HTMLElement>,
         clickedOnData: ProgressUpdateDataToShow
@@ -74,6 +80,8 @@ export default function LatestProgressUpdateCard({
 
     return (
         <LatestProgressUpdateCardPresentation
+            username={username}
+            userProfileImageUrl={userProfileImageUrl}
             dataToShowState={dataToShowState}
             tooltipText={tooltipText}
             onMoreOrLessButtonClick={onMoreOrLessButtonClick}
diff --git a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx
index c728caff2..eaff12cc4 100644
--- a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx
+++ b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useRouter } from 'next/router';
 import { FaRegClock } from 'react-icons/fa6';
 import {
     LatestProgressUpdateCardPresentationProps,
@@ -6,13 +7,18 @@ import {
 } from './progressUpdateCard.types';
 import Tooltip from '@/components/common/Tooltip/Tooltip';
 import styles from './latest-progress-update-card.module.scss';
-
+import { USER_MANAGEMENT_URL } from '@/constants/url';
+import { DEFAULT_AVATAR } from '@/constants/url';
 export default function LatestProgressUpdateCardPresentation({
+    username,
+    userProfileImageUrl,
     dataToShowState,
     tooltipText,
     onMoreOrLessButtonClick,
     dateInAgoFormat,
 }: LatestProgressUpdateCardPresentationProps) {
+    const router = useRouter();
+    const isDevMode = router.query.dev === 'true';
     const progressInfoMapping = dataToShowState.map(
         (datum: ProgressUpdateDataToShow) => (
             <div
@@ -65,7 +71,11 @@ export default function LatestProgressUpdateCardPresentation({
                 >
                     <Tooltip
                         content={tooltipText}
-                        tooltipPosition={{ top: '-2.6rem', right: '-4rem' }}
+                        tooltipPosition={
+                            isDevMode
+                                ? { top: '-3.8rem', right: '3rem' }
+                                : { top: '-2.6rem', right: '-4rem' }
+                        }
                     >
                         <span className={styles['date-clock-container']}>
                             <FaRegClock />
@@ -79,6 +89,41 @@ export default function LatestProgressUpdateCardPresentation({
                             </span>
                         </span>
                     </Tooltip>
+                    {isDevMode && (
+                        <span
+                            data-testid="latest-progress-update-card-user-info-container"
+                            className={
+                                styles[
+                                    'latest-progress-update-card__user-info-container'
+                                ]
+                            }
+                        >
+                            by
+                            <a
+                                href={`${USER_MANAGEMENT_URL}?username=${username}`}
+                                className={
+                                    styles[
+                                        'latest-progress-update-card__user-info-link'
+                                    ]
+                                }
+                            >
+                                <img
+                                    src={
+                                        userProfileImageUrl == ''
+                                            ? DEFAULT_AVATAR
+                                            : userProfileImageUrl
+                                    }
+                                    alt={'Avatar'}
+                                    className={
+                                        styles[
+                                            'latest-progress-update-card__profile-picture'
+                                        ]
+                                    }
+                                />
+                                {username}
+                            </a>
+                        </span>
+                    )}
                 </div>
             </div>
         </div>
diff --git a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx
index 707938bb7..00982c104 100644
--- a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx
+++ b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx
@@ -6,12 +6,20 @@ import {
     ProgressUpdateCardProps,
     ProgressUpdateDataToShow,
 } from './progressUpdateCard.types';
+import { useGetUserDetailsByIdQuery } from '@/app/services/usersApi';
 
 export default memo(function ProgressUpdateCard({
     data,
 }: ProgressUpdateCardProps) {
     const momentDate = moment(data?.createdAt);
     const dateInAgoFormat = momentDate.fromNow();
+    const userId = data?.userId;
+    const { data: userData } = useGetUserDetailsByIdQuery({
+        searchString: userId,
+    });
+    const username = userData?.user?.username ?? '';
+    const userProfileImageUrl = userData?.user?.picture?.url ?? '';
+
     const charactersToShow = 70;
     const readMoreTitle = readMoreFormatter(data?.completed, charactersToShow);
     const titleToShow = readMoreTitle;
@@ -72,6 +80,8 @@ export default memo(function ProgressUpdateCard({
     }
     return (
         <ProgressUpdateCardPresentation
+            username={username}
+            userProfileImageUrl={userProfileImageUrl}
             dataToShowState={dataToShowState}
             titleToShow={titleToShow}
             onMoreOrLessButtonClick={onMoreOrLessButtonClick}
diff --git a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx
index afe04ba1c..a78ff97d1 100644
--- a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx
+++ b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useRouter } from 'next/router';
 import { FaAngleRight, FaRegClock } from 'react-icons/fa6';
 import Tooltip from '@/components/common/Tooltip/Tooltip';
 import styles from './progress-update-card.module.scss';
@@ -6,8 +7,11 @@ import {
     ProgressUpdateCardPresentationProps,
     ProgressUpdateDataToShow,
 } from './progressUpdateCard.types';
+import { DEFAULT_AVATAR, USER_MANAGEMENT_URL } from '@/constants/url';
 
 export default function ProgressUpdateCardPresentation({
+    username,
+    userProfileImageUrl,
     titleToShow,
     dateInAgoFormat,
     tooltipString,
@@ -16,6 +20,9 @@ export default function ProgressUpdateCardPresentation({
     onCardClick,
     isExpanded,
 }: ProgressUpdateCardPresentationProps) {
+    const router = useRouter();
+    const isDevMode = router.query.dev === 'true';
+
     const progressInfoMapping = dataToShowState.map(
         (datum: ProgressUpdateDataToShow) => (
             <div
@@ -34,6 +41,7 @@ export default function ProgressUpdateCardPresentation({
                     {datum.shouldReadMoreButtonShow && (
                         <button
                             onClick={(e) => onMoreOrLessButtonClick(e, datum)}
+                            data-testid="progress-update-more-less-button"
                             className={
                                 styles['progress-update-card__more-less-button']
                             }
@@ -59,34 +67,90 @@ export default function ProgressUpdateCardPresentation({
                     <h3 className={styles['progress-update-card__title']}>
                         {titleToShow}
                     </h3>
-                    <Tooltip
-                        tooltipPosition={{ top: '-25px', right: '-2rem' }}
-                        content={tooltipString}
+                    <div
+                        className={
+                            styles['progress-update-card__details-container']
+                        }
                     >
-                        <span
-                            className={
-                                styles['progress-update-card__date-container']
+                        <Tooltip
+                            tooltipPosition={
+                                isDevMode
+                                    ? { top: '-2.4rem', right: '4rem' }
+                                    : { top: '-25px', right: '-2rem' }
                             }
-                            onClick={(event) => event.stopPropagation()}
-                            data-testid="progress-update-card-date"
+                            content={tooltipString}
                         >
-                            <FaRegClock />
                             <span
                                 className={
-                                    styles['progress-update-card__date-text']
+                                    styles[
+                                        'progress-update-card__date-container'
+                                    ]
                                 }
+                                onClick={(event) => event.stopPropagation()}
+                                data-testid="progress-update-card-date"
                             >
-                                {dateInAgoFormat}
+                                <FaRegClock />
+                                <span
+                                    className={
+                                        styles[
+                                            'progress-update-card__date-text'
+                                        ]
+                                    }
+                                >
+                                    {dateInAgoFormat}
+                                </span>
                             </span>
-                        </span>
-                    </Tooltip>
-                    <FaAngleRight
-                        style={{
-                            transform: isExpanded ? 'rotate(90deg)' : 'none',
-                            transition: 'transform 1s',
-                        }}
-                    />
+                        </Tooltip>
+
+                        {isDevMode && (
+                            <span
+                                data-testid="progress-update-card-user-info-container"
+                                className={
+                                    styles[
+                                        'progress-update-card__user-info-container'
+                                    ]
+                                }
+                                onClick={(event) => event.stopPropagation()}
+                            >
+                                by
+                                <a
+                                    href={`${USER_MANAGEMENT_URL}?username=${username}`}
+                                    className={
+                                        styles[
+                                            'progress-update-card__user-info-link'
+                                        ]
+                                    }
+                                >
+                                    <img
+                                        src={
+                                            userProfileImageUrl == ''
+                                                ? DEFAULT_AVATAR
+                                                : userProfileImageUrl
+                                        }
+                                        alt={'Avatar'}
+                                        data-testid="progress-update-card-profile-picture"
+                                        className={
+                                            styles[
+                                                'progress-update-card__profile-picture'
+                                            ]
+                                        }
+                                    />{' '}
+                                    {username}
+                                </a>
+                            </span>
+                        )}
+                        <FaAngleRight
+                            data-testid="progress-update-card-angle-icon"
+                            style={{
+                                transform: isExpanded
+                                    ? 'rotate(90deg)'
+                                    : 'none',
+                                transition: 'transform 1s',
+                            }}
+                        />
+                    </div>
                 </div>
+
                 <div
                     className={`${
                         styles['progress-update-card__expand-content']
diff --git a/src/components/taskDetails/ProgressUpdateCard/latest-progress-update-card.module.scss b/src/components/taskDetails/ProgressUpdateCard/latest-progress-update-card.module.scss
index 4405cf0da..8759fdfb7 100644
--- a/src/components/taskDetails/ProgressUpdateCard/latest-progress-update-card.module.scss
+++ b/src/components/taskDetails/ProgressUpdateCard/latest-progress-update-card.module.scss
@@ -54,6 +54,9 @@
         &:last-of-type {
             display: flex;
             justify-content: flex-end;
+            @media (width<=425px) {
+                justify-content: flex-start;
+            }
         }
 
         .latest-progress-update-card__more-less-button {
@@ -67,10 +70,33 @@
         .latest-progress-update-card__date-container {
             position: relative;
             display: flex;
+            align-items: center;
+            justify-content: start;
             gap: 5px;
             z-index: 0;
             cursor: pointer;
             font-size: 0.934rem;
         }
+        .latest-progress-update-card__user-info-container {
+            font-size: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+        .latest-progress-update-card__user-info-link {
+            display: flex;
+            align-items: center;
+        }
+        .latest-progress-update-card__profile-picture {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            object-fit: cover;
+            margin-right: 4px;
+            @media (width<=425px) {
+                width: 28px;
+                height: 28px;
+            }
+        }
     }
 }
diff --git a/src/components/taskDetails/ProgressUpdateCard/progress-update-card.module.scss b/src/components/taskDetails/ProgressUpdateCard/progress-update-card.module.scss
index 6c107a434..2fbdd2b61 100644
--- a/src/components/taskDetails/ProgressUpdateCard/progress-update-card.module.scss
+++ b/src/components/taskDetails/ProgressUpdateCard/progress-update-card.module.scss
@@ -17,6 +17,12 @@
         align-items: center;
         justify-content: space-between;
         border-radius: 10px;
+        @media (width<=425px) {
+            padding: 0 12x;
+            flex-direction: column;
+            align-items: start;
+            gap: 0;
+        }
     }
 
     .progress-update-card__expand-content {
@@ -35,6 +41,7 @@
         font-weight: 600;
         font-size: 1rem;
         flex-grow: 2;
+        margin: 8px 4px;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
@@ -66,6 +73,36 @@
             font-size: 0.934rem;
         }
     }
+
+    .progress-update-card__user-info-container {
+        font-size: 1rem;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+    .progress-update-card__details-container {
+        display: flex;
+        direction: row;
+        align-items: center;
+        gap: 4px;
+        margin-left: 4px;
+    }
+    .progress-update-card__user-info-link {
+        display: flex;
+        align-items: center;
+    }
+
+    .progress-update-card__profile-picture {
+        width: 32px;
+        height: 32px;
+        margin-right: 4px;
+        border-radius: 50%;
+        object-fit: cover;
+        @media (width<=425px) {
+            width: 28px;
+            height: 28px;
+        }
+    }
 }
 
 .hidden {
@@ -85,6 +122,9 @@
 .shrinked {
     height: 3.62rem;
     transition: height 1s cubic-bezier(0.78, 0.2, 0.2, 1.1);
+    @media (width<=425px) {
+        height: 5.2rem;
+    }
 }
 
 .expand {
diff --git a/src/components/taskDetails/ProgressUpdateCard/progressUpdateCard.types.ts b/src/components/taskDetails/ProgressUpdateCard/progressUpdateCard.types.ts
index 082e8c8d6..8b9207eb0 100644
--- a/src/components/taskDetails/ProgressUpdateCard/progressUpdateCard.types.ts
+++ b/src/components/taskDetails/ProgressUpdateCard/progressUpdateCard.types.ts
@@ -8,6 +8,8 @@ export type ProgressUpdateCardProps = {
 type MouseEventType = (event: MouseEvent<HTMLElement>) => void;
 
 export type ProgressUpdateCardPresentationProps = {
+    username: string;
+    userProfileImageUrl: string;
     titleToShow: string;
     dateInAgoFormat: string;
     tooltipString: string;
@@ -21,6 +23,8 @@ export type ProgressUpdateCardPresentationProps = {
 };
 
 export type LatestProgressUpdateCardPresentationProps = {
+    username: string;
+    userProfileImageUrl: string;
     dataToShowState: ProgressUpdateDataToShow[];
     tooltipText: string;
     onMoreOrLessButtonClick: (