fuckin around with styling

crates/weaver-app/assets/styling/entry-card.css

···
 /* Entry card styling */
 
-.entries-list {
-    max-width: 800px;
+/* Notebook layout - sidebar in left gutter on desktop, header on mobile */
+.notebook-layout {
+    display: grid;
+    grid-template-columns: minmax(280px, 1fr) minmax(0, 90ch) minmax(280px, 1fr);
+    gap: 2rem;
+    max-width: calc(90ch + 560px + 4rem); /* content + gutters + gaps */
     margin: 0 auto;
-    padding: 2rem 1rem;
+    padding: 2.5rem 1.25rem 2.5rem 0;
+}
+
+.notebook-sidebar {
+    grid-column: 1;
+    position: sticky;
+    top: 2rem;
+    align-self: flex-start;
+    max-height: calc(100vh - 4rem);
+    overflow-y: auto;
+}
+
+.notebook-main {
+    grid-column: 2;
+    padding: 0 1rem;
+}
+
+/* Mobile layout - sidebar becomes header */
+@media (max-width: 1400px) {
+    .notebook-layout {
+        grid-template-columns: 1fr !important;
+        gap: 0 !important;
+        max-width: 100vw !important;
+        box-sizing: border-box !important;
+    }
+
+    .notebook-sidebar {
+        grid-column: 1;
+        position: static;
+        max-height: none;
+        min-width: 0;
+    }
+
+    .notebook-main {
+        grid-column: 1;
+        padding: 1.25rem;
+        min-width: 0;
+    }
+}
+
+/* Entries list - width constrained by grid column */
+.entries-list {
 }
 
 .entry-card {
···
 .entry-card-link {
     display: block;
     background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: 6px;
+    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 6%, transparent);
+    border-left: 2px solid transparent;
     padding: 1.25rem;
     text-decoration: none;
     color: var(--color-text);
-    transition: all 0.2s ease;
+    transition:
+        box-shadow 0.2s ease,
+        border-color 0.2s ease;
 }
 
 .entry-card-link:hover {
-    background: var(--color-overlay);
-    border-color: var(--color-secondary);
-    box-shadow: 0 2px 6px color-mix(in srgb, var(--color-secondary) 8%, transparent);
-    transform: translateY(-1px);
+    box-shadow: 0 2px 4px color-mix(in srgb, var(--color-text) 10%, transparent);
+    border-left-color: var(--color-secondary);
+}
+
+.entry-card-link:hover .entry-card-title {
+    color: var(--color-secondary);
 }
 
 .entry-card-header {
···
     color: var(--color-primary);
     margin: 0;
     font-family: var(--font-heading);
+    transition: color 0.2s ease;
 }
 
 .entry-card-meta {
···
 }
 
 .entry-card-tag {
-    padding: 0.2rem 0.5rem;
-    background: var(--color-base);
-    border: 1px solid var(--color-border);
-    border-radius: 3px;
+    padding: 0.2rem 0.4rem 0.2rem 0;
     font-size: 0.75rem;
     color: var(--color-subtle);
-    transition: all 0.15s ease;
+    border-bottom: 1px solid var(--color-border);
+    transition:
+        color 0.15s ease,
+        border-color 0.15s ease;
 }
 
 .entry-card-link:hover .entry-card-tag {
-    background: var(--color-surface);
+    color: var(--color-tertiary);
     border-color: var(--color-tertiary);
 }
 
···
 .entry-card-preview code {
     font-size: 0.8rem;
 }
+
+/* Dark mode: replace shadows with borders */
+@media (prefers-color-scheme: dark) {
+    .entry-card-link {
+        box-shadow: none;
+        border: 1px solid var(--color-border);
+    }
+}

crates/weaver-app/assets/styling/entry.css

···
 /* Entry page layout with gutter navigation */
 .entry-page-layout {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(0, 90ch) minmax(0, 1fr);
-    gap: 0;
+    grid-template-columns: minmax(200px, 1fr) minmax(0, 90ch) minmax(200px, 1fr);
+    gap: 2rem;
     width: 100%;
     min-height: 100vh;
     background: var(--color-base);
+    max-width: calc(90ch + 400px + 4rem); /* content + gutters + gaps */
+    margin: 0 auto;
+    padding: 0 1rem 0 0;
 }
 
 /* Main content area */
···
 .nav-gutter {
     position: sticky;
     top: auto;
-    bottom: calc(2rem * var(--spacing-scale, 1.5));
+    bottom: 2rem;
     height: fit-content;
     align-self: end;
 }
 
 .nav-prev {
     grid-column: 1;
-    padding-left: calc(1rem * var(--spacing-scale, 1.5));
 }
 
 .nav-next {
     grid-column: 3;
-    padding-right: calc(1rem * var(--spacing-scale, 1.5));
 }
 
 /* Navigation buttons */
 .nav-button {
     display: flex;
     flex-direction: column;
-    gap: calc(0.5rem * var(--spacing-scale, 1.5));
-    padding: calc(1rem * var(--spacing-scale, 1.5));
+    gap: 0.5rem;
+    padding: 1rem;
     background: var(--color-surface);
-    border: 2px solid var(--color-border);
-    border-radius: 4px;
+    box-shadow: 0 1px 3px color-mix(in srgb, var(--color-text) 8%, transparent);
     text-decoration: none;
     color: var(--color-text);
-    transition: all 0.2s ease;
+    transition:
+        box-shadow 0.2s ease,
+        border-color 0.2s ease;
 }
 
 .nav-button:hover {
-    background: var(--color-overlay);
-    border-color: var(--color-primary);
-    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 20%, transparent);
+    box-shadow: 0 2px 6px color-mix(in srgb, var(--color-text) 12%, transparent);
+}
+
+/* Dark mode: borders instead of shadows */
+@media (prefers-color-scheme: dark) {
+    .nav-button {
+        box-shadow: none;
+        border: 1px dashed var(--color-border);
+    }
+
+    .nav-button:hover {
+        box-shadow: none;
+        border-color: var(--color-primary);
+    }
 }
 
 .nav-button-prev {
···
     color: var(--color-emphasis);
 }
 
-.nav-label {
-    font-size: 0.875rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--color-subtle);
-    transition: color 0.2s ease;
-}
-
 .nav-button:hover .nav-label {
     color: var(--color-secondary);
 }
···
 .nav-title {
     font-size: 0.95rem;
     font-weight: 500;
-    max-width: 20ch;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    line-height: 1.4;
 }
 
 /* Entry metadata header */
···
 }
 
 .entry-tag {
-    padding: 0.25rem 0.75rem;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: 3px;
+    padding: 0.25rem 0.5rem 0.25rem 0;
     font-size: 0.85rem;
     color: var(--color-subtle);
+    border-bottom: 1px solid var(--color-border);
     text-decoration: none;
-    transition: all 0.2s ease;
+    transition:
+        color 0.2s ease,
+        border-color 0.2s ease;
 }
 
 .entry-tag:hover {
-    background: var(--color-overlay);
+    color: var(--color-tertiary);
     border-color: var(--color-tertiary);
-    color: var(--color-text);
 }
 
 /* Content styling */
···
 }
 
 /* Responsive layout */
-@media (max-width: 1200px) {
+@media (max-width: 1400px) {
     .entry-page-layout {
         grid-template-columns: 1fr;
         gap: 0;

crates/weaver-app/assets/styling/main.css

···
     margin: 20px;
 }
 
-#hero {
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-#links {
-    width: 400px;
-    text-align: left;
-    font-size: x-large;
-    color: var(--color-text);
-    display: flex;
-    flex-direction: column;
-}
-
-#links a {
-    color: var(--color-link);
-    text-decoration: none;
-    margin-top: 20px;
-    margin: 10px 0px;
-    border: 1px solid var(--color-border);
-    border-radius: 5px;
-    padding: 10px;
-    transition: all 0.2s ease;
-}
-
-#links a:hover {
-    background-color: var(--color-surface);
-    border-color: var(--color-primary);
-    cursor: pointer;
-}
-
 #header {
     max-width: 1200px;
-}
+}

crates/weaver-app/assets/styling/notebook-card.css

···
 /* Notebook card styling */
 
-.notebooks-list {
-    max-width: 800px;
+/* Repository layout - sidebar in left gutter on desktop, header on mobile */
+
+.repository-layout {
+    display: grid;
+    grid-template-columns: minmax(240px, 1fr) minmax(0, 90ch) minmax(240px, 1fr);
+    gap: 2rem;
+    max-width: calc(90ch + 480px + 4rem); /* content + gutters + gaps */
     margin: 0 auto;
-    padding: 2rem 1rem;
+    padding: 2.25rem 1.25rem 2.25rem 0;
+}
+
+.repository-sidebar {
+    grid-column: 1;
+    position: sticky;
+    top: 2rem;
+    align-self: flex-start;
+    overflow-y: auto;
+}
+
+.repository-main {
+    grid-column: 2;
+    padding: 0 1rem;
+}
+
+/* Mobile layout - sidebar becomes header */
+@media (max-width: 1400px) {
+    .repository-layout {
+        grid-template-columns: 1fr !important;
+        gap: 0 !important;
+        max-width: 100vw !important;
+        box-sizing: border-box !important;
+    }
+
+    .repository-sidebar {
+        grid-column: 1;
+        position: static;
+        max-height: none;
+        min-width: 0;
+        margin-bottom: 2rem;
+    }
+
+    .repository-main {
+        grid-column: 1;
+        padding: 0;
+        min-width: 0;
+    }
+}
+
+/* Notebook list - width constrained by grid column */
+.notebooks-list {
+    margin-top: 0.25rem;
 }
 
 .notebook-card {
-    margin-bottom: calc(1.5rem * var(--spacing-scale, 1.25));
+    margin-bottom: 2.5rem; /* 2 grid units */
+}
+
+.notebook-card-container {
+    background: var(--color-surface);
+    box-shadow: 0 1px 3px color-mix(in srgb, var(--color-text) 8%, transparent);
+    padding: 1.25rem;
 }
 
-.notebook-card-link {
+.notebook-card-header-link {
     display: block;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: 8px;
-    padding: 1.5rem;
     text-decoration: none;
     color: var(--color-text);
-    transition: all 0.2s ease;
+    border-left: 3px solid transparent;
+    padding-left: 0.75rem;
+    margin-left: -0.75rem;
+    transition: border-color 0.2s ease;
+}
+
+.notebook-card-header-link:hover {
+    border-left-color: var(--color-primary);
 }
 
-.notebook-card-link:hover {
-    background: var(--color-overlay);
-    border-color: var(--color-primary);
+.notebook-card-header-link:hover .notebook-card-title {
+    color: var(--color-secondary);
 }
 
 .notebook-card-header {
-    margin-bottom: 1rem;
+    margin-bottom: 1.25rem;
+    padding-bottom: 1.25rem;
+    border-bottom: 2px solid var(--color-border);
 }
 
 .notebook-card-title {
···
     color: var(--color-primary);
     margin: 0 0 0.5rem 0;
     font-family: var(--font-heading);
+    transition: color 0.2s ease;
 }
 
-.notebook-card-description {
+.notebook-card-date {
     color: var(--color-muted);
-    line-height: 1.5;
-    margin: 0;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
+    font-size: 0.85rem;
 }
 
-.notebook-card-meta {
+.notebook-card-authors {
     display: flex;
-    align-items: center;
-    gap: 1rem;
     flex-wrap: wrap;
-    margin-bottom: 0.75rem;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
     font-size: 0.9rem;
     color: var(--color-subtle);
 }
 
-.notebook-card-author {
+.author-separator {
+    color: var(--color-muted);
+}
+
+/* Entry previews within notebook card */
+.notebook-card-previews {
     display: flex;
-    align-items: center;
-    gap: 0.5rem;
+    flex-direction: column;
+    margin-bottom: 0; /* Let card padding handle bottom spacing */
 }
 
-.notebook-card-author .author-name {
-    font-weight: 500;
+.notebook-entry-preview-link {
+    display: block;
+    text-decoration: none;
     color: var(--color-text);
+    border-left: 2px solid transparent;
+    border-top: 1px solid var(--color-border);
+    padding-left: 0.625rem; /* 0.5 grid */
+    padding-top: 1.25rem;
+    margin-left: -0.625rem;
+    transition: border-left-color 0.2s ease;
 }
 
-.notebook-card-date {
-    margin-left: auto;
+.notebook-entry-preview-link:first-child {
+    border-top: none;
+    padding-top: 0;
+}
+
+.notebook-entry-preview-link:hover {
+    border-left-color: var(--color-secondary);
+}
+
+.notebook-entry-preview-link:hover .entry-preview-title {
+    color: var(--color-secondary);
+}
+
+.notebook-entry-preview {
+    padding-bottom: 1.25rem;
+}
+
+.entry-preview-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.entry-preview-title {
+    color: var(--color-text);
+    font-weight: 600;
+    font-size: 0.95rem;
+    flex: 1;
+    transition: color 0.2s ease;
+}
+
+.entry-preview-date {
+    color: var(--color-muted);
+    font-size: 0.8rem;
+    white-space: nowrap;
+}
+
+.notebook-entry-interstitial {
+    text-align: center;
     color: var(--color-muted);
     font-size: 0.85rem;
+    padding: 1rem 0;
+    font-style: italic;
+}
+
+.entry-preview-content {
+    color: var(--color-subtle);
+    font-size: 0.875rem;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    max-width: 100%;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+.entry-preview-content p {
+    margin: 0;
+    display: inline;
+}
+
+.entry-preview-content h1,
+.entry-preview-content h2,
+.entry-preview-content h3,
+.entry-preview-content h4,
+.entry-preview-content h5,
+.entry-preview-content h6 {
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin: 0;
+}
+
+.entry-preview-content code {
+    font-size: 0.8rem;
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+
+.entry-preview-content pre {
+    white-space: pre-wrap;
+    word-break: break-all;
+    max-width: 100%;
 }
 
 .notebook-card-tags {
···
 }
 
 .notebook-card-tag {
-    padding: 0.25rem 0.625rem;
-    background: var(--color-base);
-    border: 1px solid var(--color-border);
-    border-radius: 3px;
+    padding: 0.25rem 0.5rem 0.25rem 0;
     font-size: 0.8rem;
     color: var(--color-subtle);
-    transition: all 0.15s ease;
+    border-bottom: 1px solid var(--color-border);
+    transition:
+        color 0.15s ease,
+        border-color 0.15s ease;
 }
 
 .notebook-card-link:hover .notebook-card-tag {
-    background: var(--color-surface);
+    color: var(--color-tertiary);
     border-color: var(--color-tertiary);
 }
 
···
     -webkit-box-orient: vertical;
     overflow: hidden;
 }
+
+/* Dark mode: replace shadows with borders */
+@media (prefers-color-scheme: dark) {
+    .notebook-card-container {
+        box-shadow: none;
+        border: 1px dashed var(--color-border);
+    }
+}

crates/weaver-app/assets/styling/notebook-cover.css

···
+/* Notebook cover - sidebar on desktop, header on mobile */
+
+.notebook-cover {
+    /* No background - same plane as page */
+}
+
+/* Desktop: sidebar gets top and right borders */
+@media (min-width: 1400px) {
+    .notebook-cover {
+        border-top: 1px solid var(--color-border);
+        border-right: 1px solid var(--color-border);
+        border-bottom: 1px solid var(--color-border);
+        padding: 1.25rem;
+    }
+}
+
+/* Mobile: header gets top and bottom borders */
+@media (max-width: 1400px) {
+    .notebook-cover {
+        border-top: 1px solid var(--color-border);
+        border-bottom: 1px solid var(--color-border);
+        padding: 1.25rem 0;
+        margin-bottom: 2rem;
+    }
+}
+
+.notebook-cover-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--color-primary);
+    margin: 0 0 1rem 0;
+    font-family: var(--font-heading);
+}
+
+.notebook-cover-authors {
+    margin-bottom: 1.25rem;
+}
+
+.notebook-authors-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.author-separator {
+    display: none;
+}
+
+.notebook-author {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.notebook-author .avatar {
+    width: 48px;
+    height: 48px;
+    flex-shrink: 0;
+}
+
+.notebook-author-info {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.notebook-author-name {
+    font-weight: 600;
+    color: var(--color-text);
+    font-size: 1rem;
+}
+
+.notebook-author-handle {
+    color: var(--color-subtle);
+    font-size: 0.875rem;
+}
+
+.notebook-cover-description {
+    color: var(--color-text);
+    line-height: 1.6;
+    margin-bottom: 1rem;
+    white-space: pre-wrap;
+}
+
+.notebook-cover-meta {
+    display: flex;
+    gap: 1.5rem;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
+    font-size: 0.9rem;
+    color: var(--color-subtle);
+}
+
+.notebook-cover-stat {
+    font-weight: 500;
+}
+
+.notebook-cover-tags {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.notebook-cover-tag {
+    padding: 0.25rem 0.5rem 0.25rem 0;
+    font-size: 0.85rem;
+    color: var(--color-subtle);
+    border-bottom: 1px solid var(--color-border);
+}

crates/weaver-app/assets/styling/profile.css

···
 /* Profile display - sidebar on desktop, header on mobile */
 
 .profile-display {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: 4px;
+    margin-top: 0.25rem;
+    max-width: 100%;
+    /* No background - same plane as page */
+}
+
+/* Desktop: sidebar gets top and right borders */
+@media (min-width: 1400px) {
+    .profile-display {
+        border-top: 1.5px dashed var(--color-border);
+        border-right: 1.5px dashed var(--color-border);
+    }
+}
+
+/* Mobile: header gets top and bottom borders */
+@media (max-width: 1400px) {
+    .profile-display {
+        border-top: 1.5px dashed var(--color-border);
+        border-bottom: 1.5px solid var(--color-border);
+    }
 }
 
 .profile-banner {
-    width: 100%;
+    max-width: 100%;
     height: 120px;
     overflow: hidden;
-    border-radius: 4px 4px 0 0;
 }
 
 .profile-banner img {
···
 }
 
 .profile-content {
-    padding: 1.5rem;
+    padding: 1.25rem;
 }
 
 .profile-identity {
-    margin-bottom: 1.5rem;
+    margin-bottom: 1.25rem; /* Grid unit */
 }
 
 .profile-identity .avatar {
···
 
 .profile-description {
     color: var(--color-text);
+    font-size: 0.875rem;
     line-height: 1.5;
     margin-top: 0.75rem;
     white-space: pre-wrap;
···
 .profile-stats {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-    gap: 1rem;
-    padding: 1rem 0;
-    margin: 1rem 0;
-    border-top: 1px solid var(--color-border);
-    border-bottom: 1px solid var(--color-border);
+    gap: 1.25rem;
+    padding: 1.25rem 0;
+    margin: 1.25rem 0;
+    border-top: 1.5px dashed var(--color-border);
+    border-bottom: 1.5px dashed var(--color-border);
 }
 
 .profile-stat {
···
         font-size: 1.25rem;
     }
 }
+
+@media (prefers-color-scheme: dark) {
+    .profile-display {
+        background-color: var(--color-surface);
+        border: 1px dashed var(--color-border);
+    }
+}

crates/weaver-app/assets/styling/theme-defaults.css

···
     --color-link: #d7827e;
     --color-highlight: #cecacd;
 
-    --font-body: IBM Plex, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    --font-heading: IBM Plex Sans, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    --font-mono: 'IBM Plex Mono', 'Berkeley Mono', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
+    --font-body: IBM Plex, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-heading: IBM Plex Sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-mono: "IBM Plex Mono", "Berkeley Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
 
     --spacing-base: 16px;
     --spacing-line-height: 1.6;
···
         --color-link: #ebbcba;
         --color-highlight: #524f67;
     }
+
 }

crates/weaver-app/src/components/entry.rs

···
             }
 
             // Main content area
-            div { class: "entry-content-main",
+            div { class: "entry-content-main notebook-content",
                 // Metadata header
                 EntryMetadata {
                     entry_view: entry_view.clone(),
···
 }
 
 #[component]
-pub fn EntryCard(entry: BookEntryView<'static>, book_title: SmolStr) -> Element {
+pub fn EntryCard(
+    entry: BookEntryView<'static>,
+    book_title: SmolStr,
+    author_count: usize,
+) -> Element {
     use crate::Route;
     use jacquard::{from_data, IntoStatic};
     use weaver_api::sh_weaver::notebook::entry::Entry;
···
         .format("%B %d, %Y")
         .to_string();
 
-    // Get first author for display
-    let first_author = entry_view.authors.first();
+    // Only show author if notebook has multiple authors
+    let show_author = author_count > 1;
+    let first_author = if show_author {
+        entry_view.authors.first()
+    } else {
+        None
+    };
 
     // Render preview from entry content
     let preview_html = from_data::<Entry>(&entry_view.record).ok().map(|entry| {
···
         .as_ref()
         .map(|t| t.as_ref())
         .unwrap_or("Untitled");
-
-    let label = if direction == "prev" {
-        "← Previous"
-    } else {
-        "Next →"
-    };
     let arrow = if direction == "prev" { "←" } else { "→" };
 
     rsx! {
···
             },
             class: "nav-button nav-button-{direction}",
             div { class: "nav-arrow", "{arrow}" }
-            div { class: "nav-label", "{label}" }
             div { class: "nav-title", "{entry_title}" }
         }
     }

crates/weaver-app/src/components/identity.rs

···
 use crate::{fetch, Route};
 use dioxus::prelude::*;
-use jacquard::types::ident::AtIdentifier;
+use jacquard::{smol_str::SmolStr, types::ident::AtIdentifier};
+use weaver_api::com_atproto::repo::strong_ref::StrongRef;
 use weaver_api::sh_weaver::notebook::NotebookView;
 
 const NOTEBOOK_CARD_CSS: Asset = asset!("/assets/styling/notebook-card.css");
···
 
 #[component]
 pub fn RepositoryIndex(ident: AtIdentifier<'static>) -> Element {
+    use crate::components::ProfileDisplay;
+
     let fetcher = use_context::<fetch::CachedFetcher>();
 
     // Fetch notebooks for this specific DID
···
     }));
 
     rsx! {
-        document::Link { rel: "stylesheet", href: NOTEBOOK_CARD_CSS }
+        document::Stylesheet { href: NOTEBOOK_CARD_CSS }
+
+        div { class: "repository-layout",
+            // Profile sidebar (desktop) / header (mobile)
+            aside { class: "repository-sidebar",
+                ProfileDisplay { ident: ident.clone() }
+            }
 
-        div { class: "notebooks-list",
-            match notebooks() {
-                Some(Ok(notebook_list)) => rsx! {
-                    for notebook in notebook_list.iter() {
-                        {
-                            let view = &notebook.0;
-                            rsx! {
-                                div {
-                                    key: "{view.cid}",
-                                    NotebookCard { notebook: view.clone() }
+            // Main content area
+            main { class: "repository-main",
+                div { class: "notebooks-list",
+                    match notebooks() {
+                        Some(Ok(notebook_list)) => rsx! {
+                            for notebook in notebook_list.iter() {
+                                {
+                                    let view = &notebook.0;
+                                    let entries = &notebook.1;
+                                    rsx! {
+                                        div {
+                                            key: "{view.cid}",
+                                            NotebookCard {
+                                                notebook: view.clone(),
+                                                entry_refs: entries.clone()
+                                            }
+                                        }
+                                    }
                                 }
                             }
+                        },
+                        Some(Err(_)) => rsx! {
+                            div { "Error loading notebooks" }
+                        },
+                        None => rsx! {
+                            div { "Loading notebooks..." }
                         }
                     }
-                },
-                Some(Err(_)) => rsx! {
-                    div { "Error loading notebooks" }
-                },
-                None => rsx! {
-                    div { "Loading notebooks..." }
                 }
             }
         }
···
 }
 
 #[component]
-pub fn NotebookCard(notebook: NotebookView<'static>) -> Element {
-    use crate::components::avatar::{Avatar, AvatarImage};
+pub fn NotebookCard(
+    notebook: NotebookView<'static>,
+    entry_refs: Vec<StrongRef<'static>>,
+) -> Element {
     use jacquard::IntoStatic;
+
+    let fetcher = use_context::<fetch::CachedFetcher>();
 
     let title = notebook
         .title
···
     // Format date
     let formatted_date = notebook.indexed_at.as_ref().format("%B %d, %Y").to_string();
 
-    // Get first author for display
-    let first_author = notebook.authors.first();
+    // Show authors only if multiple
+    let show_authors = notebook.authors.len() > 1;
 
     let ident = notebook.uri.authority().clone().into_static();
+    let book_title: SmolStr = title.to_string().into();
+
+    // Fetch all entries to get first/last
+    let ident_for_fetch = ident.clone();
+    let book_title_for_fetch = book_title.clone();
+    let entries = use_resource(use_reactive!(|(ident_for_fetch, book_title_for_fetch)| {
+        let fetcher = fetcher.clone();
+        async move {
+            fetcher
+                .list_notebook_entries(ident_for_fetch, book_title_for_fetch)
+                .await
+                .ok()
+                .flatten()
+        }
+    }));
     rsx! {
         div { class: "notebook-card",
-            Link {
-                to: Route::Entry {
-                    ident,
-                    book_title: title.to_string().into(),
-                    title: "".into() // Will redirect to first entry
-                },
-                class: "notebook-card-link",
+            div { class: "notebook-card-container",
 
-                div { class: "notebook-card-header",
-                    h2 { class: "notebook-card-title", "{title}" }
+                Link {
+                    to: Route::Entry {
+                        ident: ident.clone(),
+                        book_title: title.to_string().into(),
+                        title: "".into() // Will redirect to first entry
+                    },
+                    class: "notebook-card-header-link",
+
+                    div { class: "notebook-card-header",
+                        h2 { class: "notebook-card-title", "{title}" }
+
+                        div { class: "notebook-card-date",
+                            time { datetime: "{notebook.indexed_at.as_str()}", "{formatted_date}" }
+                        }
+                    }
                 }
 
-                div { class: "notebook-card-meta",
-                    if let Some(author) = first_author {
-                        div { class: "notebook-card-author",
+                // Show authors only if multiple
+                if show_authors {
+                    div { class: "notebook-card-authors",
+                        for (i, author) in notebook.authors.iter().enumerate() {
+                            if i > 0 { span { class: "author-separator", ", " } }
                             {
                                 use weaver_api::sh_weaver::actor::ProfileDataViewInner;
 
                                 match &author.record.inner {
                                     ProfileDataViewInner::ProfileView(profile) => {
-                                        let display_name = profile.display_name.as_ref().map(|n| n.as_ref()).unwrap_or("Unknown");
+                                        let display_name = profile.display_name.as_ref()
+                                            .map(|n| n.as_ref())
+                                            .unwrap_or("Unknown");
                                         rsx! {
-                                            if let Some(ref avatar_url) = profile.avatar {
-                                                Avatar {
-                                                    AvatarImage { src: avatar_url.as_ref() }
-                                                }
-                                            }
                                             span { class: "author-name", "{display_name}" }
                                         }
                                     }
                                     ProfileDataViewInner::ProfileViewDetailed(profile) => {
-                                        let display_name = profile.display_name.as_ref().map(|n| n.as_ref()).unwrap_or("Unknown");
+                                        let display_name = profile.display_name.as_ref()
+                                            .map(|n| n.as_ref())
+                                            .unwrap_or("Unknown");
                                         rsx! {
-                                            if let Some(ref avatar_url) = profile.avatar {
-                                                Avatar {
-                                                    AvatarImage { src: avatar_url.as_ref() }
-                                                }
-                                            }
                                             span { class: "author-name", "{display_name}" }
                                         }
                                     }
···
                                             span { class: "author-name", "@{profile.handle.as_ref()}" }
                                         }
                                     }
-                                    _ => {
-                                        rsx! {
-                                            span { class: "author-name", "Unknown" }
-                                        }
+                                    _ => rsx! {
+                                        span { class: "author-name", "Unknown" }
                                     }
                                 }
                             }
                         }
                     }
+                }
 
-                    div { class: "notebook-card-date",
-                        time { datetime: "{notebook.indexed_at.as_str()}", "{formatted_date}" }
+                // Entry previews section
+                if let Some(Some(entry_list)) = entries() {
+                    div { class: "notebook-card-previews",
+                        {
+                            use jacquard::from_data;
+                            use weaver_api::sh_weaver::notebook::entry::Entry;
+
+                            if entry_list.len() <= 5 {
+                                // Show all entries if 5 or fewer
+                                rsx! {
+                                    for (i, entry_view) in entry_list.iter().enumerate() {
+                                        {
+                                            let entry_title = entry_view.entry.title.as_ref()
+                                                .map(|t| t.as_ref())
+                                                .unwrap_or("Untitled");
+
+                                            let preview_html = from_data::<Entry>(&entry_view.entry.record).ok().map(|entry| {
+                                                let parser = markdown_weaver::Parser::new(&entry.content);
+                                                let mut html_buf = String::new();
+                                                markdown_weaver::html::push_html(&mut html_buf, parser);
+                                                html_buf
+                                            });
+
+                                            let created_at = from_data::<Entry>(&entry_view.entry.record).ok()
+                                                .map(|entry| entry.created_at.as_ref().format("%B %d, %Y").to_string());
+
+                                            rsx! {
+                                                Link {
+                                                    to: Route::Entry {
+                                                        ident: ident.clone(),
+                                                        book_title: book_title.clone(),
+                                                        title: entry_title.to_string().into()
+                                                    },
+                                                    class: "notebook-entry-preview-link",
+
+                                                    div { class: "notebook-entry-preview",
+                                                        div { class: "entry-preview-header",
+                                                            div { class: "entry-preview-title", "{entry_title}" }
+                                                            if let Some(ref date) = created_at {
+                                                                div { class: "entry-preview-date", "{date}" }
+                                                            }
+                                                        }
+                                                        if let Some(ref html) = preview_html {
+                                                            div { class: "entry-preview-content", dangerous_inner_html: "{html}" }
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            } else {
+                                // Show first, interstitial, and last
+                                rsx! {
+                                    if let Some(first_entry) = entry_list.first() {
+                                        {
+                                            let entry_title = first_entry.entry.title.as_ref()
+                                                .map(|t| t.as_ref())
+                                                .unwrap_or("Untitled");
+
+                                            let preview_html = from_data::<Entry>(&first_entry.entry.record).ok().map(|entry| {
+                                                let parser = markdown_weaver::Parser::new(&entry.content);
+                                                let mut html_buf = String::new();
+                                                markdown_weaver::html::push_html(&mut html_buf, parser);
+                                                html_buf
+                                            });
+
+                                            let created_at = from_data::<Entry>(&first_entry.entry.record).ok()
+                                                .map(|entry| entry.created_at.as_ref().format("%B %d, %Y").to_string());
+
+                                            rsx! {
+                                                Link {
+                                                    to: Route::Entry {
+                                                        ident: ident.clone(),
+                                                        book_title: book_title.clone(),
+                                                        title: entry_title.to_string().into()
+                                                    },
+                                                    class: "notebook-entry-preview-link",
+
+                                                    div { class: "notebook-entry-preview notebook-entry-preview-first",
+                                                        div { class: "entry-preview-header",
+                                                            div { class: "entry-preview-title", "{entry_title}" }
+                                                            if let Some(ref date) = created_at {
+                                                                div { class: "entry-preview-date", "{date}" }
+                                                            }
+                                                        }
+                                                        if let Some(ref html) = preview_html {
+                                                            div { class: "entry-preview-content", dangerous_inner_html: "{html}" }
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+
+                                    // Interstitial showing count
+                                    {
+                                        let middle_count = entry_list.len().saturating_sub(2);
+                                        rsx! {
+                                            div { class: "notebook-entry-interstitial",
+                                                "... {middle_count} more "
+                                                if middle_count == 1 { "entry" } else { "entries" }
+                                                " ..."
+                                            }
+                                        }
+                                    }
+
+                                    if let Some(last_entry) = entry_list.last() {
+                                        {
+                                            let entry_title = last_entry.entry.title.as_ref()
+                                                .map(|t| t.as_ref())
+                                                .unwrap_or("Untitled");
+
+                                            let preview_html = from_data::<Entry>(&last_entry.entry.record).ok().map(|entry| {
+                                                let parser = markdown_weaver::Parser::new(&entry.content);
+                                                let mut html_buf = String::new();
+                                                markdown_weaver::html::push_html(&mut html_buf, parser);
+                                                html_buf
+                                            });
+
+                                            let created_at = from_data::<Entry>(&last_entry.entry.record).ok()
+                                                .map(|entry| entry.created_at.as_ref().format("%B %d, %Y").to_string());
+
+                                            rsx! {
+                                                Link {
+                                                    to: Route::Entry {
+                                                        ident: ident.clone(),
+                                                        book_title: book_title.clone(),
+                                                        title: entry_title.to_string().into()
+                                                    },
+                                                    class: "notebook-entry-preview-link",
+
+                                                    div { class: "notebook-entry-preview notebook-entry-preview-last",
+                                                        div { class: "entry-preview-header",
+                                                            div { class: "entry-preview-title", "{entry_title}" }
+                                                            if let Some(ref date) = created_at {
+                                                                div { class: "entry-preview-date", "{date}" }
+                                                            }
+                                                        }
+                                                        if let Some(ref html) = preview_html {
+                                                            div { class: "entry-preview-content", dangerous_inner_html: "{html}" }
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
                     }
                 }
 

crates/weaver-app/src/components/mod.rs

···
 
 pub mod profile;
 pub use profile::ProfileDisplay;
+
+pub mod notebook_cover;
+pub use notebook_cover::NotebookCover;

crates/weaver-app/src/components/notebook_cover.rs

···
+#![allow(non_snake_case)]
+
+use crate::components::avatar::{Avatar, AvatarImage};
+use dioxus::prelude::*;
+use jacquard::types::ident::AtIdentifier;
+use weaver_api::sh_weaver::notebook::NotebookView;
+
+const NOTEBOOK_COVER_CSS: Asset = asset!("/assets/styling/notebook-cover.css");
+
+#[component]
+pub fn NotebookCover(notebook: NotebookView<'static>, title: String) -> Element {
+    use jacquard::from_data;
+    use weaver_api::sh_weaver::notebook::book::Book;
+
+    // Deserialize the book record from the view
+    let book = match from_data::<Book>(&notebook.record) {
+        Ok(book) => book,
+        Err(_) => {
+            return rsx! {
+                document::Stylesheet { href: NOTEBOOK_COVER_CSS }
+                div { class: "notebook-cover",
+                    h1 { class: "notebook-cover-title", "{title}" }
+                    div { "Error loading notebook details" }
+                }
+            }
+        }
+    };
+
+    rsx! {
+        document::Stylesheet { href: NOTEBOOK_COVER_CSS }
+
+        div { class: "notebook-cover",
+            h1 { class: "notebook-cover-title", "{title}" }
+
+            // Authors section
+            if !notebook.authors.is_empty() {
+                div { class: "notebook-cover-authors",
+                    NotebookAuthors { authors: notebook.authors.clone() }
+                }
+            }
+
+            // Metadata
+            div { class: "notebook-cover-meta",
+                // Entry count
+                span { class: "notebook-cover-stat",
+                    "{book.entry_list.len()} "
+                    if book.entry_list.len() == 1 { "entry" } else { "entries" }
+                }
+
+                // Created date
+                if let Some(ref created_at) = book.created_at {
+                    {
+                        let formatted_date = created_at.as_ref().format("%B %d, %Y").to_string();
+                        rsx! {
+                            span { class: "notebook-cover-date",
+                                "Created {formatted_date}"
+                            }
+                        }
+                    }
+                }
+            }
+
+            // Tags if present
+            if let Some(ref tags) = notebook.tags {
+                if !tags.is_empty() {
+                    div { class: "notebook-cover-tags",
+                        for tag in tags.iter() {
+                            span { class: "notebook-cover-tag", "{tag}" }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+#[component]
+fn NotebookAuthors(
+    authors: Vec<weaver_api::sh_weaver::notebook::AuthorListView<'static>>,
+) -> Element {
+    rsx! {
+        div { class: "notebook-authors-list",
+            for (i, author) in authors.iter().enumerate() {
+                if i > 0 { span { class: "author-separator", ", " } }
+                NotebookAuthor { author: author.clone() }
+            }
+        }
+    }
+}
+
+#[component]
+fn NotebookAuthor(author: weaver_api::sh_weaver::notebook::AuthorListView<'static>) -> Element {
+    use crate::data::use_handle;
+    use weaver_api::sh_weaver::actor::ProfileDataViewInner;
+
+    // Author already has profile data hydrated
+    match &author.record.inner {
+        ProfileDataViewInner::ProfileView(p) => {
+            let display_name = p
+                .display_name
+                .as_ref()
+                .map(|n| n.as_ref())
+                .unwrap_or("Unknown");
+            let handle = use_handle(p.did.clone().into())?;
+
+            rsx! {
+                div { class: "notebook-author",
+                    if let Some(ref avatar) = p.avatar {
+                        Avatar {
+                            AvatarImage { src: avatar.as_ref() }
+                        }
+                    }
+                    div { class: "notebook-author-info",
+                        div { class: "notebook-author-name", "{display_name}" }
+                        div { class: "notebook-author-handle", "@{handle()}" }
+                    }
+                }
+            }
+        }
+        ProfileDataViewInner::ProfileViewDetailed(p) => {
+            let display_name = p
+                .display_name
+                .as_ref()
+                .map(|n| n.as_ref())
+                .unwrap_or("Unknown");
+            let handle = use_handle(p.did.clone().into())?;
+
+            rsx! {
+                div { class: "notebook-author",
+                    if let Some(ref avatar) = p.avatar {
+                        Avatar {
+                            AvatarImage { src: avatar.as_ref() }
+                        }
+                    }
+                    div { class: "notebook-author-info",
+                        div { class: "notebook-author-name", "{display_name}" }
+                        div { class: "notebook-author-handle", "@{handle()}" }
+                    }
+                }
+            }
+        }
+        ProfileDataViewInner::TangledProfileView(p) => {
+            rsx! {
+                div { class: "notebook-author",
+                    div { class: "notebook-author-name", "@{p.handle.as_ref()}" }
+                }
+            }
+        }
+        _ => rsx! {
+            div { class: "notebook-author",
+                "Unknown author"
+            }
+        },
+    }
+}

crates/weaver-app/src/components/profile.rs

···
 
 use crate::{
     components::avatar::{Avatar, AvatarImage},
+    data::use_handle,
     Route,
 };
 use dioxus::prelude::*;
···
 
     match profile().as_ref() {
         Some(profile_view) => rsx! {
-            document::Link { rel: "stylesheet", href: PROFILE_CSS }
+            document::Stylesheet { href: PROFILE_CSS }
 
             div { class: "profile-display",
                 // Banner if present
···
                             rsx! { }
                         }
                     }
+                    ProfileDataViewInner::ProfileViewDetailed(p) => {
+                        if let Some(ref banner) = p.banner {
+                            rsx! {
+                                div { class: "profile-banner",
+                                    img { src: "{banner.as_ref()}", alt: "Profile banner" }
+                                }
+                            }
+                        } else {
+                            rsx! { }
+                        }
+                    }
                     _ => rsx! { }
                 }}
 
···
                                 span { class: "profile-pronouns", " ({pronouns})" }
                             }
                         }
-                        div { class: "profile-handle", "@{ident}" }
+                        div { class: "profile-handle", "@{use_handle(ident.clone())?}" }
 
                         if let Some(ref location) = profile.location {
                             div { class: "profile-location", "{location}" }
···
 
                     div { class: "profile-name-section",
                         h1 { class: "profile-display-name", "{display_name}" }
-                        div { class: "profile-handle", "@{ident}" }
+                        div { class: "profile-handle", "@{use_handle(ident.clone())?}" }
                     }
 
                     if let Some(ref description) = profile.description {
···
     rsx! {
         div { class: "profile-stats",
             div { class: "profile-stat",
-                span { class: "profile-stat-label", "Notebooks" }
-                span { class: "profile-stat-value", "{notebook_count}" }
+                span { class: "profile-stat-label", "{notebook_count} notebooks" }
             }
             // TODO: Add entry count, subscriber counts when available
         }

crates/weaver-app/src/views/home.rs

···
                     for notebook in notebook_list.iter() {
                         {
                             let view = &notebook.0;
+                            let entries = &notebook.1;
                             rsx! {
                                 div {
                                     key: "{view.cid}",
-                                    NotebookCard { notebook: view.clone() }
+                                    NotebookCard {
+                                        notebook: view.clone(),
+                                        entry_refs: entries.clone()
+                                    }
                                 }
                             }
                         }

crates/weaver-app/src/views/navbar.rs

···
+use crate::data::use_handle;
 use crate::Route;
 use dioxus::prelude::*;
 
···
                 match route {
                     Route::RepositoryIndex { ident } => rsx! {
                         span { class: "breadcrumb-separator", " > " }
-                        span { class: "breadcrumb breadcrumb-current", "@{ident}" }
+                        span { class: "breadcrumb breadcrumb-current", "@{use_handle(ident.clone())?}" }
                     },
                     Route::NotebookIndex { ident, book_title } => rsx! {
                         span { class: "breadcrumb-separator", " > " }
                         Link {
                             to: Route::RepositoryIndex { ident: ident.clone() },
                             class: "breadcrumb",
-                            "@{ident}"
+                            "@{use_handle(ident.clone())?}"
                         }
                         span { class: "breadcrumb-separator", " > " }
                         span { class: "breadcrumb breadcrumb-current", "{book_title}" }
···
                         Link {
                             to: Route::RepositoryIndex { ident: ident.clone() },
                             class: "breadcrumb",
-                            "@{ident}"
+                            "@{use_handle(ident.clone())?}"
                         }
                         span { class: "breadcrumb-separator", " > " }
                         Link {

crates/weaver-app/src/views/notebook.rs

···
 use crate::{
-    components::{EntryCard, NotebookCss},
+    components::{EntryCard, NotebookCover, NotebookCss},
     fetch, Route,
 };
 use dioxus::prelude::*;
···
     let fetcher = use_context::<fetch::CachedFetcher>();
     let book_title_clone = book_title.clone();
 
-    let notebook_entries = use_resource(use_reactive!(|(ident, book_title)| {
-        let fetcher = fetcher.clone();
+    // Fetch full notebook to get author count
+    let ident_for_notebook = ident.clone();
+    let book_title_for_notebook = book_title.clone();
+    let data_fetcher = fetcher.clone();
+    let notebook_data = use_resource(use_reactive!(|(
+        ident_for_notebook,
+        book_title_for_notebook,
+    )| {
+        let fetcher = data_fetcher.clone();
+        async move {
+            fetcher
+                .get_notebook(ident_for_notebook, book_title_for_notebook)
+                .await
+                .ok()
+                .flatten()
+        }
+    }));
+
+    // Also fetch entries
+    let entry_fetcher = fetcher.clone();
+    let entries_resource = use_resource(use_reactive!(|(ident, book_title)| {
+        let fetcher = entry_fetcher.clone();
         async move {
-            fetcher.list_notebook_entries(ident, book_title).await.ok().flatten()
+            fetcher
+                .list_notebook_entries(ident, book_title)
+                .await
+                .ok()
+                .flatten()
         }
     }));
 
     rsx! {
         document::Link { rel: "stylesheet", href: ENTRY_CARD_CSS }
 
-        div { class: "entries-list",
-            match &*notebook_entries.read_unchecked() {
-                Some(Some(entries)) => rsx! {
-                    for entry in entries {
-                        EntryCard { entry: entry.clone(), book_title: book_title_clone.clone() }
+        match (&*notebook_data.read_unchecked(), &*entries_resource.read_unchecked()) {
+            (Some(Some(data)), Some(Some(entries))) => {
+                let (notebook_view, _) = data.as_ref();
+                let author_count = notebook_view.authors.len();
+
+                rsx! {
+                    div { class: "notebook-layout",
+                        aside { class: "notebook-sidebar",
+                            NotebookCover {
+                                notebook: notebook_view.clone(),
+                                title: book_title_clone.to_string()
+                            }
+                        }
+
+                        main { class: "notebook-main",
+                            div { class: "entries-list",
+                                for entry in entries {
+                                    EntryCard {
+                                        entry: entry.clone(),
+                                        book_title: book_title_clone.clone(),
+                                        author_count
+                                    }
+                                }
+                            }
+                        }
                     }
-                },
-                Some(None) => rsx! { div { class: "error", "Notebook not found" } },
-                None => rsx! { div { class: "loading", "Loading notebook..." } }
-            }
+                }
+            },
+            (Some(None), _) | (_, Some(None)) => rsx! { div { class: "error", "Notebook or entries not found" } },
+            _ => rsx! { div { class: "loading", "Loading..." } }
         }
     }
 }

crates/weaver-common/src/agent.rs

···
                 .map(|blob| {
                     let cid = blob.blob().cid();
                     jacquard::types::string::Uri::new_owned(format!(
-                        "https://cdn.bsky.app/img/feed_fullsize/plain/{}/{}",
+                        "https://cdn.bsky.app/img/banner/plain/{}/{}",
                         did, cid
                     ))
                 })

crates/weaver-renderer/src/css.rs

···
     line-height: var(--spacing-line-height);
 }}
 
-body {{
+/* Scoped to notebook-content container */
+.notebook-content {{
     font-family: var(--font-body);
     color: var(--color-text);
     background-color: var(--color-base);

crates/weaver-renderer/src/static_site/document.rs

···
 
     writer.write_all(b"</head>\n").await.into_diagnostic()?;
     writer.write_all(b"<body>\n").await.into_diagnostic()?;
+    writer
+        .write_all(b"<div class=\"notebook-content\">\n")
+        .await
+        .into_diagnostic()?;
 
     Ok(())
 }
···
 ) -> miette::Result<()> {
     use tokio::io::AsyncWriteExt;
 
+    writer.write_all(b"</div>\n").await.into_diagnostic()?;
     writer.write_all(b"</body>\n").await.into_diagnostic()?;
     writer.write_all(b"</html>\n").await.into_diagnostic()?;