diff --git a/artifacts/api-server/src/routes/index.ts b/artifacts/api-server/src/routes/index.ts
index cc9b7fc7..54e40480 100644
--- a/artifacts/api-server/src/routes/index.ts
+++ b/artifacts/api-server/src/routes/index.ts
@@ -9,6 +9,7 @@ import usersRouter from "./users";
 import statsRouter from "./stats";
 import storageRouter from "./storage";
 import settingsRouter from "./settings";
+import notesRouter from "./notes";
 
 const router: IRouter = Router();
 
@@ -22,5 +23,6 @@ router.use(usersRouter);
 router.use(statsRouter);
 router.use(storageRouter);
 router.use(settingsRouter);
+router.use(notesRouter);
 
 export default router;
diff --git a/artifacts/api-server/src/routes/notes.ts b/artifacts/api-server/src/routes/notes.ts
new file mode 100644
index 00000000..33b9f86c
--- /dev/null
+++ b/artifacts/api-server/src/routes/notes.ts
@@ -0,0 +1,289 @@
+import { Router, type IRouter } from "express";
+import { eq, and, desc, inArray } from "drizzle-orm";
+import { db } from "@workspace/db";
+import {
+  notesTable,
+  noteLabelsTable,
+  noteLabelAssignmentsTable,
+} from "@workspace/db";
+import { requireAuth } from "../middlewares/auth";
+
+const router: IRouter = Router();
+
+function parseIdParam(raw: unknown): { ok: true; id: number } | { ok: false; error: string } {
+  const n = Number(raw);
+  if (!Number.isInteger(n) || n <= 0) return { ok: false, error: "Invalid id" };
+  return { ok: true, id: n };
+}
+
+function parseStringMax(v: unknown, max: number): string | undefined {
+  if (v === undefined || v === null) return undefined;
+  if (typeof v !== "string") return undefined;
+  return v.slice(0, max);
+}
+
+function parseLabelIds(v: unknown): number[] | undefined {
+  if (v === undefined) return undefined;
+  if (!Array.isArray(v)) return undefined;
+  const out: number[] = [];
+  for (const x of v) {
+    const n = Number(x);
+    if (Number.isInteger(n) && n > 0) out.push(n);
+  }
+  return out;
+}
+
+interface NoteInput {
+  title?: string;
+  content?: string;
+  color?: string;
+  isPinned?: boolean;
+  isArchived?: boolean;
+  labelIds?: number[];
+}
+
+function parseNoteInput(body: any, isCreate: boolean): { ok: true; data: NoteInput } | { ok: false; error: string } {
+  if (!body || typeof body !== "object") return { ok: false, error: "Invalid body" };
+  const data: NoteInput = {};
+  if (body.title !== undefined) {
+    const t = parseStringMax(body.title, 300);
+    if (t === undefined) return { ok: false, error: "Invalid title" };
+    data.title = t;
+  } else if (isCreate) data.title = "";
+  if (body.content !== undefined) {
+    if (typeof body.content !== "string") return { ok: false, error: "Invalid content" };
+    data.content = body.content;
+  } else if (isCreate) data.content = "";
+  if (body.color !== undefined) {
+    const c = parseStringMax(body.color, 32);
+    if (c === undefined) return { ok: false, error: "Invalid color" };
+    data.color = c;
+  } else if (isCreate) data.color = "default";
+  if (body.isPinned !== undefined) {
+    if (typeof body.isPinned !== "boolean") return { ok: false, error: "Invalid isPinned" };
+    data.isPinned = body.isPinned;
+  } else if (isCreate) data.isPinned = false;
+  if (body.isArchived !== undefined) {
+    if (typeof body.isArchived !== "boolean") return { ok: false, error: "Invalid isArchived" };
+    data.isArchived = body.isArchived;
+  }
+  if (body.labelIds !== undefined) {
+    const ids = parseLabelIds(body.labelIds);
+    if (ids === undefined) return { ok: false, error: "Invalid labelIds" };
+    data.labelIds = ids;
+  } else if (isCreate) data.labelIds = [];
+  return { ok: true, data };
+}
+
+function parseLabelName(body: any): { ok: true; name: string } | { ok: false; error: string } {
+  if (!body || typeof body !== "object") return { ok: false, error: "Invalid body" };
+  if (typeof body.name !== "string") return { ok: false, error: "Invalid name" };
+  const name = body.name.trim();
+  if (name.length === 0 || name.length > 80) return { ok: false, error: "Invalid name length" };
+  return { ok: true, name };
+}
+
+async function loadNotesWithLabels(userId: number, archived: boolean) {
+  const notes = await db
+    .select()
+    .from(notesTable)
+    .where(and(eq(notesTable.userId, userId), eq(notesTable.isArchived, archived)))
+    .orderBy(desc(notesTable.isPinned), desc(notesTable.updatedAt));
+
+  if (notes.length === 0) return [];
+
+  const noteIds = notes.map((n) => n.id);
+  const assignments = await db
+    .select()
+    .from(noteLabelAssignmentsTable)
+    .where(inArray(noteLabelAssignmentsTable.noteId, noteIds));
+
+  const labelsByNote = new Map<number, number[]>();
+  for (const a of assignments) {
+    const arr = labelsByNote.get(a.noteId) ?? [];
+    arr.push(a.labelId);
+    labelsByNote.set(a.noteId, arr);
+  }
+
+  return notes.map((n) => ({ ...n, labelIds: labelsByNote.get(n.id) ?? [] }));
+}
+
+async function setNoteLabels(noteId: number, userId: number, labelIds: number[]) {
+  await db.delete(noteLabelAssignmentsTable).where(eq(noteLabelAssignmentsTable.noteId, noteId));
+  if (labelIds.length === 0) return;
+  const valid = await db
+    .select({ id: noteLabelsTable.id })
+    .from(noteLabelsTable)
+    .where(and(eq(noteLabelsTable.userId, userId), inArray(noteLabelsTable.id, labelIds)));
+  if (valid.length === 0) return;
+  await db.insert(noteLabelAssignmentsTable).values(
+    valid.map((l) => ({ noteId, labelId: l.id })),
+  );
+}
+
+router.get("/notes", requireAuth, async (req, res): Promise<void> => {
+  const userId = req.session.userId!;
+  const archived = req.query.archived === "true";
+  const notes = await loadNotesWithLabels(userId, archived);
+  res.json(notes);
+});
+
+router.post("/notes", requireAuth, async (req, res): Promise<void> => {
+  const userId = req.session.userId!;
+  const parsed = parseNoteInput(req.body, true);
+  if (!parsed.ok) {
+    res.status(400).json({ error: parsed.error });
+    return;
+  }
+  const { labelIds = [], ...data } = parsed.data;
+  const [note] = await db
+    .insert(notesTable)
+    .values({
+      userId,
+      title: data.title ?? "",
+      content: data.content ?? "",
+      color: data.color ?? "default",
+      isPinned: data.isPinned ?? false,
+      isArchived: data.isArchived ?? false,
+    })
+    .returning();
+  if (labelIds.length > 0) await setNoteLabels(note.id, userId, labelIds);
+  const [withLabels] = await loadOne(note.id, userId);
+  res.status(201).json(withLabels);
+});
+
+router.patch("/notes/:id", requireAuth, async (req, res): Promise<void> => {
+  const userId = req.session.userId!;
+  const id = parseIdParam(req.params.id);
+  if (!id.ok) {
+    res.status(400).json({ error: id.error });
+    return;
+  }
+  const parsed = parseNoteInput(req.body, false);
+  if (!parsed.ok) {
+    res.status(400).json({ error: parsed.error });
+    return;
+  }
+  const { labelIds, ...data } = parsed.data;
+  const [existing] = await db
+    .select()
+    .from(notesTable)
+    .where(and(eq(notesTable.id, id.id), eq(notesTable.userId, userId)));
+  if (!existing) {
+    res.status(404).json({ error: "Note not found" });
+    return;
+  }
+  if (Object.keys(data).length > 0) {
+    await db.update(notesTable).set(data).where(eq(notesTable.id, existing.id));
+  }
+  if (labelIds) await setNoteLabels(existing.id, userId, labelIds);
+  const [withLabels] = await loadOne(existing.id, userId);
+  res.json(withLabels);
+});
+
+async function loadOne(noteId: number, userId: number) {
+  const [note] = await db
+    .select()
+    .from(notesTable)
+    .where(and(eq(notesTable.id, noteId), eq(notesTable.userId, userId)));
+  if (!note) return [null];
+  const assignments = await db
+    .select()
+    .from(noteLabelAssignmentsTable)
+    .where(eq(noteLabelAssignmentsTable.noteId, noteId));
+  return [{ ...note, labelIds: assignments.map((a) => a.labelId) }];
+}
+
+router.delete("/notes/:id", requireAuth, async (req, res): Promise<void> => {
+  const userId = req.session.userId!;
+  const id = parseIdParam(req.params.id);
+  if (!id.ok) {
+    res.status(400).json({ error: id.error });
+    return;
+  }
+  const result = await db
+    .delete(notesTable)
+    .where(and(eq(notesTable.id, id.id), eq(notesTable.userId, userId)))
+    .returning();
+  if (result.length === 0) {
+    res.status(404).json({ error: "Note not found" });
+    return;
+  }
+  res.json({ success: true });
+});
+
+router.get("/note-labels", requireAuth, async (req, res): Promise<void> => {
+  const userId = req.session.userId!;
+  const labels = await db
+    .select()
+    .from(noteLabelsTable)
+    .where(eq(noteLabelsTable.userId, userId))
+    .orderBy(noteLabelsTable.name);
+  res.json(labels);
+});
+
+router.post("/note-labels", requireAuth, async (req, res): Promise<void> => {
+  const userId = req.session.userId!;
+  const parsed = parseLabelName(req.body);
+  if (!parsed.ok) {
+    res.status(400).json({ error: parsed.error });
+    return;
+  }
+  try {
+    const [label] = await db
+      .insert(noteLabelsTable)
+      .values({ userId, name: parsed.name })
+      .returning();
+    res.status(201).json(label);
+  } catch (e) {
+    res.status(409).json({ error: "Label already exists" });
+  }
+});
+
+router.patch("/note-labels/:id", requireAuth, async (req, res): Promise<void> => {
+  const userId = req.session.userId!;
+  const id = parseIdParam(req.params.id);
+  if (!id.ok) {
+    res.status(400).json({ error: id.error });
+    return;
+  }
+  const parsed = parseLabelName(req.body);
+  if (!parsed.ok) {
+    res.status(400).json({ error: parsed.error });
+    return;
+  }
+  try {
+    const [label] = await db
+      .update(noteLabelsTable)
+      .set({ name: parsed.name })
+      .where(and(eq(noteLabelsTable.id, id.id), eq(noteLabelsTable.userId, userId)))
+      .returning();
+    if (!label) {
+      res.status(404).json({ error: "Label not found" });
+      return;
+    }
+    res.json(label);
+  } catch (e) {
+    res.status(409).json({ error: "Label already exists" });
+  }
+});
+
+router.delete("/note-labels/:id", requireAuth, async (req, res): Promise<void> => {
+  const userId = req.session.userId!;
+  const id = parseIdParam(req.params.id);
+  if (!id.ok) {
+    res.status(400).json({ error: id.error });
+    return;
+  }
+  const result = await db
+    .delete(noteLabelsTable)
+    .where(and(eq(noteLabelsTable.id, id.id), eq(noteLabelsTable.userId, userId)))
+    .returning();
+  if (result.length === 0) {
+    res.status(404).json({ error: "Label not found" });
+    return;
+  }
+  res.json({ success: true });
+});
+
+export default router;
diff --git a/artifacts/teaboy-os/src/App.tsx b/artifacts/teaboy-os/src/App.tsx
index 0d078584..fa833bbc 100644
--- a/artifacts/teaboy-os/src/App.tsx
+++ b/artifacts/teaboy-os/src/App.tsx
@@ -14,6 +14,7 @@ import ServicesPage from "@/pages/services";
 import ChatPage from "@/pages/chat";
 import NotificationsPage from "@/pages/notifications";
 import AdminPage from "@/pages/admin";
+import NotesPage from "@/pages/notes";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -42,6 +43,7 @@ function Router() {
         <Route path="/chat" component={ChatPage} />
         <Route path="/notifications" component={NotificationsPage} />
         <Route path="/admin" component={AdminPage} />
+        <Route path="/notes" component={NotesPage} />
         <Route path="/" component={HomePage} />
         <Route component={NotFound} />
       </Switch>
diff --git a/artifacts/teaboy-os/src/lib/notes-api.ts b/artifacts/teaboy-os/src/lib/notes-api.ts
new file mode 100644
index 00000000..2ea3c197
--- /dev/null
+++ b/artifacts/teaboy-os/src/lib/notes-api.ts
@@ -0,0 +1,134 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+export interface Note {
+  id: number;
+  userId: number;
+  title: string;
+  content: string;
+  color: string;
+  isPinned: boolean;
+  isArchived: boolean;
+  createdAt: string;
+  updatedAt: string;
+  labelIds: number[];
+}
+
+export interface NoteLabel {
+  id: number;
+  userId: number;
+  name: string;
+  createdAt: string;
+}
+
+const BASE = `${import.meta.env.BASE_URL}api`.replace(/\/+/g, "/");
+
+async function req<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(`${BASE}${path}`, {
+    credentials: "include",
+    headers: { "Content-Type": "application/json", ...(init?.headers ?? {}) },
+    ...init,
+  });
+  if (!res.ok) {
+    let msg = `${res.status}`;
+    try {
+      const j = await res.json();
+      msg = j.error ?? msg;
+    } catch {}
+    throw new Error(msg);
+  }
+  return res.json() as Promise<T>;
+}
+
+export const notesKey = (archived: boolean) => ["notes", { archived }] as const;
+export const labelsKey = ["note-labels"] as const;
+
+export function useNotes(archived: boolean) {
+  return useQuery({
+    queryKey: notesKey(archived),
+    queryFn: () => req<Note[]>(`/notes?archived=${archived}`),
+  });
+}
+
+export function useNoteLabels() {
+  return useQuery({ queryKey: labelsKey, queryFn: () => req<NoteLabel[]>("/note-labels") });
+}
+
+export function useCreateNote() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (body: Partial<Note>) =>
+      req<Note>("/notes", { method: "POST", body: JSON.stringify(body) }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["notes"] });
+    },
+  });
+}
+
+export function useUpdateNote() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, ...body }: Partial<Note> & { id: number }) =>
+      req<Note>(`/notes/${id}`, { method: "PATCH", body: JSON.stringify(body) }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["notes"] });
+    },
+  });
+}
+
+export function useDeleteNote() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: number) => req<{ success: true }>(`/notes/${id}`, { method: "DELETE" }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["notes"] }),
+  });
+}
+
+export function useCreateLabel() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (name: string) =>
+      req<NoteLabel>("/note-labels", { method: "POST", body: JSON.stringify({ name }) }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: labelsKey }),
+  });
+}
+
+export function useUpdateLabel() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, name }: { id: number; name: string }) =>
+      req<NoteLabel>(`/note-labels/${id}`, { method: "PATCH", body: JSON.stringify({ name }) }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: labelsKey });
+      qc.invalidateQueries({ queryKey: ["notes"] });
+    },
+  });
+}
+
+export function useDeleteLabel() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: number) =>
+      req<{ success: true }>(`/note-labels/${id}`, { method: "DELETE" }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: labelsKey });
+      qc.invalidateQueries({ queryKey: ["notes"] });
+    },
+  });
+}
+
+export const NOTE_COLORS: { id: string; bg: string; ring: string }[] = [
+  { id: "default", bg: "bg-white dark:bg-card", ring: "ring-slate-300" },
+  { id: "red", bg: "bg-red-100 dark:bg-red-900/40", ring: "ring-red-400" },
+  { id: "orange", bg: "bg-orange-100 dark:bg-orange-900/40", ring: "ring-orange-400" },
+  { id: "yellow", bg: "bg-yellow-100 dark:bg-yellow-900/40", ring: "ring-yellow-400" },
+  { id: "green", bg: "bg-green-100 dark:bg-green-900/40", ring: "ring-green-400" },
+  { id: "teal", bg: "bg-teal-100 dark:bg-teal-900/40", ring: "ring-teal-400" },
+  { id: "blue", bg: "bg-sky-100 dark:bg-sky-900/40", ring: "ring-sky-400" },
+  { id: "purple", bg: "bg-purple-100 dark:bg-purple-900/40", ring: "ring-purple-400" },
+  { id: "pink", bg: "bg-pink-100 dark:bg-pink-900/40", ring: "ring-pink-400" },
+  { id: "gray", bg: "bg-slate-200 dark:bg-slate-800/60", ring: "ring-slate-400" },
+];
+
+export function colorBg(id: string): string {
+  return NOTE_COLORS.find((c) => c.id === id)?.bg ?? NOTE_COLORS[0].bg;
+}
diff --git a/artifacts/teaboy-os/src/locales/ar.json b/artifacts/teaboy-os/src/locales/ar.json
index ec1881fe..2d0d6b14 100644
--- a/artifacts/teaboy-os/src/locales/ar.json
+++ b/artifacts/teaboy-os/src/locales/ar.json
@@ -348,5 +348,30 @@
     "success": "تمت العملية بنجاح",
     "language": "English",
     "appName": "نظام TeaBoy"
+  },
+  "notes": {
+    "title": "الملاحظات",
+    "searchPlaceholder": "ابحث في الملاحظات",
+    "labels": "التصنيفات",
+    "manageLabels": "إدارة التصنيفات",
+    "newLabel": "تصنيف جديد",
+    "noLabelsYet": "لا توجد تصنيفات بعد",
+    "allLabels": "الكل",
+    "tabs": { "active": "ملاحظات", "archived": "الأرشيف" },
+    "pinned": "مثبّتة",
+    "others": "أخرى",
+    "empty": "ستظهر ملاحظاتك هنا",
+    "emptyArchived": "لا توجد ملاحظات في الأرشيف",
+    "takeNote": "اكتب ملاحظة...",
+    "titlePlaceholder": "العنوان",
+    "contentPlaceholder": "اكتب ملاحظة...",
+    "save": "حفظ",
+    "pin": "تثبيت",
+    "archive": "أرشفة",
+    "unarchive": "إلغاء الأرشفة",
+    "delete": "حذف",
+    "deleteConfirm": "حذف هذه الملاحظة؟",
+    "deleteLabelConfirm": "حذف هذا التصنيف؟",
+    "editTitle": "تعديل ملاحظة"
   }
 }
diff --git a/artifacts/teaboy-os/src/locales/en.json b/artifacts/teaboy-os/src/locales/en.json
index 665139c4..601a7bd7 100644
--- a/artifacts/teaboy-os/src/locales/en.json
+++ b/artifacts/teaboy-os/src/locales/en.json
@@ -345,5 +345,30 @@
     "success": "Success",
     "language": "العربية",
     "appName": "TeaBoy OS"
+  },
+  "notes": {
+    "title": "Notes",
+    "searchPlaceholder": "Search notes",
+    "labels": "Labels",
+    "manageLabels": "Manage labels",
+    "newLabel": "New label",
+    "noLabelsYet": "No labels yet",
+    "allLabels": "All",
+    "tabs": { "active": "Notes", "archived": "Archived" },
+    "pinned": "Pinned",
+    "others": "Others",
+    "empty": "Your notes will appear here",
+    "emptyArchived": "No archived notes",
+    "takeNote": "Take a note...",
+    "titlePlaceholder": "Title",
+    "contentPlaceholder": "Take a note...",
+    "save": "Save",
+    "pin": "Pin",
+    "archive": "Archive",
+    "unarchive": "Unarchive",
+    "delete": "Delete",
+    "deleteConfirm": "Delete this note?",
+    "deleteLabelConfirm": "Delete this label?",
+    "editTitle": "Edit note"
   }
 }
diff --git a/artifacts/teaboy-os/src/pages/notes.tsx b/artifacts/teaboy-os/src/pages/notes.tsx
new file mode 100644
index 00000000..5054e963
--- /dev/null
+++ b/artifacts/teaboy-os/src/pages/notes.tsx
@@ -0,0 +1,745 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "wouter";
+import {
+  ArrowLeft,
+  ArrowRight,
+  StickyNote,
+  Pin,
+  Archive,
+  ArchiveRestore,
+  Trash2,
+  Palette,
+  Tag,
+  Search,
+  Plus,
+  X,
+  Check,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  type Note,
+  type NoteLabel,
+  NOTE_COLORS,
+  colorBg,
+  useCreateLabel,
+  useCreateNote,
+  useDeleteLabel,
+  useDeleteNote,
+  useNoteLabels,
+  useNotes,
+  useUpdateLabel,
+  useUpdateNote,
+} from "@/lib/notes-api";
+
+export default function NotesPage() {
+  const { t, i18n } = useTranslation();
+  const [, setLocation] = useLocation();
+  const isRtl = i18n.language === "ar";
+  const BackIcon = isRtl ? ArrowRight : ArrowLeft;
+
+  const [view, setView] = useState<"active" | "archived">("active");
+  const [search, setSearch] = useState("");
+  const [labelFilter, setLabelFilter] = useState<number | null>(null);
+  const [editing, setEditing] = useState<Note | null>(null);
+  const [labelsDialogOpen, setLabelsDialogOpen] = useState(false);
+
+  const { data: notes = [], isLoading } = useNotes(view === "archived");
+  const { data: labels = [] } = useNoteLabels();
+
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    return notes.filter((n) => {
+      if (labelFilter && !n.labelIds.includes(labelFilter)) return false;
+      if (!q) return true;
+      return (
+        n.title.toLowerCase().includes(q) ||
+        n.content.toLowerCase().includes(q)
+      );
+    });
+  }, [notes, search, labelFilter]);
+
+  const pinned = filtered.filter((n) => n.isPinned);
+  const others = filtered.filter((n) => !n.isPinned);
+
+  return (
+    <div className="min-h-screen os-bg flex flex-col" dir={isRtl ? "rtl" : "ltr"}>
+      {/* Header */}
+      <div className="glass-panel border-b border-slate-200/70 px-4 py-3 sticky top-0 z-20">
+        <div className="flex items-center gap-3 flex-wrap">
+          <button
+            onClick={() => setLocation("/")}
+            className="p-2 rounded-xl hover:bg-slate-100/60 text-muted-foreground hover:text-foreground transition-colors"
+            aria-label={t("common.back", "Back")}
+          >
+            <BackIcon size={20} />
+          </button>
+          <div className="flex items-center gap-2">
+            <StickyNote size={20} className="text-amber-500" />
+            <h1 className="text-lg font-semibold text-foreground">
+              {t("notes.title", "Notes")}
+            </h1>
+          </div>
+
+          <div className="flex-1 min-w-[180px] max-w-md ms-auto relative">
+            <Search
+              size={16}
+              className="absolute top-1/2 -translate-y-1/2 text-muted-foreground"
+              style={isRtl ? { right: 10 } : { left: 10 }}
+            />
+            <Input
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder={t("notes.searchPlaceholder", "Search notes")}
+              className={isRtl ? "pe-9" : "ps-9"}
+            />
+          </div>
+
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => setLabelsDialogOpen(true)}
+          >
+            <Tag size={16} className="me-1" />
+            {t("notes.labels", "Labels")}
+          </Button>
+        </div>
+
+        {/* Tabs + label chips */}
+        <div className="mt-3 flex items-center gap-2 flex-wrap">
+          <div className="inline-flex rounded-xl bg-slate-100/70 p-1">
+            <button
+              onClick={() => setView("active")}
+              className={`px-3 py-1 text-sm rounded-lg transition ${
+                view === "active"
+                  ? "bg-white shadow-sm text-foreground"
+                  : "text-muted-foreground"
+              }`}
+            >
+              {t("notes.tabs.active", "Notes")}
+            </button>
+            <button
+              onClick={() => setView("archived")}
+              className={`px-3 py-1 text-sm rounded-lg transition ${
+                view === "archived"
+                  ? "bg-white shadow-sm text-foreground"
+                  : "text-muted-foreground"
+              }`}
+            >
+              {t("notes.tabs.archived", "Archived")}
+            </button>
+          </div>
+          {labels.length > 0 && (
+            <div className="flex items-center gap-1.5 flex-wrap">
+              <button
+                onClick={() => setLabelFilter(null)}
+                className={`text-xs px-2.5 py-1 rounded-full border transition ${
+                  labelFilter === null
+                    ? "bg-foreground text-background border-foreground"
+                    : "border-slate-300/60 text-muted-foreground hover:border-foreground"
+                }`}
+              >
+                {t("notes.allLabels", "All")}
+              </button>
+              {labels.map((l) => (
+                <button
+                  key={l.id}
+                  onClick={() => setLabelFilter(l.id)}
+                  className={`text-xs px-2.5 py-1 rounded-full border transition flex items-center gap-1 ${
+                    labelFilter === l.id
+                      ? "bg-foreground text-background border-foreground"
+                      : "border-slate-300/60 text-muted-foreground hover:border-foreground"
+                  }`}
+                >
+                  <Tag size={11} /> {l.name}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="flex-1 px-4 py-6 max-w-6xl w-full mx-auto">
+        {view === "active" && (
+          <Composer labels={labels} />
+        )}
+
+        {isLoading ? (
+          <div className="flex items-center justify-center py-20 text-muted-foreground">
+            {t("common.loading", "Loading...")}
+          </div>
+        ) : filtered.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-24 gap-3 text-muted-foreground">
+            <StickyNote size={48} className="opacity-30" />
+            <span>
+              {view === "archived"
+                ? t("notes.emptyArchived", "No archived notes")
+                : t("notes.empty", "Your notes will appear here")}
+            </span>
+          </div>
+        ) : (
+          <div className="space-y-6 mt-6">
+            {pinned.length > 0 && (
+              <Section
+                title={t("notes.pinned", "Pinned")}
+                notes={pinned}
+                labels={labels}
+                onEdit={setEditing}
+              />
+            )}
+            <Section
+              title={pinned.length > 0 ? t("notes.others", "Others") : ""}
+              notes={others}
+              labels={labels}
+              onEdit={setEditing}
+            />
+          </div>
+        )}
+      </div>
+
+      {editing && (
+        <EditNoteDialog
+          note={editing}
+          labels={labels}
+          onClose={() => setEditing(null)}
+        />
+      )}
+
+      <LabelsDialog
+        open={labelsDialogOpen}
+        onClose={() => setLabelsDialogOpen(false)}
+        labels={labels}
+      />
+    </div>
+  );
+}
+
+function Section({
+  title,
+  notes,
+  labels,
+  onEdit,
+}: {
+  title: string;
+  notes: Note[];
+  labels: NoteLabel[];
+  onEdit: (n: Note) => void;
+}) {
+  if (notes.length === 0) return null;
+  return (
+    <div>
+      {title && (
+        <h2 className="text-xs uppercase tracking-wider text-muted-foreground mb-2">
+          {title}
+        </h2>
+      )}
+      <div
+        className="gap-3 [column-fill:_balance]"
+        style={{ columnWidth: 230 }}
+      >
+        {notes.map((n) => (
+          <NoteCard key={n.id} note={n} labels={labels} onEdit={onEdit} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function NoteCard({
+  note,
+  labels,
+  onEdit,
+}: {
+  note: Note;
+  labels: NoteLabel[];
+  onEdit: (n: Note) => void;
+}) {
+  const { t } = useTranslation();
+  const update = useUpdateNote();
+  const del = useDeleteNote();
+  const noteLabels = labels.filter((l) => note.labelIds.includes(l.id));
+
+  return (
+    <div
+      className={`break-inside-avoid mb-3 rounded-xl border border-black/5 shadow-sm p-3 cursor-pointer transition hover:shadow-md group ${colorBg(
+        note.color,
+      )}`}
+      onClick={() => onEdit(note)}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex-1 min-w-0">
+          {note.title && (
+            <div className="font-semibold text-sm text-foreground break-words">
+              {note.title}
+            </div>
+          )}
+          {note.content && (
+            <div className="text-sm text-foreground/80 mt-1 whitespace-pre-wrap break-words line-clamp-[12]">
+              {note.content}
+            </div>
+          )}
+        </div>
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            update.mutate({ id: note.id, isPinned: !note.isPinned });
+          }}
+          className={`shrink-0 p-1 rounded-md hover:bg-black/5 ${
+            note.isPinned ? "text-amber-600" : "text-muted-foreground opacity-0 group-hover:opacity-100"
+          }`}
+          aria-label={t("notes.pin", "Pin")}
+        >
+          <Pin size={16} className={note.isPinned ? "fill-amber-500" : ""} />
+        </button>
+      </div>
+
+      {noteLabels.length > 0 && (
+        <div className="flex flex-wrap gap-1 mt-2">
+          {noteLabels.map((l) => (
+            <Badge key={l.id} variant="secondary" className="text-[10px] py-0 px-1.5">
+              {l.name}
+            </Badge>
+          ))}
+        </div>
+      )}
+
+      <div
+        className="flex items-center gap-1 mt-2 opacity-0 group-hover:opacity-100 transition"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <ColorPicker
+          value={note.color}
+          onChange={(c) => update.mutate({ id: note.id, color: c })}
+        />
+        <LabelMenu
+          labels={labels}
+          selected={note.labelIds}
+          onChange={(ids) => update.mutate({ id: note.id, labelIds: ids })}
+        />
+        <button
+          onClick={() =>
+            update.mutate({ id: note.id, isArchived: !note.isArchived })
+          }
+          className="p-1 rounded-md hover:bg-black/5 text-muted-foreground"
+          aria-label={
+            note.isArchived
+              ? t("notes.unarchive", "Unarchive")
+              : t("notes.archive", "Archive")
+          }
+        >
+          {note.isArchived ? <ArchiveRestore size={15} /> : <Archive size={15} />}
+        </button>
+        <button
+          onClick={() => {
+            if (confirm(t("notes.deleteConfirm", "Delete this note?"))) {
+              del.mutate(note.id);
+            }
+          }}
+          className="p-1 rounded-md hover:bg-black/5 text-muted-foreground hover:text-destructive"
+          aria-label={t("notes.delete", "Delete")}
+        >
+          <Trash2 size={15} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function ColorPicker({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (c: string) => void;
+}) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          className="p-1 rounded-md hover:bg-black/5 text-muted-foreground"
+          aria-label="Color"
+        >
+          <Palette size={15} />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-2">
+        <div className="grid grid-cols-5 gap-1.5">
+          {NOTE_COLORS.map((c) => (
+            <button
+              key={c.id}
+              onClick={() => onChange(c.id)}
+              className={`w-7 h-7 rounded-full border border-black/10 ${c.bg} ${
+                value === c.id ? "ring-2 ring-offset-1 " + c.ring : ""
+              }`}
+              aria-label={c.id}
+            />
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function LabelMenu({
+  labels,
+  selected,
+  onChange,
+}: {
+  labels: NoteLabel[];
+  selected: number[];
+  onChange: (ids: number[]) => void;
+}) {
+  const { t } = useTranslation();
+  const create = useCreateLabel();
+  const [name, setName] = useState("");
+
+  const toggle = (id: number) => {
+    if (selected.includes(id)) onChange(selected.filter((x) => x !== id));
+    else onChange([...selected, id]);
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          className="p-1 rounded-md hover:bg-black/5 text-muted-foreground"
+          aria-label="Labels"
+        >
+          <Tag size={15} />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56 p-2">
+        <div className="space-y-1 max-h-48 overflow-y-auto">
+          {labels.length === 0 && (
+            <div className="text-xs text-muted-foreground px-2 py-1">
+              {t("notes.noLabelsYet", "No labels yet")}
+            </div>
+          )}
+          {labels.map((l) => (
+            <button
+              key={l.id}
+              onClick={() => toggle(l.id)}
+              className="w-full flex items-center justify-between px-2 py-1 text-sm rounded hover:bg-slate-100"
+            >
+              <span className="flex items-center gap-2">
+                <Tag size={12} /> {l.name}
+              </span>
+              {selected.includes(l.id) && <Check size={14} />}
+            </button>
+          ))}
+        </div>
+        <div className="mt-2 flex gap-1 border-t pt-2">
+          <Input
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder={t("notes.newLabel", "New label")}
+            className="h-8 text-sm"
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && name.trim()) {
+                create.mutate(name.trim(), { onSuccess: () => setName("") });
+              }
+            }}
+          />
+          <Button
+            size="sm"
+            variant="ghost"
+            disabled={!name.trim()}
+            onClick={() =>
+              create.mutate(name.trim(), { onSuccess: () => setName("") })
+            }
+          >
+            <Plus size={14} />
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function Composer({ labels }: { labels: NoteLabel[] }) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [color, setColor] = useState("default");
+  const [labelIds, setLabelIds] = useState<number[]>([]);
+  const create = useCreateNote();
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onClick = (e: MouseEvent) => {
+      if (!ref.current?.contains(e.target as Node)) {
+        save();
+      }
+    };
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, title, content, color, labelIds]);
+
+  const reset = () => {
+    setTitle("");
+    setContent("");
+    setColor("default");
+    setLabelIds([]);
+    setOpen(false);
+  };
+
+  const save = () => {
+    if (!title.trim() && !content.trim()) {
+      reset();
+      return;
+    }
+    create.mutate(
+      { title: title.trim(), content: content.trim(), color, labelIds },
+      { onSuccess: reset },
+    );
+  };
+
+  return (
+    <div
+      ref={ref}
+      className={`max-w-xl mx-auto rounded-xl border border-black/10 shadow-sm p-3 transition ${colorBg(
+        color,
+      )}`}
+    >
+      {open ? (
+        <>
+          <Input
+            autoFocus
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder={t("notes.titlePlaceholder", "Title")}
+            className="border-0 bg-transparent shadow-none focus-visible:ring-0 px-1 font-semibold"
+          />
+          <Textarea
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            placeholder={t("notes.contentPlaceholder", "Take a note...")}
+            className="border-0 bg-transparent shadow-none focus-visible:ring-0 px-1 mt-1 min-h-[80px] resize-none"
+          />
+          <div className="flex items-center gap-1 mt-2">
+            <ColorPicker value={color} onChange={setColor} />
+            <LabelMenu
+              labels={labels}
+              selected={labelIds}
+              onChange={setLabelIds}
+            />
+            <div className="ms-auto">
+              <Button size="sm" variant="ghost" onClick={save}>
+                {t("notes.save", "Save")}
+              </Button>
+            </div>
+          </div>
+        </>
+      ) : (
+        <button
+          onClick={() => setOpen(true)}
+          className="w-full text-start text-muted-foreground py-1 px-1"
+        >
+          {t("notes.takeNote", "Take a note...")}
+        </button>
+      )}
+    </div>
+  );
+}
+
+function EditNoteDialog({
+  note,
+  labels,
+  onClose,
+}: {
+  note: Note;
+  labels: NoteLabel[];
+  onClose: () => void;
+}) {
+  const { t } = useTranslation();
+  const [title, setTitle] = useState(note.title);
+  const [content, setContent] = useState(note.content);
+  const [color, setColor] = useState(note.color);
+  const [labelIds, setLabelIds] = useState<number[]>(note.labelIds);
+  const update = useUpdateNote();
+
+  const save = () => {
+    update.mutate(
+      { id: note.id, title: title.trim(), content: content.trim(), color, labelIds },
+      { onSuccess: onClose },
+    );
+  };
+
+  return (
+    <Dialog open onOpenChange={(o) => !o && save()}>
+      <DialogContent
+        className={`max-w-lg ${colorBg(color)}`}
+        onInteractOutside={(e) => {
+          e.preventDefault();
+          save();
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle className="sr-only">
+            {t("notes.editTitle", "Edit note")}
+          </DialogTitle>
+        </DialogHeader>
+        <Input
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder={t("notes.titlePlaceholder", "Title")}
+          className="border-0 bg-transparent shadow-none focus-visible:ring-0 px-1 font-semibold text-base"
+        />
+        <Textarea
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          placeholder={t("notes.contentPlaceholder", "Take a note...")}
+          className="border-0 bg-transparent shadow-none focus-visible:ring-0 px-1 min-h-[160px]"
+        />
+        <div className="flex items-center gap-1 mt-2">
+          <ColorPicker value={color} onChange={setColor} />
+          <LabelMenu labels={labels} selected={labelIds} onChange={setLabelIds} />
+          <div className="ms-auto">
+            <Button size="sm" onClick={save}>
+              {t("notes.save", "Save")}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function LabelsDialog({
+  open,
+  onClose,
+  labels,
+}: {
+  open: boolean;
+  onClose: () => void;
+  labels: NoteLabel[];
+}) {
+  const { t } = useTranslation();
+  const [name, setName] = useState("");
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [editingName, setEditingName] = useState("");
+  const create = useCreateLabel();
+  const update = useUpdateLabel();
+  const del = useDeleteLabel();
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t("notes.manageLabels", "Manage labels")}</DialogTitle>
+        </DialogHeader>
+        <div className="flex gap-2">
+          <Input
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder={t("notes.newLabel", "New label")}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && name.trim()) {
+                create.mutate(name.trim(), { onSuccess: () => setName("") });
+              }
+            }}
+          />
+          <Button
+            disabled={!name.trim()}
+            onClick={() =>
+              create.mutate(name.trim(), { onSuccess: () => setName("") })
+            }
+          >
+            <Plus size={16} />
+          </Button>
+        </div>
+        <div className="space-y-1 max-h-72 overflow-y-auto">
+          {labels.length === 0 && (
+            <div className="text-sm text-muted-foreground py-4 text-center">
+              {t("notes.noLabelsYet", "No labels yet")}
+            </div>
+          )}
+          {labels.map((l) => (
+            <div
+              key={l.id}
+              className="flex items-center gap-2 py-1.5 px-2 rounded hover:bg-slate-100 group"
+            >
+              <Tag size={14} className="text-muted-foreground" />
+              {editingId === l.id ? (
+                <>
+                  <Input
+                    value={editingName}
+                    onChange={(e) => setEditingName(e.target.value)}
+                    autoFocus
+                    className="h-7"
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" && editingName.trim()) {
+                        update.mutate(
+                          { id: l.id, name: editingName.trim() },
+                          { onSuccess: () => setEditingId(null) },
+                        );
+                      }
+                      if (e.key === "Escape") setEditingId(null);
+                    }}
+                  />
+                  <button
+                    onClick={() => {
+                      if (editingName.trim())
+                        update.mutate(
+                          { id: l.id, name: editingName.trim() },
+                          { onSuccess: () => setEditingId(null) },
+                        );
+                    }}
+                    className="p-1 text-muted-foreground hover:text-foreground"
+                  >
+                    <Check size={14} />
+                  </button>
+                  <button
+                    onClick={() => setEditingId(null)}
+                    className="p-1 text-muted-foreground hover:text-foreground"
+                  >
+                    <X size={14} />
+                  </button>
+                </>
+              ) : (
+                <>
+                  <span
+                    className="flex-1 text-sm cursor-pointer"
+                    onClick={() => {
+                      setEditingId(l.id);
+                      setEditingName(l.name);
+                    }}
+                  >
+                    {l.name}
+                  </span>
+                  <button
+                    onClick={() => {
+                      if (confirm(t("notes.deleteLabelConfirm", "Delete this label?"))) {
+                        del.mutate(l.id);
+                      }
+                    }}
+                    className="p-1 text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100"
+                  >
+                    <Trash2 size={14} />
+                  </button>
+                </>
+              )}
+            </div>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/lib/db/src/schema/index.ts b/lib/db/src/schema/index.ts
index ba51663c..013e0980 100644
--- a/lib/db/src/schema/index.ts
+++ b/lib/db/src/schema/index.ts
@@ -8,3 +8,4 @@ export * from "./settings";
 export * from "./user-app-orders";
 export * from "./app-opens";
 export * from "./password-reset-tokens";
+export * from "./notes";
diff --git a/lib/db/src/schema/notes.ts b/lib/db/src/schema/notes.ts
new file mode 100644
index 00000000..0b7f74da
--- /dev/null
+++ b/lib/db/src/schema/notes.ts
@@ -0,0 +1,40 @@
+import { pgTable, text, serial, timestamp, integer, varchar, boolean, primaryKey, uniqueIndex } from "drizzle-orm/pg-core";
+import { createInsertSchema } from "drizzle-zod";
+import { z } from "zod/v4";
+import { usersTable } from "./users";
+
+export const notesTable = pgTable("notes", {
+  id: serial("id").primaryKey(),
+  userId: integer("user_id").notNull().references(() => usersTable.id, { onDelete: "cascade" }),
+  title: varchar("title", { length: 300 }).notNull().default(""),
+  content: text("content").notNull().default(""),
+  color: varchar("color", { length: 32 }).notNull().default("default"),
+  isPinned: boolean("is_pinned").notNull().default(false),
+  isArchived: boolean("is_archived").notNull().default(false),
+  createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
+  updatedAt: timestamp("updated_at", { withTimezone: true }).notNull().defaultNow().$onUpdate(() => new Date()),
+});
+
+export const noteLabelsTable = pgTable("note_labels", {
+  id: serial("id").primaryKey(),
+  userId: integer("user_id").notNull().references(() => usersTable.id, { onDelete: "cascade" }),
+  name: varchar("name", { length: 80 }).notNull(),
+  createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
+}, (t) => ({
+  userNameUnique: uniqueIndex("note_labels_user_name_unique").on(t.userId, t.name),
+}));
+
+export const noteLabelAssignmentsTable = pgTable("note_label_assignments", {
+  noteId: integer("note_id").notNull().references(() => notesTable.id, { onDelete: "cascade" }),
+  labelId: integer("label_id").notNull().references(() => noteLabelsTable.id, { onDelete: "cascade" }),
+}, (t) => ({
+  pk: primaryKey({ columns: [t.noteId, t.labelId] }),
+}));
+
+export const insertNoteSchema = createInsertSchema(notesTable).omit({ id: true, createdAt: true, updatedAt: true });
+export type InsertNote = z.infer<typeof insertNoteSchema>;
+export type Note = typeof notesTable.$inferSelect;
+
+export const insertNoteLabelSchema = createInsertSchema(noteLabelsTable).omit({ id: true, createdAt: true });
+export type InsertNoteLabel = z.infer<typeof insertNoteLabelSchema>;
+export type NoteLabel = typeof noteLabelsTable.$inferSelect;