diff --git a/board/src/main/resources/static/css/articles/table-header.css b/board/src/main/resources/static/css/articles/table-header.css
new file mode 100644
index 00000000..61c6cbdc
--- /dev/null
+++ b/board/src/main/resources/static/css/articles/table-header.css
@@ -0,0 +1,5 @@
+/* 게시글 테이블 제목 */
+#article-table > thead a {
+    text-decoration: none;
+    color: black;
+}
\ No newline at end of file
diff --git a/board/src/main/resources/templates/articles/index.html b/board/src/main/resources/templates/articles/index.html
index 0e1d6a59..3c6f5aa2 100644
--- a/board/src/main/resources/templates/articles/index.html
+++ b/board/src/main/resources/templates/articles/index.html
@@ -9,6 +9,7 @@
 
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
     <link href="/css/search-bar.css" rel="stylesheet">
+    <link href="/css/articles/table-header.css" rel="stylesheet">
 </head>
 
 <body>
@@ -59,10 +60,10 @@
         <table class="table" id="article-table">
             <thead>
                 <tr>
-                    <th class="title col-6">제목</th>
-                    <th class="hashtag col-2">해시태그</th>
-                    <th class="user-id col">작성자</th>
-                    <th class="created-at col">작성일</th>
+                    <th class="title col-6"><a>제목</a></th>
+                    <th class="hashtag col-2"><a>해시태그</a></th>
+                    <th class="user-id col"><a>작성자</a></th>
+                    <th class="created-at col"><a>작성일</a></th>
                 </tr>
             </thead>
 
diff --git a/board/src/main/resources/templates/articles/index.th.xml b/board/src/main/resources/templates/articles/index.th.xml
index 2816610b..d53d4aaa 100644
--- a/board/src/main/resources/templates/articles/index.th.xml
+++ b/board/src/main/resources/templates/articles/index.th.xml
@@ -3,34 +3,56 @@
     <attr sel="#header" th:replace="header :: header" />
     <attr sel="#footer" th:replace="footer :: footer" />
 
-    <attr sel="#article-table">
-        <attr sel="tbody" th:remove="all-but-first">
-            <attr sel="tr[0]" th:each="article : ${articles}">
-                <attr sel="td.title/a" th:text="${article.title}" th:href="@{'/articles/' + ${article.id}}" />
-                <attr sel="td.hashtag" th:text="${article.hashtag}" />
-                <attr sel="td.user-id" th:text="${article.nickname}" />
-                <attr sel="td.created-at/time" th:datetime="${article.createdAt}" th:text="${#temporals.format(article.createdAt, 'yyyy-MM-dd')}"/>
+    <attr sel="main" th:object="${articles}">
+        <attr sel="#article-table">
+            <attr sel="thead/tr">
+                <attr sel="th.title/a" th:text="'제목'" th:href="@{/articles(
+            page=${articles.number},
+            sort='title' + (*{sort.getOrderFor('title')} != null ? (*{sort.getOrderFor('title').direction.name} != 'DESC' ? ',desc' : '') : '')
+        )}"/>
+                <attr sel="th.hashtag/a" th:text="'해시태그'" th:href="@{/articles(
+            page=${articles.number},
+            sort='hashtag' + (*{sort.getOrderFor('hashtag')} != null ? (*{sort.getOrderFor('hashtag').direction.name} != 'DESC' ? ',desc' : '') : '')
+        )}"/>
+                <attr sel="th.user-id/a" th:text="'작성자'" th:href="@{/articles(
+            page=${articles.number},
+            sort='userAccount.userId' + (*{sort.getOrderFor('userAccount.userId')} != null ? (*{sort.getOrderFor('userAccount.userId').direction.name} != 'DESC' ? ',desc' : '') : '')
+        )}"/>
+                <attr sel="th.created-at/a" th:text="'작성일'" th:href="@{/articles(
+            page=${articles.number},
+            sort='createdAt' + (*{sort.getOrderFor('createdAt')} != null ? (*{sort.getOrderFor('createdAt').direction.name} != 'DESC' ? ',desc' : '') : '')
+        )}"/>
             </attr>
+
+            <attr sel="tbody" th:remove="all-but-first">
+                <attr sel="tr[0]" th:each="article : ${articles}">
+                    <attr sel="td.title/a" th:text="${article.title}" th:href="@{'/articles/' + ${article.id}}" />
+                    <attr sel="td.hashtag" th:text="${article.hashtag}" />
+                    <attr sel="td.user-id" th:text="${article.nickname}" />
+                    <attr sel="td.created-at/time" th:datetime="${article.createdAt}" th:text="${#temporals.format(article.createdAt, 'yyyy-MM-dd')}" />
+                </attr>
+            </attr>
+        </attr>
+
+        <attr sel="#pagination">
+            <attr sel="li[0]/a"
+                  th:text="'previous'"
+                  th:href="@{/articles(page=${articles.number - 1})}"
+                  th:class="'page-link' + (${articles.number} <= 0 ? ' disabled' : '')"
+            />
+            <attr sel="li[1]" th:class="page-item" th:each="pageNumber : ${paginationBarNumbers}">
+                <attr sel="a"
+                      th:text="${pageNumber + 1}"
+                      th:href="@{/articles(page=${pageNumber})}"
+                      th:class="'page-link' + (${pageNumber} == ${articles.number} ? ' disabled' : '')"
+                />
+            </attr>
+            <attr sel="li[2]/a"
+                  th:text="'next'"
+                  th:href="@{/articles(page=${articles.number + 1})}"
+                  th:class="'page-link' + (${articles.number} >= ${articles.totalPages - 1} ? ' disabled' : '')"
+            />
         </attr>
     </attr>
 
-    <attr sel="#pagination">
-        <attr sel="li[0]/a"
-              th:text="'previous'"
-              th:href="@{/articles(page=${articles.number - 1})}"
-              th:class="'page-link' + (${articles.number} <= 0 ? ' disabled' : '')"
-        />
-        <attr sel="li[1]" th:class="page-item" th:each="pageNumber : ${paginationBarNumbers}">
-            <attr sel="a"
-                  th:text="${pageNumber + 1}"
-                  th:href="@{/articles(page=${pageNumber})}"
-                  th:class="'page-link' + (${pageNumber} == ${articles.number} ? ' disabled' : '')"
-            />
-        </attr>
-        <attr sel="li[2]/a"
-              th:text="'next'"
-              th:href="@{/articles(page=${articles.number + 1})}"
-              th:class="'page-link' + (${articles.number} >= ${articles.totalPages - 1} ? ' disabled' : '')"
-        />
-    </attr>
 </thlogic>
\ No newline at end of file
