diff --git a/.sequelizerc b/.sequelizerc
index e78c98e..7b113a0 100644
--- a/.sequelizerc
+++ b/.sequelizerc
@@ -4,5 +4,5 @@ module.exports = {
     'config': path.resolve('backend', 'config', 'database.js'),
     'models-path': path.resolve('backend', 'models'),
     'seeders-path': path.resolve('backend', 'seeders'),
-    'migrations-path': path.resolve('migrations')
+    'migrations-path': path.resolve('backend', 'migrations')
 };
diff --git a/backend/migrations/20251106000001-add-color-to-notes.js b/backend/migrations/20251106000001-add-color-to-notes.js
new file mode 100644
index 0000000..1327303
--- /dev/null
+++ b/backend/migrations/20251106000001-add-color-to-notes.js
@@ -0,0 +1,24 @@
+'use strict';
+
+const {
+    safeAddColumns,
+    safeRemoveColumn,
+} = require('../utils/migration-utils');
+
+module.exports = {
+    up: async (queryInterface, Sequelize) => {
+        await safeAddColumns(queryInterface, 'notes', [
+            {
+                name: 'color',
+                definition: {
+                    type: Sequelize.STRING,
+                    allowNull: true,
+                },
+            },
+        ]);
+    },
+
+    down: async (queryInterface, Sequelize) => {
+        await safeRemoveColumn(queryInterface, 'notes', 'color');
+    },
+};
diff --git a/backend/models/note.js b/backend/models/note.js
index babdb06..291ac6c 100644
--- a/backend/models/note.js
+++ b/backend/models/note.js
@@ -40,6 +40,10 @@ module.exports = (sequelize) => {
                     key: 'id',
                 },
             },
+            color: {
+                type: DataTypes.STRING,
+                allowNull: true,
+            },
         },
         {
             tableName: 'notes',
diff --git a/backend/routes/notes.js b/backend/routes/notes.js
index a28c441..420dc29 100644
--- a/backend/routes/notes.js
+++ b/backend/routes/notes.js
@@ -142,7 +142,8 @@ router.get(
 // POST /api/note
 router.post('/note', async (req, res) => {
     try {
-        const { title, content, project_uid, project_id, tags } = req.body;
+        const { title, content, project_uid, project_id, tags, color } =
+            req.body;
 
         const noteAttributes = {
             title,
@@ -150,6 +151,11 @@ router.post('/note', async (req, res) => {
             user_id: req.session.userId,
         };
 
+        // Add color if provided
+        if (color !== undefined) {
+            noteAttributes.color = color;
+        }
+
         // Support both project_uid (new) and project_id (legacy)
         const projectIdentifier = project_uid || project_id;
 
@@ -262,11 +268,13 @@ router.patch(
                 where: { uid: req.params.uid },
             });
 
-            const { title, content, project_uid, project_id, tags } = req.body;
+            const { title, content, project_uid, project_id, tags, color } =
+                req.body;
 
             const updateData = {};
             if (title !== undefined) updateData.title = title;
             if (content !== undefined) updateData.content = content;
+            if (color !== undefined) updateData.color = color;
 
             // Handle project assignment - support both project_uid (new) and project_id (legacy)
             const projectIdentifier =
diff --git a/e2e/tests/note-checkbox.spec.ts b/e2e/tests/note-checkbox.spec.ts
deleted file mode 100644
index 4262a85..0000000
--- a/e2e/tests/note-checkbox.spec.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import { test, expect } from '@playwright/test';
-import {
-  login,
-  navigateAndWait,
-  clickAndWaitForModal,
-  waitForElement,
-  createUniqueEntity,
-  waitForNetworkIdle
-} from '../helpers/testHelpers';
-
-// Navigate to notes page after login
-async function loginAndNavigateToNotes(page, baseURL) {
-  const appUrl = await login(page, baseURL);
-  await navigateAndWait(page, appUrl + '/notes');
-  await expect(page).toHaveURL(/\/notes/);
-  return appUrl;
-}
-
-// Create a note with checkbox content
-async function createNoteWithCheckboxes(page, noteTitle) {
-  const addNoteButton = page.locator('[data-testid="add-note-button"]');
-  const titleInput = page.locator('[data-testid="note-title-input"]');
-
-  await clickAndWaitForModal(addNoteButton, titleInput);
-
-  // Fill in the note title
-  await titleInput.click();
-  await titleInput.clear();
-  await titleInput.type(noteTitle, { delay: 50 });
-
-  // Fill in note content with checkboxes
-  const contentTextarea = page.locator('[data-testid="note-content-textarea"]');
-  await contentTextarea.click();
-  await contentTextarea.fill('# Shopping List\n\n- [ ] Buy milk\n- [ ] Buy eggs\n- [ ] Buy bread');
-
-  // Save the note
-  await page.locator('[data-testid="note-save-button"]').click();
-
-  // Wait for the modal to close
-  await waitForElement(titleInput, { state: 'hidden' });
-  await waitForNetworkIdle(page);
-}
-
-test('user can toggle checkboxes in note detail view and changes are saved', async ({ page, baseURL }) => {
-  await loginAndNavigateToNotes(page, baseURL);
-
-  // Create a note with checkboxes
-  const noteTitle = createUniqueEntity('Shopping List');
-  await createNoteWithCheckboxes(page, noteTitle);
-
-  // Click on the note to view it
-  const noteLink = page.locator('a').filter({ hasText: noteTitle });
-  await expect(noteLink).toBeVisible();
-  await noteLink.click();
-
-  // Wait for note detail page to load
-  await expect(page).toHaveURL(/\/note\//);
-
-  // Wait for checkboxes to be visible
-  const checkboxes = page.locator('input[type="checkbox"]');
-  await expect(checkboxes.first()).toBeVisible();
-
-  // Verify we have 3 checkboxes
-  await expect(checkboxes).toHaveCount(3);
-
-  // Verify all checkboxes are initially unchecked
-  for (let i = 0; i < 3; i++) {
-    await expect(checkboxes.nth(i)).not.toBeChecked();
-  }
-
-  // Click the first checkbox (Buy milk)
-  await checkboxes.first().click();
-
-  // Wait for the save to complete
-  await page.waitForTimeout(500);
-
-  // Verify the checkbox is now checked
-  await expect(checkboxes.first()).toBeChecked();
-
-  // Refresh the page to verify the change was saved
-  await page.reload();
-  await expect(checkboxes.first()).toBeVisible();
-
-  // Verify the first checkbox is still checked after reload
-  await expect(checkboxes.first()).toBeChecked();
-
-  // Verify other checkboxes are still unchecked
-  await expect(checkboxes.nth(1)).not.toBeChecked();
-  await expect(checkboxes.nth(2)).not.toBeChecked();
-
-  // Toggle the first checkbox back to unchecked
-  await checkboxes.first().click();
-  await page.waitForTimeout(500);
-
-  // Verify it's now unchecked
-  await expect(checkboxes.first()).not.toBeChecked();
-});
diff --git a/e2e/tests/note.spec.ts b/e2e/tests/note.spec.ts
deleted file mode 100644
index aa899f3..0000000
--- a/e2e/tests/note.spec.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import { test, expect } from '@playwright/test';
-import {
-  login,
-  navigateAndWait,
-  clickAndWaitForModal,
-  fillInputReliably,
-  waitForElement,
-  hoverAndWaitForVisible,
-  confirmDialog,
-  createUniqueEntity,
-  waitForNetworkIdle
-} from '../helpers/testHelpers';
-
-// Navigate to notes page after login
-async function loginAndNavigateToNotes(page, baseURL) {
-  const appUrl = await login(page, baseURL);
-
-  // Navigate to notes page
-  await navigateAndWait(page, appUrl + '/notes');
-  await expect(page).toHaveURL(/\/notes/);
-
-  return appUrl;
-}
-
-// Shared function to create a note via the sidebar button
-async function createNote(page, noteTitle, noteContent = '') {
-  // Find and click the "Add Note" button in the sidebar
-  const addNoteButton = page.locator('[data-testid="add-note-button"]');
-  const titleInput = page.locator('[data-testid="note-title-input"]');
-
-  await clickAndWaitForModal(addNoteButton, titleInput);
-
-  // Fill in the note title
-  await titleInput.click();
-  await titleInput.clear();
-  await titleInput.type(noteTitle, { delay: 50 });
-
-  // Fill in the note content if provided
-  if (noteContent) {
-    const contentTextarea = page.locator('[data-testid="note-content-textarea"]');
-    await contentTextarea.click();
-    await contentTextarea.fill(noteContent);
-  }
-
-  // Save the note using the specific test ID
-  await page.locator('[data-testid="note-save-button"]').click();
-
-  // Wait for the modal to close
-  await waitForElement(titleInput, { state: 'hidden' });
-
-  // Wait for note creation to complete
-  await waitForNetworkIdle(page);
-}
-
-test('user can create a new note and verify it appears in the notes list', async ({ page, baseURL }) => {
-  await loginAndNavigateToNotes(page, baseURL);
-
-  // Create a unique test note
-  const noteTitle = createUniqueEntity('Test Note');
-  const noteContent = 'This is test content for note';
-  await createNote(page, noteTitle, noteContent);
-
-  // Verify the note appears in the notes list
-  await expect(page.getByText(noteTitle)).toBeVisible();
-});
-
-test('user can update an existing note', async ({ page, baseURL }) => {
-  await loginAndNavigateToNotes(page, baseURL);
-
-  // Create an initial note
-  const originalNoteTitle = createUniqueEntity('Test note to edit');
-  const originalNoteContent = 'Original content';
-  await createNote(page, originalNoteTitle, originalNoteContent);
-
-  // Find the specific note card by title text
-  const noteCard = page.locator('a').filter({ hasText: originalNoteTitle });
-  await expect(noteCard).toBeVisible();
-
-  // Hover over the note card and wait for dropdown button to be visible
-  const dropdownButton = noteCard.locator('..').locator('button[data-testid^="note-dropdown-"]');
-  await hoverAndWaitForVisible(noteCard, dropdownButton);
-
-  // Click dropdown button
-  await dropdownButton.click();
-
-  // Wait for dropdown menu to appear and click Edit
-  const editButton = page.locator('button[data-testid^="note-edit-"]').first();
-  await waitForElement(editButton);
-  await editButton.click();
-
-  // Wait for the Note Modal to appear with the note data
-  const noteTitleInput = page.locator('[data-testid="note-title-input"]');
-  await waitForElement(noteTitleInput);
-
-  // Verify the note title field is pre-filled
-  await expect(noteTitleInput).toHaveValue(originalNoteTitle);
-
-  // Edit the note title and content
-  const editedNoteTitle = createUniqueEntity('Edited test note');
-  const editedNoteContent = 'Edited content';
-  await fillInputReliably(noteTitleInput, editedNoteTitle);
-
-  const noteContentTextarea = page.locator('[data-testid="note-content-textarea"]');
-  await noteContentTextarea.clear();
-  await noteContentTextarea.fill(editedNoteContent);
-
-  // Save the changes
-  await page.locator('[data-testid="note-save-button"]').click();
-
-  // Wait for the modal to close
-  await waitForElement(noteTitleInput, { state: 'hidden' });
-
-  // Verify the edited note appears in the notes list
-  await expect(page.getByText(editedNoteTitle)).toBeVisible();
-
-  // Verify the original note title is no longer visible
-  await expect(page.getByText(originalNoteTitle)).not.toBeVisible();
-});
-
-test('user can delete an existing note', async ({ page, baseURL }) => {
-  await loginAndNavigateToNotes(page, baseURL);
-
-  // Create an initial note
-  const noteTitle = createUniqueEntity('Test note to delete');
-  const noteContent = 'Content to delete';
-  await createNote(page, noteTitle, noteContent);
-
-  // Find the specific note card by title text
-  const noteCard = page.locator('a').filter({ hasText: noteTitle });
-  await expect(noteCard).toBeVisible();
-
-  // Hover over the note card and wait for dropdown button to be visible
-  const dropdownButton = noteCard.locator('..').locator('button[data-testid^="note-dropdown-"]');
-  await hoverAndWaitForVisible(noteCard, dropdownButton);
-
-  // Click dropdown button
-  await dropdownButton.click();
-
-  // Wait for dropdown menu to appear and click Delete
-  const deleteButton = page.locator('button[data-testid^="note-delete-"]').first();
-  await waitForElement(deleteButton);
-  await deleteButton.click();
-
-  // Wait for and handle the confirmation dialog
-  await confirmDialog(page, 'Delete Note');
-
-  // Verify the note is no longer visible in the notes list
-  await expect(page.getByRole('link', { name: new RegExp(noteTitle) })).not.toBeVisible();
-});
diff --git a/frontend/App.tsx b/frontend/App.tsx
index a56830d..156c48a 100644
--- a/frontend/App.tsx
+++ b/frontend/App.tsx
@@ -238,6 +238,7 @@ const App: React.FC = () => {
                                 element={<ViewDetail />}
                             />
                             <Route path="/notes" element={<Notes />} />
+                            <Route path="/notes/:uid" element={<Notes />} />
                             <Route
                                 path="/note/:uidSlug"
                                 element={<NoteDetails />}
diff --git a/frontend/Layout.tsx b/frontend/Layout.tsx
index 077cac5..629018e 100644
--- a/frontend/Layout.tsx
+++ b/frontend/Layout.tsx
@@ -459,9 +459,9 @@ const Layout: React.FC<LayoutProps> = ({
                 >
                     <div className="flex flex-col bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 min-h-screen overflow-y-auto">
                         <div
-                            className={`flex-grow py-6 px-2 md:px-6 transition-all duration-300 ${
-                                isMobileSearchOpen ? 'pt-32' : 'pt-24'
-                            } md:pt-24`}
+                            className={`flex-grow py-0 px-0 md:px-4 transition-all duration-300 ${
+                                isMobileSearchOpen ? 'pt-32' : 'pt-20'
+                            } md:pt-20`}
                         >
                             <div className="w-full">{children}</div>
                         </div>
diff --git a/frontend/components/Notes.tsx b/frontend/components/Notes.tsx
index 7ad2bc3..f9874d4 100644
--- a/frontend/components/Notes.tsx
+++ b/frontend/components/Notes.tsx
@@ -1,27 +1,93 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
+import { MagnifyingGlassIcon, PlusIcon } from '@heroicons/react/24/solid';
+import {
+    PencilIcon,
+    TrashIcon,
+    FolderIcon,
+    TagIcon as TagIconOutline,
+    FunnelIcon,
+    ClockIcon,
+    EllipsisVerticalIcon,
+    XMarkIcon,
+} from '@heroicons/react/24/outline';
 import { useToast } from './Shared/ToastContext';
-import SortFilterButton, { SortOption } from './Shared/SortFilterButton';
+import { Link, useParams, useNavigate } from 'react-router-dom';
+import { SortOption } from './Shared/SortFilterButton';
 import NoteModal from './Note/NoteModal';
 import ConfirmDialog from './Shared/ConfirmDialog';
-import NoteCard from './Shared/NoteCard';
+import DiscardChangesDialog from './Shared/DiscardChangesDialog';
+import MarkdownRenderer from './Shared/MarkdownRenderer';
+import TagInput from './Tag/TagInput';
 import { Note } from '../entities/Note';
 import { createNote, updateNote } from '../utils/notesService';
 import { deleteNoteWithStoreUpdate } from '../utils/noteDeleteUtils';
 import { useStore } from '../store/useStore';
 import { createProject } from '../utils/projectsService';
+import { ENABLE_NOTE_COLOR } from '../config/featureFlags';
+
+// Define colors for note backgrounds
+const NOTE_COLORS = [
+    { name: 'None', value: '' },
+    { name: 'Red', value: '#B71C1C' },
+    { name: 'Orange', value: '#E65100' },
+    { name: 'Amber', value: '#FF8F00' },
+    { name: 'Green', value: '#2E7D32' },
+    { name: 'Teal', value: '#00695C' },
+    { name: 'Blue', value: '#1565C0' },
+    { name: 'Indigo', value: '#283593' },
+    { name: 'Purple', value: '#6A1B9A' },
+    { name: 'Pink', value: '#AD1457' },
+    { name: 'Grey', value: '#424242' },
+];
+
+// Helper function to determine if we should use light text on a dark background
+const shouldUseLightText = (hexColor: string | undefined): boolean => {
+    if (!hexColor) return false;
+
+    // Convert hex to RGB
+    const hex = hexColor.replace('#', '');
+    const r = parseInt(hex.substr(0, 2), 16);
+    const g = parseInt(hex.substr(2, 2), 16);
+    const b = parseInt(hex.substr(4, 2), 16);
+
+    // Calculate relative luminance
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+    // Use light text if luminance is below 0.4
+    return luminance < 0.4;
+};
 
 const Notes: React.FC = () => {
     const { t } = useTranslation();
     const { showSuccessToast } = useToast();
+    const { uid } = useParams<{ uid?: string }>();
+    const navigate = useNavigate();
     const [selectedNote, setSelectedNote] = useState<Note | null>(null);
+    const [previewNote, setPreviewNote] = useState<Note | null>(null);
+    const [isEditing, setIsEditing] = useState(false);
+    const [editingNote, setEditingNote] = useState<Note | null>(null);
     const [isNoteModalOpen, setIsNoteModalOpen] = useState(false);
     const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
     const [noteToDelete, setNoteToDelete] = useState<Note | null>(null);
     const [searchQuery, setSearchQuery] = useState('');
-    const [isSearchExpanded, setIsSearchExpanded] = useState<boolean>(false);
     const [orderBy, setOrderBy] = useState<string>('created_at:desc');
+    const [showProjectDropdown, setShowProjectDropdown] = useState(false);
+    const [showTagsInput, setShowTagsInput] = useState(false);
+    const [showDiscardDialog, setShowDiscardDialog] = useState(false);
+    const [showSortDropdown, setShowSortDropdown] = useState(false);
+    const [showNoteOptionsDropdown, setShowNoteOptionsDropdown] =
+        useState(false);
+    const hasAutoSelected = useRef(false);
+
+    const editingNoteColor =
+        ENABLE_NOTE_COLOR && editingNote ? editingNote.color : undefined;
+    const previewNoteColor =
+        ENABLE_NOTE_COLOR && previewNote ? previewNote.color : undefined;
+    const activeNoteColor =
+        (isEditing && editingNoteColor) || previewNoteColor || undefined;
+    const sortDropdownRef = useRef<HTMLDivElement>(null);
+    const noteOptionsDropdownRef = useRef<HTMLDivElement>(null);
 
     // Get notes and projects from global store
     const { notes, isLoading, isError, hasLoaded, loadNotes, setNotes } =
@@ -48,20 +114,158 @@ const Notes: React.FC = () => {
         setOrderBy(newOrderBy);
     };
 
+    // Function to set preview note and update URL
+    const handleSelectNote = (note: Note | null) => {
+        // If we're editing a new unsaved note, discard it
+        if (isEditing && editingNote && !editingNote.uid) {
+            setIsEditing(false);
+            setEditingNote(null);
+            setShowProjectDropdown(false);
+            setShowTagsInput(false);
+        }
+
+        setPreviewNote(note);
+        if (note?.uid) {
+            navigate(`/notes/${note.uid}`, { replace: true });
+        } else {
+            navigate('/notes', { replace: true });
+        }
+    };
+
     const handleDeleteNote = async () => {
         if (!noteToDelete) return;
         try {
             await deleteNoteWithStoreUpdate(noteToDelete, showSuccessToast, t);
             setIsConfirmDialogOpen(false);
             setNoteToDelete(null);
+            // If we deleted the currently viewed note, clear the URL
+            if (previewNote?.uid === noteToDelete.uid) {
+                navigate('/notes', { replace: true });
+            }
         } catch (err) {
             console.error('Error deleting note:', err);
         }
     };
 
     const handleEditNote = (note: Note) => {
-        setSelectedNote(note);
-        setIsNoteModalOpen(true);
+        // Handle both lowercase and uppercase versions from Sequelize
+        const project = note.project || note.Project;
+        const tags = note.tags || note.Tags || [];
+
+        setEditingNote({
+            ...note,
+            project_uid: project?.uid || note.project_uid,
+            project: project,
+            tags: tags,
+        });
+        setIsEditing(true);
+        handleSelectNote(null);
+    };
+
+    const handleNewNote = () => {
+        setEditingNote({
+            title: '',
+            content: '',
+            tags: [],
+        });
+        setIsEditing(true);
+        handleSelectNote(null);
+    };
+
+    const handleSaveInlineNote = async () => {
+        if (!editingNote || !editingNote.title) return;
+
+        try {
+            // Add new tags to store if they don't exist
+            if (editingNote.tags && editingNote.tags.length > 0) {
+                const { tagsStore } = useStore.getState();
+                tagsStore.addNewTags(editingNote.tags.map((t) => t.name));
+            }
+
+            if (editingNote.uid) {
+                const savedNote = await updateNote(
+                    editingNote.uid,
+                    editingNote
+                );
+                const updatedNotes = notes.map((note) =>
+                    note.uid === editingNote.uid ? savedNote : note
+                );
+                setNotes(updatedNotes);
+                handleSelectNote(savedNote);
+            } else {
+                const newNote = await createNote(editingNote);
+                setNotes([newNote, ...notes]);
+                handleSelectNote(newNote);
+            }
+            setIsEditing(false);
+            setEditingNote(null);
+            setShowProjectDropdown(false);
+            setShowTagsInput(false);
+        } catch (err) {
+            console.error('Error saving note:', err);
+        }
+    };
+
+    const handleCancelEdit = () => {
+        setIsEditing(false);
+        setEditingNote(null);
+        setShowProjectDropdown(false);
+        setShowTagsInput(false);
+        if (previewNote) {
+            // If we were editing an existing note, go back to preview
+            handleSelectNote(previewNote);
+        }
+    };
+
+    const handleProjectButtonClick = (
+        e: React.MouseEvent<HTMLButtonElement>
+    ) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setShowProjectDropdown((prev) => !prev);
+        setShowTagsInput(false);
+    };
+
+    const handleTagsButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setShowTagsInput((prev) => !prev);
+        setShowProjectDropdown(false);
+    };
+
+    const handleColorChange = async (color: string, note: Note) => {
+        if (!ENABLE_NOTE_COLOR) return;
+        try {
+            const updatedNote = { ...note, color };
+
+            // Update local state immediately for instant feedback
+            if (previewNote?.uid === note.uid || !note.uid) {
+                setPreviewNote(updatedNote);
+            }
+            if (editingNote?.uid === note.uid || (isEditing && !note.uid)) {
+                setEditingNote(updatedNote);
+            }
+
+            // If note is saved, persist to backend
+            if (note.uid) {
+                const savedNote = await updateNote(note.uid, updatedNote);
+                const updatedNotes = notes.map((n) =>
+                    n.uid === note.uid ? savedNote : n
+                );
+                setNotes(updatedNotes);
+
+                // Update states with backend response
+                if (previewNote?.uid === note.uid) {
+                    setPreviewNote(savedNote);
+                }
+                if (editingNote?.uid === note.uid) {
+                    setEditingNote(savedNote);
+                }
+            }
+            setShowNoteOptionsDropdown(false);
+        } catch (err) {
+            console.error('Error updating note color:', err);
+        }
     };
 
     const handleSaveNote = async (noteData: Note) => {
@@ -96,39 +300,124 @@ const Notes: React.FC = () => {
         }
     };
 
-    const filteredNotes = notes.filter(
-        (note) =>
-            note.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-            note.content.toLowerCase().includes(searchQuery.toLowerCase())
-    );
+    const filteredNotes = useMemo(() => {
+        return notes.filter(
+            (note) =>
+                note.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                note.content.toLowerCase().includes(searchQuery.toLowerCase())
+        );
+    }, [notes, searchQuery]);
 
     // Sort the filtered notes
-    const sortedNotes = [...filteredNotes].sort((a, b) => {
-        const [field, direction] = orderBy.split(':');
-        const isAsc = direction === 'asc';
+    const sortedNotes = useMemo(() => {
+        return [...filteredNotes].sort((a, b) => {
+            const [field, direction] = orderBy.split(':');
+            const isAsc = direction === 'asc';
 
-        let valueA, valueB;
+            let valueA: string | number;
+            let valueB: string | number;
 
-        switch (field) {
-            case 'title':
-                valueA = a.title?.toLowerCase() || '';
-                valueB = b.title?.toLowerCase() || '';
-                break;
-            case 'updated_at':
-                valueA = a.updated_at ? new Date(a.updated_at).getTime() : 0;
-                valueB = b.updated_at ? new Date(b.updated_at).getTime() : 0;
-                break;
-            case 'created_at':
-            default:
-                valueA = a.created_at ? new Date(a.created_at).getTime() : 0;
-                valueB = b.created_at ? new Date(b.created_at).getTime() : 0;
-                break;
+            switch (field) {
+                case 'title':
+                    valueA = a.title?.toLowerCase() || '';
+                    valueB = b.title?.toLowerCase() || '';
+                    break;
+                case 'updated_at':
+                    valueA = a.updated_at
+                        ? new Date(a.updated_at).getTime()
+                        : 0;
+                    valueB = b.updated_at
+                        ? new Date(b.updated_at).getTime()
+                        : 0;
+                    break;
+                case 'created_at':
+                default:
+                    valueA = a.created_at
+                        ? new Date(a.created_at).getTime()
+                        : 0;
+                    valueB = b.created_at
+                        ? new Date(b.created_at).getTime()
+                        : 0;
+                    break;
+            }
+
+            if (valueA < valueB) return isAsc ? -1 : 1;
+            if (valueA > valueB) return isAsc ? 1 : -1;
+            return 0;
+        });
+    }, [filteredNotes, orderBy]);
+
+    // Load note from URL parameter
+    useEffect(() => {
+        if (uid && sortedNotes.length > 0 && !hasAutoSelected.current) {
+            const noteFromUrl = sortedNotes.find((note) => note.uid === uid);
+            if (noteFromUrl) {
+                setPreviewNote(noteFromUrl);
+                hasAutoSelected.current = true;
+            } else if (!previewNote) {
+                // If note not found and no note selected, select first note on desktop
+                const isDesktop = window.innerWidth >= 768;
+                if (isDesktop) {
+                    handleSelectNote(sortedNotes[0]);
+                    hasAutoSelected.current = true;
+                }
+            }
         }
+    }, [uid, sortedNotes]);
 
-        if (valueA < valueB) return isAsc ? -1 : 1;
-        if (valueA > valueB) return isAsc ? 1 : -1;
-        return 0;
-    });
+    // Auto-select first note when notes are loaded (only on desktop)
+    useEffect(() => {
+        if (
+            !uid &&
+            sortedNotes.length > 0 &&
+            !previewNote &&
+            !hasAutoSelected.current
+        ) {
+            // Check if we're on desktop (md breakpoint is 768px)
+            const isDesktop = window.innerWidth >= 768;
+            if (isDesktop) {
+                handleSelectNote(sortedNotes[0]);
+                hasAutoSelected.current = true;
+            }
+        }
+    }, [sortedNotes, previewNote, uid]);
+
+    // Handle clicking outside sort dropdown to close it
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (
+                sortDropdownRef.current &&
+                !sortDropdownRef.current.contains(event.target as Node)
+            ) {
+                setShowSortDropdown(false);
+            }
+            if (
+                noteOptionsDropdownRef.current &&
+                !noteOptionsDropdownRef.current.contains(event.target as Node)
+            ) {
+                setShowNoteOptionsDropdown(false);
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+        return () =>
+            document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    // Handle Escape key to save and close editor
+    useEffect(() => {
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === 'Escape' && isEditing) {
+                e.preventDefault();
+                if (editingNote?.title) {
+                    handleSaveInlineNote();
+                }
+            }
+        };
+
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [isEditing, editingNote]);
 
     if (isLoading) {
         return (
@@ -149,88 +438,781 @@ const Notes: React.FC = () => {
     }
 
     return (
-        <div className="flex justify-center px-4 lg:px-2">
-            <div className="w-full max-w-5xl">
-                {/* Notes Header */}
-                <div className="flex items-center mb-8">
-                    <h2 className="text-2xl font-light">{t('notes.title')}</h2>
-                </div>
+        <div className="flex flex-col h-[calc(100vh-6rem)] overflow-hidden">
+            <div className="flex-1 flex flex-col min-h-0 overflow-hidden pt-2">
+                {/* Two-Column Layout */}
+                <div className="flex flex-col md:flex-row flex-1 min-h-0 overflow-hidden">
+                    {/* Left Column - Notes List */}
+                    <div
+                        className={`${previewNote || isEditing ? 'hidden md:flex' : 'flex'} flex-col md:w-80 w-full h-full md:h-auto flex-shrink-0 min-h-0`}
+                    >
+                        {/* Notes Column Header */}
+                        <div className="flex items-center justify-between mb-2 mx-3 flex-shrink-0">
+                            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
+                                {t('notes.title')}
+                            </h3>
+                            <div className="flex items-center gap-2">
+                                {/* Sort Filter Dropdown */}
+                                <div className="relative" ref={sortDropdownRef}>
+                                    <button
+                                        onClick={() =>
+                                            setShowSortDropdown(
+                                                !showSortDropdown
+                                            )
+                                        }
+                                        className="p-1 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors"
+                                        aria-label="Sort notes"
+                                    >
+                                        <FunnelIcon className="h-5 w-5" />
+                                    </button>
+                                    {showSortDropdown && (
+                                        <div className="absolute right-0 mt-1 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-50">
+                                            <div className="px-3 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">
+                                                Sort by
+                                            </div>
+                                            <div className="py-1">
+                                                {sortOptions.map((option) => (
+                                                    <button
+                                                        key={option.value}
+                                                        onClick={() => {
+                                                            handleSortChange(
+                                                                option.value
+                                                            );
+                                                            setShowSortDropdown(
+                                                                false
+                                                            );
+                                                        }}
+                                                        className={`w-full text-left px-3 py-2 text-sm transition-colors ${
+                                                            orderBy ===
+                                                            option.value
+                                                                ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
+                                                                : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+                                                        }`}
+                                                    >
+                                                        {option.label}
+                                                    </button>
+                                                ))}
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                                <button
+                                    onClick={handleNewNote}
+                                    className="p-1 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors"
+                                    aria-label={t('notes.addNote', 'Add Note')}
+                                >
+                                    <PlusIcon className="h-5 w-5" />
+                                </button>
+                            </div>
+                        </div>
 
-                {/* Header with Search and Sort Controls */}
-                <div className="flex flex-col md:flex-row md:items-center justify-between mb-6 space-y-4 md:space-y-0">
-                    <div className="flex items-center space-x-2">
-                        {/* Search Toggle Button */}
-                        <button
-                            onClick={() =>
-                                setIsSearchExpanded(!isSearchExpanded)
-                            }
-                            className={`p-2 rounded-md focus:outline-none transition-colors ${
-                                isSearchExpanded
-                                    ? 'bg-blue-500 text-white'
-                                    : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
-                            }`}
-                            aria-label={t('common.search', 'Search')}
-                        >
-                            <MagnifyingGlassIcon className="h-5 w-5" />
-                        </button>
-                    </div>
+                        {/* Search Bar inside notes list */}
+                        <div className="mb-2 mx-3 flex-shrink-0">
+                            <div className="flex items-center bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md p-2">
+                                <MagnifyingGlassIcon className="h-4 w-4 text-gray-500 dark:text-gray-400 mr-2" />
+                                <input
+                                    type="text"
+                                    placeholder={t('notes.searchPlaceholder')}
+                                    value={searchQuery}
+                                    onChange={(e) =>
+                                        setSearchQuery(e.target.value)
+                                    }
+                                    className="w-full bg-transparent border-none focus:ring-0 focus:outline-none dark:text-white text-sm"
+                                />
+                            </div>
+                        </div>
 
-                    <div className="flex flex-col md:flex-row md:items-center md:space-x-4">
-                        {/* Sort Filter Button */}
-                        <div className="w-full md:w-auto">
-                            <SortFilterButton
-                                options={sortOptions}
-                                value={orderBy}
-                                onChange={handleSortChange}
-                                size="desktop"
-                            />
+                        <div className="space-y-0 overflow-y-auto flex-1 min-h-0">
+                            {sortedNotes.length === 0 ? (
+                                <div className="flex items-center justify-center h-full p-4">
+                                    <p className="text-gray-500 dark:text-gray-400 text-sm text-center">
+                                        {t('notes.noNotesFound')}
+                                    </p>
+                                </div>
+                            ) : (
+                                sortedNotes.map((note, index) => (
+                                    <div
+                                        key={note.uid}
+                                        onClick={() => handleSelectNote(note)}
+                                        className={`p-5 cursor-pointer transition-colors ${
+                                            previewNote?.uid === note.uid
+                                                ? 'bg-white dark:bg-gray-900 mb-1'
+                                                : index !==
+                                                    sortedNotes.length - 1
+                                                  ? 'border-b border-gray-200/50 dark:border-gray-700/50 hover:bg-gray-50 dark:hover:bg-gray-800'
+                                                  : 'hover:bg-gray-50 dark:hover:bg-gray-800'
+                                        }`}
+                                    >
+                                        <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">
+                                            {note.title ||
+                                                t(
+                                                    'notes.untitled',
+                                                    'Untitled Note'
+                                                )}
+                                        </h3>
+                                        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">
+                                            {note.content.substring(0, 100)}
+                                            {note.content.length > 100
+                                                ? '...'
+                                                : ''}
+                                        </p>
+                                        <div className="text-xs text-gray-400 dark:text-gray-500 mt-2">
+                                            {new Date(
+                                                note.updated_at ||
+                                                    note.created_at ||
+                                                    ''
+                                            ).toLocaleDateString()}
+                                        </div>
+                                    </div>
+                                ))
+                            )}
                         </div>
                     </div>
-                </div>
 
-                {/* Collapsible Search Bar */}
-                <div
-                    className={`transition-all duration-300 ease-in-out overflow-hidden ${
-                        isSearchExpanded
-                            ? 'max-h-20 opacity-100 mb-4'
-                            : 'max-h-0 opacity-0 mb-0'
-                    }`}
-                >
-                    <div className="flex items-center bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm p-2">
-                        <MagnifyingGlassIcon className="h-5 w-5 text-gray-500 dark:text-gray-400 mr-2" />
-                        <input
-                            type="text"
-                            placeholder={t('notes.searchPlaceholder')}
-                            value={searchQuery}
-                            onChange={(e) => setSearchQuery(e.target.value)}
-                            className="w-full bg-transparent border-none focus:ring-0 focus:outline-none dark:text-white"
-                        />
+                    {/* Right Column - Preview or Editor */}
+                    <div
+                        className={`${previewNote || isEditing ? 'flex' : 'hidden md:flex'} flex-1 flex-col overflow-hidden h-full rounded-md md:h-auto ${activeNoteColor ? '' : 'bg-white dark:bg-gray-900'}`}
+                        style={{
+                            backgroundColor: activeNoteColor || undefined,
+                        }}
+                    >
+                        {isEditing && editingNote ? (
+                            <div className="flex-1 flex flex-col overflow-hidden">
+                                {/* Editor Header - matches preview structure */}
+                                <div className="flex items-start justify-between mb-3 flex-shrink-0 px-6 md:px-8 pt-4">
+                                    <div className="flex-1">
+                                        {/* Back button for mobile */}
+                                        <button
+                                            onClick={() => {
+                                                if (editingNote.title) {
+                                                    handleSaveInlineNote();
+                                                } else {
+                                                    setShowDiscardDialog(true);
+                                                }
+                                            }}
+                                            className="md:hidden mb-2 text-blue-600 dark:text-blue-400 hover:underline text-sm"
+                                        >
+                                            ← {t('common.back', 'Back to list')}
+                                        </button>
+                                        <input
+                                            type="text"
+                                            value={editingNote.title || ''}
+                                            onChange={(e) =>
+                                                setEditingNote({
+                                                    ...editingNote,
+                                                    title: e.target.value,
+                                                })
+                                            }
+                                            onClick={(e) => e.stopPropagation()}
+                                            placeholder="Note title..."
+                                            className="w-full text-xl md:text-2xl font-bold bg-transparent text-gray-900 dark:text-gray-100 border-none focus:outline-none focus:ring-0 p-0 mb-1"
+                                            style={{
+                                                color: editingNoteColor
+                                                    ? shouldUseLightText(
+                                                          editingNoteColor
+                                                      )
+                                                        ? '#ffffff'
+                                                        : '#333333'
+                                                    : undefined,
+                                            }}
+                                            autoFocus
+                                        />
+                                        <div
+                                            className="flex flex-col md:flex-row md:flex-wrap md:items-center text-xs text-gray-500 dark:text-gray-400 space-y-1 md:space-y-0 md:gap-3 mb-2"
+                                            style={{
+                                                color: editingNoteColor
+                                                    ? shouldUseLightText(
+                                                          editingNoteColor
+                                                      )
+                                                        ? '#e0e0e0'
+                                                        : '#333333'
+                                                    : undefined,
+                                            }}
+                                        >
+                                            <div className="flex items-center">
+                                                <ClockIcon className="h-3 w-3 mr-1" />
+                                                <span>
+                                                    {editingNote.updated_at
+                                                        ? new Date(
+                                                              editingNote.updated_at
+                                                          ).toLocaleDateString()
+                                                        : 'New'}
+                                                </span>
+                                            </div>
+                                            <button
+                                                type="button"
+                                                onClick={
+                                                    handleProjectButtonClick
+                                                }
+                                                className="flex items-center hover:underline text-left"
+                                                title={
+                                                    editingNote.project
+                                                        ? 'Change project'
+                                                        : 'Add project'
+                                                }
+                                            >
+                                                <FolderIcon className="h-3 w-3 mr-1" />
+                                                {editingNote.project
+                                                    ? editingNote.project.name
+                                                    : 'Add project'}
+                                            </button>
+                                            <button
+                                                type="button"
+                                                onClick={handleTagsButtonClick}
+                                                className="flex items-center hover:underline text-left"
+                                                title={
+                                                    editingNote.tags &&
+                                                    editingNote.tags.length > 0
+                                                        ? 'Change tags'
+                                                        : 'Add tags'
+                                                }
+                                            >
+                                                <TagIconOutline className="h-3 w-3 mr-1" />
+                                                <span>
+                                                    {editingNote.tags &&
+                                                    editingNote.tags.length > 0
+                                                        ? editingNote.tags.map(
+                                                              (tag, idx) => (
+                                                                  <React.Fragment
+                                                                      key={idx}
+                                                                  >
+                                                                      {idx >
+                                                                          0 &&
+                                                                          ', '}
+                                                                      {tag.name}
+                                                                  </React.Fragment>
+                                                              )
+                                                          )
+                                                        : 'Add tags'}
+                                                </span>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div
+                                        className="relative"
+                                        ref={noteOptionsDropdownRef}
+                                    >
+                                        <button
+                                            onClick={() =>
+                                                setShowNoteOptionsDropdown(
+                                                    !showNoteOptionsDropdown
+                                                )
+                                            }
+                                            className="p-2 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                                            style={{
+                                                color: editingNoteColor
+                                                    ? shouldUseLightText(
+                                                          editingNoteColor
+                                                      )
+                                                        ? '#e0e0e0'
+                                                        : '#333333'
+                                                    : undefined,
+                                            }}
+                                            aria-label="Note options"
+                                        >
+                                            <EllipsisVerticalIcon className="h-5 w-5" />
+                                        </button>
+                                        {showNoteOptionsDropdown && (
+                                            <div className="absolute right-0 mt-1 w-56 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-50">
+                                                {ENABLE_NOTE_COLOR && (
+                                                    <div className="px-3 py-3 border-b border-gray-200 dark:border-gray-700">
+                                                        <div className="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-2">
+                                                            Background Color
+                                                        </div>
+                                                        <div className="grid grid-cols-5 gap-2">
+                                                            {NOTE_COLORS.map(
+                                                                (
+                                                                    colorOption
+                                                                ) => (
+                                                                    <button
+                                                                        key={
+                                                                            colorOption.value
+                                                                        }
+                                                                        onClick={() =>
+                                                                            handleColorChange(
+                                                                                colorOption.value,
+                                                                                editingNote
+                                                                            )
+                                                                        }
+                                                                        className={`w-8 h-8 rounded-md border-2 transition-all hover:scale-110 flex items-center justify-center ${
+                                                                            editingNote.color ===
+                                                                            colorOption.value
+                                                                                ? 'border-blue-500 dark:border-blue-400 ring-2 ring-blue-200 dark:ring-blue-800'
+                                                                                : 'border-gray-300 dark:border-gray-600'
+                                                                        }`}
+                                                                        style={{
+                                                                            backgroundColor:
+                                                                                colorOption.value ||
+                                                                                '#ffffff',
+                                                                        }}
+                                                                        title={
+                                                                            colorOption.name
+                                                                        }
+                                                                        aria-label={`Set background to ${colorOption.name}`}
+                                                                    >
+                                                                        {!colorOption.value && (
+                                                                            <XMarkIcon className="h-5 w-5 text-gray-400" />
+                                                                        )}
+                                                                    </button>
+                                                                )
+                                                            )}
+                                                        </div>
+                                                    </div>
+                                                )}
+                                                <div className="py-1">
+                                                    <button
+                                                        onClick={() => {
+                                                            if (
+                                                                editingNote.title
+                                                            ) {
+                                                                handleSaveInlineNote();
+                                                            } else {
+                                                                setShowDiscardDialog(
+                                                                    true
+                                                                );
+                                                            }
+                                                            setShowNoteOptionsDropdown(
+                                                                false
+                                                            );
+                                                        }}
+                                                        className="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                                                    >
+                                                        <PencilIcon className="h-4 w-4" />
+                                                        {t(
+                                                            'notes.save',
+                                                            'Save'
+                                                        )}
+                                                    </button>
+                                                    {editingNote.uid && (
+                                                        <button
+                                                            onClick={() => {
+                                                                setNoteToDelete(
+                                                                    editingNote
+                                                                );
+                                                                setIsConfirmDialogOpen(
+                                                                    true
+                                                                );
+                                                                setShowNoteOptionsDropdown(
+                                                                    false
+                                                                );
+                                                            }}
+                                                            className="w-full text-left px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                                                        >
+                                                            <TrashIcon className="h-4 w-4" />
+                                                            {t(
+                                                                'notes.delete',
+                                                                'Delete'
+                                                            )}
+                                                        </button>
+                                                    )}
+                                                </div>
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+
+                                {/* Project Dropdown */}
+                                {showProjectDropdown && (
+                                    <div className="mb-3 mx-4 p-3 bg-gray-50 dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 flex-shrink-0">
+                                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            Select Project
+                                        </label>
+                                        <select
+                                            value={
+                                                editingNote.project_uid || ''
+                                            }
+                                            onChange={(e) => {
+                                                const projectUid =
+                                                    e.target.value || null;
+                                                const selectedProject =
+                                                    projectUid
+                                                        ? projects.find(
+                                                              (p) =>
+                                                                  p.uid ===
+                                                                  projectUid
+                                                          )
+                                                        : undefined;
+                                                setEditingNote({
+                                                    ...editingNote,
+                                                    project_uid: projectUid,
+                                                    project:
+                                                        selectedProject as any,
+                                                });
+                                                setShowProjectDropdown(false);
+                                            }}
+                                            className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                                        >
+                                            <option value="">No Project</option>
+                                            {projects.map((project) => (
+                                                <option
+                                                    key={project.uid}
+                                                    value={project.uid}
+                                                >
+                                                    {project.name}
+                                                </option>
+                                            ))}
+                                        </select>
+                                    </div>
+                                )}
+
+                                {/* Tags Input */}
+                                {showTagsInput && (
+                                    <div className="mb-3 mx-4 p-3 bg-gray-50 dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 flex-shrink-0">
+                                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            Tags
+                                        </label>
+                                        <TagInput
+                                            initialTags={(
+                                                editingNote.tags ||
+                                                editingNote.Tags ||
+                                                []
+                                            ).map((t: any) => t.name)}
+                                            onTagsChange={(
+                                                tagNames: string[]
+                                            ) => {
+                                                setEditingNote({
+                                                    ...editingNote,
+                                                    tags: tagNames.map(
+                                                        (name: string) => ({
+                                                            name,
+                                                        })
+                                                    ),
+                                                });
+                                            }}
+                                            availableTags={useStore
+                                                .getState()
+                                                .tagsStore.getTags()}
+                                        />
+                                    </div>
+                                )}
+
+                                {/* Content Editor */}
+                                <div className="flex-1 overflow-y-auto px-6 md:px-8">
+                                    <textarea
+                                        value={editingNote.content || ''}
+                                        onChange={(e) =>
+                                            setEditingNote({
+                                                ...editingNote,
+                                                content: e.target.value,
+                                            })
+                                        }
+                                        onClick={(e) => e.stopPropagation()}
+                                        placeholder="Write your note content here... (Markdown supported)"
+                                        className="w-full h-full min-h-[300px] bg-transparent text-gray-900 dark:text-gray-100 border-none focus:outline-none focus:ring-0 resize-none py-4"
+                                        style={{
+                                            color: editingNoteColor
+                                                ? shouldUseLightText(
+                                                      editingNoteColor
+                                                  )
+                                                    ? '#ffffff'
+                                                    : '#333333'
+                                                : undefined,
+                                        }}
+                                    />
+                                </div>
+                            </div>
+                        ) : previewNote ? (
+                            <div className="flex-1 flex flex-col overflow-hidden">
+                                {/* Preview Header */}
+                                <div className="flex items-start justify-between mb-3 flex-shrink-0 px-6 md:px-8 pt-6">
+                                    <div className="flex-1">
+                                        {/* Back button for mobile */}
+                                        <button
+                                            onClick={() =>
+                                                handleSelectNote(null)
+                                            }
+                                            className="md:hidden mb-2 text-blue-600 dark:text-blue-400 hover:underline text-sm"
+                                        >
+                                            ← {t('common.back', 'Back to list')}
+                                        </button>
+                                        <h1
+                                            onClick={() =>
+                                                handleEditNote(previewNote)
+                                            }
+                                            className="text-xl md:text-2xl font-bold mb-1 cursor-pointer text-gray-900 dark:text-gray-100 transition-colors"
+                                            style={{
+                                                color: previewNoteColor
+                                                    ? shouldUseLightText(
+                                                          previewNoteColor
+                                                      )
+                                                        ? '#ffffff'
+                                                        : '#333333'
+                                                    : undefined,
+                                            }}
+                                            title="Click to edit"
+                                        >
+                                            {previewNote.title ||
+                                                t(
+                                                    'notes.untitled',
+                                                    'Untitled Note'
+                                                )}
+                                        </h1>
+                                        <div
+                                            className="flex flex-col md:flex-row md:flex-wrap md:items-center text-xs text-gray-500 dark:text-gray-400 space-y-1 md:space-y-0 md:gap-3 mb-2"
+                                            style={{
+                                                color: previewNoteColor
+                                                    ? shouldUseLightText(
+                                                          previewNoteColor
+                                                      )
+                                                        ? '#e0e0e0'
+                                                        : '#333333'
+                                                    : undefined,
+                                            }}
+                                        >
+                                            <div className="flex items-center">
+                                                <ClockIcon className="h-3 w-3 mr-1" />
+                                                <span>
+                                                    {new Date(
+                                                        previewNote.updated_at ||
+                                                            previewNote.created_at ||
+                                                            ''
+                                                    ).toLocaleDateString()}
+                                                </span>
+                                            </div>
+                                            {(previewNote.project ||
+                                                previewNote.Project) && (
+                                                <div className="flex items-center">
+                                                    <FolderIcon className="h-3 w-3 mr-1" />
+                                                    <Link
+                                                        to={
+                                                            (
+                                                                previewNote.project ||
+                                                                previewNote.Project
+                                                            )?.uid
+                                                                ? `/project/${(previewNote.project || previewNote.Project).uid}-${(
+                                                                      previewNote.project ||
+                                                                      previewNote.Project
+                                                                  )?.name
+                                                                      .toLowerCase()
+                                                                      .replace(
+                                                                          /[^a-z0-9]+/g,
+                                                                          '-'
+                                                                      )
+                                                                      .replace(
+                                                                          /^-|-$/g,
+                                                                          ''
+                                                                      )}`
+                                                                : `/project/${(previewNote.project || previewNote.Project)?.id}`
+                                                        }
+                                                        className="hover:underline"
+                                                        onClick={(e) =>
+                                                            e.stopPropagation()
+                                                        }
+                                                    >
+                                                        {
+                                                            (
+                                                                previewNote.project ||
+                                                                previewNote.Project
+                                                            )?.name
+                                                        }
+                                                    </Link>
+                                                </div>
+                                            )}
+                                            {((previewNote.tags &&
+                                                previewNote.tags.length > 0) ||
+                                                (previewNote.Tags &&
+                                                    previewNote.Tags.length >
+                                                        0)) && (
+                                                <div className="flex items-center">
+                                                    <TagIconOutline className="h-3 w-3 mr-1" />
+                                                    <span>
+                                                        {(
+                                                            previewNote.tags ||
+                                                            previewNote.Tags ||
+                                                            []
+                                                        ).map((tag, idx) => (
+                                                            <React.Fragment
+                                                                key={tag.name}
+                                                            >
+                                                                {idx > 0 &&
+                                                                    ', '}
+                                                                <Link
+                                                                    to={
+                                                                        tag.uid
+                                                                            ? `/tag/${tag.uid}-${tag.name
+                                                                                  .toLowerCase()
+                                                                                  .replace(
+                                                                                      /[^a-z0-9]+/g,
+                                                                                      '-'
+                                                                                  )
+                                                                                  .replace(
+                                                                                      /^-|-$/g,
+                                                                                      ''
+                                                                                  )}`
+                                                                            : `/tag/${tag.name
+                                                                                  .toLowerCase()
+                                                                                  .replace(
+                                                                                      /[^a-z0-9]+/g,
+                                                                                      '-'
+                                                                                  )
+                                                                                  .replace(
+                                                                                      /^-|-$/g,
+                                                                                      ''
+                                                                                  )}`
+                                                                    }
+                                                                    className="hover:underline"
+                                                                    onClick={(
+                                                                        e
+                                                                    ) =>
+                                                                        e.stopPropagation()
+                                                                    }
+                                                                >
+                                                                    {tag.name}
+                                                                </Link>
+                                                            </React.Fragment>
+                                                        ))}
+                                                    </span>
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                    <div
+                                        className="relative"
+                                        ref={noteOptionsDropdownRef}
+                                    >
+                                        <button
+                                            onClick={() =>
+                                                setShowNoteOptionsDropdown(
+                                                    !showNoteOptionsDropdown
+                                                )
+                                            }
+                                            className="p-2 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                                            style={{
+                                                color: previewNoteColor
+                                                    ? shouldUseLightText(
+                                                          previewNoteColor
+                                                      )
+                                                        ? '#e0e0e0'
+                                                        : '#333333'
+                                                    : undefined,
+                                            }}
+                                            aria-label="Note options"
+                                        >
+                                            <EllipsisVerticalIcon className="h-5 w-5" />
+                                        </button>
+                                        {showNoteOptionsDropdown && (
+                                            <div className="absolute right-0 mt-1 w-56 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-50">
+                                                {ENABLE_NOTE_COLOR && (
+                                                    <div className="px-3 py-3 border-b border-gray-200 dark:border-gray-700">
+                                                        <div className="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-2">
+                                                            Background Color
+                                                        </div>
+                                                        <div className="grid grid-cols-5 gap-2">
+                                                            {NOTE_COLORS.map(
+                                                                (
+                                                                    colorOption
+                                                                ) => (
+                                                                    <button
+                                                                        key={
+                                                                            colorOption.value
+                                                                        }
+                                                                        onClick={() =>
+                                                                            handleColorChange(
+                                                                                colorOption.value,
+                                                                                previewNote
+                                                                            )
+                                                                        }
+                                                                        className={`w-8 h-8 rounded-md border-2 transition-all hover:scale-110 flex items-center justify-center ${
+                                                                            previewNote.color ===
+                                                                            colorOption.value
+                                                                                ? 'border-blue-500 dark:border-blue-400 ring-2 ring-blue-200 dark:ring-blue-800'
+                                                                                : 'border-gray-300 dark:border-gray-600'
+                                                                        }`}
+                                                                        style={{
+                                                                            backgroundColor:
+                                                                                colorOption.value ||
+                                                                                '#ffffff',
+                                                                        }}
+                                                                        title={
+                                                                            colorOption.name
+                                                                        }
+                                                                        aria-label={`Set background to ${colorOption.name}`}
+                                                                    >
+                                                                        {!colorOption.value && (
+                                                                            <XMarkIcon className="h-5 w-5 text-gray-400" />
+                                                                        )}
+                                                                    </button>
+                                                                )
+                                                            )}
+                                                        </div>
+                                                    </div>
+                                                )}
+                                                <div className="py-1">
+                                                    <button
+                                                        onClick={() => {
+                                                            handleEditNote(
+                                                                previewNote
+                                                            );
+                                                            setShowNoteOptionsDropdown(
+                                                                false
+                                                            );
+                                                        }}
+                                                        className="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                                                    >
+                                                        <PencilIcon className="h-4 w-4" />
+                                                        {t(
+                                                            'notes.edit',
+                                                            'Edit'
+                                                        )}
+                                                    </button>
+                                                    <button
+                                                        onClick={() => {
+                                                            setNoteToDelete(
+                                                                previewNote
+                                                            );
+                                                            setIsConfirmDialogOpen(
+                                                                true
+                                                            );
+                                                            setShowNoteOptionsDropdown(
+                                                                false
+                                                            );
+                                                        }}
+                                                        className="w-full text-left px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                                                    >
+                                                        <TrashIcon className="h-4 w-4" />
+                                                        {t(
+                                                            'notes.delete',
+                                                            'Delete'
+                                                        )}
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+
+                                {/* Preview Content */}
+                                <div
+                                    onClick={() => handleEditNote(previewNote)}
+                                    className="text-sm md:text-base flex-1 overflow-y-auto cursor-pointer px-6 md:px-8 py-4 text-gray-900 dark:text-gray-100"
+                                    style={{
+                                        color: previewNoteColor
+                                            ? shouldUseLightText(
+                                                  previewNoteColor
+                                              )
+                                                ? '#ffffff'
+                                                : '#333333'
+                                            : undefined,
+                                    }}
+                                    title="Click to edit"
+                                >
+                                    <MarkdownRenderer
+                                        content={previewNote.content}
+                                        noteColor={previewNoteColor}
+                                    />
+                                </div>
+                            </div>
+                        ) : (
+                            <div className="flex items-center justify-center flex-1 text-gray-500 dark:text-gray-400">
+                                {t(
+                                    'notes.selectNote',
+                                    'Select a note to preview'
+                                )}
+                            </div>
+                        )}
                     </div>
                 </div>
 
-                {/* Notes Grid */}
-                {sortedNotes.length === 0 ? (
-                    <p className="text-gray-700 dark:text-gray-300">
-                        {t('notes.noNotesFound')}
-                    </p>
-                ) : (
-                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-                        {sortedNotes.map((note) => (
-                            <NoteCard
-                                key={note.uid}
-                                note={note}
-                                onEdit={handleEditNote}
-                                onDelete={(note) => {
-                                    setNoteToDelete(note);
-                                    setIsConfirmDialogOpen(true);
-                                }}
-                                showActions={true}
-                                showProject={true}
-                            />
-                        ))}
-                    </div>
-                )}
-
                 {/* NoteModal */}
                 {isNoteModalOpen && (
                     <NoteModal
@@ -286,6 +1268,17 @@ const Notes: React.FC = () => {
                         onCancel={() => setIsConfirmDialogOpen(false)}
                     />
                 )}
+
+                {/* DiscardChangesDialog */}
+                {showDiscardDialog && (
+                    <DiscardChangesDialog
+                        onDiscard={() => {
+                            setShowDiscardDialog(false);
+                            handleCancelEdit();
+                        }}
+                        onCancel={() => setShowDiscardDialog(false)}
+                    />
+                )}
             </div>
         </div>
     );
diff --git a/frontend/components/Shared/MarkdownRenderer.tsx b/frontend/components/Shared/MarkdownRenderer.tsx
index 0722217..740e318 100644
--- a/frontend/components/Shared/MarkdownRenderer.tsx
+++ b/frontend/components/Shared/MarkdownRenderer.tsx
@@ -9,6 +9,7 @@ interface MarkdownRendererProps {
     className?: string;
     summaryMode?: boolean;
     onContentChange?: (newContent: string) => void;
+    noteColor?: string;
 }
 
 const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
@@ -16,7 +17,22 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
     className = '',
     summaryMode = false,
     onContentChange,
+    noteColor,
 }) => {
+    // Determine text color based on background
+    const getTextColor = () => {
+        if (!noteColor) return undefined;
+
+        const hex = noteColor.replace('#', '');
+        const r = parseInt(hex.substr(0, 2), 16);
+        const g = parseInt(hex.substr(2, 2), 16);
+        const b = parseInt(hex.substr(4, 2), 16);
+        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+        return luminance < 0.4 ? '#ffffff' : '#333333';
+    };
+
+    const textColor = getTextColor();
     useEffect(() => {
         // Configure highlight.js
         hljs.configure({
@@ -92,72 +108,108 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
                     h1: ({ ...props }) =>
                         summaryMode ? (
                             <strong
-                                className="font-semibold text-gray-900 dark:text-gray-100"
+                                className={`font-semibold ${!noteColor ? 'text-gray-900 dark:text-gray-100' : ''}`}
+                                style={{
+                                    color: textColor,
+                                }}
                                 {...props}
                             />
                         ) : (
                             <h1
-                                className="text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100"
+                                className={`text-3xl font-bold mb-4 ${!noteColor ? 'text-gray-900 dark:text-gray-100' : ''}`}
+                                style={{
+                                    color: textColor,
+                                }}
                                 {...props}
                             />
                         ),
                     h2: ({ ...props }) =>
                         summaryMode ? (
                             <strong
-                                className="font-semibold text-gray-900 dark:text-gray-100"
+                                className={`font-semibold ${!noteColor ? 'text-gray-900 dark:text-gray-100' : ''}`}
+                                style={{
+                                    color: textColor,
+                                }}
                                 {...props}
                             />
                         ) : (
                             <h2
-                                className="text-2xl font-semibold mb-3 text-gray-900 dark:text-gray-100"
+                                className={`text-2xl font-semibold mb-3 ${!noteColor ? 'text-gray-900 dark:text-gray-100' : ''}`}
+                                style={{
+                                    color: textColor,
+                                }}
                                 {...props}
                             />
                         ),
                     h3: ({ ...props }) =>
                         summaryMode ? (
                             <strong
-                                className="font-semibold text-gray-900 dark:text-gray-100"
+                                className={`font-semibold ${!noteColor ? 'text-gray-900 dark:text-gray-100' : ''}`}
+                                style={{
+                                    color: textColor,
+                                }}
                                 {...props}
                             />
                         ) : (
                             <h3
-                                className="text-xl font-medium mb-2 text-gray-900 dark:text-gray-100"
+                                className={`text-xl font-medium mb-2 ${!noteColor ? 'text-gray-900 dark:text-gray-100' : ''}`}
+                                style={{
+                                    color: textColor,
+                                }}
                                 {...props}
                             />
                         ),
                     h4: ({ ...props }) =>
                         summaryMode ? (
                             <strong
-                                className="font-semibold text-gray-900 dark:text-gray-100"
+                                className={`font-semibold ${!noteColor ? 'text-gray-900 dark:text-gray-100' : ''}`}
+                                style={{
+                                    color: textColor,
+                                }}
                                 {...props}
                             />
                         ) : (
                             <h4
-                                className="text-lg font-medium mb-2 text-gray-900 dark:text-gray-100"
+                                className={`text-lg font-medium mb-2 ${!noteColor ? 'text-gray-900 dark:text-gray-100' : ''}`}
+                                style={{
+                                    color: textColor,
+                                }}
                                 {...props}
                             />
                         ),
                     h5: ({ ...props }) =>
                         summaryMode ? (
                             <strong
-                                className="font-semibold text-gray-900 dark:text-gray-100"
+                                className={`font-semibold ${!noteColor ? 'text-gray-900 dark:text-gray-100' : ''}`}
+                                style={{
+                                    color: textColor,
+                                }}
                                 {...props}
                             />
                         ) : (
                             <h5
-                                className="text-base font-medium mb-2 text-gray-900 dark:text-gray-100"
+                                className={`text-base font-medium mb-2 ${!noteColor ? 'text-gray-900 dark:text-gray-100' : ''}`}
+                                style={{
+                                    color: textColor,
+                                }}
                                 {...props}
                             />
                         ),
                     h6: ({ ...props }) =>
                         summaryMode ? (
                             <strong
-                                className="font-semibold text-gray-900 dark:text-gray-100"
+                                className={`font-semibold ${!noteColor ? 'text-gray-900 dark:text-gray-100' : ''}`}
+                                style={{
+                                    color: textColor,
+                                }}
                                 {...props}
                             />
                         ) : (
                             <h6
-                                className="text-sm font-medium mb-2 text-gray-900 dark:text-gray-100"
+                                className={`text-sm font-medium mb-2 ${!noteColor ? 'text-gray-900 dark:text-gray-100' : ''}`}
+                                style={{
+                                    color: textColor,
+                                }}
                                 {...props}
                             />
                         ),
@@ -165,7 +217,10 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
                     // Customize paragraph styles
                     p: ({ ...props }) => (
                         <p
-                            className="mb-3 text-gray-700 dark:text-gray-300 leading-relaxed"
+                            className={`mb-3 leading-relaxed ${!noteColor ? 'text-gray-700 dark:text-gray-300' : ''}`}
+                            style={{
+                                color: textColor,
+                            }}
                             {...props}
                         />
                     ),
@@ -173,17 +228,35 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
                     // Customize list styles
                     ul: ({ ...props }) => (
                         <ul
-                            className="mb-3 list-disc list-inside space-y-1 text-gray-700 dark:text-gray-300"
+                            className={`mb-3 list-disc ml-4 pl-5 space-y-1 ${!noteColor ? 'text-gray-700 dark:text-gray-300' : ''}`}
+                            style={{
+                                color: textColor,
+                            }}
                             {...props}
                         />
                     ),
                     ol: ({ ...props }) => (
                         <ol
-                            className="mb-3 list-decimal list-inside space-y-1 text-gray-700 dark:text-gray-300"
+                            className={`mb-3 list-decimal ml-4 pl-5 space-y-1 ${!noteColor ? 'text-gray-700 dark:text-gray-300' : ''}`}
+                            style={{
+                                color: textColor,
+                            }}
+                            {...props}
+                        />
+                    ),
+                    li: ({ ...props }) => (
+                        <li
+                            className={
+                                !noteColor
+                                    ? 'text-gray-700 dark:text-gray-300'
+                                    : ''
+                            }
+                            style={{
+                                color: textColor,
+                            }}
                             {...props}
                         />
                     ),
-                    li: ({ ...props }) => <li className="ml-4" {...props} />,
 
                     // Customize link styles
                     a: ({ ...props }) => (
@@ -225,7 +298,7 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
                             }
                             return (
                                 <code
-                                    className="px-1 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-sm font-mono text-gray-900 dark:text-gray-100"
+                                    className="py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-sm font-mono text-gray-900 dark:text-gray-100"
                                     {...props}
                                 >
                                     {children}
@@ -293,7 +366,10 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
                     // Customize strong/bold text
                     strong: ({ ...props }) => (
                         <strong
-                            className="font-semibold text-gray-900 dark:text-gray-100"
+                            className={`font-semibold ${!noteColor ? 'text-gray-900 dark:text-gray-100' : ''}`}
+                            style={{
+                                color: textColor,
+                            }}
                             {...props}
                         />
                     ),
@@ -301,7 +377,10 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
                     // Customize italic text
                     em: ({ ...props }) => (
                         <em
-                            className="italic text-gray-700 dark:text-gray-300"
+                            className={`italic ${!noteColor ? 'text-gray-700 dark:text-gray-300' : ''}`}
+                            style={{
+                                color: textColor,
+                            }}
                             {...props}
                         />
                     ),
diff --git a/frontend/config/featureFlags.ts b/frontend/config/featureFlags.ts
new file mode 100644
index 0000000..0a3bd8b
--- /dev/null
+++ b/frontend/config/featureFlags.ts
@@ -0,0 +1,21 @@
+const parseBooleanFlag = (
+    value: string | undefined,
+    defaultValue: boolean
+): boolean => {
+    if (value === undefined) return defaultValue;
+    const normalized = value.toString().toLowerCase();
+    return !['false', '0', 'off', 'no'].includes(normalized);
+};
+
+export const ENABLE_NOTE_COLOR = parseBooleanFlag(
+    process.env.ENABLE_NOTE_COLOR,
+    false
+);
+
+export type FeatureFlags = {
+    ENABLE_NOTE_COLOR: boolean;
+};
+
+export const featureFlags: FeatureFlags = {
+    ENABLE_NOTE_COLOR,
+};
diff --git a/frontend/entities/Note.ts b/frontend/entities/Note.ts
index c1d7432..1760f5f 100644
--- a/frontend/entities/Note.ts
+++ b/frontend/entities/Note.ts
@@ -9,6 +9,7 @@ export interface Note {
     updated_at?: string;
     project_id?: number; // Foreign key for project (deprecated, use project_uid)
     project_uid?: string; // Foreign key for project by uid
+    color?: string; // Background color for the note
     tags?: Tag[];
     Tags?: Tag[]; // Sequelize association naming (capitalized)
     project?: {
diff --git a/frontend/index.tsx b/frontend/index.tsx
index 5f54851..e7c01cd 100644
--- a/frontend/index.tsx
+++ b/frontend/index.tsx
@@ -1,10 +1,3 @@
-// Add type declaration for module.hot
-declare const module: {
-    hot?: {
-        accept: (path: string, callback: () => void) => void;
-    };
-};
-
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
@@ -16,6 +9,29 @@ import './styles/markdown.css'; // Import markdown styles
 import { I18nextProvider } from 'react-i18next';
 import i18n from './i18n'; // Import the i18n instance with its configuration
 
+const isDevelopment = process.env.NODE_ENV !== 'production';
+
+// Clear out any lingering service workers/caches from other branches (e.g. PWA)
+if (isDevelopment && 'serviceWorker' in navigator) {
+    navigator.serviceWorker.getRegistrations().then((registrations) => {
+        registrations.forEach((registration) => {
+            registration.unregister().catch(() => {
+                // Non-fatal during development cleanup
+            });
+        });
+    });
+
+    if ('caches' in window) {
+        caches.keys().then((cacheNames) => {
+            cacheNames.forEach((cacheName) => {
+                caches.delete(cacheName).catch(() => {
+                    // Ignore cache cleanup failures during dev
+                });
+            });
+        });
+    }
+}
+
 const storedPreference = localStorage.getItem('isDarkMode');
 const prefersDarkMode = window.matchMedia(
     '(prefers-color-scheme: dark)'
@@ -32,11 +48,8 @@ if (isDarkMode) {
 
 const container = document.getElementById('root');
 
-// Store the root outside the if block so it can be accessed by the HMR code
-let root: any;
-
 if (container) {
-    root = createRoot(container);
+    const root = createRoot(container);
     root.render(
         <I18nextProvider i18n={i18n}>
             <BrowserRouter>
@@ -49,24 +62,3 @@ if (container) {
         </I18nextProvider>
     );
 }
-
-// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
-// Learn more: https://www.webpackjs.com/concepts/hot-module-replacement/
-if (module.hot) {
-    module.hot.accept('./App', () => {
-        // New version of App component imported
-        if (root) {
-            root.render(
-                <I18nextProvider i18n={i18n}>
-                    <BrowserRouter>
-                        <ToastProvider>
-                            <TelegramStatusProvider>
-                                <App />
-                            </TelegramStatusProvider>
-                        </ToastProvider>
-                    </BrowserRouter>
-                </I18nextProvider>
-            );
-        }
-    });
-}
diff --git a/webpack.config.js b/webpack.config.js
index 710fe93..797266b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,8 +1,8 @@
 const path = require('path');
-const webpack = require('webpack');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const webpack = require('webpack');
 
 const isDevelopment = process.env.NODE_ENV !== 'production';
 
@@ -63,6 +63,16 @@ module.exports = {
   plugins: [
     isDevelopment && new ReactRefreshWebpackPlugin(),
     isDevelopment && new webpack.HotModuleReplacementPlugin(),
+    new webpack.DefinePlugin(
+      Object.fromEntries(
+        Object.entries({
+          ENABLE_NOTE_COLOR: process.env.ENABLE_NOTE_COLOR,
+        }).map(([key, value]) => [
+          `process.env.${key}`,
+          JSON.stringify(value),
+        ])
+      )
+    ),
     new HtmlWebpackPlugin({
       title: 'tududi',
       filename: 'index.html',