diff --git a/src/CAREUI/display/RecordMeta.tsx b/src/CAREUI/display/RecordMeta.tsx
index 48cc8d370ad..944ddf27c8f 100644
--- a/src/CAREUI/display/RecordMeta.tsx
+++ b/src/CAREUI/display/RecordMeta.tsx
@@ -1,5 +1,10 @@
 import CareIcon from "../icons/CareIcon";
-import { formatDateTime, isUserOnline, relativeTime } from "../../Utils/utils";
+import {
+  formatDateTime,
+  formatName,
+  isUserOnline,
+  relativeTime,
+} from "../../Utils/utils";
 import { ReactNode } from "react";
 
 interface Props {
@@ -30,7 +35,7 @@ const RecordMeta = ({ time, user, prefix, className, inlineUser }: Props) => {
           <span className="flex items-center gap-1">
             by
             <CareIcon className="care-l-user" />
-            {user.first_name} {user.last_name}
+            {formatName(user)}
             {isOnline && (
               <div className="h-1.5 w-1.5 rounded-full bg-primary-400" />
             )}
@@ -48,9 +53,7 @@ const RecordMeta = ({ time, user, prefix, className, inlineUser }: Props) => {
         {user && inlineUser && <span>by</span>}
         {user && <CareIcon className="care-l-user" />}
         {user && inlineUser && (
-          <span className="font-medium">
-            {user.first_name} {user.last_name}
-          </span>
+          <span className="font-medium">{formatName(user)}</span>
         )}
       </div>
     );
diff --git a/src/CAREUI/display/Timeline.tsx b/src/CAREUI/display/Timeline.tsx
new file mode 100644
index 00000000000..b3445f4fd97
--- /dev/null
+++ b/src/CAREUI/display/Timeline.tsx
@@ -0,0 +1,157 @@
+import { createContext, useContext } from "react";
+import { PerformedByModel } from "../../Components/HCX/misc";
+import { classNames, formatName } from "../../Utils/utils";
+import CareIcon, { IconName } from "../icons/CareIcon";
+import RecordMeta from "./RecordMeta";
+
+export interface TimelineEvent<TType = string> {
+  type: TType;
+  timestamp: string;
+  by: PerformedByModel | undefined;
+  icon: IconName;
+  notes?: string;
+  cancelled?: boolean;
+}
+
+interface TimelineProps {
+  className: string;
+  children: React.ReactNode | React.ReactNode[];
+  name: string;
+}
+
+const TimelineContext = createContext("");
+
+export default function Timeline({ className, children, name }: TimelineProps) {
+  return (
+    <div className={className}>
+      <ol role="list" className="space-y-6">
+        <TimelineContext.Provider value={name}>
+          {children}
+        </TimelineContext.Provider>
+      </ol>
+    </div>
+  );
+}
+
+interface TimelineNodeProps {
+  event: TimelineEvent;
+  title?: React.ReactNode;
+  /**
+   * Used to add a suffix to the auto-generated title. Will be ignored if `title` is provided.
+   */
+  titleSuffix?: React.ReactNode;
+  actions?: React.ReactNode;
+  className?: string;
+  children?: React.ReactNode;
+  name?: string;
+  isLast: boolean;
+}
+
+export const TimelineNode = (props: TimelineNodeProps) => {
+  const name = useContext(TimelineContext);
+
+  return (
+    <li className="relative flex gap-x-4">
+      <div
+        className={classNames(
+          props.isLast ? "h-6" : "-bottom-6",
+          "absolute left-0 top-0 flex w-6 justify-center"
+        )}
+      >
+        <div className="w-px bg-gray-300" />
+      </div>
+
+      <div
+        className={classNames(
+          props.className,
+          "flex w-full flex-col items-start gap-y-1"
+        )}
+      >
+        <div className="relative flex w-full justify-between gap-x-4">
+          <div
+            className={classNames(
+              "flex w-full gap-x-4",
+              props.event.cancelled && "line-through"
+            )}
+          >
+            {props.title || (
+              <TimelineNodeTitle event={props.event}>
+                <p className="flex-auto py-0.5 text-xs leading-5 text-gray-600">
+                  {props.event.by && (
+                    <span className="font-medium text-gray-900">
+                      {formatName(props.event.by)}{" "}
+                    </span>
+                  )}
+                  {props.titleSuffix
+                    ? props.titleSuffix
+                    : `${props.event.type} the ${props.name || name}.`}
+                </p>
+                <RecordMeta
+                  className="flex-none py-0.5 text-xs leading-5 text-gray-500"
+                  time={props.event.timestamp}
+                />
+              </TimelineNodeTitle>
+            )}
+          </div>
+
+          {props.actions && (
+            <TimelineNodeActions>{props.actions}</TimelineNodeActions>
+          )}
+        </div>
+
+        <div className="flex w-full flex-col items-start gap-y-2 pl-10">
+          <TimelineNodeNotes>{props.event.notes}</TimelineNodeNotes>
+          {props.children}
+        </div>
+      </div>
+    </li>
+  );
+};
+
+interface TimelineNodeTitleProps {
+  children: React.ReactNode | React.ReactNode[];
+  event: TimelineEvent;
+}
+
+export const TimelineNodeTitle = (props: TimelineNodeTitleProps) => {
+  return (
+    <>
+      <div className="relative flex h-6 w-6 flex-none items-center justify-center bg-gray-200 transition-all duration-200 ease-in-out group-hover:bg-primary-500">
+        <CareIcon
+          className="text-lg text-gray-700 transition-all duration-200 ease-in-out group-hover:text-white"
+          aria-hidden="true"
+          icon={props.event.icon}
+        />
+      </div>
+
+      <div className="flex w-full justify-between">{props.children}</div>
+    </>
+  );
+};
+
+export const TimelineNodeActions = (props: {
+  children: React.ReactNode | React.ReactNode[];
+}) => {
+  return <div className="flex justify-end gap-2">{props.children}</div>;
+};
+
+interface TimelineNodeNotesProps {
+  children?: React.ReactNode | React.ReactNode[];
+  icon?: IconName;
+}
+
+export const TimelineNodeNotes = ({
+  children,
+  icon = "l-notes",
+}: TimelineNodeNotesProps) => {
+  if (!children) {
+    return;
+  }
+
+  return (
+    <div className="flex w-full items-start gap-2 rounded-md p-3 ring-1 ring-inset ring-gray-200">
+      <CareIcon icon={icon} className="text-lg text-gray-700" />
+      <div className="mt-1 flex-auto text-xs text-gray-700">{children}</div>
+    </div>
+  );
+};
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventCell.tsx b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventCell.tsx
index e7b6507459a..b8a4addfb03 100644
--- a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventCell.tsx
+++ b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventCell.tsx
@@ -1,9 +1,11 @@
-import { Disclosure, Popover, Transition } from "@headlessui/react";
 import dayjs from "../../../Utils/dayjs";
 import { MedicineAdministrationRecord, Prescription } from "../models";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
-import { Fragment } from "react";
 import { classNames, formatDateTime, formatTime } from "../../../Utils/utils";
+import DialogModal from "../../Common/Dialog";
+import PrescrpitionActivityTimeline from "../PrescrpitionTimeline";
+import { useState } from "react";
+import PrescriptionDetailCard from "../PrescriptionDetailCard";
 
 interface Props {
   administrations: MedicineAdministrationRecord[];
@@ -16,6 +18,7 @@ export default function AdministrationEventCell({
   interval: { start, end },
   prescription,
 }: Props) {
+  const [showTimeline, setShowTimeline] = useState(false);
   // Check if cell belongs to an administered prescription
   const administered = administrations
     .filter((administration) =>
@@ -31,120 +34,182 @@ export default function AdministrationEventCell({
 
   if (administered.length) {
     return (
-      <Popover className="relative">
-        <Popover.Button className="scale-100 transition-transform duration-200 ease-in-out hover:scale-110">
-          {({ open }) => (
-            <div className="tooltip">
-              <div className="relative mx-auto max-w-min">
-                <CareIcon
-                  icon="l-check-circle"
-                  className="text-xl text-primary-500"
-                />
-                {administered.length > 1 && (
-                  <span className="absolute -bottom-1 -right-2 flex h-4 w-4 items-center justify-center rounded-full bg-primary-500 text-xs font-semibold text-white">
-                    {administered.length}
-                  </span>
-                )}
-              </div>
-              {hasComment && (
-                <CareIcon icon="l-notes" className="text-xl text-primary-500" />
-              )}
-              {!open && (
-                <span className="tooltip-text tooltip-bottom -translate-x-1/2 text-xs">
-                  {administered.length === 1 ? (
-                    <p>
-                      Administered on{" "}
-                      <strong>
-                        {formatTime(administered[0].administered_date)}
-                      </strong>
-                    </p>
-                  ) : (
-                    <p>
-                      <strong>{administered.length}</strong> administrations
-                    </p>
-                  )}
-                  <p>Click to view details</p>
-                </span>
+      <>
+        <DialogModal
+          onClose={() => setShowTimeline(false)}
+          title={
+            <PrescriptionDetailCard prescription={prescription} readonly />
+          }
+          className="w-full md:max-w-2xl"
+          show={showTimeline}
+        >
+          <div className="mt-6 text-sm font-medium text-gray-700">
+            Administrations between{" "}
+            <span className="text-black">{formatTime(start, "HH:mm")}</span> and{" "}
+            <span className="text-black">{formatTime(end, "HH:mm")}</span> on{" "}
+            <span className="text-black">
+              {formatDateTime(start, "DD/MM/YYYY")}
+            </span>
+          </div>
+          <PrescrpitionActivityTimeline
+            interval={{ start, end }}
+            prescription={prescription}
+            showPrescriptionDetails
+          />
+        </DialogModal>
+        <button
+          className="tooltip scale-100 transition-transform duration-200 ease-in-out hover:scale-110"
+          onClick={() => setShowTimeline(true)}
+        >
+          <div className="relative mx-auto max-w-min">
+            <CareIcon
+              icon="l-check-circle"
+              className="text-xl text-primary-500"
+            />
+            {administered.length > 1 && (
+              <span className="absolute -bottom-1 -right-2 flex h-4 w-4 items-center justify-center rounded-full bg-primary-500 text-xs font-semibold text-white">
+                {administered.length}
+              </span>
+            )}
+          </div>
+          {hasComment && (
+            <CareIcon icon="l-notes" className="text-xl text-primary-500" />
+          )}
+          {!showTimeline && (
+            <span className="tooltip-text tooltip-bottom -translate-x-1/2 text-xs">
+              {administered.length === 1 ? (
+                <p>
+                  Administered on{" "}
+                  <strong>
+                    {formatTime(administered[0].administered_date)}
+                  </strong>
+                </p>
+              ) : (
+                <p>
+                  Click to see <strong>{administered.length}</strong>{" "}
+                  administrations
+                </p>
               )}
-            </div>
+            </span>
           )}
-        </Popover.Button>
-
-        <Transition
-          as={Fragment}
-          enter="transition ease-out duration-200"
-          enterFrom="opacity-0 translate-y-1"
-          enterTo="opacity-100 translate-y-0"
-          leave="transition ease-in duration-150"
-          leaveFrom="opacity-100 translate-y-0"
-          leaveTo="opacity-0 translate-y-1"
-        >
-          <Popover.Panel className="absolute left-1/2 z-30 mt-3 -translate-x-1/2 px-4 sm:px-0">
-            <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black/5">
-              <div className="relative flex flex-col gap-2 bg-white p-4">
-                {administered.map((administration) => (
-                  <div key={administration.id}>
-                    <Disclosure defaultOpen={administered.length === 1}>
-                      {({ open }) => (
-                        <>
-                          <Disclosure.Button
-                            className={classNames(
-                              "flex w-full justify-between border-gray-400 px-4 py-2 text-left text-sm focus:outline-none focus-visible:ring focus-visible:ring-primary-500/75",
-                              open
-                                ? "rounded-t-lg border-l border-r border-t bg-gray-200"
-                                : "rounded-lg border hover:bg-gray-200"
-                            )}
-                          >
-                            <span className="text-gray-700">
-                              Administered on{" "}
-                              <strong className="font-semibold text-gray-900">
-                                {formatTime(administration.administered_date)}
-                              </strong>
-                            </span>
-                            {administration.notes && (
-                              <CareIcon
-                                icon="l-notes"
-                                className="ml-2 text-lg"
-                              />
-                            )}
-                            <CareIcon
-                              icon="l-angle-down"
-                              className={classNames(
-                                "ml-8 text-base",
-                                open ? "rotate-180" : "rotate-0"
-                              )}
-                            />
-                          </Disclosure.Button>
-                          <Disclosure.Panel className="flex flex-col items-start rounded-b-lg border border-gray-400 bg-gray-200 p-2 px-4 text-sm text-gray-700 shadow">
-                            <div>
-                              Administered by:{" "}
-                              <span className="font-medium text-gray-900">
-                                {administration.administered_by?.first_name}{" "}
-                                {administration.administered_by?.last_name}
-                              </span>
-                            </div>
-                            <div>
-                              Notes:{" "}
-                              <span className="font-medium text-gray-800">
-                                {administration.notes || (
-                                  <span className="italic text-gray-700">
-                                    No notes
-                                  </span>
-                                )}
-                              </span>
-                            </div>
-                          </Disclosure.Panel>
-                        </>
-                      )}
-                    </Disclosure>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </Popover.Panel>
-        </Transition>
-      </Popover>
+        </button>
+      </>
     );
+    //// TODO: use the below inline timeline popover when inline popover overflow clipping issue is solved when.
+    // return (
+    //   <Popover className="relative">
+    //     <Popover.Button className="scale-100 transition-transform duration-200 ease-in-out hover:scale-110">
+    //       {({ open }) => (
+    //         <div className="tooltip">
+    //           <div className="relative mx-auto max-w-min">
+    //             <CareIcon
+    //               icon="l-check-circle"
+    //               className="text-xl text-primary-500"
+    //             />
+    //             {administered.length > 1 && (
+    //               <span className="absolute -bottom-1 -right-2 flex h-4 w-4 items-center justify-center rounded-full bg-primary-500 text-xs font-semibold text-white">
+    //                 {administered.length}
+    //               </span>
+    //             )}
+    //           </div>
+    //           {hasComment && (
+    //             <CareIcon icon="l-notes" className="text-xl text-primary-500" />
+    //           )}
+    //           {!open && (
+    //             <span className="tooltip-text tooltip-bottom -translate-x-1/2 text-xs">
+    //               {administered.length === 1 ? (
+    //                 <p>
+    //                   Administered on{" "}
+    //                   <strong>
+    //                     {formatTime(administered[0].administered_date)}
+    //                   </strong>
+    //                 </p>
+    //               ) : (
+    //                 <p>
+    //                   <strong>{administered.length}</strong> administrations
+    //                 </p>
+    //               )}
+    //               <p>Click to view details</p>
+    //             </span>
+    //           )}
+    //         </div>
+    //       )}
+    //     </Popover.Button>
+    //     <Transition
+    //       as={Fragment}
+    //       enter="transition ease-out duration-200"
+    //       enterFrom="opacity-0 translate-y-1"
+    //       enterTo="opacity-100 translate-y-0"
+    //       leave="transition ease-in duration-150"
+    //       leaveFrom="opacity-100 translate-y-0"
+    //       leaveTo="opacity-0 translate-y-1"
+    //     >
+    //       <Popover.Panel className="absolute left-1/2 z-30 mt-3 -translate-x-1/2 px-4 sm:px-0">
+    //         <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black/5">
+    //           <div className="relative flex flex-col gap-2 bg-white p-4">
+    //             {administered.map((administration) => (
+    //               <div key={administration.id}>
+    //                 <Disclosure defaultOpen={administered.length === 1}>
+    //                   {({ open }) => (
+    //                     <>
+    //                       <Disclosure.Button
+    //                         className={classNames(
+    //                           "flex w-full justify-between border-gray-400 px-4 py-2 text-left text-sm focus:outline-none focus-visible:ring focus-visible:ring-primary-500/75",
+    //                           open
+    //                             ? "rounded-t-lg border-l border-r border-t bg-gray-200"
+    //                             : "rounded-lg border hover:bg-gray-200"
+    //                         )}
+    //                       >
+    //                         <span className="text-gray-700">
+    //                           Administered on{" "}
+    //                           <strong className="font-semibold text-gray-900">
+    //                             {formatTime(administration.administered_date)}
+    //                           </strong>
+    //                         </span>
+    //                         {administration.notes && (
+    //                           <CareIcon
+    //                             icon="l-notes"
+    //                             className="ml-2 text-lg"
+    //                           />
+    //                         )}
+    //                         <CareIcon
+    //                           icon="l-angle-down"
+    //                           className={classNames(
+    //                             "ml-8 text-base",
+    //                             open ? "rotate-180" : "rotate-0"
+    //                           )}
+    //                         />
+    //                       </Disclosure.Button>
+    //                       <Disclosure.Panel className="flex flex-col items-start rounded-b-lg border border-gray-400 bg-gray-200 p-2 px-4 text-sm text-gray-700 shadow">
+    //                         <div>
+    //                           Administered by:{" "}
+    //                           <span className="font-medium text-gray-900">
+    //                             {administration.administered_by?.first_name}{" "}
+    //                             {administration.administered_by?.last_name}
+    //                           </span>
+    //                         </div>
+    //                         <div>
+    //                           Notes:{" "}
+    //                           <span className="font-medium text-gray-800">
+    //                             {administration.notes || (
+    //                               <span className="italic text-gray-700">
+    //                                 No notes
+    //                               </span>
+    //                             )}
+    //                           </span>
+    //                         </div>
+    //                       </Disclosure.Panel>
+    //                     </>
+    //                   )}
+    //                 </Disclosure>
+    //               </div>
+    //             ))}
+    //           </div>
+    //         </div>
+    //       </Popover.Panel>
+    //     </Transition>
+    //   </Popover>
+    // );
   }
 
   // Check if cell belongs to after prescription.created_date
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTable.tsx b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTable.tsx
index f4f3a12db09..9de207146de 100644
--- a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTable.tsx
+++ b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTable.tsx
@@ -20,85 +20,87 @@ export default function MedicineAdministrationTable({
   const { t } = useTranslation();
 
   return (
-    <table className="w-full whitespace-nowrap">
-      <thead className="sticky top-0 z-20 bg-gray-50 text-xs font-medium text-black">
-        <tr>
-          <th className="sticky left-0 z-20 bg-gray-50 py-3 pl-4 text-left">
-            <div className="flex justify-between gap-2">
-              <span className="text-sm">{t("medicine")}</span>
-              <span className="hidden px-2 text-center text-xs leading-none lg:block">
-                <p>Dosage &</p>
-                <p>{!prescriptions[0]?.is_prn ? "Frequency" : "Indicator"}</p>
-              </span>
-            </div>
-          </th>
+    <div className="overflow-x-auto">
+      <table className="w-full whitespace-nowrap">
+        <thead className="sticky top-0 z-20 bg-gray-50 text-xs font-medium text-black">
+          <tr>
+            <th className="sticky left-0 z-20 bg-gray-50 py-3 pl-4 text-left">
+              <div className="flex justify-between gap-2">
+                <span className="text-sm">{t("medicine")}</span>
+                <span className="hidden px-2 text-center text-xs leading-none lg:block">
+                  <p>Dosage &</p>
+                  <p>{!prescriptions[0]?.is_prn ? "Frequency" : "Indicator"}</p>
+                </span>
+              </div>
+            </th>
 
-          <th>
-            <ButtonV2
-              size="small"
-              circle
-              ghost
-              border
-              className="mx-2 px-1"
-              variant="secondary"
-              disabled={!pagination.hasPrevious}
-              onClick={pagination.previous}
-              tooltip="Previous 24 hours"
-              tooltipClassName="tooltip-bottom -translate-x-1/2 text-xs"
-            >
-              <CareIcon icon="l-angle-left-b" className="text-base" />
-            </ButtonV2>
-          </th>
-          {pagination.slots?.map(({ start }, index) => (
-            <>
-              <th
-                key={`administration-interval-${index}`}
-                className={classNames(
-                  "leading-none",
-                  start.getHours() === 0
-                    ? "text-base font-bold text-gray-800"
-                    : "text-sm font-semibold text-gray-700"
-                )}
+            <th>
+              <ButtonV2
+                size="small"
+                circle
+                ghost
+                border
+                className="mx-2 px-1"
+                variant="secondary"
+                disabled={!pagination.hasPrevious}
+                onClick={pagination.previous}
+                tooltip="Previous 24 hours"
+                tooltipClassName="tooltip-bottom -translate-x-1/2 text-xs"
               >
-                {formatDateTime(
-                  start,
-                  start.getHours() === 0 ? "DD/MM" : "h a"
-                )}
-              </th>
-              <th key={`administration-slot-${index}`} className="flex w-6" />
-            </>
-          ))}
-          <th>
-            <ButtonV2
-              size="small"
-              circle
-              ghost
-              border
-              className="mx-2 px-1"
-              variant="secondary"
-              disabled={!pagination.hasNext}
-              onClick={pagination.next}
-              tooltip="Next 24 hours"
-              tooltipClassName="tooltip-bottom -translate-x-1/2 text-xs"
-            >
-              <CareIcon icon="l-angle-right-b" className="text-base" />
-            </ButtonV2>
-          </th>
+                <CareIcon icon="l-angle-left-b" className="text-base" />
+              </ButtonV2>
+            </th>
+            {pagination.slots?.map(({ start }, index) => (
+              <>
+                <th
+                  key={`administration-interval-${index}`}
+                  className={classNames(
+                    "leading-none",
+                    start.getHours() === 0
+                      ? "text-base font-bold text-gray-800"
+                      : "text-sm font-semibold text-gray-700"
+                  )}
+                >
+                  {formatDateTime(
+                    start,
+                    start.getHours() === 0 ? "DD/MM" : "h a"
+                  )}
+                </th>
+                <th key={`administration-slot-${index}`} className="flex w-6" />
+              </>
+            ))}
+            <th>
+              <ButtonV2
+                size="small"
+                circle
+                ghost
+                border
+                className="mx-2 px-1"
+                variant="secondary"
+                disabled={!pagination.hasNext}
+                onClick={pagination.next}
+                tooltip="Next 24 hours"
+                tooltipClassName="tooltip-bottom -translate-x-1/2 text-xs"
+              >
+                <CareIcon icon="l-angle-right-b" className="text-base" />
+              </ButtonV2>
+            </th>
 
-          <th className="py-3 pr-2 text-right"></th>
-        </tr>
-      </thead>
+            <th className="py-3 pr-2 text-right"></th>
+          </tr>
+        </thead>
 
-      <tbody className="divide-y divide-gray-200">
-        {prescriptions.map((obj) => (
-          <MedicineAdministrationTableRow
-            key={obj.id}
-            prescription={obj}
-            intervals={pagination.slots!}
-            refetch={onRefetch}
-          />
-        ))}
-      </tbody>
-    </table>
+        <tbody className="divide-y divide-gray-200">
+          {prescriptions.map((obj) => (
+            <MedicineAdministrationTableRow
+              key={obj.id}
+              prescription={obj}
+              intervals={pagination.slots!}
+              refetch={onRefetch}
+            />
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 }
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx
index cb36bd829e8..30ab68dcf0b 100644
--- a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx
+++ b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx
@@ -37,7 +37,6 @@ export default function MedicineAdministrationTableRow({
     pathParams: { consultation },
     query: {
       prescription: prescription.id,
-
       administered_date_after: formatDateTime(
         props.intervals[0].start,
         "YYYY-MM-DD"
@@ -46,6 +45,7 @@ export default function MedicineAdministrationTableRow({
         props.intervals[props.intervals.length - 1].end,
         "YYYY-MM-DD"
       ),
+      archived: false,
     },
     key: `${prescription.last_administered_on}`,
   });
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/index.tsx b/src/Components/Medicine/MedicineAdministrationSheet/index.tsx
index aba353c344d..65fb59799a1 100644
--- a/src/Components/Medicine/MedicineAdministrationSheet/index.tsx
+++ b/src/Components/Medicine/MedicineAdministrationSheet/index.tsx
@@ -123,10 +123,10 @@ const MedicineAdministrationSheet = ({ readonly, is_prn }: Props) => {
             className="group sticky left-0 w-full rounded-b-lg rounded-t-none bg-gray-100"
             onClick={() => setShowDiscontinued(true)}
           >
-            <span className="flex w-full items-center justify-start gap-1 text-sm transition-all duration-200 ease-in-out group-hover:gap-3">
+            <span className="flex w-full items-center justify-start gap-1 text-xs transition-all duration-200 ease-in-out group-hover:gap-3 md:text-sm">
               <CareIcon icon="l-eye" className="text-lg" />
               <span>
-                Show <strong>{discontinuedCount}</strong> other discontinued
+                Show <strong>{discontinuedCount}</strong> discontinued
                 prescription(s)
               </span>
             </span>
diff --git a/src/Components/Medicine/PrescrpitionTimeline.tsx b/src/Components/Medicine/PrescrpitionTimeline.tsx
new file mode 100644
index 00000000000..31e7f4f47c1
--- /dev/null
+++ b/src/Components/Medicine/PrescrpitionTimeline.tsx
@@ -0,0 +1,223 @@
+import dayjs from "../../Utils/dayjs";
+import useSlug from "../../Common/hooks/useSlug";
+import useQuery from "../../Utils/request/useQuery";
+import { classNames, formatDateTime } from "../../Utils/utils";
+import { MedicineAdministrationRecord, Prescription } from "./models";
+import MedicineRoutes from "./routes";
+import Timeline, {
+  TimelineEvent,
+  TimelineNode,
+  TimelineNodeNotes,
+} from "../../CAREUI/display/Timeline";
+import ButtonV2 from "../Common/components/ButtonV2";
+import { useState } from "react";
+import ConfirmDialog from "../Common/ConfirmDialog";
+import request from "../../Utils/request/request";
+import RecordMeta from "../../CAREUI/display/RecordMeta";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+
+interface MedicineAdministeredEvent extends TimelineEvent<"administered"> {
+  administration: MedicineAdministrationRecord;
+}
+
+type PrescriptionTimelineEvents =
+  | TimelineEvent<"created" | "discontinued">
+  | MedicineAdministeredEvent;
+
+interface Props {
+  interval: { start: Date; end: Date };
+  prescription: Prescription;
+  showPrescriptionDetails?: boolean;
+}
+
+export default function PrescrpitionTimeline({
+  prescription,
+  interval,
+}: Props) {
+  const consultation = useSlug("consultation");
+  const { data, refetch, loading } = useQuery(
+    MedicineRoutes.listAdministrations,
+    {
+      pathParams: { consultation },
+      query: {
+        prescription: prescription.id,
+        administered_date_after: formatDateTime(interval.start, "YYYY-MM-DD"),
+        administered_date_before: formatDateTime(interval.end, "YYYY-MM-DD"),
+      },
+    }
+  );
+
+  const events = data && compileEvents(prescription, data.results, interval);
+
+  if (loading && !data) {
+    return (
+      <div className="my-8 flex justify-center">
+        <CareIcon icon="l-spinner" className="animate-spin text-2xl" />
+      </div>
+    );
+  }
+
+  return (
+    <Timeline
+      className={classNames(
+        "md:px-3",
+        loading && data && "animate-pulse opacity-70"
+      )}
+      name="prescription"
+    >
+      {events?.map((event, index) => {
+        switch (event.type) {
+          case "created":
+          case "discontinued":
+            return (
+              <TimelineNode
+                key={`activity-${event.type}-${prescription.id}`}
+                event={event}
+                isLast={index === events.length - 1}
+              />
+            );
+
+          case "administered":
+            return (
+              <MedicineAdministeredNode
+                key={`activity-${event.type}-${prescription.id}`}
+                event={event}
+                onArchived={refetch}
+                isLastNode={index === events.length - 1}
+              />
+            );
+        }
+      })}
+    </Timeline>
+  );
+}
+
+const MedicineAdministeredNode = ({
+  event,
+  onArchived,
+  isLastNode,
+}: {
+  event: MedicineAdministeredEvent;
+  onArchived: () => void;
+  isLastNode: boolean;
+}) => {
+  const consultation = useSlug("consultation");
+  const [showArchiveConfirmation, setShowArchiveConfirmation] = useState(false);
+  const [isArchiving, setIsArchiving] = useState(false);
+
+  return (
+    <>
+      <ConfirmDialog
+        show={showArchiveConfirmation}
+        disabled={isArchiving}
+        variant="warning"
+        title="Archive Administration"
+        description="Are you sure you want to archive this administration?"
+        action="Archive"
+        onConfirm={async () => {
+          setIsArchiving(true);
+
+          const { res } = await request(MedicineRoutes.archiveAdministration, {
+            pathParams: { consultation, external_id: event.administration.id },
+          });
+
+          if (res?.status === 200) {
+            setIsArchiving(false);
+            setShowArchiveConfirmation(false);
+            onArchived();
+          }
+        }}
+        onClose={() => setShowArchiveConfirmation(false)}
+      />
+      <TimelineNode
+        name="medicine"
+        event={event}
+        className={classNames(event.cancelled && "opacity-70")}
+        // TODO: to add administered dosage when Titrated Prescriptions are implemented
+        // titleSuffix={`administered ${event.administration.dosage}.`}
+        actions={
+          !event.cancelled && (
+            <ButtonV2
+              size="small"
+              border
+              ghost
+              variant="secondary"
+              onClick={() => setShowArchiveConfirmation(true)}
+            >
+              Archive
+            </ButtonV2>
+          )
+        }
+        isLast={isLastNode}
+      >
+        {event.cancelled && (
+          <TimelineNodeNotes icon="l-archive">
+            <span className="md:flex md:gap-1">
+              Prescription was archived{" "}
+              <RecordMeta
+                time={event.administration.archived_on}
+                user={event.administration.administered_by}
+                inlineUser
+              />
+            </span>
+          </TimelineNodeNotes>
+        )}
+      </TimelineNode>
+    </>
+  );
+};
+
+const compileEvents = (
+  prescription: Prescription,
+  administrations: MedicineAdministrationRecord[],
+  interval: { start: Date; end: Date }
+): PrescriptionTimelineEvents[] => {
+  const events: PrescriptionTimelineEvents[] = [];
+
+  if (
+    dayjs(prescription.created_date).isBetween(interval.start, interval.end)
+  ) {
+    events.push({
+      type: "created",
+      icon: "l-plus-circle",
+      timestamp: prescription.created_date,
+      by: prescription.prescribed_by,
+      notes: prescription.notes,
+    });
+  }
+
+  administrations
+    .sort(
+      (a, b) =>
+        new Date(a.created_date).getTime() - new Date(b.created_date).getTime()
+    )
+    .forEach((administration) => {
+      events.push({
+        type: "administered",
+        icon: "l-syringe",
+        timestamp: administration.created_date,
+        by: administration.administered_by,
+        cancelled: !!administration.archived_on,
+        administration,
+        notes: administration.notes,
+      });
+    });
+
+  if (
+    prescription?.discontinued &&
+    dayjs(prescription.discontinued_date).isBetween(
+      interval.start,
+      interval.end
+    )
+  ) {
+    events.push({
+      type: "discontinued",
+      icon: "l-times-circle",
+      timestamp: prescription.discontinued_date,
+      by: undefined,
+      notes: prescription.discontinued_reason,
+    });
+  }
+
+  return events;
+};
diff --git a/src/Components/Medicine/models.ts b/src/Components/Medicine/models.ts
index e73c686d83b..ee42b03eca2 100644
--- a/src/Components/Medicine/models.ts
+++ b/src/Components/Medicine/models.ts
@@ -50,13 +50,15 @@ export interface PRNPrescription extends BasePrescription {
 export type Prescription = NormalPrescription | PRNPrescription;
 
 export type MedicineAdministrationRecord = {
-  readonly id?: string;
-  readonly prescription?: Prescription;
+  readonly id: string;
+  readonly prescription: Prescription;
   notes: string;
   administered_date?: string;
-  readonly administered_by?: PerformedByModel;
-  readonly created_date?: string;
-  readonly modified_date?: string;
+  readonly administered_by: PerformedByModel;
+  readonly archived_by: PerformedByModel | undefined;
+  readonly archived_on: string | undefined;
+  readonly created_date: string;
+  readonly modified_date: string;
 };
 
 export type MedibaseMedicine = {
diff --git a/src/Components/Medicine/routes.ts b/src/Components/Medicine/routes.ts
index 580bdd3ec38..c0c4a602227 100644
--- a/src/Components/Medicine/routes.ts
+++ b/src/Components/Medicine/routes.ts
@@ -37,7 +37,7 @@ const MedicineRoutes = {
   administerPrescription: {
     path: "/api/v1/consultation/{consultation}/prescriptions/{external_id}/administer/",
     method: "POST",
-    TBody: Type<MedicineAdministrationRecord>(),
+    TBody: Type<Partial<MedicineAdministrationRecord>>(),
     TRes: Type<MedicineAdministrationRecord>(),
   },
 
@@ -47,6 +47,13 @@ const MedicineRoutes = {
     TBody: Type<{ discontinued_reason: string }>(),
     TRes: Type<Record<string, never>>(),
   },
+
+  archiveAdministration: {
+    path: "/api/v1/consultation/{consultation}/prescription_administration/{external_id}/archive/",
+    method: "POST",
+    TBody: Type<Record<string, never>>(),
+    TRes: Type<Record<string, never>>(),
+  },
 } as const;
 
 export default MedicineRoutes;
diff --git a/src/Utils/utils.ts b/src/Utils/utils.ts
index 3aef5b03d67..5f81a129dfc 100644
--- a/src/Utils/utils.ts
+++ b/src/Utils/utils.ts
@@ -92,6 +92,10 @@ export const relativeDate = (date: DateLike) => {
   return `${obj.fromNow()} at ${obj.format(TIME_FORMAT)}`;
 };
 
+export const formatName = (user: { first_name: string; last_name: string }) => {
+  return `${user.first_name} ${user.last_name}`;
+};
+
 export const relativeTime = (time?: DateLike) => {
   return `${dayjs(time).fromNow()}`;
 };