diff --git a/__tests__/Unit/Components/Tasks/TaskDetails.test.tsx b/__tests__/Unit/Components/Tasks/TaskDetails.test.tsx
index 51f1ce0e3..14a1f86f5 100644
--- a/__tests__/Unit/Components/Tasks/TaskDetails.test.tsx
+++ b/__tests__/Unit/Components/Tasks/TaskDetails.test.tsx
@@ -24,7 +24,6 @@ import Details from '@/components/taskDetails/Details';
 import { taskRequestErrorHandler } from '../../../../__mocks__/handlers/task-request.handler';
 import { taskDetailsHandler } from '../../../../__mocks__/handlers/task-details.handler';
 import { superUserSelfHandler } from '../../../../__mocks__/handlers/self.handler';
-import DevFeature from '@/components/DevFeature';
 import convertTimeStamp from '@/helperFunctions/convertTimeStamp';
 const details = {
     url: 'https://realdevsquad.com/tasks/6KhcLU3yr45dzjQIVm0J/details',
@@ -471,14 +470,13 @@ describe('Update Progress button', () => {
 });
 
 describe('Task details Edit mode ', () => {
-    test('Should be able to edit stated on ', async () => {
+    test('Should be able to edit ends on ', async () => {
         server.use(superUserSelfHandler);
 
         renderWithRouter(
             <Provider store={store()}>
                 <TaskDetails taskID={details.taskID} />
-            </Provider>,
-            { query: { dev: 'true' } }
+            </Provider>
         );
         await waitFor(() => {
             const editBtn = screen.getByRole('button', {
@@ -504,8 +502,7 @@ describe('Task details Edit mode ', () => {
         renderWithRouter(
             <Provider store={store()}>
                 <TaskDetails taskID={details.taskID} />
-            </Provider>,
-            { query: { dev: 'true' } }
+            </Provider>
         );
         await waitFor(() => {
             expect(screen.queryByText('UPDATE')).toBeInTheDocument();
@@ -517,8 +514,7 @@ describe('Task details Edit mode ', () => {
         renderWithRouter(
             <Provider store={store()}>
                 <TaskDetails taskID={details.taskID} />
-            </Provider>,
-            { query: { dev: 'true' } }
+            </Provider>
         );
         await waitFor(() => {
             const editBtn = screen.getByRole('button', {
@@ -537,12 +533,10 @@ describe('Task details Edit mode ', () => {
             { query: { dev: 'true' } }
         );
         await waitFor(() => {
-            const editBtn = screen.getByRole('button', {
-                name: /Edit/i,
-            });
+            const editBtn = screen.getByRole('button', { name: /Edit/i });
             fireEvent.click(editBtn);
-            expect(screen.getByTestId('assignee-input')).toBeInTheDocument();
         });
+        expect(screen.getByTestId('assignee-input')).toBeInTheDocument();
     });
 });
 
diff --git a/src/components/taskDetails/index.tsx b/src/components/taskDetails/index.tsx
index 8c063b480..f2134f22c 100755
--- a/src/components/taskDetails/index.tsx
+++ b/src/components/taskDetails/index.tsx
@@ -23,7 +23,6 @@ import { useGetProgressDetailsQuery } from '@/app/services/progressesApi';
 import { ProgressDetailsData } from '@/types/standup.type';
 import Progress from '../ProgressCard';
 import ProgressContainer from '../tasks/card/progressContainer';
-import DevFeature from '../DevFeature';
 import Suggestions from '../tasks/SuggestionBox/Suggestions';
 import task, { taskStatusUpdateHandleProp } from '@/interfaces/task.type';
 import { TASK_EXTENSION_REQUEST_URL } from '@/constants/url';
@@ -42,6 +41,7 @@ export function Button(props: ButtonProps) {
         </button>
     );
 }
+
 export function Textarea(props: TextAreaProps) {
     const { name, value, onChange, testId, placeholder } = props;
 
@@ -61,13 +61,10 @@ type Props = {
     url?: string;
     taskID: string;
 };
+
 const TaskDetails: FC<Props> = ({ taskID }) => {
     const router = useRouter();
-    const { dev } = router.query;
-    const isDevMode = dev === 'true';
-
     const { isUserAuthorized } = useUserData();
-
     const [newEndOnDate, setNewEndOnDate] = useState('');
     const [isEditing, setIsEditing] = useState<boolean>(false);
     const { data, isError, isLoading, isFetching } =
@@ -99,6 +96,7 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
     const handleAssignment = (e: React.ChangeEvent<HTMLInputElement>) => {
         setAssigneeName(e.target.value);
         setShowSuggestion(Boolean(e.target.value));
+        setEditedTaskDetails((prev) => ({ ...prev, assignee: e.target.value }));
     };
     const handleAssigneSelect = async (userName: string) => {
         inputRef.current?.focus();
@@ -128,6 +126,7 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
                 ...data?.taskData,
                 id: taskID,
             } as task);
+            setAssigneeName(data?.taskData?.assignee || '');
         }
     }, [data]);
 
@@ -308,27 +307,19 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
                                         detailType={'Priority'}
                                         value={taskDetailsData?.priority}
                                     />
-                                    <DevFeature>
-                                        {isEditing && (
-                                            <TaskDropDown
-                                                isDevMode={true}
-                                                onChange={
-                                                    handleTaskStatusUpdate
-                                                }
-                                                oldStatus={
-                                                    taskDetailsData?.status
-                                                }
-                                                oldProgress={
-                                                    taskDetailsData?.percentCompleted
-                                                }
-                                            />
-                                        )}
-                                    </DevFeature>
+                                    {isEditing && (
+                                        <TaskDropDown
+                                            onChange={handleTaskStatusUpdate}
+                                            oldStatus={taskDetailsData?.status}
+                                            oldProgress={
+                                                taskDetailsData?.percentCompleted
+                                            }
+                                        />
+                                    )}
                                     <Details
                                         detailType={'Status'}
                                         value={beautifyStatus(
-                                            taskDetailsData?.status,
-                                            isDevMode
+                                            taskDetailsData?.status
                                         )}
                                     />
                                     <Details
@@ -367,27 +358,21 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
                                 title="Participants"
                                 hasImg={true}
                             >
-                                <Details
-                                    detailType={'Assignee'}
-                                    value={
-                                        taskDetailsData?.type === 'feature'
-                                            ? taskDetailsData?.assignee
-                                            : taskDetailsData?.participants?.join(
-                                                  ' , '
-                                              )
-                                    }
-                                />
-                                <DevFeature>
-                                    {isEditing && isUserAuthorized && (
-                                        <div
-                                            className={`${styles.assigneeSuggestionInput} ${styles.assignedToSection}`}
-                                        >
+                                <div className={styles.inputContainer}>
+                                    <label
+                                        htmlFor="assigneeInput"
+                                        className={styles.detailType}
+                                    >
+                                        Assignee:
+                                    </label>
+                                    <div className={styles.inputContainer}>
+                                        {isEditing && isUserAuthorized ? (
                                             <Suggestions
-                                                assigneeName={assigneeName}
-                                                showSuggestion={showSuggestion}
                                                 handleClick={
                                                     handleAssigneSelect
                                                 }
+                                                assigneeName={assigneeName}
+                                                showSuggestion={showSuggestion}
                                                 handleAssignment={
                                                     handleAssignment
                                                 }
@@ -396,13 +381,24 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
                                                 }
                                                 ref={inputRef}
                                             />
-                                        </div>
-                                    )}
-                                </DevFeature>
-                                <Details
-                                    detailType={'Reporter'}
-                                    value={'Ankush'}
-                                />
+                                        ) : (
+                                            <span
+                                                className={styles.detailValue}
+                                            >
+                                                {assigneeName ||
+                                                    taskDetailsData?.assignee}
+                                            </span>
+                                        )}
+                                    </div>
+                                </div>
+                                <div className={styles.inputContainer}>
+                                    <label className={styles.detailType}>
+                                        Reporter:
+                                    </label>
+                                    <span className={styles.detailValue}>
+                                        Ankush
+                                    </span>
+                                </div>
                             </TaskContainer>
                             <TaskContainer
                                 src="/calendar-icon.png"
@@ -415,37 +411,32 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
                                         taskDetailsData?.startedOn
                                     )}
                                 />
-                                <Details
-                                    detailType={'Ends On'}
-                                    value={getEndsOn(taskDetailsData?.endsOn)}
-                                    url={getExtensionRequestLink(
-                                        taskDetailsData.id,
-                                        isExtensionRequestPending
-                                    )}
-                                />
-
-                                <DevFeature>
-                                    {isEditing && (
-                                        <>
-                                            <label htmlFor="endsOnTaskDetails">
-                                                Ends On:
-                                            </label>
-                                            <input
-                                                id="endsOnTaskDetails"
-                                                type="date"
-                                                name="endsOn"
-                                                onChange={(e) => {
-                                                    setNewEndOnDate(
-                                                        e.target.value
-                                                    );
-                                                }}
-                                                onBlur={handleBlurOfEndsOn}
-                                                value={newEndOnDate}
-                                                data-testid="endsOnTaskDetails"
-                                            />
-                                        </>
+                                <div className={styles.inputContainer}>
+                                    <Details
+                                        detailType={'Ends On'}
+                                        value={getEndsOn(
+                                            taskDetailsData?.endsOn
+                                        )}
+                                        url={getExtensionRequestLink(
+                                            taskDetailsData.id,
+                                            isExtensionRequestPending
+                                        )}
+                                    />
+                                    {isEditing && isUserAuthorized && (
+                                        <input
+                                            id="endsOnTaskDetails"
+                                            type="date"
+                                            name="endsOn"
+                                            onChange={(e) =>
+                                                setNewEndOnDate(e.target.value)
+                                            }
+                                            onBlur={handleBlurOfEndsOn}
+                                            value={newEndOnDate}
+                                            data-testid="endsOnTaskDetails"
+                                            className={styles.inputField}
+                                        />
                                     )}
-                                </DevFeature>
+                                </div>
                             </TaskContainer>
                             <TaskContainer
                                 hasImg={false}
diff --git a/src/components/taskDetails/task-details.module.scss b/src/components/taskDetails/task-details.module.scss
index c8a3bd4f1..05251a5c6 100644
--- a/src/components/taskDetails/task-details.module.scss
+++ b/src/components/taskDetails/task-details.module.scss
@@ -170,3 +170,26 @@
         flex-wrap: wrap;
     }
 }
+
+.inputContainer {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.inputField {
+    width: auto;
+    padding: 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 0.25rem;
+}
+
+.assigneeSuggestionInput {
+    position: relative;
+}
+
+.extensionLink {
+    margin-top: 0.5rem;
+    display: block;
+    color: $theme-primary;
+}
diff --git a/src/components/tasks/SuggestionBox/suggestion.module.scss b/src/components/tasks/SuggestionBox/suggestion.module.scss
index fd8f9d935..2a1e86ed6 100644
--- a/src/components/tasks/SuggestionBox/suggestion.module.scss
+++ b/src/components/tasks/SuggestionBox/suggestion.module.scss
@@ -14,6 +14,7 @@
     top: 40px;
     border-radius: 5px;
     z-index: 100;
+    width: 100%;
     li {
         padding: 0.5rem;
         display: flex;