diff --git a/app/epd/agenda/actions.ts b/app/epd/agenda/actions.ts
index 6a97f07..fae5e6d 100644
--- a/app/epd/agenda/actions.ts
+++ b/app/epd/agenda/actions.ts
@@ -124,7 +124,7 @@ export async function createEncounter(params: CreateEncounterParams) {
     class_code: params.classCode,
     class_display: params.classDisplay,
     notes: params.notes,
-    status: 'planned',
+    status: 'planned' as const,
   };
 
   console.log('[createEncounter] Insert data:', insertData);
diff --git a/app/epd/agenda/components/agenda-toolbar.tsx b/app/epd/agenda/components/agenda-toolbar.tsx
index a4a0c2d..0de2b41 100644
--- a/app/epd/agenda/components/agenda-toolbar.tsx
+++ b/app/epd/agenda/components/agenda-toolbar.tsx
@@ -21,10 +21,10 @@ interface AgendaToolbarProps {
   onNewAppointment: () => void;
 }
 
-const VIEW_OPTIONS: { value: CalendarView; label: string }[] = [
+const VIEW_OPTIONS: { value: CalendarView; label: string; className?: string }[] = [
   { value: 'timeGridDay', label: 'Dag' },
-  { value: 'timeGridWeek', label: 'Week' },
-  { value: 'timeGridWorkWeek', label: 'Werkweek' },
+  { value: 'timeGridWeek', label: 'Week', className: 'hidden md:block' },
+  { value: 'timeGridWorkWeek', label: 'Werkweek', className: 'hidden md:block' },
 ];
 
 export function AgendaToolbar({
@@ -60,7 +60,7 @@ export function AgendaToolbar({
   };
 
   return (
-    <div className="flex items-center justify-between gap-4 mb-4">
+    <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-4">
       {/* Left: Title and Date */}
       <div className="flex items-center gap-4">
         <h1 className="text-2xl font-bold text-slate-900">Agenda</h1>
@@ -104,11 +104,10 @@ export function AgendaToolbar({
             <button
               key={option.value}
               onClick={() => onViewChange(option.value)}
-              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
-                currentView === option.value
+              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${currentView === option.value
                   ? 'bg-white text-slate-900 shadow-sm'
                   : 'text-slate-600 hover:text-slate-900'
-              }`}
+                } ${option.className || ''}`}
             >
               {option.label}
             </button>
@@ -116,9 +115,10 @@ export function AgendaToolbar({
         </div>
 
         {/* New Appointment Button */}
-        <Button onClick={onNewAppointment} className="gap-2">
+        <Button onClick={onNewAppointment} className="gap-2 w-full md:w-auto">
           <Plus className="h-4 w-4" />
-          Nieuwe Afspraak
+          <span className="hidden md:inline">Nieuwe Afspraak</span>
+          <span className="md:hidden">Nieuw</span>
         </Button>
       </div>
     </div>
diff --git a/app/epd/agenda/components/agenda-view.tsx b/app/epd/agenda/components/agenda-view.tsx
index 46420a7..66251a4 100644
--- a/app/epd/agenda/components/agenda-view.tsx
+++ b/app/epd/agenda/components/agenda-view.tsx
@@ -10,6 +10,7 @@ import React, { useState, useCallback, useRef, useTransition, useEffect } from '
 import dynamic from 'next/dynamic';
 import { startOfWeek, endOfWeek, addDays, format } from 'date-fns';
 import { toast } from '@/hooks/use-toast';
+import { useMediaQuery } from '@/hooks/use-media-query';
 
 // Lazy load FullCalendar component (~150KB+ savings)
 const AgendaCalendar = dynamic(
@@ -62,6 +63,14 @@ export function AgendaView({ initialEvents, initialDate, highlightEncounterId }:
   const [pendingReschedule, setPendingReschedule] = useState<PendingReschedule | null>(null);
   const [isRescheduling, setIsRescheduling] = useState(false);
 
+  // Auto-switch to day view on mobile
+  const isMobile = useMediaQuery('(max-width: 767px)');
+  useEffect(() => {
+    if (isMobile) {
+      setCurrentView('timeGridDay');
+    }
+  }, [isMobile]);
+
   const calendarRef = useRef<{ getApi: () => { prev: () => void; next: () => void; today: () => void; changeView: (view: string) => void; getDate: () => Date } } | null>(null);
 
   // Auto-open appointment modal when navigating from a report
@@ -118,7 +127,7 @@ export function AgendaView({ initialEvents, initialDate, highlightEncounterId }:
 
   // Handle date range change from calendar
   const handleDateChange = useCallback((start: Date, end: Date) => {
-    setCurrentDate((prev) => 
+    setCurrentDate((prev) =>
       prev.toDateString() === start.toDateString() ? prev : start
     );
     fetchEvents(start, end);
@@ -246,7 +255,7 @@ export function AgendaView({ initialEvents, initialDate, highlightEncounterId }:
 
       <div className="flex flex-1 gap-4 min-h-0">
         {/* Mini calendar sidebar */}
-        <div className="w-64 flex-shrink-0">
+        <div className="w-64 flex-shrink-0 hidden md:block">
           <MiniCalendar
             selectedDate={currentDate}
             onDateSelect={handleMiniCalendarDateSelect}
diff --git a/app/epd/components/epd-header.tsx b/app/epd/components/epd-header.tsx
index 705e9d4..a627973 100644
--- a/app/epd/components/epd-header.tsx
+++ b/app/epd/components/epd-header.tsx
@@ -50,12 +50,12 @@ export const EPDHeader = memo(function EPDHeader({ className = "" }: EPDHeaderPr
     const name = patient.name?.[0];
     const fullName = name
       ? [
-          ...(name.prefix || []),
-          ...(name.given || []),
-          name.family,
-        ]
-          .filter(Boolean)
-          .join(' ')
+        ...(name.prefix || []),
+        ...(name.given || []),
+        name.family,
+      ]
+        .filter(Boolean)
+        .join(' ')
       : '';
 
     // Extract status from extension
@@ -67,29 +67,29 @@ export const EPDHeader = memo(function EPDHeader({ className = "" }: EPDHeaderPr
     // Extract birth date
     const birthDate = patient.birthDate
       ? new Date(patient.birthDate).toLocaleDateString('nl-NL', {
-          day: '2-digit',
-          month: '2-digit',
-          year: 'numeric',
-        })
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+      })
       : null;
 
     // Extract BSN from identifiers
     const bsnIdentifier = patient.identifier?.find(
       (id: any) => id.system === 'http://fhir.nl/fhir/NamingSystem/bsn' ||
-                   id.system?.includes('bsn') ||
-                   id.type?.coding?.[0]?.code === 'BSN'
+        id.system?.includes('bsn') ||
+        id.type?.coding?.[0]?.code === 'BSN'
     );
     const bsn = bsnIdentifier?.value;
 
     // Extract last modified
     const lastModified = patient.meta?.lastUpdated
       ? new Date(patient.meta.lastUpdated).toLocaleString('nl-NL', {
-          day: '2-digit',
-          month: '2-digit',
-          year: 'numeric',
-          hour: '2-digit',
-          minute: '2-digit',
-        })
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      })
       : null;
 
     // Check if John Doe
@@ -141,7 +141,7 @@ export const EPDHeader = memo(function EPDHeader({ className = "" }: EPDHeaderPr
           </div>
 
           {/* Patient Details */}
-          <div className="flex items-center gap-3 text-xs text-slate-500">
+          <div className="hidden md:flex items-center gap-3 text-xs text-slate-500">
             {birthDate && <span>Geb: {birthDate}</span>}
             {bsn && <span>BSN: {bsn}</span>}
             <span>ID: {patient.id}</span>
@@ -184,7 +184,7 @@ export const EPDHeader = memo(function EPDHeader({ className = "" }: EPDHeaderPr
           <input
             type="text"
             placeholder="Zoek patiënt..."
-            className="w-64 pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-md text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all duration-200"
+            className="w-full md:w-64 pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-md text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all duration-200"
           />
         </div>
       </div>
diff --git a/app/epd/patients/page.tsx b/app/epd/patients/page.tsx
index a883a8b..fa8be45 100644
--- a/app/epd/patients/page.tsx
+++ b/app/epd/patients/page.tsx
@@ -32,10 +32,10 @@ export default async function PatientsPage({
           </div>
           <Link
             href="/epd/patients/new"
-            className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-teal-600 to-teal-700 hover:from-teal-700 hover:to-teal-800 text-white font-medium rounded-lg shadow-sm hover:shadow-md transition-all"
+            className="inline-flex items-center gap-2 px-3 md:px-4 py-2 bg-gradient-to-r from-teal-600 to-teal-700 hover:from-teal-700 hover:to-teal-800 text-white font-medium rounded-lg shadow-sm hover:shadow-md transition-all"
           >
             <Plus className="h-4 w-4" />
-            <span>Nieuwe patiënt</span>
+            <span className="hidden md:inline">Nieuwe patiënt</span>
           </Link>
         </div>
       </div>
diff --git a/app/epd/verpleegrapportage/rapportage/components/rapportage-workspace.tsx b/app/epd/verpleegrapportage/rapportage/components/rapportage-workspace.tsx
index 6200c47..c23ae99 100644
--- a/app/epd/verpleegrapportage/rapportage/components/rapportage-workspace.tsx
+++ b/app/epd/verpleegrapportage/rapportage/components/rapportage-workspace.tsx
@@ -172,9 +172,9 @@ export function RapportageWorkspace({ patients }: RapportageWorkspaceProps) {
   const groupedLogs = groupLogsByDayAndPart(logs);
 
   return (
-    <div className="h-full flex bg-slate-50">
+    <div className="h-full flex flex-col md:flex-row bg-slate-50">
       {/* Sidebar - Patiënten */}
-      <aside className="w-80 border-r border-slate-200 bg-white flex-shrink-0 overflow-hidden flex flex-col">
+      <aside className="w-full md:w-80 border-b md:border-b-0 md:border-r border-slate-200 bg-white flex-shrink-0 overflow-hidden flex flex-col h-48 md:h-auto">
         <div className="p-4 border-b border-slate-200">
           <h2 className="font-semibold text-slate-900">Ronde overzicht</h2>
         </div>
@@ -190,11 +190,10 @@ export function RapportageWorkspace({ patients }: RapportageWorkspaceProps) {
               <button
                 key={patient.id}
                 onClick={() => setSelectedPatientId(patient.id)}
-                className={`w-full px-4 py-3 text-left transition-colors ${
-                  isSelected
+                className={`w-full px-4 py-3 text-left transition-colors ${isSelected
                     ? 'bg-teal-50'
                     : 'hover:bg-slate-50'
-                }`}
+                  }`}
               >
                 <div className="flex items-center justify-between">
                   <span className={`font-medium truncate ${isSelected ? 'text-teal-900' : 'text-slate-900'}`}>
@@ -229,92 +228,92 @@ export function RapportageWorkspace({ patients }: RapportageWorkspaceProps) {
 
       {/* Main content */}
       <main className="flex-1 overflow-y-auto p-6 space-y-4">
-          {/* Risico alerts */}
-          {selectedPatient && selectedPatient.alerts.high_risk_count > 0 && (
-            <div className="bg-red-50 border border-red-200 rounded-lg p-3 flex items-center gap-3">
-              <AlertTriangle className="h-5 w-5 text-red-600 flex-shrink-0" />
-              <div>
-                <span className="font-medium text-red-900">
-                  {selectedPatient.alerts.high_risk_count} hoog risico
-                </span>
-                <span className="text-red-700 text-sm ml-2">
-                  Let op verhoogde aandachtspunten voor deze cliënt
-                </span>
-              </div>
-            </div>
-          )}
-
-          {/* Invoerformulier */}
-          {selectedPatientId && (
-            <QuickEntryForm
-              patientId={selectedPatientId}
-              onSuccess={handleRefresh}
-            />
-          )}
-
-          {/* Stats row - alleen tonen als er data is */}
-          {logs.length > 0 && (
-            <div className="flex items-center gap-4 text-sm">
-              <span className="text-slate-600">
-                <span className="font-semibold text-slate-900">{logs.length}</span> notities
+        {/* Risico alerts */}
+        {selectedPatient && selectedPatient.alerts.high_risk_count > 0 && (
+          <div className="bg-red-50 border border-red-200 rounded-lg p-3 flex items-center gap-3">
+            <AlertTriangle className="h-5 w-5 text-red-600 flex-shrink-0" />
+            <div>
+              <span className="font-medium text-red-900">
+                {selectedPatient.alerts.high_risk_count} hoog risico
+              </span>
+              <span className="text-red-700 text-sm ml-2">
+                Let op verhoogde aandachtspunten voor deze cliënt
               </span>
-              {markedForHandover > 0 && (
-                <span className="flex items-center gap-1 text-teal-700">
-                  <CheckCircle2 className="h-4 w-4" />
-                  <span className="font-semibold">{markedForHandover}</span> overdracht
-                </span>
-              )}
             </div>
-          )}
+          </div>
+        )}
 
-          {/* Timeline */}
-          {isLoading ? (
-            <div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
-              <Loader2 className="h-8 w-8 text-slate-400 animate-spin mx-auto" />
-              <p className="text-sm text-slate-500 mt-2">Laden...</p>
-            </div>
-          ) : logs.length === 0 ? (
-            <div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
-              <FileText className="h-10 w-10 text-slate-300 mx-auto mb-2" />
-              <p className="text-slate-600">Nog geen notities</p>
-              <p className="text-sm text-slate-500">Voeg een notitie toe via het formulier hierboven</p>
-            </div>
-          ) : (
-            <div className="space-y-4">
-              {groupedLogs.map(dayGroup => (
-                <div key={dayGroup.date} className="bg-white rounded-lg border border-slate-200 overflow-hidden">
-                  <div className="px-4 py-2 bg-slate-50 border-b border-slate-100">
-                    <span className="font-medium text-slate-700 capitalize text-sm">{dayGroup.dateLabel}</span>
-                  </div>
+        {/* Invoerformulier */}
+        {selectedPatientId && (
+          <QuickEntryForm
+            patientId={selectedPatientId}
+            onSuccess={handleRefresh}
+          />
+        )}
 
-                  {dayGroup.dayParts.map(partGroup => {
-                    const PartIcon = DAY_PART_CONFIG[partGroup.part].icon;
-                    return (
-                      <div key={partGroup.part}>
-                        <div className="flex items-center gap-2 px-4 py-1.5 bg-slate-50/50 border-b border-slate-50">
-                          <PartIcon className={`h-3.5 w-3.5 ${DAY_PART_CONFIG[partGroup.part].color}`} />
-                          <span className="text-xs font-medium text-slate-500">{DAY_PART_CONFIG[partGroup.part].label}</span>
-                        </div>
+        {/* Stats row - alleen tonen als er data is */}
+        {logs.length > 0 && (
+          <div className="flex items-center gap-4 text-sm">
+            <span className="text-slate-600">
+              <span className="font-semibold text-slate-900">{logs.length}</span> notities
+            </span>
+            {markedForHandover > 0 && (
+              <span className="flex items-center gap-1 text-teal-700">
+                <CheckCircle2 className="h-4 w-4" />
+                <span className="font-semibold">{markedForHandover}</span> overdracht
+              </span>
+            )}
+          </div>
+        )}
 
-                        <div className="relative pl-8">
-                          <div className="absolute left-5 top-0 bottom-0 w-0.5 bg-slate-100" />
-
-                          {partGroup.logs.map((log, idx) => (
-                            <TimelineItem
-                              key={log.id}
-                              log={log}
-                              onRefresh={handleRefresh}
-                              isLast={idx === partGroup.logs.length - 1}
-                            />
-                          ))}
-                        </div>
-                      </div>
-                    );
-                  })}
+        {/* Timeline */}
+        {isLoading ? (
+          <div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
+            <Loader2 className="h-8 w-8 text-slate-400 animate-spin mx-auto" />
+            <p className="text-sm text-slate-500 mt-2">Laden...</p>
+          </div>
+        ) : logs.length === 0 ? (
+          <div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
+            <FileText className="h-10 w-10 text-slate-300 mx-auto mb-2" />
+            <p className="text-slate-600">Nog geen notities</p>
+            <p className="text-sm text-slate-500">Voeg een notitie toe via het formulier hierboven</p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {groupedLogs.map(dayGroup => (
+              <div key={dayGroup.date} className="bg-white rounded-lg border border-slate-200 overflow-hidden">
+                <div className="px-4 py-2 bg-slate-50 border-b border-slate-100">
+                  <span className="font-medium text-slate-700 capitalize text-sm">{dayGroup.dateLabel}</span>
                 </div>
-              ))}
-            </div>
-          )}
+
+                {dayGroup.dayParts.map(partGroup => {
+                  const PartIcon = DAY_PART_CONFIG[partGroup.part].icon;
+                  return (
+                    <div key={partGroup.part}>
+                      <div className="flex items-center gap-2 px-4 py-1.5 bg-slate-50/50 border-b border-slate-50">
+                        <PartIcon className={`h-3.5 w-3.5 ${DAY_PART_CONFIG[partGroup.part].color}`} />
+                        <span className="text-xs font-medium text-slate-500">{DAY_PART_CONFIG[partGroup.part].label}</span>
+                      </div>
+
+                      <div className="relative pl-8">
+                        <div className="absolute left-5 top-0 bottom-0 w-0.5 bg-slate-100" />
+
+                        {partGroup.logs.map((log, idx) => (
+                          <TimelineItem
+                            key={log.id}
+                            log={log}
+                            onRefresh={handleRefresh}
+                            isLast={idx === partGroup.logs.length - 1}
+                          />
+                        ))}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        )}
       </main>
     </div>
   );
@@ -389,11 +388,10 @@ function QuickEntryForm({ patientId, onSuccess }: { patientId: string; onSuccess
               key={cat}
               type="button"
               onClick={() => setCategory(cat)}
-              className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium transition-colors whitespace-nowrap ${
-                isSelected
+              className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium transition-colors whitespace-nowrap ${isSelected
                   ? `${config.bgColor} ${config.textColor}`
                   : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
-              }`}
+                }`}
             >
               <Icon className="h-3 w-3" />
               {config.label}
@@ -426,11 +424,10 @@ function QuickEntryForm({ patientId, onSuccess }: { patientId: string; onSuccess
         <button
           type="button"
           onClick={() => setIncludeInHandover(!includeInHandover)}
-          className={`inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium transition-colors ${
-            includeInHandover
+          className={`inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium transition-colors ${includeInHandover
               ? 'bg-teal-100 text-teal-800'
               : 'bg-slate-100 text-slate-600 hover:bg-teal-50 hover:text-teal-700'
-          }`}
+            }`}
         >
           <CheckCircle2 className="h-3.5 w-3.5" />
           Overdracht
@@ -533,9 +530,8 @@ function TimelineItem({ log, onRefresh, isLast }: { log: Report; onRefresh: () =
                   key={cat}
                   type="button"
                   onClick={() => setEditCategory(cat)}
-                  className={`text-xs px-2 py-0.5 rounded-full ${
-                    editCategory === cat ? `${catConfig.bgColor} ${catConfig.textColor}` : 'bg-slate-100 text-slate-600'
-                  }`}
+                  className={`text-xs px-2 py-0.5 rounded-full ${editCategory === cat ? `${catConfig.bgColor} ${catConfig.textColor}` : 'bg-slate-100 text-slate-600'
+                    }`}
                 >
                   {catConfig.label}
                 </button>
@@ -585,11 +581,10 @@ function TimelineItem({ log, onRefresh, isLast }: { log: Report; onRefresh: () =
             <button
               onClick={toggleHandover}
               disabled={isPending}
-              className={`text-xs px-1.5 py-0.5 rounded transition-colors ${
-                log.include_in_handover
+              className={`text-xs px-1.5 py-0.5 rounded transition-colors ${log.include_in_handover
                   ? 'bg-teal-100 text-teal-700'
                   : 'bg-slate-100 text-slate-400 hover:bg-teal-50 hover:text-teal-600'
-              }`}
+                }`}
             >
               <CheckCircle2 className={`h-3 w-3 inline ${isPending ? 'animate-pulse' : ''}`} />
             </button>
diff --git a/app/layout.tsx b/app/layout.tsx
index 9007006..dfe9ec4 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
 import { Toaster } from '@/components/ui/toaster';
@@ -125,6 +125,11 @@ export const metadata: Metadata = {
   },
 };
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+};
+
 const siteUrl = process.env.NEXT_PUBLIC_APP_URL || 'https://aispeedrun.vercel.app'
 
 const jsonLd = {
diff --git a/components/cortex/artifacts/artifact-container.tsx b/components/cortex/artifacts/artifact-container.tsx
index 0b0db17..5550102 100644
--- a/components/cortex/artifacts/artifact-container.tsx
+++ b/components/cortex/artifacts/artifact-container.tsx
@@ -11,6 +11,7 @@
  */
 
 import { ArtifactTab } from './artifact-tab';
+import { ChevronLeft } from 'lucide-react';
 import { AgendaBlock, type AgendaBlockProps } from './blocks/agenda-block';
 import { DagnotatieBlock } from '../blocks/dagnotitie-block';
 import { ZoekenBlock } from '../blocks/zoeken-block';
@@ -101,25 +102,25 @@ function buildAgendaPrefill(prefill: Record<string, any> | undefined): AgendaBlo
     prefill.patient ||
     (prefill.patientName || prefill.patientId
       ? {
-          id: prefill.patientId || '',
-          name: prefill.patientName || '',
-        }
+        id: prefill.patientId || '',
+        name: prefill.patientName || '',
+      }
       : undefined);
 
   // Try to resolve date from label first (more reliable than AI-generated dates)
   const dateLabel = prefill?.datetime?.label || prefill?.dateRange?.label;
   const resolvedDate = resolveDateFromLabel(dateLabel);
-  
+
   const datetimeDate =
     resolvedDate ||  // Prefer calculated date from label
     coerceDate(prefill?.datetime?.date) ||
     (prefill?.datetime?.time ? new Date() : undefined);
-    
+
   const datetime = datetimeDate
     ? {
-        date: datetimeDate,
-        time: typeof prefill?.datetime?.time === 'string' ? prefill.datetime.time : '',
-      }
+      date: datetimeDate,
+      time: typeof prefill?.datetime?.time === 'string' ? prefill.datetime.time : '',
+    }
     : undefined;
 
   const appointmentType = resolveAppointmentType(prefill?.appointmentType || prefill?.type);
@@ -128,16 +129,16 @@ function buildAgendaPrefill(prefill: Record<string, any> | undefined): AgendaBlo
   // Also resolve newDatetime from label
   const newDateLabel = prefill?.newDatetime?.label;
   const resolvedNewDate = resolveDateFromLabel(newDateLabel);
-  
+
   const newDatetimeDate =
     resolvedNewDate ||  // Prefer calculated date from label
     coerceDate(prefill?.newDatetime?.date) ||
     (prefill?.newDatetime?.time ? new Date() : undefined);
   const newDatetime = newDatetimeDate
     ? {
-        date: newDatetimeDate,
-        time: typeof prefill?.newDatetime?.time === 'string' ? prefill.newDatetime.time : '',
-      }
+      date: newDatetimeDate,
+      time: typeof prefill?.newDatetime?.time === 'string' ? prefill.newDatetime.time : '',
+    }
     : undefined;
 
   return {
@@ -264,9 +265,26 @@ export function ArtifactContainer({
 
   return (
     <div className="h-full flex flex-col bg-slate-50">
-      {/* Tabs - alleen tonen bij >1 artifact */}
+      {/* Tabs - alleen tonen bij >1 artifact */
+        /* Echter op mobile: ALTIJD een header tonen met back knop als er een artifact open is */
+      }
+
+      {/* Mobile Header: Back button + Title */}
+      <div className="lg:hidden flex items-center p-3 border-b border-slate-200 bg-white sticky top-0 z-10">
+        <button
+          onClick={() => activeArtifact && onCloseArtifact(activeArtifact.id)}
+          className="flex items-center text-slate-600 hover:text-slate-900 mr-3"
+        >
+          <ChevronLeft className="w-5 h-5" />
+          <span className="font-medium">Terug</span>
+        </button>
+        <span className="font-semibold text-slate-800 truncate flex-1">
+          {activeArtifact ? activeArtifact.title : 'Details'}
+        </span>
+      </div>
+
       {artifacts.length > 1 && (
-        <div className="flex bg-white border-b border-slate-200">
+        <div className="hidden lg:flex bg-white border-b border-slate-200">
           {artifacts.map((artifact) => (
             <ArtifactTab
               key={artifact.id}
diff --git a/components/cortex/artifacts/blocks/agenda-block.tsx b/components/cortex/artifacts/blocks/agenda-block.tsx
index 0a7bcbc..40f566d 100644
--- a/components/cortex/artifacts/blocks/agenda-block.tsx
+++ b/components/cortex/artifacts/blocks/agenda-block.tsx
@@ -36,7 +36,7 @@ export function AgendaBlock({
 }: AgendaBlockProps) {
     // State for fetched appointments (only used in list mode)
     const [appointments, setAppointments] = useState<CalendarEvent[] | undefined>(initialAppointments);
-    const [dateRange, setDateRange] = useState<{ start: Date; end: Date; label: string } | undefined>(initialDateRange);
+    const [dateRange, setDateRange] = useState<{ start?: Date; end?: Date; label: string } | undefined>(initialDateRange);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
     const [refetchKey, setRefetchKey] = useState(0);
diff --git a/components/cortex/artifacts/blocks/agenda-create-form.tsx b/components/cortex/artifacts/blocks/agenda-create-form.tsx
index 5a7921e..76c6a16 100644
--- a/components/cortex/artifacts/blocks/agenda-create-form.tsx
+++ b/components/cortex/artifacts/blocks/agenda-create-form.tsx
@@ -17,6 +17,8 @@ import {
     SelectValue,
 } from '@/components/ui/select';
 import { Badge } from '@/components/ui/badge';
+import { toast } from '@/hooks/use-toast';
+import { ToastAction } from '@/components/ui/toast';
 import { createEncounter } from '@/app/epd/agenda/actions';
 import {
     APPOINTMENT_TYPES,
@@ -153,7 +155,22 @@ export function AgendaCreateForm({ prefillData, onClose }: AgendaCreateFormProps
             });
 
             if (result.success) {
-                onClose?.(); // Close on success
+                const formattedDate = format(startDate, "EEEE d MMMM 'om' HH:mm", { locale: nl });
+                
+                toast({
+                    title: '✓ Afspraak ingepland',
+                    description: `${patientName} — ${formattedDate}`,
+                    action: (
+                        <ToastAction 
+                            altText="Bekijk afspraak"
+                            onClick={() => window.location.href = `/epd/agenda?highlight=${result.data?.id}&date=${date}`}
+                        >
+                            Bekijken
+                        </ToastAction>
+                    ),
+                });
+                
+                onClose?.();
             } else {
                 setError(result.error || 'Er is een fout opgetreden.');
             }
diff --git a/components/cortex/chat/chat-empty-state.tsx b/components/cortex/chat/chat-empty-state.tsx
index c4c6763..10208ed 100644
--- a/components/cortex/chat/chat-empty-state.tsx
+++ b/components/cortex/chat/chat-empty-state.tsx
@@ -74,7 +74,7 @@ const cardVariants = {
     y: 0,
     transition: {
       duration: 0.3,
-      ease: 'easeOut',
+      ease: 'easeOut' as const,
     },
   },
 };
diff --git a/components/cortex/command-center/command-center.tsx b/components/cortex/command-center/command-center.tsx
index 6039345..06625ed 100644
--- a/components/cortex/command-center/command-center.tsx
+++ b/components/cortex/command-center/command-center.tsx
@@ -19,6 +19,7 @@
 import { useEffect, useCallback, useRef } from 'react';
 import { AnimatePresence } from 'framer-motion';
 import { useCortexStore } from '@/stores/cortex-store';
+import { cn } from '@/lib/utils';
 import { ContextBar } from './context-bar';
 import { OfflineBanner } from './offline-banner';
 import { NudgeToast } from './nudge-toast';
@@ -120,14 +121,20 @@ export function CommandCenter() {
       <ContextBar />
 
       {/* Split-screen container - flex-1 */}
-      <div className="flex-1 flex overflow-hidden">
+      <div className="flex-1 flex overflow-hidden relative">
         {/* Chat Panel - 40% (desktop), 100% (mobile) */}
-        <div className="w-full lg:w-[40%] border-r border-slate-200 flex flex-col">
+        <div className="w-full lg:w-[40%] border-r border-slate-200 flex flex-col h-full">
           <ChatPanel />
         </div>
 
-        {/* Artifact Area - 60% (desktop), hidden on mobile */}
-        <div className="hidden lg:flex lg:w-[60%] flex-col">
+        {/* Artifact Area - 60% (desktop), overlay on mobile */}
+        <div
+          className={cn(
+            "lg:flex lg:w-[60%] flex-col bg-white transition-transform duration-300 ease-in-out lg:transform-none lg:static absolute inset-0 z-20",
+            // On mobile: hidden by default, visible (slide in) when openArtifacts > 0
+            openArtifacts.length > 0 ? "translate-x-0" : "translate-x-full lg:translate-x-0"
+          )}
+        >
           <ArtifactArea />
         </div>
       </div>
diff --git a/stores/cortex-store.ts b/stores/cortex-store.ts
index 10e607a..d0a4052 100644
--- a/stores/cortex-store.ts
+++ b/stores/cortex-store.ts
@@ -36,8 +36,8 @@ export interface ChatEntities {
   date?: string;
   time?: string;
   dateRange?: {
-    start: string;
-    end: string;
+    start?: string;
+    end?: string;
     label: string;
   };
   datetime?: {