diff --git a/src/main/webapp/WEB-INF/views/index.jsp b/src/main/webapp/WEB-INF/views/index.jsp
index 07aab8c..d66c5e6 100644
--- a/src/main/webapp/WEB-INF/views/index.jsp
+++ b/src/main/webapp/WEB-INF/views/index.jsp
@@ -116,6 +116,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <jsp:include page="/WEB-INF/views/theme-init.jsp"/>
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bibimbap.css">
     <title>bibimbap</title>
     <style>
       html {
@@ -762,7 +763,11 @@
 </head>
 <body>
     <jsp:include page="/WEB-INF/views/header.jsp"/>
-    <main class="page-main">
+    <main class="page-main page">
+        <%-- 히어로: 서비스 소개 --%>
+        <p class="section-eyebrow">INDIE GAME HUB</p>
+        <h1 class="section-title" style="font-size:1.875rem">직접 만든 인디 게임을 올리고, 함께 즐기세요</h1>
+        <p class="section-desc">유니티 개발자들이 만든 웹게임을 플레이하고 리뷰를 남길 수 있어요.</p>
         <section class="search-section" aria-label="게임·제작자 검색">
             <div class="home-toolbar">
                 <form class="search-form" role="search" action="<%= ctx %>/" method="get">
@@ -849,6 +854,13 @@
             </div>
         </section>
 
+        <%-- 정렬 칩 --%>
+        <div class="sort-bar">
+          <span class="sort-label">정렬</span>
+          <a class="chip <%= (searchSort == null || searchSort.isBlank() || "latest".equals(searchSort)) ? "chip--on" : "" %>" href="<%= ctx %>/?sort=latest">최신순</a>
+          <a class="chip <%= "likes".equals(searchSort) ? "chip--on" : "" %>" href="<%= ctx %>/?sort=likes">좋아요순</a>
+          <a class="chip <%= "views".equals(searchSort) ? "chip--on" : "" %>" href="<%= ctx %>/?sort=views">방문순</a>
+        </div>
         <% if (showJamBanner) {
             String jamTitle = HtmlUtils.htmlEscape(activeJam.getTitle() == null || activeJam.getTitle().isBlank() ? "게임잼" : activeJam.getTitle());
             String jamSlugParam = java.net.URLEncoder.encode(activeJam.getSlug(), java.nio.charset.StandardCharsets.UTF_8);
@@ -866,7 +878,7 @@
         </section>
         <% } %>
 
-        <section class="card-grid" aria-label="추천 목록">
+        <section class="card-grid game-grid" aria-label="추천 목록">
             <% if (games.isEmpty()) { %>
             <% if (searching) { %>
             <div class="home-empty">"<%= escapedSearchQuery %>"에 대한 검색 결과가 없습니다.</div>
@@ -892,7 +904,7 @@
                         thumbUrl = HtmlUtils.htmlEscape(thumbUrl);
                     }
             %>
-            <a class="card" href="<%= ctx %>/game/<%= game.getId() %>" aria-labelledby="<%= titleId %>">
+            <a class="card game-card" href="<%= ctx %>/game/<%= game.getId() %>" aria-labelledby="<%= titleId %>">
                 <div class="card__media">
                     <span class="card__index" aria-hidden="true">#<%= game.getId() %></span>
                     <% if (hasImage) { %>
