diff --git a/src/app/page.tsx b/src/app/page.tsx
index 700d148..145dd82 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,6 +3,7 @@ import { Footer } from "@/components/layout/Footer";
 import { Sidebar } from "@/components/layout/Sidebar";
 import { Aside } from "@/components/layout/Aside";
 import { ArticleGrid } from "@/components/article/ArticleGrid";
+import { PinnedArticles } from "@/components/article/PinnedArticles";
 import { getArticles, getCategories, getTags } from "@/lib/api";
 
 interface HomePageProps {
@@ -22,16 +23,29 @@ export default async function HomePage({ searchParams }: HomePageProps) {
   const categoriesData = await getCategories();
   const tagsData = await getTags();
   
-  // We load all articles up to the current page on the server so "Load More" appends them
+  const isBrowsingAll = pageNum === 1 && !activeTag && activeCategory === "all";
+
+  // Charger les articles épinglés sur la page principale
+  let pinnedArticles: any[] = [];
+  if (isBrowsingAll) {
+    const pinnedArticlesData = await getArticles({
+      page: 1,
+      pageSize: 10,
+      is_pinned: true,
+    });
+    pinnedArticles = pinnedArticlesData.articles;
+  }
+
+  // Charger le flux normal (exclut les épinglés sur l'accueil principale)
   const articlesData = await getArticles({
     category: activeCategory,
     tag: activeTag,
     page: 1,
     pageSize: pageNum * 10,
+    is_pinned: isBrowsingAll ? false : undefined,
   });
 
   const articles = articlesData.articles;
-  const isBrowsingAll = pageNum === 1 && !activeTag && activeCategory === "all";
   const featuredArticle = isBrowsingAll
     ? (articles.find((a) => a.featured) ?? articles[0] ?? null)
     : null;
@@ -58,6 +72,9 @@ export default async function HomePage({ searchParams }: HomePageProps) {
 
         {/* Article list — center column */}
         <div style={{ flex: 1, minWidth: 0, maxWidth: 680, margin: '0 auto' }}>
+          {isBrowsingAll && pinnedArticles.length > 0 && (
+            <PinnedArticles articles={pinnedArticles} />
+          )}
           <ArticleGrid
             featuredArticle={featuredArticle}
             listArticles={listArticles}
diff --git a/src/app/profil/page.tsx b/src/app/profil/page.tsx
index 4d90ad4..420ca2d 100644
--- a/src/app/profil/page.tsx
+++ b/src/app/profil/page.tsx
@@ -49,21 +49,14 @@ export default async function ProfilPage() {
         }}
       >
         {/* Hero name & Avatar */}
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            gap: 24,
-            marginBottom: 40,
-            flexWrap: "wrap",
-          }}
-        >
+        <div className="profile-hero">
           {profile.avatarUrl && (
             <Image
               src={profile.avatarUrl}
               alt={profile.name}
               width={200}
               height={200}
+              className="profile-avatar"
               style={{
                 borderRadius: "50%",
                 objectFit: "cover",
@@ -74,17 +67,7 @@ export default async function ProfilPage() {
             />
           )}
 
-          <h1
-            style={{
-              fontFamily: "var(--font-display)",
-              fontSize: "var(--text-hero)",
-              fontWeight: 400,
-              color: "var(--color-text)",
-              lineHeight: 1.0,
-              margin: 0,
-              letterSpacing: "-0.02em",
-            }}
-          >
+          <h1 className="profile-name">
             {profile.name}
           </h1>
         </div>
@@ -331,6 +314,31 @@ export default async function ProfilPage() {
       <Footer />
 
       <style>{`
+        .profile-hero {
+          display: flex;
+          align-items: center;
+          gap: 24px;
+          margin-bottom: 40px;
+          flex-wrap: wrap;
+        }
+        .profile-name {
+          font-family: var(--font-display);
+          font-size: var(--text-hero);
+          font-weight: 400;
+          color: var(--color-text);
+          line-height: 1.0;
+          margin: 0;
+          letter-spacing: -0.02em;
+        }
+        @media (max-width: 640px) {
+          .profile-hero {
+            flex-direction: column;
+            text-align: center;
+            align-items: center;
+            justify-content: center;
+            gap: 16px;
+          }
+        }
         .cv-link {
           font-family: var(--font-mono);
           font-size: var(--text-sm);
diff --git a/src/components/article/PinnedArticles.tsx b/src/components/article/PinnedArticles.tsx
new file mode 100644
index 0000000..6e75e7f
--- /dev/null
+++ b/src/components/article/PinnedArticles.tsx
@@ -0,0 +1,232 @@
+"use client"
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { Pin, Minimize2, Maximize2 } from 'lucide-react'
+import type { Article } from '@/lib/types'
+
+interface PinnedArticlesProps {
+  articles: Article[]
+}
+
+function formatDate(iso: string | null | undefined) {
+  if (!iso) return 'Non publié'
+  return new Date(iso).toLocaleDateString('fr-FR', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  })
+}
+
+export function PinnedArticles({ articles }: PinnedArticlesProps) {
+  const [isCarouselMobile, setIsCarouselMobile] = useState(false)
+
+  if (articles.length === 0) return null
+
+  return (
+    <section className="pinned-articles-section" aria-label="Articles épinglés" style={{ marginBottom: 48 }}>
+      {/* Title Header with Collapse/Expand Button */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <Pin style={{ width: 16, height: 16, transform: 'rotate(45deg)', color: 'var(--color-teal)' }} />
+          <h2
+            style={{
+              fontFamily: 'var(--font-mono)',
+              fontSize: 'var(--text-xs)',
+              letterSpacing: '0.1em',
+              textTransform: 'uppercase',
+              color: 'var(--color-text-muted)',
+              fontWeight: 600,
+            }}
+          >
+            Articles épinglés
+          </h2>
+        </div>
+
+        {/* Button shown on mobile only to toggle between vertical list and carousel */}
+        <button
+          onClick={() => setIsCarouselMobile(!isCarouselMobile)}
+          className="mobile-toggle-view-btn"
+          style={{
+            fontFamily: 'var(--font-mono)',
+            fontSize: '11px',
+            color: 'var(--color-text-muted)',
+            background: 'none',
+            border: 'none',
+            padding: '4px 8px',
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 4,
+            textTransform: 'uppercase',
+            letterSpacing: '0.04em'
+          }}
+        >
+          {isCarouselMobile ? (
+            <>
+              <Maximize2 style={{ width: 12, height: 12 }} />
+              Dérouler
+            </>
+          ) : (
+            <>
+              <Minimize2 style={{ width: 12, height: 12 }} />
+              Réduire
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* Grid or Horizontal scroll wrapper depending on layout state */}
+      <div className={`pinned-articles-container ${isCarouselMobile ? 'carousel-mode' : 'list-mode'}`}>
+        {articles.map((article) => (
+          <article key={article.id} className="pinned-article-item">
+            <Link href={`/article/${article.slug}`} className="pinned-article-link">
+              {/* Category */}
+              <span className="pinned-article-category">
+                {article.categories && article.categories.length > 0 ? article.categories.join(' / ') : article.category}
+              </span>
+
+              {/* Title */}
+              <h3 className="pinned-article-title">
+                {article.title}
+              </h3>
+
+              {/* Excerpt */}
+              <p className="pinned-article-excerpt">
+                {article.excerpt}
+              </p>
+
+              {/* Meta */}
+              <p className="pinned-article-meta">
+                {formatDate(article.publishedAt)}
+                <span style={{ margin: '0 6px', opacity: 0.4 }}>·</span>
+                {article.readingTime} min de lecture
+              </p>
+            </Link>
+          </article>
+        ))}
+      </div>
+
+      <style>{`
+        /* Default layout: Vertical stack list of full-width items */
+        .pinned-articles-container.list-mode {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
+        .pinned-article-item {
+          background-color: var(--color-surface);
+          border: 1px solid var(--color-border);
+          border-radius: 6px;
+          padding: 24px;
+          transition: border-color 150ms, background-color 150ms, transform 150ms;
+        }
+
+        .pinned-article-item:hover {
+          border-color: rgba(255, 255, 255, 0.18);
+          transform: translateY(-1px);
+        }
+
+        [data-theme='light'] .pinned-article-item:hover {
+          border-color: rgba(0, 0, 0, 0.18);
+        }
+
+        .pinned-article-link {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          text-decoration: none;
+        }
+
+        .pinned-article-category {
+          font-family: var(--font-mono);
+          font-size: 10px;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: var(--color-teal);
+          font-weight: 600;
+          margin-bottom: 8px;
+        }
+
+        .pinned-article-title {
+          font-family: var(--font-display);
+          font-size: var(--text-lg);
+          font-weight: 450;
+          color: var(--color-text);
+          line-height: 1.2;
+          margin-bottom: 10px;
+        }
+
+        .pinned-article-excerpt {
+          font-family: var(--font-sans);
+          font-size: var(--text-base);
+          color: var(--color-text-muted);
+          line-height: 1.7;
+          margin-bottom: 16px;
+        }
+
+        .pinned-article-meta {
+          font-family: var(--font-mono);
+          font-size: var(--text-xs);
+          color: var(--color-text-muted);
+          letter-spacing: 0.04em;
+        }
+
+        /* Responsive button visibility: toggle button is mobile/tablet only */
+        .mobile-toggle-view-btn {
+          display: none !important;
+        }
+
+        @media (max-width: 768px) {
+          .mobile-toggle-view-btn {
+            display: flex !important;
+          }
+        }
+
+        /* Carousel mode (activated only on mobile if toggled) */
+        @media (max-width: 768px) {
+          .pinned-articles-container.carousel-mode {
+            display: flex;
+            flex-direction: row;
+            overflow-x: auto;
+            scroll-snap-type: x mandatory;
+            scrollbar-width: none; /* Firefox */
+            margin-right: -24px;
+            margin-left: -24px;
+            padding-right: 24px;
+            padding-left: 24px;
+            gap: 16px;
+          }
+
+          .pinned-articles-container.carousel-mode::-webkit-scrollbar {
+            display: none; /* Chrome/Safari */
+          }
+
+          .pinned-articles-container.carousel-mode .pinned-article-item {
+            flex: 0 0 85%;
+            scroll-snap-align: start;
+            padding: 20px;
+          }
+
+          .pinned-articles-container.carousel-mode .pinned-article-title {
+            font-size: var(--text-sm);
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+          }
+
+          .pinned-articles-container.carousel-mode .pinned-article-excerpt {
+            font-size: 13px;
+            line-height: 1.6;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+          }
+        }
+      `}</style>
+    </section>
+  )
+}
diff --git a/src/components/code/CodeEditorClient.tsx b/src/components/code/CodeEditorClient.tsx
index 7e1baa6..8c96adb 100644
--- a/src/components/code/CodeEditorClient.tsx
+++ b/src/components/code/CodeEditorClient.tsx
@@ -98,15 +98,7 @@ export function CodeEditorClient({ projects }: CodeEditorClientProps) {
     <>
       {/* ── Phase A: Grille des Projets ── */}
       {phase === 'projects' && (
-        <main
-          style={{
-            flex: 1,
-            padding: '40px 32px 64px',
-            maxWidth: 1280,
-            width: '100%',
-            margin: '0 auto',
-          }}
-        >
+        <main className="code-explorer-main">
           {/* Page header */}
           <div
             style={{
@@ -284,6 +276,13 @@ export function CodeEditorClient({ projects }: CodeEditorClientProps) {
       )}
 
       <style>{`
+        .code-explorer-main {
+          flex: 1;
+          padding: 40px 32px 64px;
+          max-width: 1280px;
+          width: 100%;
+          margin: 0 auto;
+        }
         .code-editor-sidebar {
           width: 220px;
           flex-shrink: 0;
@@ -306,6 +305,11 @@ export function CodeEditorClient({ projects }: CodeEditorClientProps) {
         @media (max-width: 768px) {
           .code-editor-sidebar { display: none; }
         }
+        @media (max-width: 640px) {
+          .code-explorer-main {
+            padding: 24px 16px 48px;
+          }
+        }
       `}</style>
     </>
   )
diff --git a/src/components/code/HighlightedCode.tsx b/src/components/code/HighlightedCode.tsx
index 3227e90..517e0f8 100644
--- a/src/components/code/HighlightedCode.tsx
+++ b/src/components/code/HighlightedCode.tsx
@@ -60,24 +60,42 @@ export function HighlightedCode({
                   {idx + 1}
                 </td>
               )}
-              <td style={{ paddingLeft: lineNumbers ? 0 : undefined, whiteSpace: 'pre' }}>
+              <td
+                className="code-cell"
+                style={{ paddingLeft: lineNumbers ? 0 : undefined }}
+              >
                 {lineTokens.length === 0 ? (
-                  <span>&nbsp;</span>
-                ) : (
-                  lineTokens.map((tok, ti) => (
-                    <span
-                      key={ti}
-                      style={{ color: tokenColor(tok.type, theme) }}
-                    >
-                      {tok.value}
-                    </span>
-                  ))
-                )}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+                   <span>&nbsp;</span>
+                 ) : (
+                   lineTokens.map((tok, ti) => (
+                     <span
+                       key={ti}
+                       style={{ color: tokenColor(tok.type, theme) }}
+                     >
+                       {tok.value}
+                     </span>
+                   ))
+                 )}
+               </td>
+             </tr>
+           ))}
+         </tbody>
+       </table>
+
+      <style>{`
+        .code-cell {
+          white-space: pre;
+          word-break: normal;
+          overflow-wrap: normal;
+        }
+        @media (max-width: 640px) {
+          .code-cell {
+            white-space: pre-wrap !important;
+            word-break: break-all !important;
+            overflow-wrap: break-word !important;
+          }
+        }
+      `}</style>
 
       {truncated && (
         <div
diff --git a/src/components/code/ProjectGrid.tsx b/src/components/code/ProjectGrid.tsx
index 32b9d39..64dba8f 100644
--- a/src/components/code/ProjectGrid.tsx
+++ b/src/components/code/ProjectGrid.tsx
@@ -12,7 +12,7 @@ export function ProjectGrid({ projects, onSelect }: ProjectGridProps) {
     <div
       style={{
         display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fill, minmax(340px, 1fr))',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(min(340px, 100%), 1fr))',
         gap: 24,
       }}
     >
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index a2d393a..942936d 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -4,17 +4,29 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { useState } from 'react'
 import { ThemeToggle } from '@/components/ui/ThemeToggle'
+import { Lock, Unlock, Newspaper, Briefcase, Code2, User } from 'lucide-react'
 
 const NAV_LINKS = [
-  { href: '/', label: 'Veille' },
-  { href: '/realisations', label: 'Réalisations' },
-  { href: '/code', label: 'Code' },
-  { href: '/profil', label: 'Profil' },
+  { href: '/', label: 'Veille', icon: Newspaper },
+  { href: '/realisations', label: 'Réalisations', icon: Briefcase },
+  { href: '/code', label: 'Code', icon: Code2 },
+  { href: '/profil', label: 'Profil', icon: User },
 ]
 
 export function Header() {
   const pathname = usePathname()
   const [drawerOpen, setDrawerOpen] = useState(false)
+  const [isMinified, setIsMinified] = useState<boolean>(() => {
+    if (typeof window === 'undefined') return false
+    return localStorage.getItem('nav_minified') === 'true'
+  })
+
+  const toggleMinified = () => {
+    const nextVal = !isMinified
+    setIsMinified(nextVal)
+    localStorage.setItem('nav_minified', String(nextVal))
+    setDrawerOpen(false)
+  }
 
   const isActive = (href: string) => {
     if (href === '/') return pathname === '/'
@@ -24,6 +36,8 @@ export function Header() {
   return (
     <>
       <header
+        className={isMinified ? 'header-minified' : ''}
+        suppressHydrationWarning
         style={{
           position: 'sticky',
           top: 0,
@@ -55,9 +69,37 @@ export function Header() {
             color: 'var(--color-text)',
           }}
         >
-          Loïc Bonin
+          <span className="logo-full">Loïc Bonin</span>
+          <span className="logo-short">LB</span>
         </Link>
 
+        {/* Minified Mobile Nav Row */}
+        <nav
+          className="minified-mobile-nav"
+          style={{
+            display: 'none',
+            alignItems: 'center',
+            gap: 16,
+          }}
+        >
+          {NAV_LINKS.map(({ href, label, icon: Icon }) => (
+            <Link
+              key={href}
+              href={href}
+              aria-label={label}
+              style={{
+                color: isActive(href) ? 'var(--color-text)' : 'var(--color-text-muted)',
+                padding: '6px 4px',
+                display: 'flex',
+                alignItems: 'center',
+                transition: 'color 150ms',
+              }}
+            >
+              <Icon size={18} />
+            </Link>
+          ))}
+        </nav>
+
         {/* Desktop nav — centered absolutely so logo/actions don't fight */}
         <nav
           aria-label="Navigation principale"
@@ -82,28 +124,44 @@ export function Header() {
         </nav>
 
         {/* Right actions */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: 4, flexShrink: 0 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
           <ThemeToggle />
 
+          {/* Minify Unlock Toggle Button - replaces Hamburger on mobile when minified */}
+          <button
+            onClick={toggleMinified}
+            aria-label="Déverrouiller le menu"
+            className="minify-unlock-btn"
+            style={{
+              background: 'transparent',
+              border: 'none',
+              cursor: 'pointer',
+              color: 'var(--color-teal)',
+              padding: 6,
+              display: 'none',
+              alignItems: 'center',
+              transition: 'color 150ms',
+            }}
+          >
+            <Lock size={18} />
+          </button>
+
           {/* Hamburger — mobile only */}
           <button
-            onClick={() => setDrawerOpen(true)}
-            aria-label="Ouvrir le menu"
+            onClick={() => setDrawerOpen(!drawerOpen)}
+            aria-label={drawerOpen ? "Fermer le menu" : "Ouvrir le menu"}
             aria-expanded={drawerOpen}
-            className="hamburger-btn"
+            className={`hamburger-btn ${drawerOpen ? 'open' : ''}`}
             style={{
               background: 'transparent',
               border: 'none',
               cursor: 'pointer',
-              flexDirection: 'column',
-              gap: 5,
-              padding: 8,
               color: 'var(--color-text)',
             }}
           >
-            <span style={{ display: 'block', width: 20, height: 2, background: 'currentColor', borderRadius: 1 }} />
-            <span style={{ display: 'block', width: 20, height: 2, background: 'currentColor', borderRadius: 1 }} />
-            <span style={{ display: 'block', width: 20, height: 2, background: 'currentColor', borderRadius: 1 }} />
+            <span />
+            <span />
+            <span />
           </button>
         </div>
       </header>
@@ -117,56 +175,32 @@ export function Header() {
             position: 'fixed',
             inset: 0,
             background: 'rgba(0,0,0,0.5)',
-            zIndex: 199,
+            zIndex: 98,
           }}
         />
       )}
 
-      {/* Mobile drawer */}
+      {/* Mobile menu */}
       <nav
         aria-label="Menu mobile"
         style={{
           position: 'fixed',
-          inset: '0 auto 0 0',
-          width: 280,
+          top: 56,
+          left: 0,
+          right: 0,
           backgroundColor: 'var(--color-bg)',
-          borderRight: '1px solid var(--color-border)',
-          zIndex: 200,
-          transform: drawerOpen ? 'translateX(0)' : 'translateX(-100%)',
-          transition: 'transform 300ms ease',
-          padding: '24px 20px',
-          overflowY: 'auto',
+          borderBottom: '1px solid var(--color-border)',
+          zIndex: 99,
+          transform: drawerOpen ? 'translateY(0)' : 'translateY(-100%)',
+          visibility: drawerOpen ? 'visible' : 'hidden',
+          transition: 'transform 250ms cubic-bezier(0.4, 0, 0.2, 1), visibility 250ms',
+          padding: '24px 24px 32px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 24,
         }}
       >
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 40 }}>
-          <span
-            style={{
-              fontFamily: 'var(--font-sans)',
-              fontSize: 'var(--text-lg)',
-              fontWeight: 600,
-              letterSpacing: '-0.02em',
-              color: 'var(--color-text)',
-            }}
-          >
-            Loïc Bonin
-          </span>
-          <button
-            onClick={() => setDrawerOpen(false)}
-            aria-label="Fermer le menu"
-            style={{
-              background: 'transparent',
-              border: 'none',
-              cursor: 'pointer',
-              color: 'var(--color-text-muted)',
-              fontSize: 24,
-              lineHeight: 1,
-              padding: 4,
-            }}
-          >
-            ×
-          </button>
-        </div>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
           {NAV_LINKS.map(({ href, label }) => (
             <Link
               key={href}
@@ -184,14 +218,88 @@ export function Header() {
             </Link>
           ))}
         </div>
+
+        <button
+          onClick={toggleMinified}
+          aria-label="Activer le mode compact"
+          style={{
+            background: 'var(--color-surface)',
+            border: '1px solid var(--color-border)',
+            borderRadius: 20,
+            cursor: 'pointer',
+            fontFamily: 'var(--font-sans)',
+            fontSize: 'var(--text-xs)',
+            color: 'var(--color-text)',
+            padding: '8px 16px',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 8,
+            width: 'fit-content',
+            margin: '12px auto 0',
+            transition: 'background 150ms, border-color 150ms',
+          }}
+        >
+          <Unlock size={14} style={{ color: 'var(--color-teal)' }} />
+          <span style={{ fontWeight: 500 }}>Menu Compact (icônes)</span>
+        </button>
       </nav>
 
       <style>{`
         .header-nav    { display: flex; }
-        .hamburger-btn { display: none !important; }
+        .logo-short    { display: none; }
+        .logo-full     { display: inline; }
+        .minified-mobile-nav { display: none; }
+        .minify-unlock-btn   { display: none; }
+
+        .hamburger-btn {
+          display: none !important;
+          flex-direction: column;
+          gap: 5px;
+          padding: 8px;
+        }
+        .hamburger-btn span {
+          display: block;
+          width: 20px;
+          height: 2px;
+          background-color: currentColor;
+          border-radius: 1px;
+          transition: transform 0.2s ease, opacity 0.2s ease;
+        }
+        .hamburger-btn.open span:nth-child(1) {
+          transform: translateY(7px) rotate(45deg);
+        }
+        .hamburger-btn.open span:nth-child(2) {
+          opacity: 0;
+        }
+        .hamburger-btn.open span:nth-child(3) {
+          transform: translateY(-7px) rotate(-45deg);
+        }
         @media (max-width: 768px) {
           .header-nav    { display: none !important; }
           .hamburger-btn { display: flex !important; }
+          
+          /* Header minified styles on mobile */
+          .header-minified .logo-full {
+            display: none !important;
+          }
+          .header-minified .logo-short {
+            display: inline !important;
+          }
+          .header-minified .minified-mobile-nav {
+            display: flex !important;
+            opacity: 0;
+            animation: fadeIn 0.2s ease forwards;
+          }
+          .header-minified .minify-unlock-btn {
+            display: flex !important;
+          }
+          .header-minified .hamburger-btn {
+            display: none !important;
+          }
+        }
+        @keyframes fadeIn {
+          to { opacity: 1; }
         }
       `}</style>
     </>
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 7692494..4dfe5e4 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -69,6 +69,7 @@ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
     tags: ["typescript", "php", "api", "validation"],
     publishedAt: "2026-05-28",
     readingTime: 5,
+    is_pinned: true,
   },
   {
     id: "01H7B3Q9N8472M6YV6N7R0G5Y2",
@@ -87,6 +88,7 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseru
     tags: ["css", "animation", "browser", "ux"],
     publishedAt: "2026-05-14",
     readingTime: 4,
+    is_pinned: true,
   },
   {
     id: "01H7B3Q9N8472M6YV6N7R0G5Y3",
@@ -780,8 +782,9 @@ export async function getArticles(params?: {
   tag?: string;
   page?: number;
   pageSize?: number;
+  is_pinned?: boolean;
 }): Promise<PaginatedArticles> {
-  const { category, tag, page = 1, pageSize = 10 } = params ?? {};
+  const { category, tag, page = 1, pageSize = 10, is_pinned } = params ?? {};
   
   const searchParams = new URLSearchParams({
     page: String(page),
@@ -789,6 +792,7 @@ export async function getArticles(params?: {
   });
   if (category && category !== "all") searchParams.append("category", category);
   if (tag) searchParams.append("tag", tag);
+  if (is_pinned !== undefined) searchParams.append("is_pinned", String(is_pinned));
 
   let filtered = [...MOCK_ARTICLES];
   if (category && category !== "all") {
@@ -797,6 +801,12 @@ export async function getArticles(params?: {
   if (tag) {
     filtered = filtered.filter((a) => a.tags.includes(tag));
   }
+  if (is_pinned !== undefined) {
+    filtered = filtered.filter((a) => {
+      const pinVal = !!a.is_pinned;
+      return pinVal === is_pinned;
+    });
+  }
   const start = (page - 1) * pageSize;
   const mockFallback: PaginatedArticles = {
     articles: filtered.slice(start, start + pageSize),
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 2ca028c..ca8d44d 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -10,6 +10,7 @@ export interface Article {
   publishedAt: string | null
   readingTime: number // in minutes
   featured?: boolean | null
+  is_pinned?: boolean | null
   codeFile?: CodeFile | null
   codeFolder?: CodeFolder | null
   codeProject?: CodeProject | null
diff --git a/src/lib/validation.ts b/src/lib/validation.ts
index 7f1b295..a81059c 100644
--- a/src/lib/validation.ts
+++ b/src/lib/validation.ts
@@ -103,6 +103,7 @@ export const ArticleSchema = z.object({
   publishedAt: DateStringSchema.nullable(),
   readingTime: z.number().nonnegative(),
   featured: z.boolean().optional().nullable(),
+  is_pinned: z.boolean().optional().nullable(),
   codeFile: CodeFileSchema.optional().nullable(),
   codeFolder: z.lazy(() => CodeFolderSchema).optional().nullable(),
   codeProject: CodeProjectSchema.optional().nullable(),