diff --git a/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx b/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
index 9f6ab12a8a7..71db5800a5c 100644
--- a/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
@@ -1,21 +1,20 @@
-import { PlusIcon, TrashIcon } from "@radix-ui/react-icons";
-import { useState } from "react";
+import {
+  DotsVerticalIcon,
+  MinusCircledIcon,
+  Pencil2Icon,
+} from "@radix-ui/react-icons";
+import React, { useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -23,91 +22,70 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 
-import routes from "@/Utils/request/api";
-import useQuery from "@/Utils/request/useQuery";
+import ValueSetSelect from "@/components/Questionnaire/ValueSetSelect";
+
+import { Code } from "@/types/questionnaire/code";
 import {
   DIAGNOSIS_CLINICAL_STATUS,
   DIAGNOSIS_VERIFICATION_STATUS,
-  type Diagnosis,
+  Diagnosis,
 } from "@/types/questionnaire/diagnosis";
-import type { QuestionnaireResponse } from "@/types/questionnaire/form";
+import { QuestionnaireResponse } from "@/types/questionnaire/form";
+import { Question } from "@/types/questionnaire/question";
 
 interface DiagnosisQuestionProps {
-  question: any;
+  question: Question;
   questionnaireResponse: QuestionnaireResponse;
   updateQuestionnaireResponseCB: (response: QuestionnaireResponse) => void;
   disabled?: boolean;
 }
 
+const DIAGNOSIS_INITIAL_VALUE: Partial<Diagnosis> = {
+  code: { code: "", display: "", system: "" },
+  clinical_status: "active",
+  verification_status: "confirmed",
+  onset: { onset_datetime: new Date().toISOString().split("T")[0] },
+};
+
 export function DiagnosisQuestion({
   question,
   questionnaireResponse,
   updateQuestionnaireResponseCB,
   disabled,
 }: DiagnosisQuestionProps) {
-  const [diagnoses, setDiagnoses] = useState<Diagnosis[]>(() => {
-    return (questionnaireResponse.values?.[0]?.value as Diagnosis[]) || [];
-  });
-
-  const diagnosisSearch = useQuery(routes.valueset.expand, {
-    pathParams: { system: "system-condition-code" },
-    body: { count: 10 },
-    prefetch: false,
-  });
+  const diagnoses =
+    (questionnaireResponse.values?.[0]?.value as Diagnosis[]) || [];
 
-  const handleAddDiagnosis = () => {
+  const handleAddDiagnosis = (code: Code) => {
     const newDiagnoses = [
       ...diagnoses,
-      { code: { code: "", display: "", system: "" } } as Diagnosis,
-    ];
-    setDiagnoses(newDiagnoses);
+      { ...DIAGNOSIS_INITIAL_VALUE, code },
+    ] as Diagnosis[];
     updateQuestionnaireResponseCB({
       ...questionnaireResponse,
-      values: [
-        {
-          type: "diagnosis",
-          value: newDiagnoses,
-        },
-      ],
+      values: [{ type: "diagnosis", value: newDiagnoses }],
     });
   };
 
   const handleRemoveDiagnosis = (index: number) => {
     const newDiagnoses = diagnoses.filter((_, i) => i !== index);
-    setDiagnoses(newDiagnoses);
     updateQuestionnaireResponseCB({
       ...questionnaireResponse,
-      values: [
-        {
-          type: "diagnosis",
-          value: newDiagnoses,
-        },
-      ],
+      values: [{ type: "diagnosis", value: newDiagnoses }],
     });
   };
 
-  const updateDiagnosis = (index: number, updates: Partial<Diagnosis>) => {
+  const handleUpdateDiagnosis = (
+    index: number,
+    updates: Partial<Diagnosis>,
+  ) => {
     const newDiagnoses = diagnoses.map((diagnosis, i) =>
       i === index ? { ...diagnosis, ...updates } : diagnosis,
     );
-    setDiagnoses(newDiagnoses);
     updateQuestionnaireResponseCB({
       ...questionnaireResponse,
-      values: [
-        {
-          type: "diagnosis",
-          value: newDiagnoses,
-        },
-      ],
+      values: [{ type: "diagnosis", value: newDiagnoses }],
     });
   };
 
@@ -117,183 +95,205 @@ export function DiagnosisQuestion({
         {question.text}
         {question.required && <span className="ml-1 text-red-500">*</span>}
       </Label>
-      <div className="rounded-lg border p-4">
-        <div className="overflow-auto max-w-full">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead className="w-[200px]">Diagnosis</TableHead>
-                <TableHead className="w-[150px]">Clinical Status</TableHead>
-                <TableHead className="w-[150px]">Verification</TableHead>
-                <TableHead className="w-[150px]">Onset Date</TableHead>
-                <TableHead className="w-[200px]">Note</TableHead>
-                <TableHead className="w-[50px]" />
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {diagnoses.map((diagnosis, index) => (
-                <TableRow key={index}>
-                  <TableCell className="min-w-[200px]">
-                    <Popover>
-                      <PopoverTrigger asChild disabled={disabled}>
-                        <Button
-                          variant="outline"
-                          role="combobox"
-                          className="w-full justify-between truncate"
-                        >
-                          {diagnosis.code.display || "Search diagnoses..."}
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-[300px] p-0" align="start">
-                        <Command filter={() => 1}>
-                          <CommandInput
-                            placeholder="Search diagnoses..."
-                            className="my-1"
-                            onValueChange={(search) =>
-                              diagnosisSearch.refetch({ body: { search } })
-                            }
-                          />
-                          <CommandList>
-                            <CommandEmpty>
-                              {diagnosisSearch.loading
-                                ? "Loading..."
-                                : "No diagnoses found"}
-                            </CommandEmpty>
-                            <CommandGroup>
-                              {diagnosisSearch.data?.results.map(
-                                (option) =>
-                                  option.code && (
-                                    <CommandItem
-                                      key={option.code}
-                                      value={option.code}
-                                      onSelect={() => {
-                                        updateDiagnosis(index, {
-                                          code: {
-                                            code: option.code,
-                                            display: option.display || "",
-                                            system: option.system || "",
-                                          },
-                                        });
-                                      }}
-                                    >
-                                      <span>{option.display}</span>
-                                    </CommandItem>
-                                  ),
-                              )}
-                            </CommandGroup>
-                          </CommandList>
-                        </Command>
-                      </PopoverContent>
-                    </Popover>
-                  </TableCell>
-                  <TableCell className="min-w-[150px]">
-                    <Select
-                      value={diagnosis.clinical_status}
-                      onValueChange={(value) =>
-                        updateDiagnosis(index, {
-                          clinical_status:
-                            value as Diagnosis["clinical_status"],
-                        })
-                      }
-                      disabled={disabled}
-                    >
-                      <SelectTrigger className="w-full capitalize">
-                        <SelectValue placeholder="Clinical Status" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {DIAGNOSIS_CLINICAL_STATUS.map((status) => (
-                          <SelectItem
-                            className="capitalize"
-                            key={status}
-                            value={status}
-                          >
-                            {status}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </TableCell>
-                  <TableCell className="min-w-[150px]">
-                    <Select
-                      value={diagnosis.verification_status}
-                      onValueChange={(value) =>
-                        updateDiagnosis(index, {
-                          verification_status:
-                            value as Diagnosis["verification_status"],
-                        })
-                      }
-                      disabled={disabled}
-                    >
-                      <SelectTrigger className="w-full capitalize">
-                        <SelectValue placeholder="Verification" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {DIAGNOSIS_VERIFICATION_STATUS.map((status) => (
-                          <SelectItem
-                            className="capitalize"
-                            key={status}
-                            value={status}
-                          >
-                            {status}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </TableCell>
-                  <TableCell className="min-w-[150px]">
-                    <input
-                      type="date"
-                      className="w-full rounded-md border p-2"
-                      value={diagnosis.onset?.onset_datetime || ""}
-                      onChange={(e) =>
-                        updateDiagnosis(index, {
-                          onset: {
-                            onset_datetime: e.target.value,
-                          },
-                        })
-                      }
-                      disabled={disabled}
-                    />
-                  </TableCell>
-                  <TableCell className="min-w-[200px]">
-                    <input
-                      type="text"
-                      className="w-full rounded-md border p-2"
-                      placeholder="Note"
-                      value={diagnosis.note || ""}
-                      onChange={(e) =>
-                        updateDiagnosis(index, { note: e.target.value })
-                      }
-                      disabled={disabled}
-                    />
-                  </TableCell>
-                  <TableCell className="min-w-[50px]">
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-8 w-8"
-                      onClick={() => handleRemoveDiagnosis(index)}
-                      disabled={disabled}
-                    >
-                      <TrashIcon className="h-4 w-4" />
-                    </Button>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
+      {diagnoses.length > 0 && (
+        <div className="rounded-lg border">
+          <div className="hidden md:grid md:grid-cols-12 items-center gap-4 p-3 bg-gray-50 text-sm font-medium text-gray-500">
+            <div className="col-span-5">Diagnosis</div>
+            <div className="col-span-2 text-center">Onset Date</div>
+            <div className="col-span-2 text-center">Status</div>
+            <div className="col-span-2 text-center">Verification</div>
+            <div className="col-span-1 text-center">Action</div>
+          </div>
+          <div className="divide-y divide-gray-200">
+            {diagnoses.map((diagnosis, index) => (
+              <DiagnosisItem
+                key={index}
+                diagnosis={diagnosis}
+                disabled={disabled}
+                onUpdate={(updates) => handleUpdateDiagnosis(index, updates)}
+                onRemove={() => handleRemoveDiagnosis(index)}
+              />
+            ))}
+          </div>
         </div>
-        <Button
-          variant="outline"
-          size="sm"
-          className="mt-4"
-          onClick={handleAddDiagnosis}
-          disabled={disabled}
-        >
-          <PlusIcon className="mr-2 h-4 w-4" />
-          Add Diagnosis
-        </Button>
-      </div>
+      )}
+      <ValueSetSelect
+        system="system-condition-code"
+        placeholder="Search for diagnoses to add"
+        onSelect={handleAddDiagnosis}
+        disabled={disabled}
+      />
     </div>
   );
 }
+
+interface DiagnosisItemProps {
+  diagnosis: Diagnosis;
+  disabled?: boolean;
+  onUpdate?: (diagnosis: Partial<Diagnosis>) => void;
+  onRemove?: () => void;
+}
+
+const DiagnosisItem: React.FC<DiagnosisItemProps> = ({
+  diagnosis,
+  disabled,
+  onUpdate,
+  onRemove,
+}) => {
+  const [showNotes, setShowNotes] = useState(false);
+
+  return (
+    <div className="group hover:bg-gray-50">
+      <div className="py-1 px-2 space-y-2 md:space-y-0 md:grid md:grid-cols-12 md:items-center md:gap-4">
+        <div className="flex items-center justify-between md:col-span-5">
+          <div
+            className="font-medium text-sm truncate"
+            title={diagnosis.code.display}
+          >
+            {diagnosis.code.display}
+          </div>
+          <div className="md:hidden">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  disabled={disabled}
+                  className="h-8 w-8"
+                >
+                  <DotsVerticalIcon className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => setShowNotes(!showNotes)}>
+                  <Pencil2Icon className="h-4 w-4 mr-2" />
+                  {showNotes ? "Hide Notes" : "Add Notes"}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  className="text-destructive focus:text-destructive"
+                  onClick={onRemove}
+                >
+                  <MinusCircledIcon className="h-4 w-4 mr-2" />
+                  Remove Diagnosis
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+        <div className="grid grid-cols-2 gap-2 md:col-span-6 md:grid-cols-3 md:gap-4">
+          <div className="col-span-2 md:col-span-1">
+            <Label className="text-xs text-gray-500 md:hidden">Date</Label>
+            <Input
+              type="date"
+              value={diagnosis.onset?.onset_datetime || ""}
+              onChange={(e) =>
+                onUpdate?.({
+                  onset: { onset_datetime: e.target.value },
+                })
+              }
+              disabled={disabled}
+              className="h-8 md:h-9"
+            />
+          </div>
+          <div>
+            <Label className="text-xs text-gray-500 md:hidden">Status</Label>
+            <Select
+              value={diagnosis.clinical_status}
+              onValueChange={(value) =>
+                onUpdate?.({
+                  clinical_status: value as Diagnosis["clinical_status"],
+                })
+              }
+              disabled={disabled}
+            >
+              <SelectTrigger className="h-8 md:h-9">
+                <SelectValue placeholder="Status" />
+              </SelectTrigger>
+              <SelectContent>
+                {DIAGNOSIS_CLINICAL_STATUS.map((status) => (
+                  <SelectItem
+                    key={status}
+                    value={status}
+                    className="capitalize"
+                  >
+                    {status.replace(/_/g, " ")}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div>
+            <Label className="text-xs text-gray-500 md:hidden">
+              Verification
+            </Label>
+            <Select
+              value={diagnosis.verification_status}
+              onValueChange={(value) =>
+                onUpdate?.({
+                  verification_status:
+                    value as Diagnosis["verification_status"],
+                })
+              }
+              disabled={disabled}
+            >
+              <SelectTrigger className="h-8 md:h-9">
+                <SelectValue placeholder="Verification" />
+              </SelectTrigger>
+              <SelectContent>
+                {DIAGNOSIS_VERIFICATION_STATUS.map((status) => (
+                  <SelectItem
+                    key={status}
+                    value={status}
+                    className="capitalize"
+                  >
+                    {status.replace(/_/g, " ")}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        <div className="hidden md:block md:col-span-1">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                disabled={disabled}
+                className="h-9 w-9"
+              >
+                <DotsVerticalIcon className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={() => setShowNotes(!showNotes)}>
+                <Pencil2Icon className="h-4 w-4 mr-2" />
+                {showNotes ? "Hide Notes" : "Add Notes"}
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                className="text-destructive focus:text-destructive"
+                onClick={onRemove}
+              >
+                <MinusCircledIcon className="h-4 w-4 mr-2" />
+                Remove Diagnosis
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+      {showNotes && (
+        <div className="px-3 pb-3">
+          <Input
+            type="text"
+            placeholder="Add notes about the diagnosis..."
+            value={diagnosis.note || ""}
+            onChange={(e) => onUpdate?.({ note: e.target.value })}
+            disabled={disabled}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx b/src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx
index f154b167004..0d3a6db503f 100644
--- a/src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx
@@ -147,7 +147,12 @@ const SymptomItem: React.FC<SymptomItemProps> = ({
     <div className="group hover:bg-gray-50">
       <div className="py-1 px-2 space-y-2 md:space-y-0 md:grid md:grid-cols-12 md:items-center md:gap-4">
         <div className="flex items-center justify-between md:col-span-5">
-          <div className="font-medium truncate">{symptom.code.display}</div>
+          <div
+            className="font-medium text-sm truncate"
+            title={symptom.code.display}
+          >
+            {symptom.code.display}
+          </div>
           <div className="md:hidden">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>