diff --git a/assets/global/localization.js b/assets/global/localization.js
index 45130c4..d759b09 100644
--- a/assets/global/localization.js
+++ b/assets/global/localization.js
@@ -1205,7 +1205,7 @@ const translations = {
         grp_acaab_ach_empty: "No achievements match the current filter.",
         grp_acaab_ach_loading: "Loading achievements...",
         grp_acaab_ach_error: "Failed to load achievements.",
-        grp_acaab_proj_title: "Top Projects &amp; Portfolios",
+        grp_acaab_proj_title: "Top Projects & Portfolios",
         grp_acaab_proj_desc: "Explore digital innovations and real-world applications developed by Informatics UNTAN students.",
         grp_acaab_proj_scroll_hint: "← Scroll to see more →",
         grp_acaab_proj_search: "Search projects...",
diff --git a/groups/ACAAB/index.html b/groups/ACAAB/index.html
index 4fefabf..816483d 100644
--- a/groups/ACAAB/index.html
+++ b/groups/ACAAB/index.html
@@ -1,4 +1,4 @@
-﻿<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="id" class="scroll-smooth">
 
 <head>
@@ -1177,7 +1177,7 @@
                         style="background:rgba(254,180,1,0.08);filter:blur(80px);margin-right:-5rem;margin-top:-5rem;">
                     </div>
 
-                    <div class="container mx-auto px-4" style="max-width:1100px;">
+                    <div class="container mx-auto px-4 lg:px-8">
                         <div style="display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center;"
                             class="lg-hero-grid">
                             <!-- Left: text -->
@@ -1260,7 +1260,7 @@
                                     style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
                                     0</div>
                                 <div
-                                    style="font-size:0.55rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;">
+                                    style="font-size:clamp(0.65rem,1.5vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;">
                                     Prestasi<br>Mahasiswa</div>
                             </div>
                             <!-- Internasional -->
@@ -1268,7 +1268,7 @@
                                 <div id="stat-intl"
                                     style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
                                     0</div>
-                                <div style="font-size:0.55rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;"
+                                <div style="font-size:clamp(0.65rem,1.5vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;"
                                     data-i18n="grp_acaab_stats_intl">Internasional</div>
                             </div>
                             <!-- Nasional -->
@@ -1276,7 +1276,7 @@
                                 <div id="stat-national"
                                     style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
                                     0</div>
-                                <div style="font-size:0.55rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;"
+                                <div style="font-size:clamp(0.65rem,1.5vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;"
                                     data-i18n="grp_acaab_stats_national">Nasional</div>
                             </div>
                             <!-- Regional -->
@@ -1284,7 +1284,7 @@
                                 <div id="stat-regional"
                                     style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
                                     0</div>
-                                <div style="font-size:0.55rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;"
+                                <div style="font-size:clamp(0.65rem,1.5vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;"
                                     data-i18n="grp_acaab_stats_regional">Regional</div>
                             </div>
                             <!-- Proyek Mahasiswa (total) -->
@@ -1293,7 +1293,7 @@
                                     style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
                                     0</div>
                                 <div
-                                    style="font-size:0.55rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;">
+                                    style="font-size:clamp(0.65rem,1.5vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;">
                                     Proyek<br>Mahasiswa</div>
                             </div>
                         </div>
@@ -1355,7 +1355,7 @@
 
                     <!-- Cards grid -->
                     <div id="acaab-ach-grid"
-                        style="display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.5rem;">
+                        style="display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;justify-content:center;">
                     </div>
 
                     <!-- Pagination buttons -->
@@ -1371,13 +1371,13 @@
 
                 <!-- ── PROJECT CAROUSEL ───────────────────────────────────────────────── -->
                 <section id="acaab-proj-section" class="not-prose acaab-full-bleed" style="padding:2.5rem 0 3rem;background:#f8fafc;">
-                    <div class="container mx-auto px-4" style="max-width:1100px;">
+                    <div class="container mx-auto px-4 lg:px-8">
                     <!-- Section header row: title + scroll buttons (seperti di React source) -->
                     <div
-                        style="display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;">
-                        <div>
+                        style="display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;">
+                        <div style="flex:1;min-width:250px;">
                             <h2 style="font-size:clamp(1.5rem,3vw,2.25rem);font-weight:900;color:#003150;margin:0 0 0.5rem;font-family:'Roboto Condensed',sans-serif;"
-                                data-i18n="grp_acaab_proj_title">Top Projects &amp; Portofolio</h2>
+                                data-i18n="grp_acaab_proj_title">Top Projects Portofolio</h2>
                             <p style="color:#64748b;font-size:1rem;max-width:42rem;margin:0;line-height:1.6;"
                                 data-i18n="grp_acaab_proj_desc">Jelajahi inovasi digital dan aplikasi nyata yang dikembangkan oleh mahasiswa Informatika UNTAN.</p>
                         </div>
@@ -1444,8 +1444,8 @@
 
                 <!-- ── CTA ────────────────────────────────────────────────────────────── -->
                 <section class="not-prose acaab-full-bleed bg-untan-navy"
-                    style="padding:3.5rem 0;">
-                    <div class="container mx-auto px-4" style="max-width:1100px;">
+                    style="padding:3.5rem 0; margin-bottom:-3rem;">
+                    <div class="container mx-auto px-4 lg:px-8">
                         <!-- Inner card: kuning transparan dengan border, rounded-2xl -->
                         <div
                             style="background:rgba(254,180,1,0.08);border:1px solid rgba(254,180,1,0.2);border-radius:1rem;padding:2.5rem 2rem;">
diff --git a/groups/ACAAB/main.js b/groups/ACAAB/main.js
index a40ece1..f182761 100644
--- a/groups/ACAAB/main.js
+++ b/groups/ACAAB/main.js
@@ -181,7 +181,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     ]);
 
     if (achResult.status === 'fulfilled') {
-        achievements = achResult.value;
+        achievements = achResult.value.sort((a, b) => b.year - a.year);
     } else {
         console.error('[ACAAB] achievements error:', achResult.reason);
         showError('acaab-ach-grid', t('grp_acaab_ach_error'));
@@ -359,9 +359,11 @@ function renderAchievements() {
     if (moreBtn) moreBtn.style.display = achVisible < filtered.length ? 'inline-block' : 'none';
     if (lessBtn) lessBtn.style.display = achVisible > ACH_INIT        ? 'inline-block' : 'none';
 
-    grid.querySelectorAll('.acaab-ach-readmore').forEach(btn => {
-        btn.addEventListener('click', () => {
-            const ach = achievements.find(a => a.id === btn.dataset.id);
+    grid.querySelectorAll('.acaab-ach-card').forEach(card => {
+        card.addEventListener('click', (e) => {
+            // Biarkan tombol yang merupakan link tetap berfungsi
+            if (e.target.closest('a')) return;
+            const ach = achievements.find(a => a.id === card.dataset.id);
             if (ach) openAchModal(ach);
         });
     });
@@ -369,7 +371,7 @@ function renderAchievements() {
 
 function achCardHtml(a, idx) {
     return `
-    <article class="acaab-ach-card acaab-fade-in" style="animation-delay:${idx * 0.05}s;">
+    <article class="acaab-ach-card acaab-fade-in" data-id="${escHtml(a.id)}" style="animation-delay:${idx * 0.05}s;cursor:pointer;">
         <div class="acaab-ach-top-bar"></div>
         <!-- Image h-56 (224px) -->
         <div style="position:relative;height:224px;overflow:hidden;background:#f1f5f9;">
@@ -494,11 +496,11 @@ function openAchModal(a) {
         </div>` : '';
 
     renderModal(`
-        <!-- Image header h-56 -->
-        <div style="position:relative;height:224px;overflow:hidden;border-radius:0.75rem 0.75rem 0 0;background:#e2e8f0;flex-shrink:0;">
-            <img src="${escHtml(a.image)}" alt="${escHtml(a.title)}" style="width:100%;height:100%;object-fit:cover;"
-                onerror="this.src='https://placehold.co/800x600/003150/FDB813?text=Informatika+UNTAN'">
-            <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 50%,transparent 100%);pointer-events:none;"></div>
+        <!-- Image header -->
+        <div style="position:relative;border-radius:0.75rem 0.75rem 0 0;background:#0f172a;flex-shrink:0;">
+            <img src="${escHtml(a.image)}" alt="${escHtml(a.title)}" style="width:100%;max-height:450px;object-fit:contain;display:block;"
+                onerror="this.src='https://placehold.co/800x600/0f172a/FDB813?text=Informatika+UNTAN'">
+            <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.1) 40%,transparent 100%);pointer-events:none;"></div>
             <!-- Close button: white rounded-full -->
             <button id="acaab-modal-close" aria-label="Tutup"
                 style="position:absolute;top:0.75rem;right:0.75rem;width:2.25rem;height:2.25rem;background:rgba(255,255,255,0.9);backdrop-filter:blur(4px);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.2);">
@@ -598,9 +600,17 @@ function renderProjects() {
     track.innerHTML = visible.map((p, i) => projCardHtml(p, i)).join('');
     if (moreBtn) moreBtn.style.display = projVisible < filtered.length ? 'inline-block' : 'none';
 
-    track.querySelectorAll('.acaab-proj-readmore').forEach(btn => {
-        btn.addEventListener('click', () => {
-            const proj = projects.find(p => p.id === btn.dataset.id);
+    // Responsif: Sembunyikan scroll button & center jika cuma 1 data
+    const prevBtn = document.getElementById('acaab-proj-prev');
+    const nextBtn = document.getElementById('acaab-proj-next');
+    if (prevBtn) prevBtn.style.display = filtered.length <= 1 ? 'none' : 'flex';
+    if (nextBtn) nextBtn.style.display = filtered.length <= 1 ? 'none' : 'flex';
+    track.style.justifyContent = filtered.length === 1 ? 'center' : 'flex-start';
+
+    track.querySelectorAll('.acaab-proj-card-wrap').forEach(card => {
+        card.addEventListener('click', (e) => {
+            if (e.target.closest('a') && e.target.closest('a').href) return;
+            const proj = projects.find(p => p.id === card.dataset.id);
             if (proj) openProjModal(proj);
         });
     });
@@ -613,7 +623,7 @@ function projCardHtml(p, idx) {
         </span>`).join('');
 
     return `
-    <div class="acaab-proj-card acaab-proj-card-wrap acaab-fade-in" style="animation-delay:${idx * 0.05}s;">
+    <div class="acaab-proj-card acaab-proj-card-wrap acaab-fade-in" data-id="${escHtml(p.id)}" style="animation-delay:${idx * 0.05}s;cursor:pointer;">
         <div class="acaab-proj-left-bar"></div>
         <!-- Image h-52 (208px) dengan title overlay -->
         <div style="height:208px;overflow:hidden;position:relative;">
@@ -720,11 +730,11 @@ function openProjModal(p) {
            </div>`;
 
     renderModal(`
-        <!-- Image header h-56 -->
-        <div style="position:relative;height:224px;overflow:hidden;border-radius:0.75rem 0.75rem 0 0;background:#e2e8f0;flex-shrink:0;">
-            <img src="${escHtml(p.image)}" alt="${escHtml(p.title)}" style="width:100%;height:100%;object-fit:cover;"
-                onerror="this.src='https://placehold.co/800x600/003150/FDB813?text=Informatika+UNTAN'">
-            <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 50%,transparent 100%);pointer-events:none;"></div>
+        <!-- Image header -->
+        <div style="position:relative;border-radius:0.75rem 0.75rem 0 0;background:#0f172a;flex-shrink:0;">
+            <img src="${escHtml(p.image)}" alt="${escHtml(p.title)}" style="width:100%;max-height:450px;object-fit:contain;display:block;"
+                onerror="this.src='https://placehold.co/800x600/0f172a/FDB813?text=Informatika+UNTAN'">
+            <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.1) 40%,transparent 100%);pointer-events:none;"></div>
             <!-- Close button -->
             <button id="acaab-modal-close" aria-label="Tutup"
                 style="position:absolute;top:0.75rem;right:0.75rem;width:2.25rem;height:2.25rem;background:rgba(255,255,255,0.9);backdrop-filter:blur(4px);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.2);">
