diff --git a/src/components/EventLanding.js b/src/components/EventLanding.js
index 1af83912..6a72a933 100644
--- a/src/components/EventLanding.js
+++ b/src/components/EventLanding.js
@@ -98,57 +98,69 @@ export default function EventLanding({ slug }) {
               <img src={bannerUrl} alt={pick(locale, event.title)} className={styles.banner} />
             )}
             <h1 className={styles.title}>{pick(locale, event.title)}</h1>
-            <div className={styles.meta}>
-              <span className={styles.metaItem}>
-                <FontAwesomeIcon icon={faCalendarDays} className={styles.metaIcon} />
-                {event.endDate
-                  ? formatDateRange(event.date, event.endDate, locale)
-                  : formatDate(event.date, locale)}
-              </span>
-              <span className={styles.metaItem}>
-                <FontAwesomeIcon icon={faLocationDot} className={styles.metaIcon} />
-                {pick(locale, event.location)}
-              </span>
-              {event.startTime && (
-                <span className={styles.metaItem}>
-                  <FontAwesomeIcon icon={faClock} className={styles.metaIcon} />
-                  {event.startTime}
-                  {event.endTime ? ` - ${event.endTime}` : ""}
-                  {event.timeZone ? ` ${event.timeZone}` : ""}
-                </span>
-              )}
-              {event.room && (
-                <span className={styles.metaItem}>
-                  <FontAwesomeIcon icon={faDoorOpen} className={styles.metaIcon} />
-                  {event.room}
-                </span>
-              )}
-            </div>
-            <p className={styles.description}>{pick(locale, event.description)}</p>
-            {(event.externalUrl || event.talkUrl) && (
-              <div className={styles.heroLinks}>
-                {event.externalUrl && (
-                  <a
-                    href={event.externalUrl}
-                    className={styles.externalLink}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {isZh ? "查看活动官网" : "Event Website"} →
-                  </a>
-                )}
-                {event.talkUrl && (
-                  <a
-                    href={event.talkUrl}
-                    className={styles.externalLink}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {isZh ? "查看演讲详情" : "Talk Details"} →
-                  </a>
+            <div className={styles.heroBody}>
+              <div className={styles.heroMain}>
+                <p className={styles.description}>{pick(locale, event.description)}</p>
+                {(event.externalUrl || event.talkUrl) && (
+                  <div className={styles.heroLinks}>
+                    {event.externalUrl && (
+                      <a
+                        href={event.externalUrl}
+                        className={styles.externalLink}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {isZh ? "查看活动官网" : "Event Website"} →
+                      </a>
+                    )}
+                    {event.talkUrl && (
+                      <a
+                        href={event.talkUrl}
+                        className={styles.externalLink}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {isZh ? "查看演讲详情" : "Talk Details"} →
+                      </a>
+                    )}
+                  </div>
                 )}
               </div>
-            )}
+              <aside className={styles.heroAside} aria-label={isZh ? "活动信息" : "Event details"}>
+                <div className={`hami-section-card ${styles.detailsCard}`}>
+                  <div className={styles.meta}>
+                    <span className={styles.metaItem}>
+                      <FontAwesomeIcon icon={faCalendarDays} className={styles.metaIcon} />
+                      <span>
+                        {event.endDate
+                          ? formatDateRange(event.date, event.endDate, locale)
+                          : formatDate(event.date, locale)}
+                      </span>
+                    </span>
+                    <span className={styles.metaItem}>
+                      <FontAwesomeIcon icon={faLocationDot} className={styles.metaIcon} />
+                      <span>{pick(locale, event.location)}</span>
+                    </span>
+                    {event.startTime && (
+                      <span className={styles.metaItem}>
+                        <FontAwesomeIcon icon={faClock} className={styles.metaIcon} />
+                        <span>
+                          {event.startTime}
+                          {event.endTime ? ` - ${event.endTime}` : ""}
+                          {event.timeZone ? ` ${event.timeZone}` : ""}
+                        </span>
+                      </span>
+                    )}
+                    {event.room && (
+                      <span className={styles.metaItem}>
+                        <FontAwesomeIcon icon={faDoorOpen} className={styles.metaIcon} />
+                        <span>{event.room}</span>
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </aside>
+            </div>
           </div>
         </section>
 
diff --git a/src/components/EventLanding.module.css b/src/components/EventLanding.module.css
index 44b193c0..a5d7d5b0 100644
--- a/src/components/EventLanding.module.css
+++ b/src/components/EventLanding.module.css
@@ -19,34 +19,63 @@
 .title {
   font-family: var(--hami-font-display);
   font-size: var(--hami-text-h1);
-  margin-bottom: var(--hami-space-16);
+  margin-bottom: var(--hami-space-24);
   color: var(--hami-color-text);
 }
 
+.heroBody {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
+  gap: var(--hami-space-32);
+  align-items: start;
+}
+
+.heroMain {
+  min-width: 0;
+}
+
+.heroAside {
+  min-width: 0;
+}
+
+.detailsCard {
+  padding: var(--hami-space-24);
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + var(--hami-space-16));
+}
+
 .meta {
   display: flex;
-  flex-wrap: wrap;
-  gap: var(--hami-space-24);
-  margin-bottom: var(--hami-space-24);
+  flex-direction: column;
+  gap: var(--hami-space-16);
+  margin: 0;
 }
 
 .metaItem {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--hami-space-8);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--hami-space-12);
   font-size: 1.05rem;
+  line-height: 1.45;
   color: var(--hami-color-muted);
 }
 
+.metaItem > span {
+  min-width: 0;
+  flex: 1;
+}
+
 .metaIcon {
   color: var(--hami-color-primary);
   font-size: 0.95rem;
   width: 0.95em;
   height: 0.95em;
+  flex-shrink: 0;
+  margin-top: 0.2em;
 }
 
 .description {
-  max-width: 720px;
+  margin: 0;
   font-size: 1.1rem;
   line-height: 1.7;
   color: var(--hami-color-muted);
@@ -56,7 +85,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: var(--hami-space-16);
-  margin-top: var(--hami-space-16);
+  margin-top: var(--hami-space-24);
 }
 
 .externalLink {
@@ -213,3 +242,18 @@
 .btnIcon {
   margin-right: var(--hami-space-8);
 }
+
+@media (max-width: 996px) {
+  .heroBody {
+    grid-template-columns: 1fr;
+    gap: var(--hami-space-24);
+  }
+
+  .heroAside {
+    order: -1;
+  }
+
+  .detailsCard {
+    position: static;
+  }
+}