diff --git a/apps/web/app/(dashboard)/daily-notes/page.tsx b/apps/web/app/(dashboard)/daily-notes/page.tsx
new file mode 100644
index 0000000..b7e7b06
--- /dev/null
+++ b/apps/web/app/(dashboard)/daily-notes/page.tsx
@@ -0,0 +1,205 @@
+'use client';
+
+import { useState, useEffect, useCallback, Suspense } from 'react';
+import { BookOpen, Plus, ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
+import dynamic from 'next/dynamic';
+import { format, addDays, subDays } from 'date-fns';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+
+const NoteEditor = dynamic(
+  () => import('@/components/notes/note-editor').then((m) => m.NoteEditor),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="flex h-full items-center justify-center">
+        <div className="animate-pulse text-sm text-muted-foreground">Loading editor...</div>
+      </div>
+    ),
+  }
+);
+
+interface Note {
+  id: string;
+  title: string;
+  content: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export default function DailyNotesPage() {
+  const [currentDate, setCurrentDate] = useState<Date>(new Date());
+  const [note, setNote] = useState<Note | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [creating, setCreating] = useState(false);
+  const [saveStatus, setSaveStatus] = useState<'Saved' | 'Saving' | 'Failed'>('Saved');
+
+  const dateStr = format(currentDate, 'yyyy-MM-dd');
+  const displayDate = format(currentDate, 'EEEE, MMMM d, yyyy');
+
+  const fetchDailyNote = useCallback(async () => {
+    setLoading(true);
+    setNote(null);
+    try {
+      const res = await fetch(`/api/notes/daily?date=${dateStr}`);
+      if (!res.ok) throw new Error('Failed to fetch daily note');
+      const data = await res.json();
+      if (data.note) {
+        setNote(data.note);
+      }
+    } catch (err) {
+      console.error('Failed to fetch daily note:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [dateStr]);
+
+  useEffect(() => {
+    fetchDailyNote();
+  }, [fetchDailyNote]);
+
+  async function handleCreateDailyNote() {
+    setCreating(true);
+    try {
+      const res = await fetch('/api/notes/daily', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ date: dateStr }),
+      });
+      if (!res.ok) {
+        const text = await res.text();
+        console.error('Failed to create daily note', text);
+        toast.error('Failed to create daily note');
+        return;
+      }
+      const createdNote = await res.json();
+      setNote(createdNote);
+      toast.success('Daily note created');
+    } catch (err) {
+      console.error('Failed to create daily note:', err);
+      toast.error('Failed to create daily note');
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  function navigate(delta: number) {
+    const next = delta > 0 ? addDays(currentDate, 1) : subDays(currentDate, 1);
+    setCurrentDate(next);
+  }
+
+  function goToToday() {
+    setCurrentDate(new Date());
+  }
+
+  async function handleSave(content: string) {
+    if (!note) return;
+    setSaveStatus('Saving');
+    try {
+      const res = await fetch(`/api/notes/${note.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content }),
+      });
+      if (!res.ok) throw new Error('Failed to save');
+      setSaveStatus('Saved');
+    } catch (err) {
+      console.error('Failed to save note:', err);
+      setSaveStatus('Failed');
+      toast.error('Failed to save note');
+    }
+  }
+
+  const isToday = dateStr === format(new Date(), 'yyyy-MM-dd');
+
+  return (
+    <div>
+      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Daily Notes</h1>
+          <p className="mt-1 text-muted-foreground">
+            {displayDate}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => navigate(-1)}
+            aria-label="Previous day"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          {!isToday && (
+            <Button variant="outline" size="sm" onClick={goToToday}>
+              Today
+            </Button>
+          )}
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => navigate(1)}
+            aria-label="Next day"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      <Card className="min-h-[500px]">
+        {loading ? (
+          <div className="flex h-[500px] items-center justify-center">
+            <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+          </div>
+        ) : note ? (
+          <div className="flex h-full flex-col">
+            <div className="border-b p-4">
+              <div className="flex items-center justify-between">
+                <h2 className="text-lg font-semibold">{note.title}</h2>
+                <span className="text-xs text-muted-foreground" role="status">
+                  {saveStatus}
+                </span>
+              </div>
+            </div>
+            <div className="flex-1 overflow-auto p-4">
+              <Suspense
+                fallback={
+                  <div className="flex h-full items-center justify-center">
+                    <div className="animate-pulse text-sm text-muted-foreground">
+                      Loading editor...
+                    </div>
+                  </div>
+                }
+              >
+                <NoteEditor
+                  content={note.content || ''}
+                  onChange={(content) => {
+                    setNote({ ...note, content });
+                    handleSave(content);
+                  }}
+                />
+              </Suspense>
+            </div>
+          </div>
+        ) : (
+          <div className="flex h-[500px] flex-col items-center justify-center gap-4">
+            <BookOpen className="h-12 w-12 text-muted-foreground" />
+            <div className="text-center">
+              <p className="text-lg font-medium">No daily note yet</p>
+              <p className="mt-1 text-sm text-muted-foreground">
+                {isToday
+                  ? 'Create your daily note to track what you accomplished today.'
+                  : 'No daily note exists for this date.'}
+              </p>
+            </div>
+            <Button onClick={handleCreateDailyNote} disabled={creating}>
+              <Plus className="mr-2 h-4 w-4" />
+              {creating ? 'Creating...' : 'Create today\'s note'}
+            </Button>
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/web/components/sidebar.tsx b/apps/web/components/sidebar.tsx
index 85079ed..1c23967 100644
--- a/apps/web/components/sidebar.tsx
+++ b/apps/web/components/sidebar.tsx
@@ -10,6 +10,7 @@ import {
   Flame,
   FolderKanban,
   NotebookPen,
+  BookOpen,
   Share2,
   CalendarDays,
   Search,
@@ -41,6 +42,7 @@ const navItems = [
   { href: '/habits', label: 'Habits', icon: Flame },
   { href: '/projects', label: 'Projects', icon: FolderKanban },
   { href: '/notes', label: 'Notes', icon: NotebookPen },
+  { href: '/daily-notes', label: 'Daily Note', icon: BookOpen },
   { href: '/graph', label: 'Graph', icon: Share2 },
   { href: '/calendar', label: 'Calendar', icon: CalendarDays },
   { href: '/search', label: 'Search', icon: Search },