diff --git a/src/app/pharmacy/orders/page.tsx b/src/app/pharmacy/orders/page.tsx
index 7dbdb95d..5e388f76 100644
--- a/src/app/pharmacy/orders/page.tsx
+++ b/src/app/pharmacy/orders/page.tsx
@@ -24,7 +24,7 @@ import {
 import toast from 'react-hot-toast';
 import { fetchAllPatientMedicationOrders } from './api';
 import { Switch } from '@/components/ui/switch';
-import Link from 'next/link';
+import { LoadingLink } from '@/components/LoadingLink';
 
 type OrderRowData = {
   patient: {
@@ -104,6 +104,38 @@ export default function OrdersPage() {
     return () => clearInterval(intervalId);
   }, [isAutoRefreshEnabled]);
 
+  const handleApproveOrRejectOrder = (orderId: number) => {
+    setOrderRowData(prev =>
+      prev
+        .map(row => ({
+          ...row,
+          data: row.data
+            .map(visit => ({
+              ...visit,
+              orders: visit.orders.filter(order => order.order_id !== orderId),
+            }))
+            // Drop visits that no longer have any orders
+            .filter(visit => visit.orders.length > 0),
+        }))
+        // Drop patients that no longer have any visits
+        .filter(row => row.data.length > 0)
+    );
+
+    setFilteredOrderRowData(prev =>
+      prev
+        .map(row => ({
+          ...row,
+          data: row.data
+            .map(visit => ({
+              ...visit,
+              orders: visit.orders.filter(order => order.order_id !== orderId),
+            }))
+            .filter(visit => visit.orders.length > 0),
+        }))
+        .filter(row => row.data.length > 0)
+    );
+  };
+
   return (
     <LoadingPage isLoading={isLoading} message="Loading Pending Orders...">
       <div className="p-2">
@@ -180,7 +212,7 @@ export default function OrdersPage() {
                   <OrderRow
                     key={x.patient?.patient_id || index}
                     orderRowData={x}
-                    removeNonPendingOrder={fetchPendingOrders}
+                    onApproveOrRejectOrder={handleApproveOrRejectOrder}
                   />
                 ))
               )}
@@ -194,10 +226,10 @@ export default function OrdersPage() {
 
 function OrderRow({
   orderRowData: { patient, data },
-  removeNonPendingOrder,
+  onApproveOrRejectOrder,
 }: {
   orderRowData: OrderRowData;
-  removeNonPendingOrder: (id: number) => void;
+  onApproveOrRejectOrder: (id: number) => void;
 }) {
   const onPatchError = (err: Error, medicine_name: string) => {
     toast.error(() => (
@@ -220,9 +252,9 @@ function OrderRow({
         {/* rowSpan is data.length + 1 because the current row has no data. */}
         <td className="px-0" rowSpan={data.length + 1}>
           {/* Hacky regex workaround cuz backend send patient_id with village prefix and padded zeroes*/}
-          <Link 
+          <LoadingLink 
             href={`/records/patient-record?id=${patient.patient_id.replace(/^..0*/, "")}`}
-            className="block rounded-lg border border-gray-200 p-4 
+            className="rounded-lg border border-gray-200 p-4 
               transition-all hover:shadow-md hover:-translate-y-0.5 hover:bg-gray-50 cursor-pointer
               flex flex-col items-center bg-slate-50"
             >
@@ -240,7 +272,7 @@ function OrderRow({
               height={80}
               width={80}
             />
-          </Link>
+          </LoadingLink>
         </td>
       </tr>
       {data.map(({ visit_id, visit_date, orders, diagnoses }) => (
@@ -296,7 +328,8 @@ function OrderRow({
                             onPatchError(new Error(r.error), o.medication_name);
                             return;
                           }
-                          removeNonPendingOrder(o.order_id)
+                          onApproveOrRejectOrder(o.order_id)
+                          toast.success(`Order Approved`);
                         })
                     }}
                     handleCancelOrder={async () => {
@@ -307,7 +340,8 @@ function OrderRow({
                             onPatchError(new Error(r.error), o.medication_name);
                             return;
                           }
-                          removeNonPendingOrder(o.order_id)
+                          onApproveOrRejectOrder(o.order_id)
+                          toast.success(`Order Rejected`);
                         })
                     }}
                   />
diff --git a/src/app/records/patient-record/loading.tsx b/src/app/records/patient-record/loading.tsx
new file mode 100644
index 00000000..8d70a230
--- /dev/null
+++ b/src/app/records/patient-record/loading.tsx
@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div className="flex justify-center items-center h-full p-10">
+      <p className="text-gray-600 animate-pulse">Loading patient record...</p>
+    </div>
+  );
+}
diff --git a/src/components/LoadingLink.tsx b/src/components/LoadingLink.tsx
new file mode 100644
index 00000000..ee65dbf8
--- /dev/null
+++ b/src/components/LoadingLink.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useTransition } from 'react';
+
+export function LoadingLink({
+  href,
+  children,
+  className,
+  ...props
+}: {
+  href: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+
+  return (
+    <div
+      {...props}
+      onClick={e => {
+        e.preventDefault();
+        startTransition(() => {
+          router.push(href);
+        });
+      }}
+      className={`relative ${className}`}
+    >
+      {isPending && (
+        <div className="absolute inset-0 z-10 flex flex-col gap-2 items-center justify-center bg-white/30 backdrop-blur-sm">
+          <div
+            className={`h-6 w-6 animate-spin rounded-full border-y-2 border-blue-500`}
+          />
+          <p className="font-semibold text-gray-700">Loading...</p>
+        </div>
+      )}
+
+      {children}
+    </div>
+  );
+}
diff --git a/src/components/NavigationButtons.tsx b/src/components/NavigationButtons.tsx
index 81fb9c22..e1eaff16 100644
--- a/src/components/NavigationButtons.tsx
+++ b/src/components/NavigationButtons.tsx
@@ -8,16 +8,17 @@ export function VitalsButton({
   setIsHovered = () => {},
   labelOverwrite,
   visitId,
+  className,
 }: {
   patient: Patient;
   setIsHovered?: Dispatch<SetStateAction<boolean>>;
   labelOverwrite?: string;
   visitId?: string;
+  className?: string;
 }) {
-  console.log(visitId)
   return (
     <Link
-      href={`/records/patient-vitals?id=${patient.pk}&visit=${visitId ?? patient.last_visit_id}`}
+      href={`/records/patient-vitals?id=${patient.pk}&visit=${visitId ?? patient.last_visit_id}&${visitId && 'specificVisit=true'}`}
       onClick={e => e.stopPropagation()}
       onMouseEnter={e => {
         e.stopPropagation();
@@ -25,7 +26,11 @@ export function VitalsButton({
       }}
       onMouseLeave={() => setIsHovered(true)}
     >
-      <Button text={labelOverwrite ?? 'Vitals'} colour="red" />
+      <Button
+        text={labelOverwrite ?? 'Vitals'}
+        colour="red"
+        className={className}
+      />
     </Link>
   );
 }
@@ -35,16 +40,17 @@ export function ConsultationButton({
   setIsHovered = () => {},
   labelOverwrite,
   visitId,
+  className,
 }: {
   patient: Patient;
   setIsHovered?: Dispatch<SetStateAction<boolean>>;
   labelOverwrite?: string;
   visitId?: string;
+  className?: string;
 }) {
-  console.log(visitId)
   return (
     <Link
-      href={`/records/patient-consultation?id=${patient.pk}&visit=${visitId ?? patient.last_visit_id}`}
+      href={`/records/patient-consultation?id=${patient.pk}&visit=${visitId ?? patient.last_visit_id}&${visitId && 'specificVisit=true'}`}
       onClick={e => e.stopPropagation()}
       onMouseEnter={e => {
         e.stopPropagation();
@@ -52,7 +58,11 @@ export function ConsultationButton({
       }}
       onMouseLeave={() => setIsHovered(true)}
     >
-      <Button text={labelOverwrite ?? 'Consultation'} colour="indigo" />
+      <Button
+        text={labelOverwrite ?? 'Consultation'}
+        colour="indigo"
+        className={className}
+      />
     </Link>
   );
 }
diff --git a/src/components/VisitDropdown.tsx b/src/components/VisitDropdown.tsx
index 3a1cf1f5..96cecced 100644
--- a/src/components/VisitDropdown.tsx
+++ b/src/components/VisitDropdown.tsx
@@ -46,8 +46,10 @@ export function VisitDropdown({
     searchParams.get('visit') ?? ''
   );
 
+  // automatically select the latest visit unless viewing a specific visit
   useEffect(() => {
-    setVisitId(items[0].value)
+    const viewingSpecificVisit = searchParams.get("specificVisit") === "true"
+    if (!viewingSpecificVisit) setVisitId(items[0].value)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
diff --git a/src/components/records/PatientRecordTable.tsx b/src/components/records/PatientRecordTable.tsx
index ba146507..07dcbfcf 100644
--- a/src/components/records/PatientRecordTable.tsx
+++ b/src/components/records/PatientRecordTable.tsx
@@ -139,7 +139,7 @@ function PatientRecordRow({ patient }: { patient: Patient }) {
             />
             <div className="flex flex-col items-center gap-2 rounded-md border p-2 sm:flex-row">
               <div className="w-[115px]">
-                <p>Last visit:</p>
+                <p>Latest visit:</p>
                 <p>{lastVisitLabel}</p>
               </div>
               <VitalsButton patient={patient} setIsHovered={setIsHovered} />
@@ -171,6 +171,7 @@ function getLastVisitLabel(lastVisitDate: string): string {
   if (!lastVisitDate) {
     return 'Missing last visit date';
   }
+  // lastVisitDate = "2025-12-11T15:30:56.296898Z"
   const lastVisitDateLuxon = DateTime.fromISO(lastVisitDate);
   // Positive duration since last visit
   const timeSinceLastVisit = Duration.fromMillis(
@@ -178,7 +179,7 @@ function getLastVisitLabel(lastVisitDate: string): string {
   );
   return timeSinceLastVisit < Duration.fromObject({ seconds: 5 })
     ? 'Just now'
-    : timeSinceLastVisit < Duration.fromObject({ minutes: 10 })
+    : timeSinceLastVisit < Duration.fromObject({ hours: 2 })
       ? lastVisitDateLuxon.toRelative() || 'Missing relative time?'
       : formatDate(lastVisitDate, 'datetime');
 }
diff --git a/src/components/records/consultation/ConsultationForm.tsx b/src/components/records/consultation/ConsultationForm.tsx
index a74c53a0..cc050512 100644
--- a/src/components/records/consultation/ConsultationForm.tsx
+++ b/src/components/records/consultation/ConsultationForm.tsx
@@ -12,6 +12,7 @@ import { deleteDiagnosis } from '@/data/diagnosis/deleteDiagnosis';
 import { getDiagnosisByConsult } from '@/data/diagnosis/getDiagnosis';
 import { patchDiagnosis } from '@/data/diagnosis/patchDiagnosis';
 import { createReferral } from '@/data/referrals/createReferral';
+import { patchReferralByConsultId } from '@/data/referrals/patchReferral';
 import { useSaveOnWrite } from '@/hooks/useSaveOnWrite';
 import { ConsultMedicationOrder } from '@/types/ConsultMedicationOrder';
 import { Patient } from '@/types/Patient';
@@ -313,15 +314,22 @@ export function ConsultationForm({
             referralPayload['referral_outcome'] = '';
 
             try {
-              const result = createReferral(referralPayload);
-              result
-                .then(
-                  () => {
-                    toast.success('Referral submitted!');
-                  },
-                  () => console.log('error')
-                )
-                .catch(() => toast.error('Error submitting consultation form'));
+              if (isEditing) {
+                patchReferralByConsultId(
+                  referralPayload,
+                  Number(consultID)
+                ).catch(() => toast.error('Error updating referral'));
+              } else {
+                const result = createReferral(referralPayload);
+                result
+                  .then(
+                    () => {
+                      toast.success('Referral submitted!');
+                    },
+                    () => console.log('error')
+                  )
+                  .catch(() => toast.error('Error creating referral'));
+              }
             } catch (error) {
               console.error('Error submitting referral form:', error);
               toast.error('Unknown Error');
diff --git a/src/components/records/document/UploadDocument.tsx b/src/components/records/document/UploadDocument.tsx
index acd4b0f4..711316bd 100644
--- a/src/components/records/document/UploadDocument.tsx
+++ b/src/components/records/document/UploadDocument.tsx
@@ -28,12 +28,12 @@ export function UploadDocument({
   const { isLoading, withLoading } = useLoadingState(false);
 
   return (
-    <>
+    <div>
       <Button
         text="Upload Document"
         colour="green"
         onClick={() => setIsOpen(true)}
-        className='w-24 h-16'
+        className="w-44 sm:w-28"
       />
       <Modal
         isOpen={isOpen}
@@ -127,6 +127,6 @@ export function UploadDocument({
           </form>
         </FormProvider>
       </Modal>
-    </>
+    </div>
   );
 }
diff --git a/src/components/records/document/ViewDocument.tsx b/src/components/records/document/ViewDocument.tsx
index bc50ea71..c577c50c 100644
--- a/src/components/records/document/ViewDocument.tsx
+++ b/src/components/records/document/ViewDocument.tsx
@@ -109,12 +109,12 @@ export function ViewDocument({
   };
 
   return (
-    <>
+    <div>
       <Button
         text="View Documents"
         onClick={() => setIsOpen(true)}
         colour="blue"
-        className='w-24 h-16'
+        className='w-44 sm:w-28'
       />
       <Modal
         isOpen={isOpen}
@@ -155,6 +155,6 @@ export function ViewDocument({
           </table>
         )}
       </Modal>
-    </>
+    </div>
   );
 }
diff --git a/src/components/records/patient/EditPatient.tsx b/src/components/records/patient/EditPatient.tsx
index 0e018e3f..bc4b0d0a 100644
--- a/src/components/records/patient/EditPatient.tsx
+++ b/src/components/records/patient/EditPatient.tsx
@@ -23,13 +23,14 @@ export function EditPatient({ patient }: { patient: Patient }) {
     },
   });
   const router = useRouter();
+  const [submitting, setSubmitting] = useState(false)
   return (
-    <>
+    <div>
       <Button
         text="Edit Patient Details"
         colour="orange"
         onClick={() => setIsOpen(true)}
-        className='w-28 h-16'
+        className='w-44 sm:w-28'
       />
       <Modal
         isOpen={isOpen}
@@ -42,8 +43,10 @@ export function EditPatient({ patient }: { patient: Patient }) {
           <PatientForm
             closeForm={closeModal}
             isEditing
+            isSubmitting={submitting}
             onSubmit={e => {
               e.preventDefault();
+              setSubmitting(true);
 
               useFormReturn.handleSubmit(
                 async fieldValues => {
@@ -72,6 +75,7 @@ export function EditPatient({ patient }: { patient: Patient }) {
                   }
                   patchPatient(fieldValues.pk, formData).then(() => {
                     toast.success('Patient Updated!');
+                    setSubmitting(false)
                     router.refresh();
                     closeModal();
                   });
@@ -84,6 +88,6 @@ export function EditPatient({ patient }: { patient: Patient }) {
           />
         </FormProvider>
       </Modal>
-    </>
+    </div>
   );
 }
diff --git a/src/components/records/patient/PatientForm.tsx b/src/components/records/patient/PatientForm.tsx
index 4568b6c7..0bfeb143 100644
--- a/src/components/records/patient/PatientForm.tsx
+++ b/src/components/records/patient/PatientForm.tsx
@@ -154,6 +154,8 @@ export function PatientForm({
               />
             </div>
             <ChildPubertySection
+              // curVital passed in here doesn't really matter in the current state of the codebase as they are just used to set the default values;
+              // the only place where this is used is the registration modal, but curVitals are passed straight into the useForm values
               curVital={EMPTY_VITAL}
               pubertyFields={allPubertyFields.filter(
                 field =>
diff --git a/src/components/records/patient/PatientInfoHeaderSection.tsx b/src/components/records/patient/PatientInfoHeaderSection.tsx
index c34984e2..5962192c 100644
--- a/src/components/records/patient/PatientInfoHeaderSection.tsx
+++ b/src/components/records/patient/PatientInfoHeaderSection.tsx
@@ -63,7 +63,7 @@ export function PatientInfoHeaderSection({
           </span>
           <span>, {patient.name}</span>
         </h1>
-        <div className="flex flex-wrap gap-2">
+        <div className="flex flex-wrap gap-2 justify-center">
         {/* <div className="flex flex-col gap-2 sm:grid sm:grid-cols-3"> */}
           <UploadDocument patient={patient} onUploadSuccess={fetchDocuments} />
           <ViewDocument
@@ -78,6 +78,7 @@ export function PatientInfoHeaderSection({
               patient={patient}
               labelOverwrite="Go to vitals"
               visitId={visitId}
+              className='w-44 sm:w-28 sm:h-14'
             />
           )}
           {showConsultationButton && (
@@ -85,6 +86,7 @@ export function PatientInfoHeaderSection({
               patient={patient}
               labelOverwrite="Go to consultation"
               visitId={visitId}
+              className='w-44 sm:w-28'
             />
           )}
         </div>
diff --git a/src/components/records/vital/VitalsForm.tsx b/src/components/records/vital/VitalsForm.tsx
index 4c00020c..ced2b4e7 100644
--- a/src/components/records/vital/VitalsForm.tsx
+++ b/src/components/records/vital/VitalsForm.tsx
@@ -11,7 +11,7 @@ import { NAOption } from '@/constants';
 import { patchVital } from '@/data/vital/patchVital';
 import { Patient } from '@/types/Patient';
 import { displayBMI, validateVisualAcuity, Vital } from '@/types/Vital';
-import { FormEvent, useEffect } from 'react';
+import { useEffect } from 'react';
 import { FieldValues, FormProvider, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 
@@ -50,26 +50,9 @@ export function VitalsForm({
       ? String(formWeight)
       : curVital.weight;
 
-  const submitVitalsFormHandler = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    handleSubmit(
-      async (data: FieldValues) => {
-        data.visit_id = visitId;
-        patchVital(data as Vital).then(() => {
-          toast.success('Updated Vital');
-        });
-      },
-      () => {
-        toast.error('Invalid/Missing Input');
-      }
-    )();
-  };
-
   return (
     <FormProvider {...useFormReturn}>
       <form
-        onSubmit={submitVitalsFormHandler}
         className="rounded-lg bg-blue-50 p-4"
       >
         <h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-slate-500">
@@ -225,7 +208,27 @@ export function VitalsForm({
           type="textarea"
         />
         <div className="h-4" />
-        <Button text="Update" colour="green" type="submit" />
+        <Button
+          text="Update"
+          colour="green"
+          type="button"
+          onClick={() => new Promise<void>((resolve, reject) => {
+            handleSubmit(
+              async (data: FieldValues) => {
+                data.visit_id = visitId;
+                patchVital(data as Vital).then(() => {
+                  toast.success('Updated Vital');
+                  resolve();
+                });
+              },
+              () => {
+                toast.error('Invalid/Missing Input');
+                reject();
+              }
+            )()
+          }
+          )}
+        />
       </form>
     </FormProvider>
   );
diff --git a/src/data/referrals/patchReferral.ts b/src/data/referrals/patchReferral.ts
index ce94109b..17343075 100644
--- a/src/data/referrals/patchReferral.ts
+++ b/src/data/referrals/patchReferral.ts
@@ -9,3 +9,13 @@ export async function patchReferral(
   const data = (await axiosInstance.patch(`/referrals/${id}/`, payload)).data;
   return data;
 }
+
+export async function patchReferralByConsultId(
+  payload: Partial<Referral>,
+  consultId: number
+): Promise<void> {
+  const data = (
+    await axiosInstance.patch(`/referrals/?consult_id=${consultId}`, payload)
+  ).data;
+  return data;
+}