diff --git a/www/src/pages/ar/library/index.astro b/www/src/pages/ar/library/index.astro
index ecee1f4..9473e13 100644
--- a/www/src/pages/ar/library/index.astro
+++ b/www/src/pages/ar/library/index.astro
@@ -6,6 +6,6 @@ const posts = (await getCollection('blog', ({ data }) => data.lang === 'ar' && !
 const popular = posts.slice(0, 5);
 ---
 <BlogIndexLayout title="مكتبة معهد أريزونا للتوحد" description="مقالات إخبارية حول علاج تحليل السلوك التطبيقي والتعليم الخاص، ودراسات حالة، ووصفات، ومقالات افتتاحية، ودروس تعليمية." lang="ar">
-  <aside class="library-sidebar"><h2>المقالات الشائعة</h2><ul>{popular.map((post) => <li><a href={`/ar/library/${post.data.slug}`}>{post.data.title}</a></li>)}</ul></aside>
   <div class="blog-list">{posts.map((post) => <BlogCard post={post} prefix="/ar" />)}</div>
+  <aside class="library-sidebar"><h2>المقالات الشائعة</h2><ul>{popular.map((post) => <li><a href={`/ar/library/${post.data.slug}`}>{post.data.title}</a></li>)}</ul></aside>
 </BlogIndexLayout>
diff --git a/www/src/pages/es/library/index.astro b/www/src/pages/es/library/index.astro
index a341a76..2a5d3ae 100644
--- a/www/src/pages/es/library/index.astro
+++ b/www/src/pages/es/library/index.astro
@@ -6,6 +6,6 @@ const posts = (await getCollection('blog', ({ data }) => data.lang === 'es' && !
 const popular = posts.slice(0, 5);
 ---
 <BlogIndexLayout title="La Biblioteca en AZ Institute for Autism" description="Noticias sobre terapia ABA y educación especial, casos de estudio, recetas, editoriales y tutoriales para y sobre nuestros estudiantes con autismo." lang="es">
-  <aside class="library-sidebar"><h2>Publicaciones populares</h2><ul>{popular.map((post) => <li><a href={`/es/library/${post.data.slug}`}>{post.data.title}</a></li>)}</ul></aside>
   <div class="blog-list">{posts.map((post) => <BlogCard post={post} prefix="/es" />)}</div>
+  <aside class="library-sidebar"><h2>Publicaciones populares</h2><ul>{popular.map((post) => <li><a href={`/es/library/${post.data.slug}`}>{post.data.title}</a></li>)}</ul></aside>
 </BlogIndexLayout>
diff --git a/www/src/pages/library/index.astro b/www/src/pages/library/index.astro
index 105a666..2557099 100644
--- a/www/src/pages/library/index.astro
+++ b/www/src/pages/library/index.astro
@@ -6,11 +6,11 @@ const posts = (await getCollection('blog', ({ data }) => data.lang === 'en' && !
 const popular = posts.slice(0, 5);
 ---
 <BlogIndexLayout title="The Library at AZ Institute for Autism" description="Welcome to the Library at AIA, where we share valuable insights, strategies, and resources to support individuals with autism, their families, and professionals in the field. Our articles explore key topics in Applied Behavior Analysis (ABA) therapy, community events, success stories, and expert guidance.">
+  <div class="blog-list">{posts.map((post) => <BlogCard post={post} />)}</div>
   <aside class="library-sidebar">
     <label for="library-search">Search</label>
     <input id="library-search" type="search" placeholder="Search" />
     <h2>Popular Posts</h2>
     <ul>{popular.map((post) => <li><a href={`/library/${post.data.slug}`}>{post.data.title}</a></li>)}</ul>
   </aside>
-  <div class="blog-list">{posts.map((post) => <BlogCard post={post} />)}</div>
 </BlogIndexLayout>
diff --git a/www/src/styles/components.css b/www/src/styles/components.css
index 866f17f..ed9aaf8 100644
--- a/www/src/styles/components.css
+++ b/www/src/styles/components.css
@@ -59,7 +59,7 @@
 .library-banner h1 { margin: 0; }
 .library-intro { background: var(--color-primary); color: white; padding-block: 3rem; }
 .library-intro h2 { color: white; }
-.library-layout { align-items: start; display: grid; gap: 3rem; grid-template-columns: 240px 1fr; }
+.library-layout { align-items: start; display: grid; gap: 3rem; grid-template-columns: 1fr 240px; }
 .library-sidebar { position: sticky; top: 1rem; }
 .library-sidebar label { display: block; font-weight: 700; margin-bottom: .4rem; }
 .library-sidebar input { border: 1px solid var(--color-border); border-radius: 4px; font: inherit; padding: .7rem; width: 100%; }