diff --git a/src/Routers/PatientRouter.tsx b/src/Routers/PatientRouter.tsx
index 123c151350e..17388ffa74e 100644
--- a/src/Routers/PatientRouter.tsx
+++ b/src/Routers/PatientRouter.tsx
@@ -37,14 +37,14 @@ const tokenData: TokenData = JSON.parse(
 );
 
 export const PatientUserContext = createContext<{
-  users?: AppointmentPatient[];
-  selectedUser: AppointmentPatient | null;
-  setSelectedUser: (user: AppointmentPatient) => void;
+  patients?: AppointmentPatient[];
+  selectedPatient: AppointmentPatient | null;
+  setSelectedPatient: (patient: AppointmentPatient) => void;
   tokenData: TokenData;
 }>({
-  users: undefined,
-  selectedUser: null,
-  setSelectedUser: () => {},
+  patients: undefined,
+  selectedPatient: null,
+  setSelectedPatient: () => {},
   tokenData: tokenData,
 });
 
@@ -53,10 +53,9 @@ export default function PatientRouter() {
 
   const path = usePath();
   const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [users, setUsers] = useState<AppointmentPatient[]>([]);
-  const [selectedUser, setSelectedUser] = useState<AppointmentPatient | null>(
-    null,
-  );
+  const [patients, setPatients] = useState<AppointmentPatient[]>([]);
+  const [selectedPatient, setSelectedPatient] =
+    useState<AppointmentPatient | null>(null);
 
   const { data: userData } = useQuery({
     queryKey: ["patients", tokenData.phoneNumber],
@@ -70,8 +69,15 @@ export default function PatientRouter() {
 
   useEffect(() => {
     if (userData) {
-      setUsers(userData.results);
-      setSelectedUser(userData.results[0]);
+      setPatients(userData.results);
+      const localPatient: AppointmentPatient | undefined = JSON.parse(
+        localStorage.getItem("selectedPatient") || "{}",
+      );
+      const selectedPatient =
+        userData.results.find((patient) => patient.id === localPatient?.id) ||
+        userData.results[0];
+      setSelectedPatient(selectedPatient);
+      localStorage.setItem("selectedPatient", JSON.stringify(selectedPatient));
     }
   }, [userData]);
 
@@ -98,7 +104,12 @@ export default function PatientRouter() {
 
   return (
     <PatientUserContext.Provider
-      value={{ users, selectedUser, setSelectedUser, tokenData }}
+      value={{
+        patients,
+        selectedPatient,
+        setSelectedPatient,
+        tokenData,
+      }}
     >
       <SidebarShrinkContext.Provider value={{ shrinked, setShrinked }}>
         <div className="flex h-screen overflow-hidden bg-secondary-100 print:overflow-visible">
diff --git a/src/components/Common/Sidebar/PatientSidebar.tsx b/src/components/Common/Sidebar/PatientSidebar.tsx
index 5fdf8345d12..fc746ab8cba 100644
--- a/src/components/Common/Sidebar/PatientSidebar.tsx
+++ b/src/components/Common/Sidebar/PatientSidebar.tsx
@@ -115,16 +115,16 @@ export const PatientStatelessSidebar = ({
   const [lastIndicatorPosition, setLastIndicatorPosition] = useState(0);
   const [isOverflowVisible, setOverflowVisisble] = useState(false);
   const {
-    users,
-    selectedUser,
-    setSelectedUser,
+    patients,
+    selectedPatient,
+    setSelectedPatient,
   }: {
-    users?: AppointmentPatient[] | undefined;
-    selectedUser: AppointmentPatient | null;
-    setSelectedUser: (user: AppointmentPatient) => void;
+    patients?: AppointmentPatient[] | undefined;
+    selectedPatient: AppointmentPatient | null;
+    setSelectedPatient: (patient: AppointmentPatient) => void;
   } = useContext(PatientUserContext);
 
-  const NavItems = GetNavItems(selectedUser);
+  const NavItems = GetNavItems(selectedPatient);
 
   const updateIndicator = () => {
     if (!indicatorRef.current) return;
@@ -212,12 +212,16 @@ export const PatientStatelessSidebar = ({
           )}
         >
           <Select
-            disabled={users?.length === 0}
-            value={users ? selectedUser?.id : "Book "}
+            disabled={patients?.length === 0}
+            value={patients ? selectedPatient?.id : "Book "}
             onValueChange={(value) => {
-              const user = users?.find((user) => user.id === value);
-              if (user) {
-                setSelectedUser(user);
+              const patient = patients?.find((patient) => patient.id === value);
+              if (patient) {
+                setSelectedPatient(patient);
+                localStorage.setItem(
+                  "selectedPatient",
+                  JSON.stringify(patient),
+                );
               }
             }}
           >
@@ -226,15 +230,17 @@ export const PatientStatelessSidebar = ({
                 asChild
                 placeholder={
                   !shrinked &&
-                  (users?.length === 0 ? t("no_patients") : t("select_patient"))
+                  (patients?.length === 0
+                    ? t("no_patients")
+                    : t("select_patient"))
                 }
               >
                 <div className="flex flex-row justify-between items-center gap-2 w-full text-primary-800">
-                  <Avatar name={selectedUser?.name} className="h-4 w-4" />
+                  <Avatar name={selectedPatient?.name} className="h-4 w-4" />
                   {!shrinked && (
                     <div className="flex flex-row items-center justify-between w-full gap-2">
                       <span className="font-semibold truncate max-w-32">
-                        {selectedUser?.name}
+                        {selectedPatient?.name}
                       </span>
                       <span className="text-xs text-secondary-600">
                         {t("switch")}
@@ -245,11 +251,11 @@ export const PatientStatelessSidebar = ({
               </SelectValue>
             </SelectTrigger>
             <SelectContent>
-              {users?.map((user) => (
-                <SelectItem key={user.id} value={user.id}>
+              {patients?.map((patient) => (
+                <SelectItem key={patient.id} value={patient.id}>
                   <div className="flex flex-row items-center gap-2">
-                    <Avatar name={user.name} className="h-4 w-4" />
-                    {user.name}
+                    <Avatar name={patient.name} className="h-4 w-4" />
+                    {patient.name}
                   </div>
                 </SelectItem>
               ))}
diff --git a/src/components/Common/Sidebar/PatientSidebarUserCard.tsx b/src/components/Common/Sidebar/PatientSidebarUserCard.tsx
index feada71af80..beafe3602c9 100644
--- a/src/components/Common/Sidebar/PatientSidebarUserCard.tsx
+++ b/src/components/Common/Sidebar/PatientSidebarUserCard.tsx
@@ -26,7 +26,7 @@ const PatientSidebarUserCard: React.FC<SidebarUserCardProps> = ({
 }) => {
   const { t } = useTranslation();
 
-  const { selectedUser, tokenData } = useContext(PatientUserContext);
+  const { selectedPatient, tokenData } = useContext(PatientUserContext);
 
   const signOut = useSignOut();
 
@@ -49,14 +49,18 @@ const PatientSidebarUserCard: React.FC<SidebarUserCardProps> = ({
             >
               <div className="flex-none text-lg">
                 <Avatar
-                  {...(selectedUser != null && { name: selectedUser.name })}
+                  {...(selectedPatient != null && {
+                    name: selectedPatient.name,
+                  })}
                   className="h-6 w-6"
                 />
               </div>
               <div className="max-w-32">
                 {!shrinked && (
                   <p className="truncate pl-1 text-xs font-medium tracking-wide">
-                    {selectedUser ? selectedUser.name : tokenData.phoneNumber}
+                    {selectedPatient
+                      ? selectedPatient.name
+                      : tokenData.phoneNumber}
                   </p>
                 )}
               </div>
diff --git a/src/components/Common/Sidebar/Utils.tsx b/src/components/Common/Sidebar/Utils.tsx
index 12e149438f3..f33c2403ebe 100644
--- a/src/components/Common/Sidebar/Utils.tsx
+++ b/src/components/Common/Sidebar/Utils.tsx
@@ -10,6 +10,7 @@ const getRedirectURL = () => {
 export const useSignOut = () => {
   const signOut = useCallback(async () => {
     localStorage.removeItem(CarePatientTokenKey);
+    localStorage.removeItem("selectedPatient");
 
     const redirectURL = getRedirectURL();
     navigate(redirectURL ? `/login?redirect=${redirectURL}` : "/login");
diff --git a/src/components/Schedule/Appointments/AppointmentDetailsPage.tsx b/src/components/Schedule/Appointments/AppointmentDetailsPage.tsx
index 080cca5d600..410f5ba7dee 100644
--- a/src/components/Schedule/Appointments/AppointmentDetailsPage.tsx
+++ b/src/components/Schedule/Appointments/AppointmentDetailsPage.tsx
@@ -243,12 +243,26 @@ const AppointmentDetails = ({
             <div>
               <p className="font-medium">{appointment.patient.name}</p>
               <p className="text-gray-600">
-                {format(appointment.patient.date_of_birth!, "MMMM d, yyyy")} (
-                {differenceInYears(
-                  new Date(),
-                  appointment.patient.date_of_birth!,
+                {appointment.patient.date_of_birth && (
+                  <>
+                    {format(appointment.patient.date_of_birth, "MMMM d, yyyy")}{" "}
+                    {differenceInYears(
+                      new Date(),
+                      appointment.patient.date_of_birth!,
+                    )}
+                  </>
+                )}
+                {appointment.patient.year_of_birth && (
+                  <>
+                    {differenceInYears(
+                      new Date(),
+                      new Date().setFullYear(
+                        Number(appointment.patient.year_of_birth),
+                      ),
+                    )}
+                  </>
                 )}{" "}
-                {t("years")})
+                {t("years")}
               </p>
             </div>
           </div>
diff --git a/src/components/Schedule/Appointments/utils.ts b/src/components/Schedule/Appointments/utils.ts
index 91b92378af8..c357ad5e0e7 100644
--- a/src/components/Schedule/Appointments/utils.ts
+++ b/src/components/Schedule/Appointments/utils.ts
@@ -106,6 +106,9 @@ const getInfiniteAvailabilityHeatmap = ({
 };
 
 export const formatAppointmentSlotTime = (appointment: Appointment) => {
+  if (!appointment.token_slot?.start_datetime) {
+    return "";
+  }
   return format(appointment.token_slot.start_datetime, "dd MMM, yyyy, hh:mm a");
 };
 
diff --git a/src/pages/Patient/index.tsx b/src/pages/Patient/index.tsx
index bb213410071..01389177fba 100644
--- a/src/pages/Patient/index.tsx
+++ b/src/pages/Patient/index.tsx
@@ -1,15 +1,24 @@
 import { useQuery } from "@tanstack/react-query";
 import dayjs from "dayjs";
 import { Link, navigate } from "raviger";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import Loading from "@/components/Common/Loading";
+import { formatAppointmentSlotTime } from "@/components/Schedule/Appointments/utils";
 import { Appointment } from "@/components/Schedule/types";
 
 import { CarePatientTokenKey } from "@/common/constants";
@@ -17,19 +26,21 @@ import { CarePatientTokenKey } from "@/common/constants";
 import { PatientUserContext } from "@/Routers/PatientRouter";
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
-import { formatName } from "@/Utils/utils";
+import { formatName, formatPatientAge } from "@/Utils/utils";
 import { TokenData } from "@/types/auth/otpToken";
 
-import { AppointmentPatient } from "./Utils";
-
 function PatientHome() {
   const { t } = useTranslation();
   const tokenData: TokenData = JSON.parse(
     localStorage.getItem(CarePatientTokenKey) || "{}",
   );
 
-  const { selectedUser }: { selectedUser: AppointmentPatient | null } =
-    useContext(PatientUserContext);
+  const [selectedAppointment, setSelectedAppointment] = useState<
+    Appointment | undefined
+  >();
+  const [appointmentDialogOpen, setAppointmentDialogOpen] = useState(false);
+
+  const { selectedPatient } = useContext(PatientUserContext);
 
   if (!tokenData) {
     navigate("/login");
@@ -66,7 +77,7 @@ function PatientHome() {
   }
 
   const appointments = appointmentsData?.results
-    .filter((appointment) => appointment?.patient.id == selectedUser?.id)
+    .filter((appointment) => appointment?.patient.id == selectedPatient?.id)
     .sort(
       (a, b) =>
         new Date(a.token_slot.start_datetime).getTime() -
@@ -81,6 +92,60 @@ function PatientHome() {
     dayjs().isBefore(dayjs(appointment.token_slot.start_datetime)),
   );
 
+  function AppointmentDialog(props: {
+    appointment: Appointment | undefined;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+  }) {
+    const { appointment, open, onOpenChange } = props;
+    if (!appointment) return <></>;
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="p-0">
+          <DialogHeader className="p-3">
+            <DialogDescription className="mb-4">
+              {t("appointment_details")}
+            </DialogDescription>
+            <div className="flex flex-row justify-between">
+              <div className="space-y-1">
+                <Label className="text-xs">{t("practitioner")}</Label>
+                <p className="text-base font-semibold">
+                  {formatName(appointment.resource)}
+                </p>
+                <p className="text-sm font-semibold text-gray-600">
+                  {formatAppointmentSlotTime(appointment)}
+                </p>
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs">{t("patient_name")}</Label>
+                <p className="font-semibold text-base">
+                  {appointment.patient.name}
+                </p>
+                <p className="text-sm text-gray-600 font-medium">
+                  {formatPatientAge(appointment.patient as any, true)},{" "}
+                  {t(`GENDER__${appointment.patient.gender}`)}
+                </p>
+              </div>
+            </div>
+          </DialogHeader>
+          <DialogFooter className="flex flex-row sm:justify-between items-center bg-blue-200 m-0 w-full p-3 rounded-b-lg">
+            <span className="text-sm font-semibold text-blue-700">
+              {t(appointment.status)}
+            </span>
+            <span className="flex flex-row gap-2">
+              <Button variant="destructive">
+                <span>{t("cancel")}</span>
+              </Button>
+              <Button variant="secondary">
+                <span>{t("reschedule")}</span>
+              </Button>
+            </span>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
   const getAppointmentCard = (appointment: Appointment) => {
     const appointmentTime = dayjs(appointment.token_slot.start_datetime);
     const appointmentDate = appointmentTime.format("DD MMMM YYYY");
@@ -98,7 +163,14 @@ function PatientHome() {
               </span>
             </div>
           </CardTitle>
-          <Button variant="secondary" className="border border-secondary-400">
+          <Button
+            variant="secondary"
+            className="border border-secondary-400"
+            onClick={() => {
+              setSelectedAppointment(appointment);
+              setAppointmentDialogOpen(true);
+            }}
+          >
             <span className="bg-gradient-to-b from-white/15 to-transparent"></span>
             <span>{t("view_details")}</span>
           </Button>
@@ -152,29 +224,41 @@ function PatientHome() {
   };
 
   return (
-    <div className="container mx-auto mt-2">
-      <div className="flex justify-between w-full">
-        <span className="text-xl font-bold">{t("appointments")}</span>
-        <Button variant="primary_gradient" className="sticky right-0" asChild>
-          <Link href="/facilities">
-            <span className="bg-gradient-to-b from-white/15 to-transparent"></span>
-            <span>{t("book_appointment")}</span>
-          </Link>
-        </Button>
+    <>
+      <AppointmentDialog
+        appointment={selectedAppointment}
+        open={appointmentDialogOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            setSelectedAppointment(undefined);
+          }
+          setAppointmentDialogOpen(open);
+        }}
+      />
+      <div className="container mx-auto mt-2">
+        <div className="flex justify-between w-full">
+          <span className="text-xl font-bold">{t("appointments")}</span>
+          <Button variant="primary_gradient" className="sticky right-0" asChild>
+            <Link href="/facilities">
+              <span className="bg-gradient-to-b from-white/15 to-transparent"></span>
+              <span>{t("book_appointment")}</span>
+            </Link>
+          </Button>
+        </div>
+        <Tabs defaultValue="scheduled" className="mt-4">
+          <TabsList>
+            <TabsTrigger value="scheduled">{t("scheduled")}</TabsTrigger>
+            <TabsTrigger value="history">{t("history")}</TabsTrigger>
+          </TabsList>
+          <TabsContent value="scheduled">
+            {getAppointmentCardContent(scheduledAppointments)}
+          </TabsContent>
+          <TabsContent value="history">
+            {getAppointmentCardContent(pastAppointments)}
+          </TabsContent>
+        </Tabs>
       </div>
-      <Tabs defaultValue="scheduled" className="mt-4">
-        <TabsList>
-          <TabsTrigger value="scheduled">{t("scheduled")}</TabsTrigger>
-          <TabsTrigger value="history">{t("history")}</TabsTrigger>
-        </TabsList>
-        <TabsContent value="scheduled">
-          {getAppointmentCardContent(scheduledAppointments)}
-        </TabsContent>
-        <TabsContent value="history">
-          {getAppointmentCardContent(pastAppointments)}
-        </TabsContent>
-      </Tabs>
-    </div>
+    </>
   );
 }