diff --git a/shaarli-pro/css/custom_views.css b/shaarli-pro/css/custom_views.css
index be58d36..e97c697 100644
--- a/shaarli-pro/css/custom_views.css
+++ b/shaarli-pro/css/custom_views.css
@@ -4,11 +4,11 @@
 
 /* Theme tokens for custom views */
 :root {
-    --special-view-panel-bg: var(--bg-card);
-    --special-view-panel-alt: color-mix(in srgb, var(--bg-card) 85%, var(--bg-body));
-    --special-view-border: var(--border);
+    --special-view-panel-bg: var(--tile-bg, var(--bg-card));
+    --special-view-panel-alt: color-mix(in srgb, var(--tile-bg, var(--bg-card)) 85%, var(--bg-body));
+    --special-view-border: var(--tile-border, var(--border));
     --special-view-divider: var(--border-light);
-    --special-view-shadow: var(--shadow-md);
+    --special-view-shadow: var(--tile-shadow, var(--shadow-md));
     --special-view-muted: var(--text-secondary);
     --special-view-strong: var(--text-main);
     --special-view-chip-bg: color-mix(in srgb, var(--primary) 12%, transparent);
@@ -199,8 +199,27 @@ body.view-archive .content-container {
     column-count: 4;
     column-gap: 16px;
     width: 100%;
+    max-width: 1600px;
+    margin: 0 auto;
 }
 
+/* Responsive masonry columns based on viewport */
+@media (max-width: 1400px) {
+    .notes-masonry { column-count: 3; }
+}
+@media (max-width: 1024px) {
+    .notes-masonry { column-count: 2; }
+}
+@media (max-width: 640px) {
+    .notes-masonry { column-count: 1; }
+}
+
+/* Collapse empty columns when only a few notes/todos exist
+   (prevents the large empty right-side area seen with 1 item) */
+.notes-masonry:has(.note-card:first-child:last-child) { column-count: 1; }
+.notes-masonry:has(.note-card:nth-child(2):last-child) { column-count: 2; }
+.notes-masonry:has(.note-card:nth-child(3):last-child) { column-count: 3; }
+
 .notes-masonry .note-card {
     display: inline-block;
     width: 100%;
@@ -640,4 +659,213 @@ body.view-todo .note-card.todo-card .todo-checklist-preview-wrap {
 
 .todo-add-item-btn:hover {
     opacity: 1;
+}
+
+/* =========================================================
+   Notes / Todos views — UX polish (professional layout)
+   ========================================================= */
+
+/* Content container for notes & todos: centered, sensible max */
+body.view-notes .content-container,
+body.view-todo .content-container,
+body.view-archive .content-container {
+    padding: 1.75rem clamp(1rem, 3vw, 2.5rem);
+}
+
+/* Results filter banner ("N résultat(s) tagué(s) ...") */
+body.view-notes .linklist-filters,
+body.view-todo .linklist-filters,
+body.view-archive .linklist-filters {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    max-width: max-content;
+    margin: 0 0 1.25rem;
+    padding: 0.45rem 0.85rem;
+    border-radius: 9999px;
+    background: var(--special-view-chip-bg);
+    color: var(--special-view-strong);
+    font-size: 0.85rem;
+    font-weight: 500;
+    border: 1px solid var(--special-view-border);
+}
+
+/* Notes/todos top bar: center input, keep view switch on the right */
+.notes-top-bar {
+    position: relative;
+    gap: 1rem;
+    align-items: center;
+    max-width: 1600px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.notes-top-bar .notes-tools {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+/* Compact editor when collapsed */
+.note-input-container {
+    width: min(760px, 100%);
+    transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.note-input-container:hover {
+    box-shadow: var(--tile-shadow-hover, var(--shadow-md));
+}
+
+.note-input-container.is-editing {
+    box-shadow: var(--tile-shadow-hover, var(--shadow-md));
+    border-color: color-mix(in srgb, var(--primary) 40%, var(--special-view-border));
+}
+
+/* Expanded editor inputs */
+.note-input-container input[type="text"],
+.note-input-container textarea {
+    width: 100%;
+    border: 0;
+    background: transparent;
+    color: var(--special-view-strong);
+    padding: 10px 14px;
+    font-size: 1rem;
+    font-family: inherit;
+    outline: none;
+}
+
+.note-input-container textarea {
+    resize: vertical;
+    min-height: 120px;
+    line-height: 1.45;
+}
+
+.note-input-container input[type="text"]::placeholder,
+.note-input-container textarea::placeholder {
+    color: var(--special-view-muted);
+}
+
+/* Toolbar / action rows inside the note/todo create form */
+.note-input-container .note-editor-toolbar,
+.note-input-container .note-input-actions,
+.note-input-container .todo-editor-toolbar {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 4px;
+    padding: 6px 10px;
+    border-top: 1px solid var(--special-view-divider);
+    background: color-mix(in srgb, var(--special-view-panel-bg) 88%, var(--bg-body));
+}
+
+.note-input-container .icon-btn,
+.note-input-container button:not(.btn):not([class*="note-close"]):not([class*="submit"]) {
+    background: transparent;
+    border: 0;
+    color: var(--special-view-strong);
+    border-radius: 6px;
+    padding: 6px 8px;
+    font-size: 0.85rem;
+    cursor: pointer;
+    line-height: 1;
+    transition: background 0.15s ease;
+}
+
+.note-input-container .icon-btn:hover,
+.note-input-container button:not(.btn):not([class*="note-close"]):not([class*="submit"]):hover {
+    background: color-mix(in srgb, var(--text-main) 10%, transparent);
+}
+
+/* "Fermer" footer button */
+.note-input-container .note-close-btn,
+.note-input-container [data-action="close"] {
+    background: var(--special-view-panel-alt);
+    color: var(--special-view-strong);
+    border: 1px solid var(--special-view-border);
+    border-radius: 8px;
+    padding: 6px 12px;
+    font-size: 0.85rem;
+    cursor: pointer;
+}
+
+.note-input-container .note-close-btn:hover,
+.note-input-container [data-action="close"]:hover {
+    background: var(--tile-bg-hover, var(--bg-card-hover));
+}
+
+/* Todo checklist row inside creation form */
+.note-input-container .todo-checklist-row {
+    padding: 4px 10px;
+    border-radius: 0;
+    border-bottom: 1px solid var(--special-view-divider);
+}
+
+.note-input-container .todo-checklist-row:last-of-type {
+    border-bottom: 0;
+}
+
+.note-input-container .todo-item-text {
+    padding: 8px 6px;
+}
+
+/* Note cards: padding & typography polish */
+.note-card .note-title {
+    font-weight: 600;
+    font-size: 1rem;
+    line-height: 1.3;
+    margin: 0 0 6px;
+    color: inherit;
+}
+
+.note-card .note-body {
+    font-size: 0.9rem;
+    line-height: 1.5;
+}
+
+/* Tag chips inside note cards */
+.note-card .note-tag,
+.note-card .link-tag {
+    background: color-mix(in srgb, var(--primary) 14%, transparent);
+    color: var(--special-view-chip-text);
+    border-radius: 9999px;
+    padding: 2px 8px;
+    font-size: 0.72rem;
+    font-weight: 500;
+    border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
+}
+
+/* Hover state for note cards */
+.notes-masonry .note-card {
+    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
+}
+
+.notes-masonry .note-card:hover {
+    box-shadow: var(--tile-shadow-hover, var(--shadow-lg));
+    border-color: color-mix(in srgb, var(--primary) 35%, var(--special-view-border));
+    transform: translateY(-1px);
+}
+
+/* Ensure note cards respect theme colors even when no color tag present */
+.note-card:not([class*="note-color-"]) {
+    color: var(--special-view-strong);
+}
+
+/* Todo view-specific: single-column empty-state nicety */
+body.view-todo .notes-masonry:empty::after {
+    content: "Aucune tâche pour le moment.";
+    display: block;
+    padding: 3rem 1rem;
+    text-align: center;
+    color: var(--special-view-muted);
+    font-size: 0.95rem;
+}
+
+body.view-notes .notes-masonry:empty::after {
+    content: "Aucune note pour le moment.";
+    display: block;
+    padding: 3rem 1rem;
+    text-align: center;
+    color: var(--special-view-muted);
+    font-size: 0.95rem;
 }
\ No newline at end of file
diff --git a/shaarli-pro/css/style.css b/shaarli-pro/css/style.css
index f566b80..060ac84 100644
--- a/shaarli-pro/css/style.css
+++ b/shaarli-pro/css/style.css
@@ -4594,4 +4594,64 @@ table {
     .search-results {
         max-height: calc(90vh - 200px);
     }
+}
+
+/* =========================================================
+   Tile contrast fix (bookmarks/notes/todos)
+   Dark themes: --bg-card is too close to --bg-body; lift
+   tiles using --surface-variant and reinforce borders so
+   each theme provides visible tile contrast.
+   ========================================================= */
+:root {
+    --tile-bg: var(--bg-card);
+    --tile-bg-hover: var(--bg-card-hover);
+    --tile-border: var(--border);
+    --tile-shadow: var(--shadow-sm);
+    --tile-shadow-hover: var(--shadow-md);
+}
+
+[data-theme="dark"] {
+    --tile-bg: var(--surface-variant, var(--bg-card));
+    --tile-bg-hover: color-mix(in srgb, var(--surface-variant, var(--bg-card)) 82%, var(--primary) 18%);
+    --tile-border: color-mix(in srgb, var(--outline-variant, var(--border)) 70%, var(--text-main) 30%);
+    --tile-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
+    --tile-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.55);
+}
+
+/* Grid & list cards */
+.link-outer {
+    background: var(--tile-bg);
+    border-color: var(--tile-border);
+    box-shadow: var(--tile-shadow);
+}
+
+.link-outer:hover {
+    border-color: var(--primary);
+    box-shadow: var(--tile-shadow-hover);
+}
+
+.view-list .link-outer {
+    background: var(--tile-bg);
+    border-color: var(--tile-border);
+    box-shadow: var(--tile-shadow);
+}
+
+/* Compact (table) view */
+.links-list.view-compact {
+    background: var(--tile-bg);
+    border-color: var(--tile-border);
+    box-shadow: var(--tile-shadow);
+}
+
+.view-compact .link-outer {
+    border-bottom: 1px solid var(--tile-border);
+}
+
+.view-compact .link-outer:hover {
+    background: var(--tile-bg-hover);
+}
+
+.view-compact .compact-table-head {
+    background: color-mix(in srgb, var(--tile-bg) 78%, var(--bg-body) 22%);
+    border-bottom: 1px solid var(--tile-border);
 }
\ No newline at end of file