diff --git a/src/app/(dashboard)/patients/[id]/visits/page.tsx b/src/app/(dashboard)/patients/[id]/visits/page.tsx
index d6ea593..ded30bf 100644
--- a/src/app/(dashboard)/patients/[id]/visits/page.tsx
+++ b/src/app/(dashboard)/patients/[id]/visits/page.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { fetchData } from "./fetch";
+import Link from "next/link";
 
 type Props = {
   params: { id: string };
@@ -11,8 +12,9 @@ const Visits = async ({ params: { id } }: Props) => {
     <div className="container">
       <div className="flex flex-col gap-4 w-full">
         {data?.map((item) => (
-          <div
+          <Link
             key={item.id}
+            href={`/visit/${item.id}`}
             className="card card-compact bg-base-100 shadow-xl w-full"
           >
             <div className="card-body">
@@ -26,7 +28,7 @@ const Visits = async ({ params: { id } }: Props) => {
               </div>
               <p>{item.period?.toString()}</p>
             </div>
-          </div>
+          </Link>
         ))}
       </div>
     </div>
diff --git a/src/app/(dashboard)/visit/[careplan]/action.ts b/src/app/(dashboard)/visit/[careplan]/action.ts
new file mode 100644
index 0000000..cfe8d0a
--- /dev/null
+++ b/src/app/(dashboard)/visit/[careplan]/action.ts
@@ -0,0 +1,44 @@
+"use server";
+
+import { fhirServer } from "@/lib/api/axios";
+import { CarePlanListItem, CarePlanStatus } from "./models";
+
+export const fetchData = async (
+  id: string
+): Promise<CarePlanListItem | null> => {
+  try {
+    const resource = (await fhirServer.get(`/CarePlan/${id}`)).data;
+    return {
+      id: resource.id ?? "",
+      title: resource.title ?? "NA",
+      status: resource.status ?? "NA",
+      intent: resource.intent ?? "NA",
+      period: resource.period?.start,
+      visit:
+        resource.category?.find(
+          (e: any) =>
+            e?.coding?.[0].system ==
+            "https://d-tree.org/fhir/care-plan-visit-number"
+        )?.coding?.[0].code ?? "NA",
+    };
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+};
+
+export const onCarePlanStatusChange = async (
+  id: string,
+  status: CarePlanStatus
+) => {
+  try {
+    const resource = (await fhirServer.get(`/CarePlan/${id}`)).data;
+    await fhirServer.put(`/CarePlan/${id}`, {
+      ...resource,
+      status: status,
+    });
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+};
diff --git a/src/app/(dashboard)/visit/[careplan]/component.tsx b/src/app/(dashboard)/visit/[careplan]/component.tsx
new file mode 100644
index 0000000..670b800
--- /dev/null
+++ b/src/app/(dashboard)/visit/[careplan]/component.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import React from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { CarePlanListItem, CarePlanStatus, carePlanStatus } from "./models";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+
+import { useRouter } from "next/navigation";
+
+type Props = {
+  id: string;
+  data: CarePlanListItem | null;
+  onCarePlanStatusChange: (
+    id: string,
+    status: CarePlanStatus
+  ) => Promise<null | undefined>;
+};
+
+const Components = ({ data, id, onCarePlanStatusChange }: Props) => {
+  const router = useRouter();
+  const [status, setStatus] = React.useState<CarePlanStatus | null | undefined>(
+    data?.status
+  );
+  const [loading, setLoading] = React.useState(false);
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-row gap-2 items-end">
+        <Label>Status</Label>
+        <Select
+          onValueChange={(value) => setStatus(value as CarePlanStatus)}
+          defaultValue={data?.status}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select a verified email to display" />
+          </SelectTrigger>
+          <SelectContent>
+            {carePlanStatus.map((status) => (
+              <SelectItem key={status} value={status}>
+                {status}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {status !== data?.status && (
+          <Button
+            disabled={loading}
+            onClick={async () => {
+              if (status) {
+                setLoading(true);
+                await onCarePlanStatusChange(id, status);
+                setLoading(false);
+                window.location.reload();
+              }
+            }}
+          >
+            {loading ? "Saving..." : "Save"}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Components;
diff --git a/src/app/(dashboard)/visit/[careplan]/models.ts b/src/app/(dashboard)/visit/[careplan]/models.ts
new file mode 100644
index 0000000..16427f6
--- /dev/null
+++ b/src/app/(dashboard)/visit/[careplan]/models.ts
@@ -0,0 +1,21 @@
+export interface CarePlanListItem {
+  id: string;
+  title: string;
+  status: string;
+  intent: string;
+  period?: Date | string;
+  visit: string;
+}
+
+// draft | active | on-hold | revoked | completed | entered-in-error | unknown
+export const carePlanStatus = [
+  "draft",
+  "active",
+  "on-hold",
+  "revoked",
+  "completed",
+  "entered-in-error",
+  "unknown",
+];
+
+export type CarePlanStatus = (typeof carePlanStatus)[number];
diff --git a/src/app/(dashboard)/visit/[careplan]/page.tsx b/src/app/(dashboard)/visit/[careplan]/page.tsx
new file mode 100644
index 0000000..12b796f
--- /dev/null
+++ b/src/app/(dashboard)/visit/[careplan]/page.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { fetchData, onCarePlanStatusChange } from "./action";
+import Components from "./component";
+
+type Props = {
+  params: { careplan: string };
+};
+
+const Page = async ({ params: { careplan } }: Props) => {
+  const data = await fetchData(careplan);
+  return (
+    <div className="container">
+      <div>
+        <h2>{data?.title}</h2>
+        <div>
+          <span>Visit {data?.visit}</span>
+          <span>Status {data?.status}</span>
+          <span>Intent {data?.intent}</span>
+        </div>
+        <p>{data?.period?.toString()}</p>
+      </div>
+      <div>
+        <Components
+          id={careplan}
+          data={data}
+          onCarePlanStatusChange={onCarePlanStatusChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Page;