diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 60868e82..20b7a3eb 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -1,51 +1,11 @@
 import type { Metadata } from "next";
-import type * as React from "react";
-import { cn } from "@/components/lib/utils";
-import SelectCoachingRelationship from "@/components/ui/dashboard/select-coaching-relationship";
-import CoachingSessionList from "@/components/ui/dashboard/coaching-session-list";
-import AddEntities from "@/components/ui/dashboard/add-entities";
+import { DashboardContainer } from "../../components/ui/dashboard/dashboard-container";
 
 export const metadata: Metadata = {
   title: "Dashboard",
   description: "Coaching dashboard",
 };
 
-function DashboardContainer({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        // Base styles
-        "p-4",
-        // Mobile: stack vertically
-        "flex flex-col gap-6",
-        // Tablet and up (640px+): side by side
-        "sm:grid sm:grid-cols-2",
-        // Never grow wider than the site-header
-        "max-w-screen-2xl",
-        // Ensure full width for children
-        "[&>*]:w-full",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
 export default function DashboardPage() {
-  return (
-    <>
-      <div className="p-4 max-w-screen-2xl">
-        <div className="mb-8 w-full">
-          <AddEntities />
-        </div>
-      </div>
-      <DashboardContainer>
-        <SelectCoachingRelationship />
-        <CoachingSessionList />
-      </DashboardContainer>
-    </>
-  );
+  return <DashboardContainer />;
 }
diff --git a/src/components/ui/coaching-relationship-selector.tsx b/src/components/ui/coaching-relationship-selector.tsx
index cb75ddab..1ca7f24f 100644
--- a/src/components/ui/coaching-relationship-selector.tsx
+++ b/src/components/ui/coaching-relationship-selector.tsx
@@ -14,8 +14,10 @@ import { useEffect } from "react";
 import { useAuthStore } from "@/lib/providers/auth-store-provider";
 import { useCoachingRelationshipStateStore } from "@/lib/providers/coaching-relationship-state-store-provider";
 import { useCoachingSessionStateStore } from "@/lib/providers/coaching-session-state-store-provider";
+import { cn } from "../lib/utils";
 
 interface CoachingRelationshipsSelectorProps extends PopoverProps {
+  className?: string;
   /// The Organization's Id for which to get a list of associated CoachingRelationships
   organizationId: Id;
   /// Disable the component from interaction with the user
@@ -38,9 +40,6 @@ function CoachingRelationshipsSelectItems({
   // Be sure to cache the list of current coaching relationships in the CoachingRelationshipStateStore
   useEffect(() => {
     if (!relationships.length) return;
-    console.debug(
-      `relationships (useEffect): ${JSON.stringify(relationships)}`
-    );
     setCurrentCoachingRelationships(relationships);
   }, [relationships, setCurrentCoachingRelationships]);
 
@@ -48,8 +47,6 @@ function CoachingRelationshipsSelectItems({
   if (isError) return <div>Error loading coaching relationships</div>;
   if (!relationships?.length) return <div>No coaching relationships found</div>;
 
-  console.debug(`relationships: ${JSON.stringify(relationships)}`);
-
   return (
     <>
       {relationships.map((rel) => (
@@ -63,6 +60,7 @@ function CoachingRelationshipsSelectItems({
 }
 
 export default function CoachingRelationshipSelector({
+  className,
   organizationId,
   disabled,
   onSelect,
@@ -101,29 +99,32 @@ export default function CoachingRelationshipSelector({
     ? getCurrentCoachingRelationship(currentCoachingRelationshipId)
     : null;
 
-  const displayValue = currentRelationship ? (
-    <>
-      {currentRelationship.coach_first_name}{" "}
-      {currentRelationship.coach_last_name} -&gt;{" "}
-      {currentRelationship.coachee_first_name}{" "}
-      {currentRelationship.coachee_last_name}
-    </>
-  ) : undefined;
+  const displayValue =
+    currentRelationship && currentRelationship.id ? (
+      <>
+        {currentRelationship.coach_first_name}{" "}
+        {currentRelationship.coach_last_name} -&gt;{" "}
+        {currentRelationship.coachee_first_name}{" "}
+        {currentRelationship.coachee_last_name}
+      </>
+    ) : undefined;
 
   return (
-    <Select
-      disabled={disabled}
-      value={currentCoachingRelationshipId ?? undefined}
-      onValueChange={handleSetCoachingRelationship}
-    >
-      <SelectTrigger id="coaching-relationship-selector">
-        <SelectValue placeholder="Select coaching relationship">
-          {displayValue}
-        </SelectValue>
-      </SelectTrigger>
-      <SelectContent>
-        <CoachingRelationshipsSelectItems organizationId={organizationId} />
-      </SelectContent>
-    </Select>
+    <div className={cn("font-normal", className)}>
+      <Select
+        disabled={disabled}
+        value={currentCoachingRelationshipId ?? undefined}
+        onValueChange={handleSetCoachingRelationship}
+      >
+        <SelectTrigger id="coaching-relationship-selector">
+          <SelectValue placeholder="Select coaching relationship">
+            {displayValue}
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          <CoachingRelationshipsSelectItems organizationId={organizationId} />
+        </SelectContent>
+      </Select>
+    </div>
   );
 }
diff --git a/src/components/ui/coaching-session.tsx b/src/components/ui/coaching-session.tsx
index d0e77880..0b381531 100644
--- a/src/components/ui/coaching-session.tsx
+++ b/src/components/ui/coaching-session.tsx
@@ -8,20 +8,31 @@ import Link from "next/link";
 import { useCoachingSessionStateStore } from "@/lib/providers/coaching-session-state-store-provider";
 import { useOverarchingGoalBySession } from "@/lib/api/overarching-goals";
 import { Id } from "@/types/general";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { MoreHorizontal } from "lucide-react";
+import { CoachingSession as CoachingSessionType } from "@/types/coaching-session";
+import { useAuthStore } from "@/lib/providers/auth-store-provider";
 
 interface CoachingSessionProps {
-  coachingSession: {
-    id: Id;
-    date: string;
-  };
+  coachingSession: CoachingSessionType;
+  onUpdate: () => void;
+  onDelete: () => void;
 }
 
 const CoachingSession: React.FC<CoachingSessionProps> = ({
   coachingSession,
+  onUpdate,
+  onDelete,
 }) => {
   const { setCurrentCoachingSessionId } = useCoachingSessionStateStore(
     (state) => state
   );
+  const { isCoach } = useAuthStore((state) => state);
 
   return (
     <Card>
@@ -33,15 +44,34 @@ const CoachingSession: React.FC<CoachingSessionProps> = ({
               {format(new Date(coachingSession.date), "MMMM d, yyyy h:mm a")}
             </div>
           </div>
-          <Link href={`/coaching-sessions/${coachingSession.id}`} passHref>
-            <Button
-              size="sm"
-              className="w-full sm:w-auto mt-2 sm:mt-0"
-              onClick={() => setCurrentCoachingSessionId(coachingSession.id)}
-            >
-              Join Session
-            </Button>
-          </Link>
+          <div className="flex items-center gap-2">
+            <Link href={`/coaching-sessions/${coachingSession.id}`} passHref>
+              <Button
+                size="sm"
+                className="w-full sm:w-auto mt-2 sm:mt-0 text-sm px-3 py-1"
+                onClick={() => setCurrentCoachingSessionId(coachingSession.id)}
+              >
+                Join Session
+              </Button>
+            </Link>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon">
+                  <MoreHorizontal className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={onUpdate}>
+                  Edit
+                </DropdownMenuItem>
+                {isCoach && (
+                  <DropdownMenuItem onClick={onDelete} className="text-destructive">
+                    Delete
+                  </DropdownMenuItem>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
         </div>
       </CardHeader>
     </Card>
diff --git a/src/components/ui/dashboard/add-coaching-session-dialog.tsx b/src/components/ui/dashboard/add-coaching-session-dialog.tsx
deleted file mode 100644
index 3cbcad19..00000000
--- a/src/components/ui/dashboard/add-coaching-session-dialog.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-"use client";
-
-import React from "react";
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
-import { Calendar } from "@/components/ui/calendar";
-import { useCoachingRelationshipStateStore } from "@/lib/providers/coaching-relationship-state-store-provider";
-import { getDateTimeFromString } from "@/types/general";
-import {
-  CoachingSession,
-  defaultCoachingSession,
-} from "@/types/coaching-session";
-import {
-  useCoachingSessionList,
-  useCoachingSessionMutation,
-} from "@/lib/api/coaching-sessions";
-import { DateTime } from "ts-luxon";
-import { useAuthStore } from "@/lib/providers/auth-store-provider";
-import { cn } from "@/components/lib/utils";
-
-interface AddCoachingSessionDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onCoachingSessionAdded: () => void;
-  dialogTrigger: React.ReactElement<React.HTMLAttributes<HTMLButtonElement>>;
-}
-
-export function AddCoachingSessionDialog({
-  open,
-  onOpenChange,
-  onCoachingSessionAdded,
-  dialogTrigger,
-}: AddCoachingSessionDialogProps) {
-  const { currentCoachingRelationshipId } = useCoachingRelationshipStateStore(
-    (state) => state
-  );
-  const fromDate = DateTime.now().minus({ month: 1 });
-  const toDate = DateTime.now().plus({ month: 1 });
-  const { refresh } = useCoachingSessionList(
-    currentCoachingRelationshipId,
-    fromDate,
-    toDate
-  );
-  const { create: createCoachingSession } = useCoachingSessionMutation();
-  const [newSessionDate, setNewSessionDate] = useState<Date | undefined>(
-    undefined
-  );
-  const [newSessionTime, setNewSessionTime] = useState<string>("");
-  const { isCoach } = useAuthStore((state) => state);
-
-  const handleCreateSession = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!newSessionDate || !newSessionTime) return;
-
-    const [hours, minutes] = newSessionTime.split(":").map(Number);
-    const dateTime = getDateTimeFromString(newSessionDate.toISOString())
-      .set({ hour: hours, minute: minutes })
-      .toFormat("yyyy-MM-dd'T'HH:mm:ss");
-
-    const newCoachingSession: CoachingSession = {
-      ...defaultCoachingSession(),
-      coaching_relationship_id: currentCoachingRelationshipId,
-      date: dateTime,
-    };
-
-    createCoachingSession(newCoachingSession)
-      .then(() => {
-        refresh();
-        onCoachingSessionAdded();
-        setNewSessionDate(undefined);
-        setNewSessionTime("");
-      })
-      .catch((err: Error) => {
-        console.error("Failed to create new Coaching Session: " + err);
-        throw err;
-      });
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogTrigger asChild>
-        {React.cloneElement(dialogTrigger, {
-          ...(dialogTrigger.props as React.HTMLAttributes<HTMLButtonElement>),
-          className: cn(
-            (dialogTrigger.props as React.HTMLAttributes<HTMLButtonElement>)
-              .className
-          ),
-        })}
-      </DialogTrigger>
-
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Create New Coaching Session</DialogTitle>
-        </DialogHeader>
-        <form onSubmit={handleCreateSession} className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="session-date">Session Date</Label>
-            <Calendar
-              mode="single"
-              selected={newSessionDate}
-              onSelect={(date) => setNewSessionDate(date)}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="session-time">Session Time</Label>
-            <input
-              type="time"
-              id="session-time"
-              value={newSessionTime}
-              onChange={(e) => setNewSessionTime(e.target.value)}
-              className="w-full border rounded p-2"
-              required
-            />
-          </div>
-          <Button type="submit" disabled={!newSessionDate || !newSessionTime}>
-            Create Session
-          </Button>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/src/components/ui/dashboard/add-entities.tsx b/src/components/ui/dashboard/add-entities.tsx
index 76c83147..38ccc504 100644
--- a/src/components/ui/dashboard/add-entities.tsx
+++ b/src/components/ui/dashboard/add-entities.tsx
@@ -1,48 +1,40 @@
 "use client";
 
-import { useState } from "react";
-import { AddCoachingSessionDialog } from "./add-coaching-session-dialog";
 import { AddCoachingSessionButton } from "./add-coaching-session-button";
 import { AddMemberButton } from "./add-member-button";
 import { useRouter } from "next/navigation";
 import { useOrganizationStateStore } from "@/lib/providers/organization-state-store-provider";
 import { useAuthStore } from "@/lib/providers/auth-store-provider";
+import { cn } from "@/components/lib/utils";
 
-export default function AddEntities() {
+interface AddEntitiesProps {
+  className?: string;
+  onCreateSession: () => void;
+}
+
+export default function AddEntities({
+  className,
+  onCreateSession,
+}: AddEntitiesProps) {
   const router = useRouter();
-  const [open, setOpen] = useState(false);
   const { currentOrganizationId } = useOrganizationStateStore((state) => state);
   const { isCoach } = useAuthStore((state) => state);
 
-  const onCoachingSessionAdded = () => {
-    setOpen(false);
-  };
-
   const onMemberButtonClicked = () => {
     router.push(`/organizations/${currentOrganizationId}/members`);
   };
 
   return (
-    <div className="space-y-4">
+    <div className={cn("space-y-4", className)}>
       <h3 className="text-xl sm:text-2xl font-semibold tracking-tight">
         Add New
       </h3>
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-        <AddCoachingSessionDialog
-          open={open}
-          onOpenChange={setOpen}
-          onCoachingSessionAdded={onCoachingSessionAdded}
-          dialogTrigger={
-            <AddCoachingSessionButton
-              disabled={!isCoach || !currentOrganizationId}
-            />
-          }
+        <AddCoachingSessionButton
+          disabled={!isCoach || !currentOrganizationId}
+          onClick={onCreateSession}
         />
 
-        {/* TODO: Refactor the AddMemberButton and AddMemberDialog to work just like
-            AddCoachingSessionDialog does above, where the dialog is the parent container
-            and it accepts a AddMemberButton as the dialogTrigger parameter.
-        */}
         <AddMemberButton
           disabled={!isCoach || !currentOrganizationId}
           onClick={onMemberButtonClicked}
diff --git a/src/components/ui/dashboard/coaching-session-dialog.tsx b/src/components/ui/dashboard/coaching-session-dialog.tsx
new file mode 100644
index 00000000..caceb0a7
--- /dev/null
+++ b/src/components/ui/dashboard/coaching-session-dialog.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import CoachingSessionForm, { CoachingSessionFormMode } from "./coaching-session-form";
+import type { CoachingSession } from "@/types/coaching-session";
+
+interface CoachingSessionDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  coachingSessionToEdit?: CoachingSession;
+}
+
+export function CoachingSessionDialog({
+  open,
+  onOpenChange,
+  coachingSessionToEdit,
+}: CoachingSessionDialogProps) {
+  const mode: CoachingSessionFormMode = coachingSessionToEdit ? "update" : "create";
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {mode === "create" ? "Create New Coaching Session" : "Update Coaching Session"}
+          </DialogTitle>
+        </DialogHeader>
+        <CoachingSessionForm
+          mode={mode}
+          existingSession={coachingSessionToEdit}
+          onOpenChange={onOpenChange}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/ui/dashboard/coaching-session-form.tsx b/src/components/ui/dashboard/coaching-session-form.tsx
new file mode 100644
index 00000000..672a7c93
--- /dev/null
+++ b/src/components/ui/dashboard/coaching-session-form.tsx
@@ -0,0 +1,121 @@
+import { CoachingSession } from "@/types/coaching-session";
+import { Label } from "@/components/ui/label";
+import { Calendar } from "@/components/ui/calendar";
+import { Button } from "@/components/ui/button";
+import { useCoachingRelationshipStateStore } from "@/lib/providers/coaching-relationship-state-store-provider";
+import { useCoachingSessionList, useCoachingSessionMutation } from "@/lib/api/coaching-sessions";
+import { DateTime } from "ts-luxon";
+import { useAuthStore } from "@/lib/providers/auth-store-provider";
+import { format } from "date-fns";
+import { getDateTimeFromString } from "@/types/general";
+import { useState } from "react";
+import { defaultCoachingSession } from "@/types/coaching-session";
+
+export type CoachingSessionFormMode = "create" | "update";
+
+interface CoachingSessionFormProps {
+    existingSession?: CoachingSession;
+    mode: CoachingSessionFormMode;
+    onOpenChange: (open: boolean) => void;
+}
+
+export default function CoachingSessionForm({
+    existingSession,
+    mode,
+    onOpenChange
+}: CoachingSessionFormProps) {
+
+    const { currentCoachingRelationshipId } = useCoachingRelationshipStateStore(
+        (state) => state
+    );
+    const fromDate = DateTime.now().minus({ month: 1 });
+    const toDate = DateTime.now().plus({ month: 1 });
+    const { refresh } = useCoachingSessionList(
+        currentCoachingRelationshipId,
+        fromDate,
+        toDate
+    );
+    const { create: createCoachingSession, update } =
+        useCoachingSessionMutation();
+    const [sessionDate, setSessionDate] = useState<Date | undefined>(
+        existingSession ? new Date(existingSession.date) : undefined
+    );
+    const [sessionTime, setSessionTime] = useState<string>(
+        existingSession ? format(new Date(existingSession.date), "HH:mm") : ""
+    );
+
+    const resetForm = () => {
+        setSessionDate(undefined);
+        setSessionTime("");
+        onOpenChange(false);
+    };
+
+    const handleCreateSession = async (dateTime: string) => {
+        const newCoachingSession: CoachingSession = {
+            ...defaultCoachingSession(),
+            coaching_relationship_id: currentCoachingRelationshipId,
+            date: dateTime,
+        };
+        await createCoachingSession(newCoachingSession);
+    };
+
+    const handleUpdateSession = async (dateTime: string) => {
+        if (!existingSession) return;
+        await update(existingSession.id, {
+            ...existingSession,
+            date: dateTime,
+            updated_at: DateTime.now(),
+        });
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!sessionDate || !sessionTime) return;
+
+        const [hours, minutes] = sessionTime.split(":").map(Number);
+        const dateTime = getDateTimeFromString(sessionDate.toISOString())
+            .set({ hour: hours, minute: minutes })
+            .toFormat("yyyy-MM-dd'T'HH:mm:ss");
+
+        const handler = mode === "create" ? handleCreateSession : handleUpdateSession;
+
+        try {
+            await handler(dateTime);
+            refresh();
+        } catch (error) {
+            // TODO: We might want to show a toast here if/when we get that infrastructure in place 
+            console.error(`Failed to ${mode} coaching session:`, error);
+        } finally {
+            resetForm();
+        }
+    };
+
+    return (
+        <div>
+            <form onSubmit={handleSubmit} className="space-y-4">
+                <div className="space-y-2">
+                    <Label htmlFor="session-date">Session Date</Label>
+                    <Calendar
+                        mode="single"
+                        selected={sessionDate}
+                        onSelect={(date) => setSessionDate(date)}
+                    />
+                </div>
+                <div className="space-y-2">
+                    <Label htmlFor="session-time">Session Time</Label>
+                    <input
+                        type="time"
+                        id="session-time"
+                        value={sessionTime}
+                        onChange={(e) => setSessionTime(e.target.value)}
+                        className="w-full border rounded p-2"
+                        required
+                    />
+                </div>
+                <Button type="submit" disabled={!sessionDate || !sessionTime}>
+                    {mode === "create" ? "Create Session" : "Update Session"}
+                </Button>
+            </form>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/components/ui/dashboard/coaching-session-list.tsx b/src/components/ui/dashboard/coaching-session-list.tsx
index 2b366939..31c697d8 100644
--- a/src/components/ui/dashboard/coaching-session-list.tsx
+++ b/src/components/ui/dashboard/coaching-session-list.tsx
@@ -1,17 +1,31 @@
 "use client";
 
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { ArrowUpDown } from "lucide-react";
-import { useAuthStore } from "@/lib/providers/auth-store-provider";
 import { useCoachingRelationshipStateStore } from "@/lib/providers/coaching-relationship-state-store-provider";
 import { useCoachingSessionList } from "@/lib/api/coaching-sessions";
+import { useCoachingSessionMutation } from "@/lib/api/coaching-sessions";
 import { CoachingSession as CoachingSessionComponent } from "@/components/ui/coaching-session";
 import { DateTime } from "ts-luxon";
-import { AddCoachingSessionDialog } from "./add-coaching-session-dialog";
+import {
+  filterAndSortCoachingSessions,
+  type CoachingSession,
+} from "@/types/coaching-session";
+import { Id, SortOrder } from "@/types/general";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import CoachingRelationshipSelector from "../coaching-relationship-selector";
+import { useOrganizationStateStore } from "@/lib/providers/organization-state-store-provider";
+import { cn } from "@/components/lib/utils";
 
-export default function CoachingSessionList() {
+interface CoachingSessionListProps {
+  className?: string;
+  onUpdateSession: (session: CoachingSession) => void;
+}
+
+export default function CoachingSessionList({
+  className,
+  onUpdateSession,
+}: CoachingSessionListProps) {
+  const { currentOrganizationId } = useOrganizationStateStore((state) => state);
   const { currentCoachingRelationshipId } = useCoachingRelationshipStateStore(
     (state) => state
   );
@@ -24,90 +38,125 @@ export default function CoachingSessionList() {
     coachingSessions,
     isLoading: isLoadingCoachingSessions,
     isError: isErrorCoachingSessions,
-    refresh,
+    refresh: refreshCoachingSessions,
   } = useCoachingSessionList(currentCoachingRelationshipId, fromDate, toDate);
 
-  const [sortByDate, setSortByDate] = useState(true);
-  const [open, setOpen] = useState(false);
-  const { isCoach } = useAuthStore((state) => state);
+  const { delete: deleteCoachingSession } = useCoachingSessionMutation();
 
-  const sortedSessions = coachingSessions
-    ? [...coachingSessions].sort((a, b) => {
-        return new Date(b.date).getTime() - new Date(a.date).getTime();
-      })
-    : [];
+  const handleDeleteCoachingSession = async (id: Id) => {
+    if (!confirm("Are you sure you want to delete this session?")) {
+      return;
+    }
 
-  const onCoachingSessionAdded = () => {
-    // SWR refresh
-    refresh();
-    setOpen(false);
+    try {
+      await deleteCoachingSession(id).then(() => refreshCoachingSessions());
+    } catch (error) {
+      console.error("Error deleting coaching session:", error);
+      // TODO: Show an error toast here once we start using toasts for showing operation results.
+    }
   };
 
-  if (isLoadingCoachingSessions) return <div>Loading coaching sessions...</div>;
-  if (isErrorCoachingSessions)
-    return <div>Error loading coaching sessions</div>;
+  const upcomingSessions = coachingSessions
+    ? filterAndSortCoachingSessions(coachingSessions, SortOrder.Ascending, true)
+    : [];
+
+  const previousSessions = coachingSessions
+    ? filterAndSortCoachingSessions(
+        coachingSessions,
+        SortOrder.Descending,
+        false
+      )
+    : [];
+
+  let loadingCoachingSessions = (
+    <div className="flex items-center justify-center py-8">
+      <p className="text-lg text-muted-foreground">
+        Loading your coaching sessions...
+      </p>
+    </div>
+  );
+
+  let noCoachingSessions = (
+    <div className="flex items-center justify-center py-8">
+      <p className="text-lg text-muted-foreground">
+        Select a coaching relationship to view your coaching sessions.
+      </p>
+    </div>
+  );
+
+  let errorLoadingCoachingSessions = (
+    <div className="flex items-center justify-center py-8">
+      <p className="text-lg font-bold">
+        There was an error trying to load your coaching sessions.
+      </p>
+    </div>
+  );
 
   return (
-    <Card className="flex-1">
-      <CardHeader className="space-y-4">
-        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
-          <CardTitle className="text-xl sm:text-2xl">
-            Coaching Sessions
-          </CardTitle>
-          <AddCoachingSessionDialog
-            open={open}
-            onOpenChange={setOpen}
-            onCoachingSessionAdded={onCoachingSessionAdded}
-            dialogTrigger={
-              <Button
-                variant="outline"
-                size="sm"
-                className="w-full sm:w-auto"
-                disabled={!isCoach || !currentCoachingRelationshipId}
-              >
-                Create New Coaching Session
-              </Button>
-            }
-          />
-        </div>
-        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2">
-          <Button
-            variant="ghost"
-            size="sm"
-            className="text-muted-foreground w-full sm:w-auto justify-between"
-            onClick={() => setSortByDate(true)}
-          >
-            <span>Date and Time</span>
-            <ArrowUpDown className="ml-2 h-4 w-4" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="text-muted-foreground w-full sm:w-auto justify-between"
-            onClick={() => setSortByDate(false)}
-          >
-            <span>Overarching Goal</span>
-            <ArrowUpDown className="ml-2 h-4 w-4" />
-          </Button>
-        </div>
+    <Card className={cn("min-w-96", className)}>
+      <CardHeader>
+        <CardTitle>
+          <div className="flex justify-between flex-col lg:flex-row">
+            <div>Coaching Sessions</div>
+            <CoachingRelationshipSelector
+              className="pt-4 lg:min-w-64"
+              organizationId={currentOrganizationId}
+              disabled={!currentOrganizationId}
+            />
+          </div>
+        </CardTitle>
       </CardHeader>
       <CardContent>
-        {!currentCoachingRelationshipId ? (
-          <div className="flex items-center justify-center py-8">
-            <p className="text-lg text-muted-foreground">
-              Choose a Relationship to view Coaching Sessions
-            </p>
-          </div>
-        ) : (
-          <div className="space-y-4">
-            {sortedSessions.map((coachingSession) => (
-              <CoachingSessionComponent
-                key={coachingSession.id}
-                coachingSession={coachingSession}
-              />
-            ))}
-          </div>
-        )}
+        <Tabs defaultValue="upcoming" className="w-full items-start">
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="upcoming">Upcoming</TabsTrigger>
+            <TabsTrigger value="previous">Previous</TabsTrigger>
+          </TabsList>
+          <TabsContent value="upcoming" className="mt-4">
+            {isLoadingCoachingSessions ? (
+              loadingCoachingSessions
+            ) : isErrorCoachingSessions ? (
+              errorLoadingCoachingSessions
+            ) : !currentCoachingRelationshipId ? (
+              noCoachingSessions
+            ) : (
+              <div className="space-y-4">
+                {upcomingSessions.map((coachingSession) => (
+                  <CoachingSessionComponent
+                    key={coachingSession.id}
+                    coachingSession={coachingSession}
+                    onUpdate={() => onUpdateSession(coachingSession)}
+                    onDelete={() =>
+                      handleDeleteCoachingSession(coachingSession.id)
+                    }
+                  />
+                ))}
+              </div>
+            )}
+          </TabsContent>
+          <TabsContent value="previous" className="mt-4">
+            {isLoadingCoachingSessions ? (
+              loadingCoachingSessions
+            ) : isErrorCoachingSessions ? (
+              errorLoadingCoachingSessions
+            ) : !currentCoachingRelationshipId ? (
+              noCoachingSessions
+            ) : (
+              <div className="space-y-4">
+                {previousSessions.map((coachingSession) => (
+                  <CoachingSessionComponent
+                    key={coachingSession.id}
+                    coachingSession={coachingSession}
+                    onUpdate={() => onUpdateSession(coachingSession)}
+                    onDelete={() =>
+                      handleDeleteCoachingSession(coachingSession.id)
+                    }
+                  />
+                ))}
+              </div>
+            )}
+          </TabsContent>
+        </Tabs>
       </CardContent>
     </Card>
   );
diff --git a/src/components/ui/dashboard/dashboard-container.tsx b/src/components/ui/dashboard/dashboard-container.tsx
new file mode 100644
index 00000000..5295b245
--- /dev/null
+++ b/src/components/ui/dashboard/dashboard-container.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { useState } from "react";
+import type * as React from "react";
+import { cn } from "@/components/lib/utils";
+import CoachingSessionList from "@/components/ui/dashboard/coaching-session-list";
+import AddEntities from "@/components/ui/dashboard/add-entities";
+import { CoachingSessionDialog } from "@/components/ui/dashboard/coaching-session-dialog";
+import type { CoachingSession } from "@/types/coaching-session";
+
+export function DashboardContainer() {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [sessionToEdit, setSessionToEdit] = useState<
+    CoachingSession | undefined
+  >();
+
+  const handleOpenDialog = (session?: CoachingSession) => {
+    setSessionToEdit(session);
+    setDialogOpen(true);
+  };
+
+  const handleCloseDialog = () => {
+    setDialogOpen(false);
+    setSessionToEdit(undefined);
+  };
+
+  return (
+    <div
+      className={cn(
+        // Base styles
+        "p-4",
+        // Mobile: stack vertically
+        "flex flex-col gap-6",
+        // Never grow wider than the site-header
+        "max-w-screen-2xl",
+        // Ensure full width for children
+        "[&>*]:w-full"
+      )}
+    >
+      <AddEntities
+        className="mb-8"
+        onCreateSession={() => handleOpenDialog()}
+      />
+      <CoachingSessionList onUpdateSession={handleOpenDialog} />
+      <CoachingSessionDialog
+        open={dialogOpen}
+        onOpenChange={handleCloseDialog}
+        coachingSessionToEdit={sessionToEdit}
+      />
+    </div>
+  );
+}
diff --git a/src/components/ui/main-nav-menu.tsx b/src/components/ui/main-nav-menu.tsx
deleted file mode 100644
index 3c8fecb9..00000000
--- a/src/components/ui/main-nav-menu.tsx
+++ /dev/null
@@ -1,278 +0,0 @@
-"use client";
-
-import { cn } from "@/components/lib/utils";
-
-import { Dialog } from "@radix-ui/react-dialog";
-
-import { Button } from "@/components/ui/button";
-import {
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Icons } from "@/components/ui/icons";
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-} from "@/components/ui/navigation-menu";
-import { PresetSelector } from "@/components/ui/preset-selector";
-
-import { current, future, past } from "../../data/presets";
-
-import { ChevronDownIcon } from "@radix-ui/react-icons";
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { siteConfig } from "@/site.config";
-import { forwardRef, useState } from "react";
-import { useOrganizationStateStore } from "@/lib/providers/organization-state-store-provider";
-
-export function MainNavMenu() {
-  const [open, setIsOpen] = useState(false);
-  const { currentOrganizationId, getCurrentOrganization } =
-    useOrganizationStateStore((state) => state);
-
-  const organization = getCurrentOrganization(currentOrganizationId);
-
-  return (
-    <>
-      <NavigationMenu>
-        <NavigationMenuList>
-          <NavigationMenuItem>
-            <NavigationMenuTrigger>
-              <span className="hidden font-bold sm:inline-block">
-                {organization.name.length > 0
-                  ? organization.name
-                  : siteConfig.name}
-              </span>
-            </NavigationMenuTrigger>
-            <NavigationMenuContent>
-              <ul className="grid gap-3 p-6 md:w-[500px] lg:w-[600px] lg:grid-cols-[.75fr_1fr]">
-                <li className="row-span-3">
-                  <NavigationMenuLink asChild>
-                    <a
-                      className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
-                      href="/dashboard"
-                    >
-                      <Icons.refactor_logo className="h-4 w-4" />
-                      <div className="mb-2 mt-4 text-lg font-medium">
-                        {organization.name.length > 0
-                          ? organization.name
-                          : siteConfig.name}
-                      </div>
-                      <p className="text-sm leading-tight text-muted-foreground">
-                        {siteConfig.description}
-                      </p>
-                    </a>
-                  </NavigationMenuLink>
-                </li>
-
-                {/* Hidden for MVP */}
-                <Card className="hidden">
-                  <CardHeader>
-                    <CardTitle>Organization & Relationship</CardTitle>
-                    <CardDescription>
-                      Set your current organization and coaching relationship.
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className="grid gap-6">
-                    <div className="flex items-center justify-between space-x-4">
-                      <div className="flex items-center space-x-4">
-                        <div>
-                          <p className="text-sm font-medium leading-none">
-                            Organization
-                          </p>
-                        </div>
-                      </div>
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <Button variant="outline" className="ml-auto">
-                            Owner{" "}
-                            <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="p-0" align="end">
-                          <Command>
-                            <CommandInput placeholder="Select new role..." />
-                            <CommandList>
-                              <CommandEmpty>No roles found.</CommandEmpty>
-                              <CommandGroup>
-                                <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                  <p>Viewer</p>
-                                  <p className="text-sm text-muted-foreground">
-                                    Can view and comment.
-                                  </p>
-                                </CommandItem>
-                                <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                  <p>Developer</p>
-                                  <p className="text-sm text-muted-foreground">
-                                    Can view, comment and edit.
-                                  </p>
-                                </CommandItem>
-                                <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                  <p>Billing</p>
-                                  <p className="text-sm text-muted-foreground">
-                                    Can view, comment and manage billing.
-                                  </p>
-                                </CommandItem>
-                                <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                  <p>Owner</p>
-                                  <p className="text-sm text-muted-foreground">
-                                    Admin-level access to all resources.
-                                  </p>
-                                </CommandItem>
-                              </CommandGroup>
-                            </CommandList>
-                          </Command>
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-                    <div className="flex items-center justify-between space-x-4">
-                      <div className="flex items-center space-x-4">
-                        <div>
-                          <p className="text-sm font-medium leading-none">
-                            Relationship
-                          </p>
-                        </div>
-                      </div>
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <Button variant="outline" className="ml-auto">
-                            Member{" "}
-                            <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="p-0" align="end">
-                          <Command>
-                            <CommandInput placeholder="Select new role..." />
-                            <CommandList>
-                              <CommandEmpty>No roles found.</CommandEmpty>
-                              <CommandGroup className="p-1.5">
-                                <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                  <p>Viewer</p>
-                                  <p className="text-sm text-muted-foreground">
-                                    Can view and comment.
-                                  </p>
-                                </CommandItem>
-                                <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                  <p>Developer</p>
-                                  <p className="text-sm text-muted-foreground">
-                                    Can view, comment and edit.
-                                  </p>
-                                </CommandItem>
-                                <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                  <p>Billing</p>
-                                  <p className="text-sm text-muted-foreground">
-                                    Can view, comment and manage billing.
-                                  </p>
-                                </CommandItem>
-                                <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                                  <p>Owner</p>
-                                  <p className="text-sm text-muted-foreground">
-                                    Admin-level access to all resources.
-                                  </p>
-                                </CommandItem>
-                              </CommandGroup>
-                            </CommandList>
-                          </Command>
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-                  </CardContent>
-                </Card>
-              </ul>
-            </NavigationMenuContent>
-          </NavigationMenuItem>
-        </NavigationMenuList>
-      </NavigationMenu>
-      <Dialog open={open} onOpenChange={setIsOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>
-              Current Organization & Coaching Relationship
-            </DialogTitle>
-            <DialogDescription>
-              Select your current organization and coaching relationship to
-              access specific coaching sessions across multiple organizations
-              and coaches/coachees.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="py-6 w-full">
-            <h4 className="text-sm text-muted-foreground">
-              Select Your Organization
-            </h4>
-            <div className="flex pt-3">
-              <PresetSelector current={current} future={future} past={past} />
-            </div>
-            <h4 className="text-sm text-muted-foreground pt-6">
-              Select Your Coaching Relationship
-            </h4>
-            <div className="flex pt-3">
-              <PresetSelector current={current} future={future} past={past} />
-            </div>
-          </div>
-          <DialogFooter>
-            <div className="flex flex-col sm:flex-row gap-2">
-              <Button variant="secondary" onClick={() => setIsOpen(true)}>
-                Set Default
-              </Button>
-              <Button variant="secondary" onClick={() => setIsOpen(false)}>
-                Close
-              </Button>
-            </div>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}
-
-const ListItem = forwardRef<
-  React.ElementRef<"a">,
-  React.ComponentPropsWithoutRef<"a">
->(({ className, title, children, ...props }, ref) => {
-  return (
-    <li>
-      <NavigationMenuLink asChild>
-        <a
-          ref={ref}
-          className={cn(
-            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-            className
-          )}
-          {...props}
-        >
-          <div className="text-sm font-medium leading-none">{title}</div>
-          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
-            {children}
-          </p>
-        </a>
-      </NavigationMenuLink>
-    </li>
-  );
-});
-ListItem.displayName = "ListItem";
diff --git a/src/components/ui/user-nav.tsx b/src/components/ui/user-nav.tsx
index 0d3ad7fc..275fd188 100644
--- a/src/components/ui/user-nav.tsx
+++ b/src/components/ui/user-nav.tsx
@@ -40,9 +40,6 @@ export function UserNav() {
 
   async function logout_user() {
     try {
-      console.trace("Deleting active user session: ", userSession.id);
-      await deleteUserSession(userSession.id);
-
       console.trace("Resetting CoachingSessionStateStore state");
       resetCoachingSessionState();
 
@@ -52,12 +49,21 @@ export function UserNav() {
       console.trace("Resetting OrganizationStateStore state");
       resetOrganizationState();
 
+      console.trace(
+        "Deleting current user session from backend: ",
+        userSession.id
+      );
+      await deleteUserSession(userSession.id);
+    } catch (err) {
+      console.warn("Error while logging out session: ", userSession.id, err);
+    } finally {
+      // Ensure we still log out of the frontend even if the backend request
+      // to delete the user session fails.
       console.trace("Resetting AuthStore state");
       logout();
-
-      router.push("/");
-    } catch (err) {
-      console.error("Error while logging out session: ", userSession.id, err);
+      console.debug("Navigating to /");
+      await router.push("/");
+      console.debug("Navigation to / completed successfully.");
     }
   }
 
diff --git a/src/lib/api/users.ts b/src/lib/api/users.ts
index 7385ba2e..7498266f 100644
--- a/src/lib/api/users.ts
+++ b/src/lib/api/users.ts
@@ -55,7 +55,7 @@ export const UserApi = {
    * @param userId The ID of the user to delete
    * @returns Promise resolving to the deleted User object
    */
-  deleteNested: async (_entityId: Id, userId: Id): Promise<User> => {
+  deleteNested: async (_entityId: Id, _userId: Id): Promise<User> => {
     throw new Error("Delete nested operation not implemented");
   },
 };
diff --git a/src/middleware.ts b/src/middleware.ts
index 983f80b7..b39f292d 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -19,18 +19,18 @@ export default async function middleware(req: NextRequest) {
 
   // 3. Get the session from the cookie
   const sessionCookie = req.cookies.get("id");
-  const session = sessionCookie?.value;
+  const isValidSession = sessionCookie?.value;
 
   // 4. Redirect to / if the user is not authenticated
   // 4b. TODO: Check session validity/expiration?
-  if (isProtectedRoute && !session) {
+  if (isProtectedRoute && !isValidSession) {
     return NextResponse.redirect(new URL("/", req.nextUrl));
   }
 
   // 5. Redirect to /dashboard if the user is authenticated
   if (
     isPublicRoute &&
-    session &&
+    isValidSession &&
     !req.nextUrl.pathname.startsWith("/dashboard")
   ) {
     return NextResponse.redirect(new URL("/dashboard", req.nextUrl));
diff --git a/src/types/coaching-session.ts b/src/types/coaching-session.ts
index 348f09ae..a29baf2a 100644
--- a/src/types/coaching-session.ts
+++ b/src/types/coaching-session.ts
@@ -32,24 +32,41 @@ export function isCoachingSessionArray(
   return Array.isArray(value) && value.every(isCoachingSession);
 }
 
-export function sortCoachingSessionArray(
+export function filterAndSortCoachingSessions(
   sessions: CoachingSession[],
-  order: SortOrder
+  order: SortOrder,
+  returnUpcoming: boolean
 ): CoachingSession[] {
-  if (order == SortOrder.Ascending) {
-    sessions.sort(
+  const now = new Date();
+
+  // Filter sessions based on the `showUpcoming` parameter
+  const filteredSessions = sessions.filter((session) => {
+    const sessionDate = new Date(session.date.toString());
+    if (returnUpcoming) {
+      // Include sessions today that haven't started yet or are in the future
+      return sessionDate >= now;
+    } else {
+      // Include past sessions only
+      return sessionDate < now;
+    }
+  });
+
+  // Sort the filtered sessions based on the order parameter
+  if (order === SortOrder.Ascending) {
+    filteredSessions.sort(
       (a, b) =>
         new Date(a.date.toString()).getTime() -
         new Date(b.date.toString()).getTime()
     );
-  } else if (order == SortOrder.Descending) {
-    sessions.sort(
+  } else if (order === SortOrder.Descending) {
+    filteredSessions.sort(
       (a, b) =>
         new Date(b.date.toString()).getTime() -
         new Date(a.date.toString()).getTime()
     );
   }
-  return sessions;
+
+  return filteredSessions;
 }
 
 export function getCoachingSessionById(