diff --git a/public/locale/en.json b/public/locale/en.json
index 161a1140fd5..1768903d45f 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -1047,6 +1047,7 @@
   "has_domestic_healthcare_support": "Has domestic healthcare support?",
   "has_sari": "Has SARI (Severe Acute Respiratory illness)?",
   "health-profile": "Health Profile",
+  "health_profile": "Health Profile",
   "hearing": "We are hearing you...",
   "help_confirmed": "There is sufficient diagnostic and/or clinical evidence to treat this as a confirmed condition.",
   "help_differential": "One of a set of potential (and typically mutually exclusive) diagnoses asserted to further guide the diagnostic process and preliminary treatment.",
diff --git a/src/components/Common/Charts/ObservationChart.tsx b/src/components/Common/Charts/ObservationChart.tsx
index d210255a181..cb892d834ff 100644
--- a/src/components/Common/Charts/ObservationChart.tsx
+++ b/src/components/Common/Charts/ObservationChart.tsx
@@ -152,7 +152,7 @@ export const ObservationVisualizer = ({
         {codeGroups.map((group, index) => (
           <Card key={index} className="p-4">
             <div
-              className="flex items-center justify-center text-muted-foreground"
+              className="flex items-center justify-center text-gray-500"
               style={{ height: `${height}px` }}
             >
               No data available
@@ -365,7 +365,7 @@ export const ObservationVisualizer = ({
                                   details.note && (
                                     <div
                                       key={code.code}
-                                      className="text-sm text-muted-foreground"
+                                      className="text-sm text-gray-500"
                                     >
                                       <span className="font-medium">
                                         {code.display}:
diff --git a/src/components/Common/Charts/ObservationHistoryTable.tsx b/src/components/Common/Charts/ObservationHistoryTable.tsx
index 240bfea2790..4a8fcee44d4 100644
--- a/src/components/Common/Charts/ObservationHistoryTable.tsx
+++ b/src/components/Common/Charts/ObservationHistoryTable.tsx
@@ -92,7 +92,7 @@ export const ObservationHistoryTable = ({
 
   if (!data?.pages[0]?.results.length) {
     return (
-      <div className="flex h-[200px] items-center justify-center text-muted-foreground">
+      <div className="flex h-[200px] items-center justify-center text-gray-500">
         No data available
       </div>
     );
@@ -134,7 +134,7 @@ export const ObservationHistoryTable = ({
                       <span>{name}</span>
                     </div>
                   </TableCell>
-                  <TableCell className="text-sm text-muted-foreground">
+                  <TableCell className="text-sm text-gray-500">
                     {observation.note}
                   </TableCell>
                 </TableRow>
diff --git a/src/components/Common/ComboboxQuantityInput.tsx b/src/components/Common/ComboboxQuantityInput.tsx
index 19674422d81..e28b246118e 100644
--- a/src/components/Common/ComboboxQuantityInput.tsx
+++ b/src/components/Common/ComboboxQuantityInput.tsx
@@ -120,7 +120,7 @@ export function ComboboxQuantityInput({
               autoFocus={autoFocus}
             />
             {selectedUnit && (
-              <div className="absolute right-1.5 top-1/2 -translate-y-1/2 text-sm text-muted-foreground">
+              <div className="absolute right-1.5 top-1/2 -translate-y-1/2 text-sm text-gray-500">
                 {selectedUnit.display}
               </div>
             )}
diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 531f5caf1b7..242266ae23e 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -365,7 +365,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
         <Button
           variant="ghost"
           size="sm"
-          className="w-full flex items-center justify-center text-muted-foreground"
+          className="w-full flex items-center justify-center text-gray-500"
           onClick={() => {
             setSearchValue("");
             inputRef.current?.focus();
diff --git a/src/components/Encounter/CreateEncounterForm.tsx b/src/components/Encounter/CreateEncounterForm.tsx
index ea4e71a53ed..488cbc585fd 100644
--- a/src/components/Encounter/CreateEncounterForm.tsx
+++ b/src/components/Encounter/CreateEncounterForm.tsx
@@ -226,7 +226,7 @@ export default function CreateEncounterForm({
                           <div className="flex flex-col items-center text-center">
                             <Icon className="size-6" />
                             <div className="text-sm font-bold">{label}</div>
-                            <div className="text-wrap text-xs text-center text-xs text-muted-foreground">
+                            <div className="text-wrap text-xs text-center text-xs text-gray-500">
                               {description}
                             </div>
                           </div>
diff --git a/src/components/Facility/ConsultationDetails/ObservationsList.tsx b/src/components/Facility/ConsultationDetails/ObservationsList.tsx
index cf389ab8dce..e25002bf7cd 100644
--- a/src/components/Facility/ConsultationDetails/ObservationsList.tsx
+++ b/src/components/Facility/ConsultationDetails/ObservationsList.tsx
@@ -58,9 +58,7 @@ export default function ObservationsList(props: Props) {
   if (isLoading) {
     return (
       <Card className="p-6">
-        <div className="text-lg font-medium text-muted-foreground">
-          {t("loading")}
-        </div>
+        <div className="text-lg font-medium text-gray-500">{t("loading")}</div>
       </Card>
     );
   }
@@ -70,7 +68,7 @@ export default function ObservationsList(props: Props) {
   if (observations.length === 0) {
     return (
       <Card className="p-6">
-        <div className="text-lg font-medium text-muted-foreground">
+        <div className="text-lg font-medium text-gray-500">
           {t("no_observations")}
         </div>
       </Card>
@@ -83,7 +81,7 @@ export default function ObservationsList(props: Props) {
         {observations.map((item: Observation) => (
           <Card key={item.id} className="flex items-center justify-between p-4">
             <div>
-              <div className="text-xs flex items-center gap-1 text-muted-foreground">
+              <div className="text-xs flex items-center gap-1 text-gray-500">
                 <CareIcon icon="l-calender" />
                 <span>{formatDateTime(item.effective_datetime)}</span>
               </div>
@@ -102,16 +100,14 @@ export default function ObservationsList(props: Props) {
                 </div>
               )}
               {item.note && (
-                <div className="mt-1 text-sm text-muted-foreground">
-                  {item.note}
-                </div>
+                <div className="mt-1 text-sm text-gray-500">{item.note}</div>
               )}
             </div>
           </Card>
         ))}
         {hasNextPage && (
           <div ref={ref} className="flex justify-center p-4">
-            <div className="text-sm text-muted-foreground">
+            <div className="text-sm text-gray-500">
               {isFetchingNextPage ? t("loading_more") : t("load_more")}
             </div>
           </div>
diff --git a/src/components/Facility/ConsultationDetails/QuestionnaireResponseView.tsx b/src/components/Facility/ConsultationDetails/QuestionnaireResponseView.tsx
index 73cf60a63fe..d826d487bb7 100644
--- a/src/components/Facility/ConsultationDetails/QuestionnaireResponseView.tsx
+++ b/src/components/Facility/ConsultationDetails/QuestionnaireResponseView.tsx
@@ -41,7 +41,7 @@ export default function QuestionnaireResponseView({
   if (!formResponse) {
     return (
       <Card className="p-6 text-center">
-        <p className="text-lg font-medium text-muted-foreground">
+        <p className="text-lg font-medium text-gray-500">
           {t("error_loading_questionnaire_response")}
         </p>
       </Card>
@@ -54,12 +54,12 @@ export default function QuestionnaireResponseView({
         <Card className="p-6">
           <div className="space-y-4">
             <div>
-              <p className="text-sm text-muted-foreground">
+              <p className="text-sm text-gray-500">
                 {formResponse.questionnaire?.description}
               </p>
             </div>
 
-            <div className="flex items-center gap-4 text-sm text-muted-foreground">
+            <div className="flex items-center gap-4 text-sm text-gray-500">
               <div className="flex items-center gap-2">
                 <CareIcon icon="l-calender" className="h-4 w-4" />
                 <span>{formatDateTime(formResponse.created_date)}</span>
@@ -95,13 +95,13 @@ export default function QuestionnaireResponseView({
 
                     return (
                       <div key={question.id} className="grid grid-cols-2 gap-4">
-                        <div className="text-sm text-muted-foreground">
+                        <div className="text-sm text-gray-500">
                           {question.text}
                         </div>
                         <div className="font-medium">
                           {String(value)}
                           {questionResponse.note && (
-                            <span className="ml-2 text-sm text-muted-foreground">
+                            <span className="ml-2 text-sm text-gray-500">
                               ({questionResponse.note})
                             </span>
                           )}
diff --git a/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx b/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx
index 11ba2b75c7b..73a909330c6 100644
--- a/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx
+++ b/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx
@@ -1,61 +1,103 @@
+import { t } from "i18next";
 import { useTranslation } from "react-i18next";
 
-import CareIcon from "@/CAREUI/icons/CareIcon";
 import PaginatedList from "@/CAREUI/misc/PaginatedList";
 
+import { Badge } from "@/components/ui/badge";
 import { Card } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
 
 import { CardListSkeleton } from "@/components/Common/SkeletonLoading";
 
 import routes from "@/Utils/request/api";
 import { formatDateTime, properCase } from "@/Utils/utils";
+import { AllergyIntoleranceRequest } from "@/types/emr/allergyIntolerance/allergyIntolerance";
+import { DiagnosisRequest } from "@/types/emr/diagnosis/diagnosis";
 import { Encounter } from "@/types/emr/encounter";
+import { MedicationRequest } from "@/types/emr/medicationRequest";
+import { MedicationStatementRequest } from "@/types/emr/medicationStatement";
+import { SymptomRequest } from "@/types/emr/symptom/symptom";
 import { Question } from "@/types/questionnaire/question";
 import { QuestionnaireResponse } from "@/types/questionnaire/questionnaireResponse";
+import { CreateAppointmentQuestion } from "@/types/scheduling/schedule";
 
 interface Props {
-  encounter: Encounter;
+  encounter?: Encounter;
+  patientId: string;
 }
 
-function formatValue(value: string, type: string): string {
+type ResponseValueType = {
+  value?:
+    | string
+    | number
+    | boolean
+    | Date
+    | Encounter
+    | AllergyIntoleranceRequest[]
+    | MedicationRequest[]
+    | MedicationStatementRequest[]
+    | SymptomRequest[]
+    | DiagnosisRequest[]
+    | CreateAppointmentQuestion;
+  value_quantity?: {
+    value: number;
+  };
+};
+
+interface QuestionResponseProps {
+  question: Question;
+  response?: {
+    values: ResponseValueType[];
+    note?: string;
+    question_id: string;
+  };
+}
+
+function formatValue(value: ResponseValueType["value"], type: string): string {
+  if (!value) return "";
+
+  // Handle complex objects
+  if (
+    typeof value === "object" &&
+    !Array.isArray(value) &&
+    !(value instanceof Date)
+  ) {
+    return JSON.stringify(value);
+  }
+
   switch (type) {
     case "dateTime":
-      return formatDateTime(value);
+      return value instanceof Date
+        ? formatDateTime(value.toISOString())
+        : formatDateTime(value.toString());
     case "choice":
-      return properCase(value);
+      return properCase(value.toString());
+    case "decimal":
+    case "integer":
+      return typeof value === "number" ? value.toString() : value.toString();
     default:
-      return value;
+      return value.toString();
   }
 }
 
-function QuestionResponseValue({
-  question,
-  response,
-}: {
-  question: Question;
-  response: any;
-}) {
+function QuestionResponseValue({ question, response }: QuestionResponseProps) {
+  if (!response) return null;
+
   const value =
     response.values[0]?.value || response.values[0]?.value_quantity?.value;
 
   if (!value) return null;
 
   return (
-    <div className="flex flex-col space-y-0.5">
-      <div className="text-xs text-muted-foreground">
-        {question.text}
-        {question.code && (
-          <span className="ml-1 text-xs text-muted-foreground">
-            ({question.code.display})
-          </span>
+    <div>
+      <div className="text-xs text-gray-500">{question.text}</div>
+      <div className="text-sm font-medium whitespace-pre-wrap">
+        {formatValue(value, question.type)}
+        {question.unit?.code && (
+          <span className="ml-1 text-xs">{question.unit.code}</span>
         )}
-      </div>
-      <div className="text-sm whitespace-pre-wrap">
-        {formatValue(String(value), question.type)}
         {response.note && (
-          <span className="ml-2 text-xs text-muted-foreground">
-            ({response.note})
-          </span>
+          <span className="ml-2 text-xs text-gray-500">({response.note})</span>
         )}
       </div>
     </div>
@@ -65,52 +107,58 @@ function QuestionResponseValue({
 function QuestionGroup({
   group,
   responses,
+  level = 0,
 }: {
   group: Question;
-  responses: any[];
+  responses: {
+    values: ResponseValueType[];
+    note?: string;
+    question_id: string;
+  }[];
+  level?: number;
 }) {
-  // If this is a nested group (like BP with systolic/diastolic)
-  if (group.questions?.some((q) => q.questions)) {
-    return (
-      <div className="space-y-2">
-        <h4 className="text-sm font-medium text-secondary-700">
-          {group.text}
-          {group.code && (
-            <span className="ml-1 text-xs text-muted-foreground">
-              ({group.code.display})
-            </span>
-          )}
-        </h4>
-        <div className="space-y-2 pl-3">
-          {group.questions?.map((subGroup) => (
-            <QuestionGroup
-              key={subGroup.id}
-              group={subGroup}
-              responses={responses}
-            />
-          ))}
-        </div>
-      </div>
-    );
-  }
+  const hasResponses = responses.some((r) =>
+    group.questions?.some((q) => q.id === r.question_id),
+  );
+
+  if (!hasResponses) return null;
+
+  const containerClass = group.styling_metadata?.containerClasses || "";
+  const classes = group.styling_metadata?.classes || "";
 
-  // Regular group with questions
   return (
-    <div className="space-y-2">
-      <h4 className="text-sm font-medium text-secondary-700">
-        {group.text}
-        {group.code && (
-          <span className="ml-1 text-xs text-muted-foreground">
-            ({group.code.display})
-          </span>
-        )}
-      </h4>
-      <div
-        className={`space-y-2 pl-3 ${group.styling_metadata?.classes || ""}`}
-      >
+    <div className={`space-y-2 ${classes}`}>
+      {group.text && (
+        <div className="flex flex-col space-y-1">
+          <h4 className="text-sm font-medium text-secondary-700">
+            {group.text}
+            {group.code && (
+              <span className="ml-1 text-xs text-gray-500">
+                ({group.code.display})
+              </span>
+            )}
+          </h4>
+          {level === 0 && <Separator className="my-2" />}
+        </div>
+      )}
+      <div className={`${containerClass}`}>
         {group.questions?.map((question) => {
+          if (question.type === "group") {
+            return (
+              <QuestionGroup
+                key={question.id}
+                group={question}
+                responses={responses}
+                level={level + 1}
+              />
+            );
+          }
+
+          if (question.type === "structured") return null;
+
           const response = responses.find((r) => r.question_id === question.id);
           if (!response) return null;
+
           return (
             <QuestionResponseValue
               key={question.id}
@@ -124,17 +172,118 @@ function QuestionGroup({
   );
 }
 
-export default function QuestionnaireResponsesList({ encounter }: Props) {
+function StructuredResponseBadge({
+  type,
+  submitType,
+}: {
+  type: string;
+  submitType: string;
+}) {
+  const colors = {
+    symptom: "bg-yellow-100 text-yellow-800",
+    diagnosis: "bg-blue-100 text-blue-800",
+    medication_request: "bg-green-100 text-green-800",
+    medication_statement: "bg-purple-100 text-purple-800",
+    follow_up_appointment: "bg-pink-100 text-pink-800",
+  };
+
+  return (
+    <Badge
+      variant="outline"
+      className={`${
+        colors[type as keyof typeof colors] || "bg-gray-100 text-gray-800"
+      } border-none`}
+    >
+      {submitType === "CREATE" ? t("created") : t("updated")}{" "}
+      {properCase(type.replace(/_/g, " "))}
+    </Badge>
+  );
+}
+
+function ResponseCard({ item }: { item: QuestionnaireResponse }) {
+  const isStructured = !item.questionnaire;
+  const structuredType = Object.keys(item.structured_responses || {})[0];
+
+  return (
+    <Card className="flex flex-col py-3 px-4 transition-colors hover:bg-muted/50">
+      <div className="flex items-start justify-between">
+        <div className="space-y-1">
+          <div className="flex items-center gap-2 text-xs text-gray-500">
+            <div className="flex items-center gap-2">
+              {isStructured && structuredType ? (
+                <StructuredResponseBadge
+                  type={structuredType}
+                  submitType={
+                    Object.values(item.structured_responses || {})[0]
+                      ?.submit_type
+                  }
+                />
+              ) : (
+                <h3 className="text-sm font-medium">
+                  {item.questionnaire?.title} {t("filed")}
+                </h3>
+              )}
+            </div>
+            <span>{t("at")}</span>
+            <span>{formatDateTime(item.created_date)}</span>
+            <span>{t("by")}</span>
+            <div>
+              {item.created_by?.first_name || ""}{" "}
+              {item.created_by?.last_name || ""}
+              {item.created_by?.user_type && ` (${item.created_by?.user_type})`}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {item.questionnaire && (
+        <div className="mt-4 space-y-4">
+          {item.questionnaire?.questions.map((question: Question) => {
+            if (question.type === "structured") return null;
+
+            if (question.type === "group") {
+              return (
+                <QuestionGroup
+                  key={question.id}
+                  group={question}
+                  responses={item.responses}
+                />
+              );
+            }
+
+            const response = item.responses.find(
+              (r) => r.question_id === question.id,
+            );
+            if (!response) return null;
+
+            return (
+              <QuestionResponseValue
+                key={question.id}
+                question={question}
+                response={response}
+              />
+            );
+          })}
+        </div>
+      )}
+    </Card>
+  );
+}
+
+export default function QuestionnaireResponsesList({
+  encounter,
+  patientId,
+}: Props) {
   const { t } = useTranslation();
 
   return (
     <PaginatedList
       route={routes.getQuestionnaireResponses}
       pathParams={{
-        patientId: encounter.patient.id,
+        patientId: patientId,
       }}
       query={{
-        encounter: encounter.id,
+        ...(encounter && { encounter: encounter.id }),
       }}
     >
       {() => (
@@ -142,7 +291,7 @@ export default function QuestionnaireResponsesList({ encounter }: Props) {
           <div>
             <PaginatedList.WhenEmpty>
               <Card className="p-6">
-                <div className="text-lg font-medium text-muted-foreground">
+                <div className="text-lg font-medium text-gray-500">
                   {t("no_questionnaire_responses")}
                 </div>
               </Card>
@@ -155,88 +304,10 @@ export default function QuestionnaireResponsesList({ encounter }: Props) {
             </PaginatedList.WhenLoading>
 
             <PaginatedList.Items<QuestionnaireResponse> className="grid gap-4">
-              {(item) => (
-                <Card
-                  key={item.id}
-                  className="flex flex-col py-2 px-3 transition-colors hover:bg-muted/50"
-                >
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-start gap-4">
-                      <div>
-                        <h3 className="text-sm font-medium">
-                          {item.questionnaire?.title ||
-                            Object.keys(item.structured_responses || {}).map(
-                              (key) => properCase(key),
-                            )}
-                        </h3>
-                        <div className="mt-0.5 flex items-center gap-2 text-xs text-muted-foreground">
-                          <CareIcon icon="l-clock" className="h-3 w-3" />
-                          <span>{formatDateTime(item.created_date)}</span>
-                          <span className="mt-0.5 text-xs text-muted-foreground">
-                            {!item.questionnaire && (
-                              <>
-                                {Object.values(
-                                  item.structured_responses ?? {},
-                                )[0]?.submit_type === "CREATE"
-                                  ? "Created"
-                                  : "Updated"}{" "}
-                              </>
-                            )}
-                            {
-                              <>
-                                by {item.created_by?.first_name || ""}{" "}
-                                {item.created_by?.last_name || ""}
-                                {item.created_by?.user_type &&
-                                  ` (${item.created_by?.user_type})`}
-                              </>
-                            }
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-                  {item.questionnaire && (
-                    <div className="mt-3 border-t pt-3">
-                      <div className="space-y-4">
-                        {item.questionnaire?.questions.map(
-                          (question: Question) => {
-                            // Skip structured questions for now as they need special handling
-                            if (question.type === "structured") return null;
-
-                            const response = item.responses.find(
-                              (r) => r.question_id === question.id,
-                            );
-
-                            if (question.type === "group") {
-                              return (
-                                <QuestionGroup
-                                  key={question.id}
-                                  group={question}
-                                  responses={item.responses}
-                                />
-                              );
-                            }
-
-                            if (!response) return null;
-
-                            return (
-                              <QuestionResponseValue
-                                key={question.id}
-                                question={question}
-                                response={response}
-                              />
-                            );
-                          },
-                        )}
-                      </div>
-                    </div>
-                  )}
-                </Card>
-              )}
+              {(item) => <ResponseCard key={item.id} item={item} />}
             </PaginatedList.Items>
 
-            <div className="flex w-full items-center justify-center">
+            <div className="flex w-full items-center justify-center mt-4">
               <PaginatedList.Paginator hideIfSinglePage />
             </div>
           </div>
diff --git a/src/components/Facility/FacilityForm.tsx b/src/components/Facility/FacilityForm.tsx
index 097341b411a..b0fed2348eb 100644
--- a/src/components/Facility/FacilityForm.tsx
+++ b/src/components/Facility/FacilityForm.tsx
@@ -476,7 +476,7 @@ export default function FacilityForm({
                   <FormLabel className="text-base">
                     {t("make_facility_public")}
                   </FormLabel>
-                  <p className="text-sm text-muted-foreground">
+                  <p className="text-sm text-gray-500">
                     {t("make_facility_public_description")}
                   </p>
                 </div>
diff --git a/src/components/Facility/FacilityHome.tsx b/src/components/Facility/FacilityHome.tsx
index 5cee02880c0..4856911d5e7 100644
--- a/src/components/Facility/FacilityHome.tsx
+++ b/src/components/Facility/FacilityHome.tsx
@@ -313,7 +313,7 @@ export const FacilityHome = ({ facilityId }: Props) => {
                 <CardContent>
                   <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-12 mt-4">
                     <div className="flex items-start gap-3">
-                      <MapPin className="mt-2 h-5 w-5 flex-shrink-0 text-muted-foreground" />
+                      <MapPin className="mt-2 h-5 w-5 flex-shrink-0 text-gray-500" />
                       <div>
                         {facilityData?.geo_organization && (
                           <div className="mt-2 text-sm">
diff --git a/src/components/Medicine/MedicationRequestTable/index.tsx b/src/components/Medicine/MedicationRequestTable/index.tsx
index 2d9309abc81..92210bf98b9 100644
--- a/src/components/Medicine/MedicationRequestTable/index.tsx
+++ b/src/components/Medicine/MedicationRequestTable/index.tsx
@@ -62,13 +62,13 @@ export default function MedicationRequestTable({
   const EmptyState = ({ searching }: { searching?: boolean }) => (
     <div className="flex min-h-[200px] flex-col items-center justify-center gap-4 p-8 text-center">
       <div className="rounded-full bg-secondary/10 p-3">
-        <CareIcon icon="l-tablets" className="text-3xl text-muted-foreground" />
+        <CareIcon icon="l-tablets" className="text-3xl text-gray-500" />
       </div>
       <div className="max-w-[200px] space-y-1">
         <h3 className="font-medium">
           {searching ? "No matches found" : "No Prescriptions"}
         </h3>
-        <p className="text-sm text-muted-foreground">
+        <p className="text-sm text-gray-500">
           {searching
             ? `No medications match "${searchQuery}"`
             : "No medications have been prescribed yet"}
@@ -105,19 +105,19 @@ export default function MedicationRequestTable({
 
       <div className="rounded-lg border">
         <div className="flex items-center gap-2 border-b p-2">
-          <CareIcon icon="l-search" className="text-lg text-muted-foreground" />
+          <CareIcon icon="l-search" className="text-lg text-gray-500" />
           <input
             type="text"
             placeholder="Search medications..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+            className="flex-1 bg-transparent text-sm outline-none placeholder:text-gray-500"
           />
           {searchQuery && (
             <Button
               variant="ghost"
               size="sm"
-              className="h-6 px-2 text-muted-foreground hover:text-foreground"
+              className="h-6 px-2 text-gray-500 hover:text-foreground"
               onClick={() => setSearchQuery("")}
             >
               <CareIcon icon="l-times" className="text-lg" />
diff --git a/src/components/Medicine/MedicationsTable.tsx b/src/components/Medicine/MedicationsTable.tsx
index 41bb47a8e76..059e35bd4d4 100644
--- a/src/components/Medicine/MedicationsTable.tsx
+++ b/src/components/Medicine/MedicationsTable.tsx
@@ -40,7 +40,7 @@ export const MedicationsTable = ({ medications }: MedicationsTableProps) => {
 
   if (!medications?.length) {
     return (
-      <div className="flex h-[200px] items-center justify-center rounded-lg border-2 border-dashed p-4 text-muted-foreground">
+      <div className="flex h-[200px] items-center justify-center rounded-lg border-2 border-dashed p-4 text-gray-500">
         {t("no_medications_found_for_this_encounter")}
       </div>
     );
diff --git a/src/components/Patient/LinkDepartmentsSheet.tsx b/src/components/Patient/LinkDepartmentsSheet.tsx
index 12f2aa84853..d3f98027b06 100644
--- a/src/components/Patient/LinkDepartmentsSheet.tsx
+++ b/src/components/Patient/LinkDepartmentsSheet.tsx
@@ -209,7 +209,7 @@ export default function LinkDepartmentsSheet({
                       <div className="flex flex-col">
                         <span className="font-medium">{org.name}</span>
                         {org.description && (
-                          <span className="text-xs text-muted-foreground">
+                          <span className="text-xs text-gray-500">
                             {org.description}
                           </span>
                         )}
@@ -230,7 +230,7 @@ export default function LinkDepartmentsSheet({
                   </div>
                 ))}
                 {currentOrganizations.length === 0 && (
-                  <p className="text-sm text-muted-foreground">
+                  <p className="text-sm text-gray-500">
                     {t("no_organizations_added_yet")}
                   </p>
                 )}
diff --git a/src/components/Patient/MedicationStatementList.tsx b/src/components/Patient/MedicationStatementList.tsx
index 495b8ee4904..39c8e334cda 100644
--- a/src/components/Patient/MedicationStatementList.tsx
+++ b/src/components/Patient/MedicationStatementList.tsx
@@ -143,7 +143,7 @@ export function MedicationStatementList({
           <CardTitle>{t("ongoing_medications")}</CardTitle>
         </CardHeader>
         <CardContent className="px-4 pb-5 pt-2">
-          <p className="text-muted-foreground">{t("no_ongoing_medications")}</p>
+          <p className="text-gray-500">{t("no_ongoing_medications")}</p>
         </CardContent>
       </Card>
     );
diff --git a/src/components/Patient/PatientDetailsTab/Appointments.tsx b/src/components/Patient/PatientDetailsTab/Appointments.tsx
index 8b6228c4125..a2b4d77c6f7 100644
--- a/src/components/Patient/PatientDetailsTab/Appointments.tsx
+++ b/src/components/Patient/PatientDetailsTab/Appointments.tsx
@@ -23,14 +23,14 @@ import { formatDateTime, formatName } from "@/Utils/utils";
 import scheduleApis from "@/types/scheduling/scheduleApis";
 
 export const Appointments = (props: PatientProps) => {
-  const { patientData, facilityId, id } = props;
+  const { patientData, facilityId, patientId } = props;
   const { t } = useTranslation();
 
   const { data } = useQuery({
-    queryKey: ["patient-appointments", id],
+    queryKey: ["patient-appointments", patientId],
     queryFn: query(scheduleApis.appointments.list, {
       pathParams: { facility_id: facilityId },
-      queryParams: { patient: id, limit: 100 },
+      queryParams: { patient: patientId, limit: 100 },
     }),
   });
 
@@ -65,7 +65,7 @@ export const Appointments = (props: PatientProps) => {
         </h2>
         <Button variant="outline_primary" asChild>
           <Link
-            href={`/facility/${facilityId}/patient/${id}/book-appointment`}
+            href={`/facility/${facilityId}/patient/${patientId}/book-appointment`}
             className="flex items-center justify-center w-full sm:w-auto"
           >
             <CareIcon icon="l-plus" className="mr-2" />
diff --git a/src/components/Patient/PatientDetailsTab/Demography.tsx b/src/components/Patient/PatientDetailsTab/Demography.tsx
index 6a8c9f58927..956c55b1d87 100644
--- a/src/components/Patient/PatientDetailsTab/Demography.tsx
+++ b/src/components/Patient/PatientDetailsTab/Demography.tsx
@@ -20,7 +20,7 @@ import {
 } from "@/types/organization/organization";
 
 export const Demography = (props: PatientProps) => {
-  const { patientData, facilityId, id } = props;
+  const { patientData, facilityId, patientId } = props;
   const { t } = useTranslation();
 
   const [activeSection, _setActiveSection] = useState<string | null>(null);
@@ -39,10 +39,10 @@ export const Demography = (props: PatientProps) => {
   const handleEditClick = (sectionId: string) => {
     if (facilityId) {
       navigate(
-        `/facility/${facilityId}/patient/${id}/update?section=${sectionId}`,
+        `/facility/${facilityId}/patient/${patientId}/update?section=${sectionId}`,
       );
     } else {
-      navigate(`/patient/${id}/update?section=${sectionId}`);
+      navigate(`/patient/${patientId}/update?section=${sectionId}`);
     }
   };
 
diff --git a/src/components/Patient/PatientDetailsTab/EncounterHistory.tsx b/src/components/Patient/PatientDetailsTab/EncounterHistory.tsx
index c6719b4ab8b..218fceccb62 100644
--- a/src/components/Patient/PatientDetailsTab/EncounterHistory.tsx
+++ b/src/components/Patient/PatientDetailsTab/EncounterHistory.tsx
@@ -14,14 +14,14 @@ import routes from "@/Utils/request/api";
 import { Encounter } from "@/types/emr/encounter";
 
 const EncounterHistory = (props: PatientProps) => {
-  const { id, facilityId } = props;
+  const { patientId, facilityId } = props;
 
   const { t } = useTranslation();
 
   return (
     <PaginatedList
       route={routes.encounter.list}
-      query={{ patient: id }}
+      query={{ patient: patientId }}
       perPage={5}
     >
       {() => (
@@ -37,7 +37,7 @@ const EncounterHistory = (props: PatientProps) => {
               <div className="flex w-full items-center justify-center pt-4">
                 <Button variant="outline_primary" asChild>
                   <Link
-                    href={`/facility/${facilityId}/patient/${id}/consultation`}
+                    href={`/facility/${facilityId}/patient/${patientId}/consultation`}
                   >
                     <span className="flex w-full items-center justify-start gap-2">
                       <CareIcon icon="l-chat-bubble-user" className="text-xl" />
diff --git a/src/components/Patient/PatientDetailsTab/HealthProfileSummary.tsx b/src/components/Patient/PatientDetailsTab/HealthProfileSummary.tsx
index 30cd2529952..26573a62045 100644
--- a/src/components/Patient/PatientDetailsTab/HealthProfileSummary.tsx
+++ b/src/components/Patient/PatientDetailsTab/HealthProfileSummary.tsx
@@ -1,3 +1,5 @@
+import { t } from "i18next";
+
 import { MedicationStatementList } from "@/components/Patient/MedicationStatementList";
 import { AllergyList } from "@/components/Patient/allergy/list";
 import { DiagnosisList } from "@/components/Patient/diagnosis/list";
@@ -6,7 +8,7 @@ import { SymptomsList } from "@/components/Patient/symptoms/list";
 import { PatientProps } from ".";
 
 export const HealthProfileSummary = (props: PatientProps) => {
-  const { id } = props;
+  const { patientId } = props;
 
   return (
     <div className="mt-4 px-4 md:px-0" data-test-id="patient-health-profile">
@@ -14,25 +16,25 @@ export const HealthProfileSummary = (props: PatientProps) => {
         <div className="h-full space-y-2">
           <div className="flex flex-row items-center justify-between">
             <div className="mr-4 text-xl font-bold text-secondary-900">
-              Health Profile
+              {t("health_profile")}
             </div>
           </div>
 
           <div className="mt-2 grid grid-cols-1 gap-x-4 gap-y-2 sm:grid-cols-2 md:gap-y-8">
             <div className="md:col-span-2">
-              <MedicationStatementList patientId={id} />
+              <MedicationStatementList patientId={patientId} />
             </div>
 
             <div className="md:col-span-2">
-              <AllergyList patientId={id} />
+              <AllergyList patientId={patientId} />
             </div>
 
             <div className="md:col-span-2">
-              <SymptomsList patientId={id} />
+              <SymptomsList patientId={patientId} />
             </div>
 
             <div className="md:col-span-2">
-              <DiagnosisList patientId={id} />
+              <DiagnosisList patientId={patientId} />
             </div>
           </div>
         </div>
diff --git a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
index 8b0f1bf3790..5e6f00494ab 100644
--- a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
+++ b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
@@ -203,25 +203,25 @@ function AddUserSheet({ patientId }: AddUserSheetProps) {
 }
 
 export const PatientUsers = (props: PatientProps) => {
-  const { id } = props;
+  const { patientId } = props;
   const queryClient = useQueryClient();
 
   const { data: users } = useQuery({
-    queryKey: ["patientUsers", id],
+    queryKey: ["patientUsers", patientId],
     queryFn: query(routes.patient.users.listUsers, {
-      pathParams: { patientId: id },
+      pathParams: { patientId },
     }),
   });
 
   const { mutate: removeUser } = useMutation({
     mutationFn: (user: string) =>
       mutate(routes.patient.users.removeUser, {
-        pathParams: { patientId: id },
+        pathParams: { patientId },
         body: { user },
       })({ user }),
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: ["patientUsers", id],
+        queryKey: ["patientUsers", patientId],
       });
       toast.success("User removed successfully");
     },
@@ -313,7 +313,7 @@ export const PatientUsers = (props: PatientProps) => {
             <div className="mr-4 text-xl font-bold text-secondary-900">
               {t("users")}
             </div>
-            <AddUserSheet patientId={id} />
+            <AddUserSheet patientId={patientId} />
           </div>
           <ManageUsers />
         </div>
diff --git a/src/components/Patient/PatientDetailsTab/ResourceRequests.tsx b/src/components/Patient/PatientDetailsTab/ResourceRequests.tsx
index 0df4ec5b404..8180bd75bcd 100644
--- a/src/components/Patient/PatientDetailsTab/ResourceRequests.tsx
+++ b/src/components/Patient/PatientDetailsTab/ResourceRequests.tsx
@@ -25,17 +25,17 @@ import { ResourceRequest } from "@/types/resourceRequest/resourceRequest";
 import { PatientProps } from ".";
 
 export const ResourceRequests = (props: PatientProps) => {
-  const { patientData, facilityId, id } = props;
+  const { patientData, facilityId, patientId } = props;
   const { t } = useTranslation();
 
   const { data: resourceRequests, isLoading: loading } = useQuery({
-    queryKey: ["resourceRequests", id],
+    queryKey: ["resourceRequests", patientId],
     queryFn: query(routes.listResourceRequests, {
       queryParams: {
-        related_patient: id,
+        related_patient: patientId,
       },
     }),
-    enabled: !!id,
+    enabled: !!patientId,
   });
 
   const getStatusBadge = (status: ResourceRequest["status"]) => {
diff --git a/src/components/Patient/PatientDetailsTab/index.tsx b/src/components/Patient/PatientDetailsTab/index.tsx
index c6bf06c8ce6..8e7de28b091 100644
--- a/src/components/Patient/PatientDetailsTab/index.tsx
+++ b/src/components/Patient/PatientDetailsTab/index.tsx
@@ -1,3 +1,4 @@
+import QuestionnaireResponsesList from "@/components/Facility/ConsultationDetails/QuestionnaireResponsesList";
 import EncounterHistory from "@/components/Patient/PatientDetailsTab//EncounterHistory";
 import { HealthProfileSummary } from "@/components/Patient/PatientDetailsTab//HealthProfileSummary";
 import { Demography } from "@/components/Patient/PatientDetailsTab/Demography";
@@ -12,7 +13,7 @@ import { ResourceRequests } from "./ResourceRequests";
 
 export interface PatientProps {
   facilityId: string;
-  id: string;
+  patientId: string;
   patientData: Patient;
 }
 
@@ -66,7 +67,7 @@ export const facilityPatientTabs = [
   },
   {
     route: "updates",
-    component: Updates,
+    component: QuestionnaireResponsesList,
   },
   {
     route: "resource_requests",
diff --git a/src/components/Patient/PatientDetailsTab/patientUpdates.tsx b/src/components/Patient/PatientDetailsTab/patientUpdates.tsx
index baabad49ed9..f82f1489fb5 100644
--- a/src/components/Patient/PatientDetailsTab/patientUpdates.tsx
+++ b/src/components/Patient/PatientDetailsTab/patientUpdates.tsx
@@ -16,7 +16,7 @@ import { QuestionnaireResponse } from "@/types/questionnaire/questionnaireRespon
 import { PatientProps } from ".";
 
 export const Updates = (props: PatientProps) => {
-  const { facilityId, id: patientId } = props;
+  const { facilityId, patientId } = props;
   const { t } = useTranslation();
 
   return (
@@ -42,7 +42,7 @@ export const Updates = (props: PatientProps) => {
             <div className="flex max-h-[85vh] flex-col gap-4 overflow-y-auto overflow-x-hidden">
               <PaginatedList.WhenEmpty>
                 <Card className="p-6">
-                  <div className="text-lg font-medium text-muted-foreground">
+                  <div className="text-lg font-medium text-gray-500">
                     {t("no_update_available")}
                   </div>
                 </Card>
@@ -63,7 +63,7 @@ export const Updates = (props: PatientProps) => {
                     <div className="flex items-start gap-4">
                       <CareIcon
                         icon="l-file-alt"
-                        className="mt-1 h-5 w-5 text-muted-foreground"
+                        className="mt-1 h-5 w-5 text-gray-500"
                       />
                       <div>
                         <h3 className="text-lg font-medium">
@@ -72,11 +72,11 @@ export const Updates = (props: PatientProps) => {
                               item.structured_responses,
                             )}
                         </h3>
-                        <div className="mt-1 flex items-center gap-2 text-sm text-muted-foreground">
+                        <div className="mt-1 flex items-center gap-2 text-sm text-gray-500">
                           <CareIcon icon="l-calender" className="h-4 w-4" />
                           <span>{formatDateTime(item.created_date)}</span>
                         </div>
-                        <div className="mt-1 text-sm text-muted-foreground">
+                        <div className="mt-1 text-sm text-gray-500">
                           by {item.created_by?.first_name || ""}{" "}
                           {item.created_by?.last_name || ""}
                           {` (${item.created_by?.user_type})`}
diff --git a/src/components/Patient/PatientHome.tsx b/src/components/Patient/PatientHome.tsx
index 373494a4a3f..e3b8e0b28d8 100644
--- a/src/components/Patient/PatientHome.tsx
+++ b/src/components/Patient/PatientHome.tsx
@@ -134,7 +134,7 @@ export const PatientHome = (props: {
             {Tab && (
               <Tab
                 facilityId={facilityId || ""}
-                id={id}
+                patientId={id}
                 patientData={patientData}
               />
             )}
diff --git a/src/components/Patient/PatientIndex.tsx b/src/components/Patient/PatientIndex.tsx
index 20d5c345c23..e2c753e96df 100644
--- a/src/components/Patient/PatientIndex.tsx
+++ b/src/components/Patient/PatientIndex.tsx
@@ -140,9 +140,7 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
             <h1 className="text-3xl font-bold tracking-tight">
               {t("search_patients")}
             </h1>
-            <p className="text-muted-foreground">
-              {t("search_patient_page_text")}
-            </p>
+            <p className="text-gray-500">{t("search_patient_page_text")}</p>
           </div>
 
           <div>
@@ -168,7 +166,7 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
                           <h3 className="text-lg font-semibold">
                             {t("no_patient_record_found")}
                           </h3>
-                          <p className="text-sm text-muted-foreground mb-6">
+                          <p className="text-sm text-gray-500 mb-6">
                             {t("no_patient_record_text")}
                           </p>
                           <AddPatientButton outline />
diff --git a/src/components/Patient/PatientInfoCard.tsx b/src/components/Patient/PatientInfoCard.tsx
index 4ec59158b5f..84e3336a15e 100644
--- a/src/components/Patient/PatientInfoCard.tsx
+++ b/src/components/Patient/PatientInfoCard.tsx
@@ -119,7 +119,7 @@ export default function PatientInfoCard(props: PatientInfoCardProps) {
               </div>
               <div className="grid gap-4 grid-cols-3 mt-2 md:mt-0">
                 <div className="flex flex-col space-y-1">
-                  <span className="text-xs text-muted-foreground font-medium">
+                  <span className="text-xs text-gray-500 font-medium">
                     Start Date
                   </span>
                   <span className="text-xs">
@@ -129,7 +129,7 @@ export default function PatientInfoCard(props: PatientInfoCardProps) {
                   </span>
                 </div>
                 <div className="flex flex-col space-y-1">
-                  <span className="text-xs text-muted-foreground font-medium">
+                  <span className="text-xs text-gray-500 font-medium">
                     End Date
                   </span>
                   <span className="text-xs">
@@ -140,7 +140,7 @@ export default function PatientInfoCard(props: PatientInfoCardProps) {
                 </div>
                 {props.encounter.external_identifier && (
                   <div className="flex flex-col space-y-1 col-span-1">
-                    <span className="text-xs text-muted-foreground font-medium">
+                    <span className="text-xs text-gray-500 font-medium">
                       Hospital Identifier
                     </span>
                     <span className="text-xs">
@@ -186,7 +186,7 @@ export default function PatientInfoCard(props: PatientInfoCardProps) {
                               key={index}
                               className="flex items-center gap-2 text-sm"
                             >
-                              <span className="text-muted-foreground">
+                              <span className="text-gray-500">
                                 {formatDateTime(history.moved_at)}
                               </span>
                               <span className="font-medium">
@@ -227,7 +227,7 @@ export default function PatientInfoCard(props: PatientInfoCardProps) {
                               key={index}
                               className="flex items-center gap-2 text-sm"
                             >
-                              <span className="text-muted-foreground">
+                              <span className="text-gray-500">
                                 {formatDateTime(history.moved_at)}
                               </span>
                               <span className="font-medium">
diff --git a/src/components/Patient/allergy/AllergyTable.tsx b/src/components/Patient/allergy/AllergyTable.tsx
index 2d5fc8f84be..8aaf982a91c 100644
--- a/src/components/Patient/allergy/AllergyTable.tsx
+++ b/src/components/Patient/allergy/AllergyTable.tsx
@@ -95,9 +95,7 @@ export function AllergyTable({
             {allergy.note && (
               <TableRow>
                 <TableCell colSpan={7} className="px-4 py-2 bg-muted/50">
-                  <div className="text-xs text-muted-foreground mb-1">
-                    Notes
-                  </div>
+                  <div className="text-xs text-gray-500 mb-1">Notes</div>
                   <div className="text-sm">{allergy.note}</div>
                 </TableCell>
               </TableRow>
diff --git a/src/components/Patient/allergy/list.tsx b/src/components/Patient/allergy/list.tsx
index c255b1e490f..a4a91bae6a1 100644
--- a/src/components/Patient/allergy/list.tsx
+++ b/src/components/Patient/allergy/list.tsx
@@ -40,7 +40,6 @@ export function AllergyList({
     queryKey: ["allergies", patientId, encounterId],
     queryFn: query(allergyIntoleranceApi.getAllergy, {
       pathParams: { patientId },
-      queryParams: encounterId ? { encounter: encounterId } : undefined,
     }),
   });
 
@@ -75,7 +74,7 @@ export function AllergyList({
         encounterId={encounterId}
       >
         <CardContent className="px-2 pb-3 pt-2">
-          <p className="text-muted-foreground">{t("no_allergies_recorded")}</p>
+          <p className="text-gray-500">{t("no_allergies_recorded")}</p>
         </CardContent>
       </AllergyListLayout>
     );
diff --git a/src/components/Patient/diagnosis/list.tsx b/src/components/Patient/diagnosis/list.tsx
index 10d3a9d2d5d..40ae25b3faf 100644
--- a/src/components/Patient/diagnosis/list.tsx
+++ b/src/components/Patient/diagnosis/list.tsx
@@ -64,7 +64,7 @@ export function DiagnosisList({
         encounterId={encounterId}
       >
         <CardContent className="px-2 pb-3 pt-2">
-          <p className="text-muted-foreground">{t("no_diagnoses_recorded")}</p>
+          <p className="text-gray-500">{t("no_diagnoses_recorded")}</p>
         </CardContent>
       </DiagnosisListLayout>
     );
diff --git a/src/components/Patient/symptoms/list.tsx b/src/components/Patient/symptoms/list.tsx
index 5034364e078..d095b851330 100644
--- a/src/components/Patient/symptoms/list.tsx
+++ b/src/components/Patient/symptoms/list.tsx
@@ -63,7 +63,7 @@ export function SymptomsList({
         encounterId={encounterId}
       >
         <CardContent className="px-2 pb-3 pt-2">
-          <p className="text-muted-foreground">{t("no_symptoms_recorded")}</p>
+          <p className="text-gray-500">{t("no_symptoms_recorded")}</p>
         </CardContent>
       </SymptomListLayout>
     );
diff --git a/src/components/Questionnaire/CloneQuestionnaireSheet.tsx b/src/components/Questionnaire/CloneQuestionnaireSheet.tsx
index 9b95c751731..3a61ce1910a 100644
--- a/src/components/Questionnaire/CloneQuestionnaireSheet.tsx
+++ b/src/components/Questionnaire/CloneQuestionnaireSheet.tsx
@@ -147,7 +147,7 @@ export default function CloneQuestionnaireSheet({
                     </Badge>
                   ))
               ) : (
-                <p className="text-sm text-muted-foreground">
+                <p className="text-sm text-gray-500">
                   No organizations selected
                 </p>
               )}
@@ -180,7 +180,7 @@ export default function CloneQuestionnaireSheet({
                           <Building className="h-4 w-4" />
                           <span>{org.name}</span>
                           {org.description && (
-                            <span className="text-xs text-muted-foreground">
+                            <span className="text-xs text-gray-500">
                               - {org.description}
                             </span>
                           )}
diff --git a/src/components/Questionnaire/ManageQuestionnaireOrganizationsSheet.tsx b/src/components/Questionnaire/ManageQuestionnaireOrganizationsSheet.tsx
index 22c589dbb87..8d405641b04 100644
--- a/src/components/Questionnaire/ManageQuestionnaireOrganizationsSheet.tsx
+++ b/src/components/Questionnaire/ManageQuestionnaireOrganizationsSheet.tsx
@@ -152,7 +152,7 @@ export default function ManageQuestionnaireOrganizationsSheet({
               {!isLoading &&
                 (!selectedOrganizations ||
                   selectedOrganizations.length === 0) && (
-                  <p className="text-sm text-muted-foreground">
+                  <p className="text-sm text-gray-500">
                     {t("no_organizations_selected")}
                   </p>
                 )}
@@ -185,7 +185,7 @@ export default function ManageQuestionnaireOrganizationsSheet({
                           <Building className="h-4 w-4" />
                           <span>{org.name}</span>
                           {org.description && (
-                            <span className="text-xs text-muted-foreground">
+                            <span className="text-xs text-gray-500">
                               - {org.description}
                             </span>
                           )}
diff --git a/src/components/Questionnaire/ManageQuestionnaireTagsSheet.tsx b/src/components/Questionnaire/ManageQuestionnaireTagsSheet.tsx
index 6f7918d2214..0ace0998366 100644
--- a/src/components/Questionnaire/ManageQuestionnaireTagsSheet.tsx
+++ b/src/components/Questionnaire/ManageQuestionnaireTagsSheet.tsx
@@ -175,9 +175,7 @@ export default function ManageQuestionnaireTagsSheet({
                 </Badge>
               ))}
               {!isLoading && (!selectedTags || selectedTags.length === 0) && (
-                <p className="text-sm text-muted-foreground">
-                  {t("no_tags_selected")}
-                </p>
+                <p className="text-sm text-gray-500">{t("no_tags_selected")}</p>
               )}
             </div>
           </div>
diff --git a/src/components/Questionnaire/QuestionTypes/AppointmentQuestion.tsx b/src/components/Questionnaire/QuestionTypes/AppointmentQuestion.tsx
index 7f30558df4f..ee9174f00e7 100644
--- a/src/components/Questionnaire/QuestionTypes/AppointmentQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/AppointmentQuestion.tsx
@@ -150,7 +150,7 @@ export function AppointmentQuestion({
             slotsQuery.data.results.length === 0) &&
           selectedDate &&
           resource ? (
-            <div className="rounded-md border border-input px-3 py-2 text-sm text-muted-foreground">
+            <div className="rounded-md border border-input px-3 py-2 text-sm text-gray-500">
               {t("no_slots_available")}
             </div>
           ) : (
diff --git a/src/components/Questionnaire/QuestionTypes/DateTimeQuestion.tsx b/src/components/Questionnaire/QuestionTypes/DateTimeQuestion.tsx
index 9fa2e201157..b8aafb2e1df 100644
--- a/src/components/Questionnaire/QuestionTypes/DateTimeQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/DateTimeQuestion.tsx
@@ -99,7 +99,7 @@ export function DateTimeQuestion({
             variant="outline"
             className={cn(
               "flex-1 justify-start text-left font-normal",
-              !currentValue && "text-muted-foreground",
+              !currentValue && "text-gray-500",
               classes,
             )}
             disabled={disabled}
diff --git a/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx b/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
index b4aab2c07c4..f40485d97c0 100644
--- a/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
@@ -46,6 +46,7 @@ import {
 
 interface DiagnosisQuestionProps {
   patientId: string;
+  encounterId: string;
   questionnaireResponse: QuestionnaireResponse;
   updateQuestionnaireResponseCB: (
     values: ResponseValue[],
@@ -84,6 +85,7 @@ function convertToDiagnosisRequest(diagnosis: Diagnosis): DiagnosisRequest {
 
 export function DiagnosisQuestion({
   patientId,
+  encounterId,
   questionnaireResponse,
   updateQuestionnaireResponseCB,
   disabled,
@@ -96,6 +98,7 @@ export function DiagnosisQuestion({
     queryFn: query(diagnosisApi.listDiagnosis, {
       pathParams: { patientId },
       queryParams: {
+        encounter: encounterId,
         limit: 100,
       },
     }),
diff --git a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
index fb2fb85fd54..f9ff069f431 100644
--- a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
@@ -78,6 +78,7 @@ interface MedicationRequestQuestionProps {
     note?: string,
   ) => void;
   disabled?: boolean;
+  encounterId: string;
 }
 
 export function MedicationRequestQuestion({
@@ -85,6 +86,7 @@ export function MedicationRequestQuestion({
   updateQuestionnaireResponseCB,
   disabled,
   patientId,
+  encounterId,
 }: MedicationRequestQuestionProps) {
   const medications =
     (questionnaireResponse.values?.[0]?.value as MedicationRequest[]) || [];
@@ -94,6 +96,7 @@ export function MedicationRequestQuestion({
     queryFn: query(medicationRequestApi.list, {
       pathParams: { patientId },
       queryParams: {
+        encounter: encounterId,
         limit: 100,
       },
     }),
diff --git a/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx b/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
index 936a2b3b0b3..f56be1b82dc 100644
--- a/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
@@ -61,6 +61,7 @@ import { Question } from "@/types/questionnaire/question";
 
 interface MedicationStatementQuestionProps {
   patientId: string;
+  encounterId: string;
   question: Question;
   questionnaireResponse: QuestionnaireResponse;
   updateQuestionnaireResponseCB: (
@@ -90,6 +91,7 @@ export function MedicationStatementQuestion({
   updateQuestionnaireResponseCB,
   disabled,
   patientId,
+  encounterId,
 }: MedicationStatementQuestionProps) {
   const { t } = useTranslation();
   const desktopLayout = useBreakpoints({ lg: true, default: false });
@@ -110,6 +112,7 @@ export function MedicationStatementQuestion({
       pathParams: { patientId },
       queryParams: {
         limit: 100,
+        encounter: encounterId,
       },
     }),
   });
diff --git a/src/components/Questionnaire/QuestionTypes/QuestionGroup.tsx b/src/components/Questionnaire/QuestionTypes/QuestionGroup.tsx
index aeb8704b699..d38be63abcb 100644
--- a/src/components/Questionnaire/QuestionTypes/QuestionGroup.tsx
+++ b/src/components/Questionnaire/QuestionTypes/QuestionGroup.tsx
@@ -130,9 +130,7 @@ export const QuestionGroup = memo(function QuestionGroup({
         <div className="space-y-1">
           <QuestionLabel question={question} groupLabel />
           {question.description && (
-            <p className="text-sm text-muted-foreground">
-              {question.description}
-            </p>
+            <p className="text-sm text-gray-500">{question.description}</p>
           )}
         </div>
       )}
diff --git a/src/components/Questionnaire/QuestionTypes/QuestionInput.tsx b/src/components/Questionnaire/QuestionTypes/QuestionInput.tsx
index 16957d63c68..deec52da280 100644
--- a/src/components/Questionnaire/QuestionTypes/QuestionInput.tsx
+++ b/src/components/Questionnaire/QuestionTypes/QuestionInput.tsx
@@ -115,15 +115,45 @@ export function QuestionInput({
       case "structured":
         switch (question.structured_type) {
           case "medication_request":
-            return <MedicationRequestQuestion {...commonProps} />;
+            if (encounterId) {
+              return (
+                <MedicationRequestQuestion
+                  {...commonProps}
+                  encounterId={encounterId}
+                />
+              );
+            }
+            return null;
           case "medication_statement":
-            return <MedicationStatementQuestion {...commonProps} />;
+            if (encounterId) {
+              return (
+                <MedicationStatementQuestion
+                  {...commonProps}
+                  encounterId={encounterId}
+                />
+              );
+            }
+            return null;
           case "allergy_intolerance":
             return <AllergyQuestion {...commonProps} />;
           case "symptom":
-            return <SymptomQuestion {...commonProps} />;
+            if (encounterId) {
+              return (
+                <SymptomQuestion
+                  {...commonProps}
+                  encounterId={encounterId}
+                  patientId={patientId}
+                />
+              );
+            }
+            return null;
           case "diagnosis":
-            return <DiagnosisQuestion {...commonProps} />;
+            if (encounterId) {
+              return (
+                <DiagnosisQuestion {...commonProps} encounterId={encounterId} />
+              );
+            }
+            return null;
           case "appointment":
             return <AppointmentQuestion {...commonProps} />;
           case "encounter":
@@ -131,8 +161,8 @@ export function QuestionInput({
               return (
                 <EncounterQuestion
                   {...commonProps}
-                  encounterId={encounterId}
                   facilityId={facilityId}
+                  encounterId={encounterId}
                 />
               );
             }
diff --git a/src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx b/src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx
index 94eba927251..0a175ae9219 100644
--- a/src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx
@@ -47,6 +47,7 @@ import {
 
 interface SymptomQuestionProps {
   patientId: string;
+  encounterId: string;
   questionnaireResponse: QuestionnaireResponse;
   updateQuestionnaireResponseCB: (
     values: ResponseValue[],
@@ -281,6 +282,7 @@ export function SymptomQuestion({
   questionnaireResponse,
   updateQuestionnaireResponseCB,
   disabled,
+  encounterId,
 }: SymptomQuestionProps) {
   const symptoms =
     (questionnaireResponse.values?.[0]?.value as SymptomRequest[]) || [];
@@ -291,6 +293,7 @@ export function SymptomQuestion({
       pathParams: { patientId },
       queryParams: {
         limit: 100,
+        encounter: encounterId,
       },
     }),
   });
diff --git a/src/components/Questionnaire/QuestionnaireEditor.tsx b/src/components/Questionnaire/QuestionnaireEditor.tsx
index ada4383307f..22f4a701058 100644
--- a/src/components/Questionnaire/QuestionnaireEditor.tsx
+++ b/src/components/Questionnaire/QuestionnaireEditor.tsx
@@ -154,9 +154,7 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
       <div className="mb-4 flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold">Edit Questionnaire</h1>
-          <p className="text-sm text-muted-foreground">
-            {questionnaire.description}
-          </p>
+          <p className="text-sm text-gray-500">{questionnaire.description}</p>
         </div>
         <div className="flex gap-2">
           <Button variant="outline" onClick={handleCancel}>
@@ -215,7 +213,7 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
                                 : ""
                             }`}
                           >
-                            <span className="font-medium text-muted-foreground">
+                            <span className="font-medium text-gray-500">
                               {index + 1}.
                             </span>
                             <span className="flex-1 truncate">
@@ -244,7 +242,7 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
                                     }}
                                     className="w-full text-left px-3 py-1.5 text-sm rounded-md hover:bg-accent flex items-center gap-2"
                                   >
-                                    <span className="font-medium text-muted-foreground">
+                                    <span className="font-medium text-gray-500">
                                       {index + 1}.{subIndex + 1}
                                     </span>
                                     <span className="flex-1 truncate">
@@ -359,7 +357,7 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
                 <CardHeader className="flex flex-row items-center justify-between border-b">
                   <div>
                     <CardTitle>Questions</CardTitle>
-                    <p className="text-sm text-muted-foreground mt-1">
+                    <p className="text-sm text-gray-500 mt-1">
                       {questionnaire.questions?.length || 0} question
                       {questionnaire.questions?.length !== 1 ? "s" : ""}
                     </p>
@@ -410,7 +408,7 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
                                   id={`question-${question.id}`}
                                   className="relative"
                                 >
-                                  <div className="absolute -left-10 top-4 font-medium text-muted-foreground">
+                                  <div className="absolute -left-10 top-4 font-medium text-gray-500">
                                     {index + 1}.
                                   </div>
                                   <QuestionEditor
@@ -549,7 +547,7 @@ function QuestionEditor({
     >
       <div className="flex items-center p-4">
         <div {...dragHandleProps} className="mr-2 cursor-move">
-          <CareIcon icon="l-arrow" className="h-4 w-4 text-muted-foreground" />
+          <CareIcon icon="l-arrow" className="h-4 w-4 text-gray-500" />
         </div>
         <CollapsibleTrigger className="flex-1 flex items-center">
           <div className="flex-1">
@@ -569,7 +567,7 @@ function QuestionEditor({
           </div>
           <CareIcon
             icon={isExpanded ? "l-angle-up" : "l-angle-down"}
-            className="h-4 w-4 text-muted-foreground"
+            className="h-4 w-4 text-gray-500"
           />
         </CollapsibleTrigger>
         <Button
diff --git a/src/components/Questionnaire/QuestionnaireForm.tsx b/src/components/Questionnaire/QuestionnaireForm.tsx
index 85830892738..a7da1010ba2 100644
--- a/src/components/Questionnaire/QuestionnaireForm.tsx
+++ b/src/components/Questionnaire/QuestionnaireForm.tsx
@@ -376,7 +376,7 @@ export function QuestionnaireForm({
                   {form.questionnaire.title}
                 </h2>
                 {form.questionnaire.description && (
-                  <p className="text-sm text-muted-foreground">
+                  <p className="text-sm text-gray-500">
                     {form.questionnaire.description}
                   </p>
                 )}
@@ -524,7 +524,7 @@ export function QuestionnaireForm({
         {import.meta.env.DEV && (
           <div className="p-4 space-y-6 max-w-4xl">
             <h2 className="text-xl font-semibold">QuestionnaireForm</h2>
-            <pre className="text-sm text-muted-foreground">
+            <pre className="text-sm text-gray-500">
               {JSON.stringify(questionnaireForms, null, 2)}
             </pre>
           </div>
diff --git a/src/components/Questionnaire/QuestionnaireSearch.tsx b/src/components/Questionnaire/QuestionnaireSearch.tsx
index 447e38cb349..f2227944d5a 100644
--- a/src/components/Questionnaire/QuestionnaireSearch.tsx
+++ b/src/components/Questionnaire/QuestionnaireSearch.tsx
@@ -83,10 +83,10 @@ export function QuestionnaireSearch({
         <div className="flex items-center border-b px-3">
           <CareIcon
             icon="l-search"
-            className="mr-2 h-4 w-4 shrink-0 text-muted-foreground"
+            className="mr-2 h-4 w-4 shrink-0 text-gray-500"
           />
           <input
-            className="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+            className="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-gray-500 disabled:cursor-not-allowed disabled:opacity-50"
             placeholder="Search questionnaires..."
             value={search}
             onChange={(e) => setSearch(e.target.value)}
@@ -100,7 +100,7 @@ export function QuestionnaireSearch({
               <Skeleton className="h-8 w-full" />
             </div>
           ) : filteredQuestionnaires.length === 0 ? (
-            <div className="p-4 text-sm text-muted-foreground">
+            <div className="p-4 text-sm text-gray-500">
               {t("no_questionnaires_found")}
             </div>
           ) : (
diff --git a/src/components/Resource/ResourceCreate.tsx b/src/components/Resource/ResourceCreate.tsx
index 30b749d1984..ee4d44353a3 100644
--- a/src/components/Resource/ResourceCreate.tsx
+++ b/src/components/Resource/ResourceCreate.tsx
@@ -184,7 +184,7 @@ export default function ResourceCreate(props: ResourceProps) {
                   <h3 className="text-lg font-medium">
                     {t("basic_information")}
                   </h3>
-                  <p className="text-sm text-muted-foreground">
+                  <p className="text-sm text-gray-500">
                     {t("resource_request_basic_info_description")}
                   </p>
                 </div>
@@ -292,7 +292,7 @@ export default function ResourceCreate(props: ResourceProps) {
                   <h3 className="text-lg font-medium">
                     {t("request_details")}
                   </h3>
-                  <p className="text-sm text-muted-foreground">
+                  <p className="text-sm text-gray-500">
                     {t("resource_request_details_description")}
                   </p>
                 </div>
@@ -348,7 +348,7 @@ export default function ResourceCreate(props: ResourceProps) {
                     <h3 className="text-lg font-medium">
                       {t("contact_information")}
                     </h3>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-gray-500">
                       {t("contact_information_description")}
                     </p>
                   </div>
diff --git a/src/components/Resource/ResourceDetails.tsx b/src/components/Resource/ResourceDetails.tsx
index 8308935f197..b2ec9e613f4 100644
--- a/src/components/Resource/ResourceDetails.tsx
+++ b/src/components/Resource/ResourceDetails.tsx
@@ -38,7 +38,7 @@ function PatientCard({ patient }: { patient: PatientModel }) {
         <div className="grid gap-4 md:grid-cols-2">
           <div className="space-y-1">
             <p className="text-sm font-medium">{t("name")}</p>
-            <p className="text-sm text-muted-foreground">{patient.name}</p>
+            <p className="text-sm text-gray-500">{patient.name}</p>
           </div>
 
           <div className="space-y-1">
@@ -61,12 +61,12 @@ function PatientCard({ patient }: { patient: PatientModel }) {
                 </a>
               </div>
             ) : (
-              <p className="text-sm text-muted-foreground">--</p>
+              <p className="text-sm text-gray-500">--</p>
             )}
           </div>
           <div className="space-y-1 md:col-span-2">
             <p className="text-sm font-medium">{t("address")}</p>
-            <p className="text-sm text-muted-foreground whitespace-pre-wrap">
+            <p className="text-sm text-gray-500 whitespace-pre-wrap">
               {[patient.address].filter(Boolean).join(", ") || "--"}
             </p>
           </div>
@@ -93,7 +93,7 @@ function FacilityCard({
         <div className="grid grid-cols-2 gap-4">
           <div className="space-y-1">
             <p className="text-sm font-medium">{t("name")}</p>
-            <p className="text-sm text-muted-foreground">
+            <p className="text-sm text-gray-500">
               {facilityData?.name || "--"}
             </p>
           </div>
@@ -265,7 +265,7 @@ export default function ResourceDetails(props: { id: string }) {
               </div>
               <div className="space-y-1">
                 <p className="text-sm font-medium">{t("category")}</p>
-                <p className="text-sm text-muted-foreground">
+                <p className="text-sm text-gray-500">
                   {RESOURCE_CATEGORY_CHOICES.find(
                     (item) => item.id === data.category,
                   )?.text || "--"}
@@ -273,7 +273,7 @@ export default function ResourceDetails(props: { id: string }) {
               </div>
               <div className="space-y-1">
                 <p className="text-sm font-medium">{t("contact_person")}</p>
-                <p className="text-sm text-muted-foreground">
+                <p className="text-sm text-gray-500">
                   {data.referring_facility_contact_name || "--"}
                 </p>
               </div>
@@ -297,7 +297,7 @@ export default function ResourceDetails(props: { id: string }) {
                     </a>
                   </div>
                 ) : (
-                  <p className="text-sm text-muted-foreground">--</p>
+                  <p className="text-sm text-gray-500">--</p>
                 )}
               </div>
             </div>
@@ -306,7 +306,7 @@ export default function ResourceDetails(props: { id: string }) {
 
             <div className="space-y-2">
               <p className="text-sm font-medium">{t("reason")}</p>
-              <p className="text-sm text-muted-foreground whitespace-pre-wrap">
+              <p className="text-sm text-gray-500 whitespace-pre-wrap">
                 {data.reason || "--"}
               </p>
             </div>
@@ -340,20 +340,20 @@ export default function ResourceDetails(props: { id: string }) {
               {data.created_by && (
                 <div className="space-y-1">
                   <p className="text-sm font-medium">{t("created_by")}</p>
-                  <p className="text-sm text-muted-foreground">
+                  <p className="text-sm text-gray-500">
                     {formatName(data.created_by)}
                   </p>
-                  <p className="text-xs text-muted-foreground">
+                  <p className="text-xs text-gray-500">
                     {formatDateTime(data.created_date)}
                   </p>
                 </div>
               )}
               <div className="space-y-1">
                 <p className="text-sm font-medium">{t("last_modified_by")}</p>
-                <p className="text-sm text-muted-foreground">
+                <p className="text-sm text-gray-500">
                   {formatName(data.updated_by)}
                 </p>
-                <p className="text-xs text-muted-foreground">
+                <p className="text-xs text-gray-500">
                   {formatDateTime(data.modified_date)}
                 </p>
               </div>
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
index 11a65a13e9d..6ff21377000 100644
--- a/src/components/ui/chart.tsx
+++ b/src/components/ui/chart.tsx
@@ -50,7 +50,7 @@ const ChartContainer = React.forwardRef<
         data-chart={chartId}
         ref={ref}
         className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-gray-500 [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
           className,
         )}
         {...props}
diff --git a/src/components/ui/date-picker.tsx b/src/components/ui/date-picker.tsx
index 32d23132362..e8c5587fe2e 100644
--- a/src/components/ui/date-picker.tsx
+++ b/src/components/ui/date-picker.tsx
@@ -29,7 +29,7 @@ export function DatePicker({ date, onChange, disabled }: DatePickerProps) {
           variant="outline"
           className={cn(
             "w-full justify-start text-left font-normal",
-            !date && "text-muted-foreground",
+            !date && "text-gray-500",
           )}
         >
           <CareIcon icon="l-calender" className="mr-2 h-4 w-4" />
diff --git a/src/components/ui/date-range-picker.tsx b/src/components/ui/date-range-picker.tsx
index 18e467c58b0..ffbbf482bce 100644
--- a/src/components/ui/date-range-picker.tsx
+++ b/src/components/ui/date-range-picker.tsx
@@ -37,7 +37,7 @@ export function DateRangePicker({
             variant={"outline"}
             className={cn(
               "justify-center text-left font-normal",
-              !date && "text-muted-foreground",
+              !date && "text-gray-500",
             )}
           >
             <CareIcon icon="l-calender" className="mr-2 h-4 w-4" />
diff --git a/src/components/ui/date-time-picker.tsx b/src/components/ui/date-time-picker.tsx
index 26c93552596..4603f606434 100644
--- a/src/components/ui/date-time-picker.tsx
+++ b/src/components/ui/date-time-picker.tsx
@@ -68,7 +68,7 @@ export function DateTimePicker({
           variant="outline"
           className={cn(
             "w-full justify-start text-left font-normal",
-            !value && "text-muted-foreground",
+            !value && "text-gray-500",
           )}
         >
           <CalendarIcon className="mr-2 h-4 w-4" />
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 9deb3cf02ec..cb3d1045e6c 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<
   return (
     <textarea
       className={cn(
-        "flex min-h-[80px] w-full rounded-md border border-gray-400/75 bg-white px-3 py-1 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:border-primary-500 focus-visible:outline-none focus-visible:ring-primary-500 md:text-sm disabled:opacity-50",
+        "flex min-h-[80px] w-full rounded-md border border-gray-400/75 bg-white px-3 py-1 text-base shadow-sm transition-colors placeholder:text-gray-500 focus-visible:ring-1 focus-visible:border-primary-500 focus-visible:outline-none focus-visible:ring-primary-500 md:text-sm disabled:opacity-50",
         className,
       )}
       ref={ref}
diff --git a/src/pages/Encounters/EncounterList.tsx b/src/pages/Encounters/EncounterList.tsx
index b4abc39fe7a..effc46721a5 100644
--- a/src/pages/Encounters/EncounterList.tsx
+++ b/src/pages/Encounters/EncounterList.tsx
@@ -107,7 +107,7 @@ function EmptyState() {
         <CareIcon icon="l-folder-open" className="h-6 w-6 text-primary" />
       </div>
       <h3 className="text-lg font-semibold mb-1">No encounters found</h3>
-      <p className="text-sm text-muted-foreground mb-4">
+      <p className="text-sm text-gray-500 mb-4">
         Try adjusting your filters or create a new encounter
       </p>
     </Card>
diff --git a/src/pages/Encounters/PrintPrescription.tsx b/src/pages/Encounters/PrintPrescription.tsx
index 6341474223f..607a42eee91 100644
--- a/src/pages/Encounters/PrintPrescription.tsx
+++ b/src/pages/Encounters/PrintPrescription.tsx
@@ -40,7 +40,7 @@ export const PrintPrescription = (props: {
 
   if (!medications?.results?.length) {
     return (
-      <div className="flex h-[200px] items-center justify-center rounded-lg border-2 border-dashed p-4 text-muted-foreground">
+      <div className="flex h-[200px] items-center justify-center rounded-lg border-2 border-dashed p-4 text-gray-500">
         {t("no_medications_found_for_this_encounter")}
       </div>
     );
@@ -144,7 +144,7 @@ export const PrintPrescription = (props: {
           </div>
 
           {/* Footer */}
-          <div className="mt-8 space-y-1 pt-2 text-[10px] text-muted-foreground flex justify-between">
+          <div className="mt-8 space-y-1 pt-2 text-[10px] text-gray-500 flex justify-between">
             <p>
               {t("generated_on")} {format(new Date(), "PPP 'at' p")}
             </p>
diff --git a/src/pages/Encounters/tabs/EncounterUpdatesTab.tsx b/src/pages/Encounters/tabs/EncounterUpdatesTab.tsx
index b1f01ac6b16..e44706a6d9b 100644
--- a/src/pages/Encounters/tabs/EncounterUpdatesTab.tsx
+++ b/src/pages/Encounters/tabs/EncounterUpdatesTab.tsx
@@ -46,7 +46,10 @@ export const EncounterUpdatesTab = ({
 
           {/* Questionnaire Responses Section */}
           <div>
-            <QuestionnaireResponsesList encounter={encounter} />
+            <QuestionnaireResponsesList
+              encounter={encounter}
+              patientId={patient.id}
+            />
           </div>
         </div>
 
diff --git a/src/pages/Facility/FacilitiesPage.tsx b/src/pages/Facility/FacilitiesPage.tsx
index 14b75a686a5..ae9f5cf4dfa 100644
--- a/src/pages/Facility/FacilitiesPage.tsx
+++ b/src/pages/Facility/FacilitiesPage.tsx
@@ -111,13 +111,13 @@ export function FacilitiesPage() {
           </div>
         ) : !qParams.organization ? (
           <Card className="p-6">
-            <div className="text-lg font-medium text-muted-foreground">
+            <div className="text-lg font-medium text-gray-500">
               {t("select_location_first")}
             </div>
           </Card>
         ) : !facilitiesResponse?.results.length ? (
           <Card className="p-6">
-            <div className="text-lg font-medium text-muted-foreground">
+            <div className="text-lg font-medium text-gray-500">
               {t("no_facilities_found")}
             </div>
           </Card>
diff --git a/src/pages/Facility/FacilityDetailsPage.tsx b/src/pages/Facility/FacilityDetailsPage.tsx
index c652748bd7f..228d203f61f 100644
--- a/src/pages/Facility/FacilityDetailsPage.tsx
+++ b/src/pages/Facility/FacilityDetailsPage.tsx
@@ -113,7 +113,7 @@ export function FacilityDetailsPage({ id }: Props) {
           <div className="px-4 space-y-2">
             <div className="space-y-2">
               <h1 className="text-3xl font-bold">{facility.name}</h1>
-              <p className="text-lg text-muted-foreground">
+              <p className="text-lg text-gray-500">
                 {[facility.address].filter(Boolean).join(", ")}
               </p>
             </div>
diff --git a/src/pages/Facility/components/FacilityCard.tsx b/src/pages/Facility/components/FacilityCard.tsx
index 3b4634061cf..2ba7c030ad7 100644
--- a/src/pages/Facility/components/FacilityCard.tsx
+++ b/src/pages/Facility/components/FacilityCard.tsx
@@ -34,7 +34,7 @@ export function FacilityCard({ facility, className }: Props) {
               </h3>
               {/* @ts-expect-error Type is not defined properly */}
               {facility.facility_type?.name}
-              <p className="text-sm text-muted-foreground truncate">
+              <p className="text-sm text-gray-500 truncate">
                 {[facility.address].filter(Boolean).join(", ")}
               </p>
 
diff --git a/src/pages/Facility/components/UserCard.tsx b/src/pages/Facility/components/UserCard.tsx
index 362431e4c9f..e0794d74c4a 100644
--- a/src/pages/Facility/components/UserCard.tsx
+++ b/src/pages/Facility/components/UserCard.tsx
@@ -53,14 +53,12 @@ export function UserCard({ user, className, facilityId }: Props) {
 
             <div className="flex grow flex-col min-w-0">
               <h3 className="truncate text-xl font-semibold">{name}</h3>
-              <p className="text-sm text-muted-foreground">{user.user_type}</p>
+              <p className="text-sm text-gray-500">{user.user_type}</p>
 
               {user.qualification && (
                 <>
                   <p className="text-xs mt-3">{t("education")}: </p>
-                  <p className="text-sm text-muted-foreground">
-                    {user.qualification}
-                  </p>
+                  <p className="text-sm text-gray-500">{user.qualification}</p>
                 </>
               )}
             </div>
diff --git a/src/pages/Facility/settings/organizations/FacilityOrganizationIndex.tsx b/src/pages/Facility/settings/organizations/FacilityOrganizationIndex.tsx
index 7c7d9dec2ae..571d898bd10 100644
--- a/src/pages/Facility/settings/organizations/FacilityOrganizationIndex.tsx
+++ b/src/pages/Facility/settings/organizations/FacilityOrganizationIndex.tsx
@@ -77,7 +77,7 @@ export default function FacilityOrganizationIndex({
             <div className="rounded-full bg-primary/10 p-6 mb-4">
               <CareIcon icon="d-hospital" className="h-12 w-12 text-primary" />
             </div>
-            <p className="text-center text-sm text-muted-foreground max-w-sm mb-4">
+            <p className="text-center text-sm text-gray-500 max-w-sm mb-4">
               {t("organization_access_help")}
             </p>
           </CardContent>
diff --git a/src/pages/Organization/OrganizationIndex.tsx b/src/pages/Organization/OrganizationIndex.tsx
index 3cfbb299460..4ea8e1d5040 100644
--- a/src/pages/Organization/OrganizationIndex.tsx
+++ b/src/pages/Organization/OrganizationIndex.tsx
@@ -57,7 +57,7 @@ export default function OrganizationIndex() {
             <div className="rounded-full bg-primary/10 p-6 mb-4">
               <CareIcon icon="d-hospital" className="h-12 w-12 text-primary" />
             </div>
-            <p className="text-center text-sm text-muted-foreground max-w-sm mb-4">
+            <p className="text-center text-sm text-gray-500 max-w-sm mb-4">
               Organizations help you manage facilities, users, and resources
               efficiently. Contact your administrator to get access.
             </p>
diff --git a/src/pages/Patients/VerifyPatient.tsx b/src/pages/Patients/VerifyPatient.tsx
index e7fe9d3916a..01f1feb744b 100644
--- a/src/pages/Patients/VerifyPatient.tsx
+++ b/src/pages/Patients/VerifyPatient.tsx
@@ -218,7 +218,7 @@ export default function VerifyPatient(props: { facilityId: string }) {
                   <h3 className="text-base md:text-lg font-semibold mb-1">
                     {t("no_encounters_found")}
                   </h3>
-                  <p className="text-xs md:text-sm text-muted-foreground">
+                  <p className="text-xs md:text-sm text-gray-500">
                     {t("create_a_new_encounter_to_get_started")}
                   </p>
                 </div>
@@ -233,7 +233,7 @@ export default function VerifyPatient(props: { facilityId: string }) {
               <h3 className="text-xl font-semibold mb-1">
                 {t("verification_failed")}
               </h3>
-              <p className="text-sm text-muted-foreground mb-6">
+              <p className="text-sm text-gray-500 mb-6">
                 {t("please_enter_correct_birth_year")}
               </p>
               <Button
diff --git a/src/pages/PublicAppointments/PatientSelect.tsx b/src/pages/PublicAppointments/PatientSelect.tsx
index 0385c3ffd4f..d73b1956419 100644
--- a/src/pages/PublicAppointments/PatientSelect.tsx
+++ b/src/pages/PublicAppointments/PatientSelect.tsx
@@ -167,9 +167,7 @@ export default function PatientSelect({
                   <>
                     <td className="p-4 align-middle text-left">
                       <div className="font-medium">{patient.name}</div>
-                      <div className="text-xs text-muted-foreground">
-                        {patient.id}
-                      </div>
+                      <div className="text-xs text-gray-500">{patient.id}</div>
                     </td>
                     <td className="p-4 align-middle text-left">
                       {patient.phone_number}
diff --git a/src/pages/PublicAppointments/Schedule.tsx b/src/pages/PublicAppointments/Schedule.tsx
index 749856ceb3c..fa93b45f1d8 100644
--- a/src/pages/PublicAppointments/Schedule.tsx
+++ b/src/pages/PublicAppointments/Schedule.tsx
@@ -238,12 +238,12 @@ export function ScheduleAppointment(props: AppointmentsProps) {
                         ? `Dr. ${userData.first_name} ${userData.last_name}`
                         : `${userData.first_name} ${userData.last_name}`}
                     </h3>
-                    <p className="text-sm text-muted-foreground truncate">
+                    <p className="text-sm text-gray-500 truncate">
                       {userData.user_type}
                     </p>
 
                     {/* <p className="text-xs mt-4">Education: </p>
-                    <p className="text-sm text-muted-foreground truncate">
+                    <p className="text-sm text-gray-500 truncate">
                       {userData.qualification}
                     </p> */}
                   </div>
@@ -251,7 +251,7 @@ export function ScheduleAppointment(props: AppointmentsProps) {
 
                 <div className="mt-auto border-t border-gray-100 bg-gray-50 p-4">
                   <div className="flex justify-between items-center">
-                    <div className="text-sm text-muted-foreground">
+                    <div className="text-sm text-gray-500">
                       {facilityResponse?.name}
                     </div>
                   </div>
diff --git a/src/pages/UserDashboard.tsx b/src/pages/UserDashboard.tsx
index 7aaff5f322b..ab7e8430033 100644
--- a/src/pages/UserDashboard.tsx
+++ b/src/pages/UserDashboard.tsx
@@ -30,7 +30,7 @@ export default function UserDashboard() {
             <h1 className="text-xl md:text-2xl font-bold">
               Welcome back, {user.first_name}!
             </h1>
-            <p className="text-sm md:text-base text-muted-foreground">
+            <p className="text-sm md:text-base text-gray-500">
               {new Date().toLocaleDateString("en-US", {
                 weekday: "long",
                 year: "numeric",
@@ -103,11 +103,11 @@ export default function UserDashboard() {
                       <h3 className="font-medium truncate text-sm md:text-base">
                         {facility.name}
                       </h3>
-                      <p className="text-xs md:text-sm text-muted-foreground truncate">
+                      <p className="text-xs md:text-sm text-gray-500 truncate">
                         View facility details
                       </p>
                     </div>
-                    <ChevronRight className="h-4 w-4 md:h-5 md:w-5 text-muted-foreground" />
+                    <ChevronRight className="h-4 w-4 md:h-5 md:w-5 text-gray-500" />
                   </CardContent>
                 </Card>
               </Link>
@@ -136,11 +136,11 @@ export default function UserDashboard() {
                       <h3 className="font-medium truncate text-sm md:text-base">
                         {org.name}
                       </h3>
-                      <p className="text-xs md:text-sm text-muted-foreground truncate">
+                      <p className="text-xs md:text-sm text-gray-500 truncate">
                         {getOrgLabel(org.org_type, org.metadata)}
                       </p>
                     </div>
-                    <ChevronRight className="h-4 w-4 md:h-5 md:w-5 text-muted-foreground" />
+                    <ChevronRight className="h-4 w-4 md:h-5 md:w-5 text-gray-500" />
                   </CardContent>
                 </Card>
               </Link>