diff --git a/src/main/java/org/operaton/fitpub/controller/ProfileViewController.java b/src/main/java/org/operaton/fitpub/controller/ProfileViewController.java
index e8c3f93..0d376c5 100644
--- a/src/main/java/org/operaton/fitpub/controller/ProfileViewController.java
+++ b/src/main/java/org/operaton/fitpub/controller/ProfileViewController.java
@@ -64,4 +64,34 @@ public class ProfileViewController {
         model.addAttribute("username", username);
         return "profile/public";
     }
+
+    /**
+     * User followers page.
+     * Shows list of people who follow this user.
+     *
+     * @param username the username
+     * @param model the model
+     * @return followers template
+     */
+    @GetMapping("/profile/{username}/followers")
+    public String userFollowers(@PathVariable String username, Model model) {
+        model.addAttribute("pageTitle", "Followers - @" + username);
+        model.addAttribute("username", username);
+        return "profile/followers";
+    }
+
+    /**
+     * User following page.
+     * Shows list of people this user follows.
+     *
+     * @param username the username
+     * @param model the model
+     * @return following template
+     */
+    @GetMapping("/profile/{username}/following")
+    public String userFollowing(@PathVariable String username, Model model) {
+        model.addAttribute("pageTitle", "Following - @" + username);
+        model.addAttribute("username", username);
+        return "profile/following";
+    }
 }
diff --git a/src/main/resources/static/css/fitpub.css b/src/main/resources/static/css/fitpub.css
index 20c557c..29c0792 100644
--- a/src/main/resources/static/css/fitpub.css
+++ b/src/main/resources/static/css/fitpub.css
@@ -199,6 +199,17 @@ body {
     padding: 1rem;
 }
 
+.stat-card-hover {
+    transition: background-color 0.2s, transform 0.2s;
+    cursor: pointer;
+    border-radius: var(--border-radius);
+}
+
+.stat-card-hover:hover {
+    background-color: var(--light-color);
+    transform: translateY(-2px);
+}
+
 .stat-value {
     font-size: 2rem;
     font-weight: 700;
diff --git a/src/main/resources/templates/profile/followers.html b/src/main/resources/templates/profile/followers.html
new file mode 100644
index 0000000..4188cd0
--- /dev/null
+++ b/src/main/resources/templates/profile/followers.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en"
+      xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<head>
+    <title>Followers</title>
+</head>
+
+<body>
+    <div layout:fragment="content">
+        <!-- Loading Indicator -->
+        <div id="loadingIndicator" class="text-center py-5">
+            <div class="spinner-border text-primary" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+            <p class="mt-2 text-muted">Loading followers...</p>
+        </div>
+
+        <!-- Error Alert -->
+        <div id="errorAlert" class="alert alert-danger d-none" role="alert">
+            <i class="bi bi-exclamation-triangle-fill"></i>
+            <span id="errorMessage"></span>
+        </div>
+
+        <!-- Followers Content -->
+        <div id="followersContent" class="d-none">
+            <!-- Header -->
+            <div class="d-flex justify-content-between align-items-center mb-4">
+                <div>
+                    <h2>
+                        <a th:href="@{/profile/{username}(username=${username})}" class="text-decoration-none text-muted">
+                            <i class="bi bi-arrow-left"></i>
+                        </a>
+                        Followers
+                    </h2>
+                    <p class="text-muted mb-0" id="followersSubtitle">People who follow @<span id="usernameDisplay"></span></p>
+                </div>
+            </div>
+
+            <!-- Followers List -->
+            <div class="card">
+                <div class="card-body">
+                    <!-- List -->
+                    <div id="followersList">
+                        <!-- Will be populated by JavaScript -->
+                    </div>
+
+                    <!-- Empty State -->
+                    <div id="followersEmpty" class="text-center py-5 d-none">
+                        <i class="bi bi-people" style="font-size: 3rem; color: #d1d5db;"></i>
+                        <p class="text-muted mt-3">No followers yet</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Custom Scripts -->
+    <th:block layout:fragment="scripts">
+        <script th:inline="javascript">
+            const targetUsername = /*[[${username}]]*/ '';
+
+            document.addEventListener('DOMContentLoaded', function() {
+                document.getElementById('usernameDisplay').textContent = targetUsername;
+                loadFollowers();
+
+                async function loadFollowers() {
+                    try {
+                        const response = await fetch(`/api/users/${targetUsername}/followers`);
+
+                        if (!response.ok) {
+                            throw new Error('Failed to load followers');
+                        }
+
+                        const followers = await response.json();
+
+                        // Hide loading, show content
+                        document.getElementById('loadingIndicator').classList.add('d-none');
+                        document.getElementById('followersContent').classList.remove('d-none');
+
+                        if (followers.length > 0) {
+                            renderFollowers(followers);
+                        } else {
+                            document.getElementById('followersEmpty').classList.remove('d-none');
+                        }
+                    } catch (error) {
+                        console.error('Error loading followers:', error);
+                        document.getElementById('loadingIndicator').classList.add('d-none');
+                        document.getElementById('errorMessage').textContent = 'Failed to load followers.';
+                        document.getElementById('errorAlert').classList.remove('d-none');
+                    }
+                }
+
+                function renderFollowers(followers) {
+                    const list = document.getElementById('followersList');
+                    list.innerHTML = followers.map(follower => `
+                        <div class="d-flex align-items-center py-3 border-bottom">
+                            <div class="me-3">
+                                ${follower.avatarUrl ?
+                                    `<img src="${escapeHtml(follower.avatarUrl)}" alt="${escapeHtml(follower.displayName || follower.username)}" class="rounded-circle" width="48" height="48">` :
+                                    `<div class="avatar-placeholder rounded-circle" style="width: 48px; height: 48px;">
+                                        <i class="bi bi-person-circle"></i>
+                                    </div>`
+                                }
+                            </div>
+                            <div class="flex-grow-1">
+                                <div class="d-flex justify-content-between align-items-start">
+                                    <div>
+                                        <h6 class="mb-0">
+                                            ${follower.local ?
+                                                `<a href="/profile/${escapeHtml(follower.username)}" class="text-decoration-none">${escapeHtml(follower.displayName || follower.username)}</a>` :
+                                                `<span>${escapeHtml(follower.displayName || follower.username)}</span>`
+                                            }
+                                            ${!follower.local ? '<i class="bi bi-globe text-muted small" title="Remote user"></i>' : ''}
+                                        </h6>
+                                        <p class="text-muted small mb-0">
+                                            @${escapeHtml(follower.handle)}
+                                        </p>
+                                        ${follower.bio ? `<p class="small mt-1 mb-0 text-muted">${escapeHtml(follower.bio)}</p>` : ''}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    `).join('');
+                }
+
+                function escapeHtml(text) {
+                    if (!text) return '';
+                    const div = document.createElement('div');
+                    div.textContent = text;
+                    return div.innerHTML;
+                }
+            });
+        </script>
+    </th:block>
+</body>
+</html>
diff --git a/src/main/resources/templates/profile/following.html b/src/main/resources/templates/profile/following.html
new file mode 100644
index 0000000..07be08d
--- /dev/null
+++ b/src/main/resources/templates/profile/following.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en"
+      xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<head>
+    <title>Following</title>
+</head>
+
+<body>
+    <div layout:fragment="content">
+        <!-- Loading Indicator -->
+        <div id="loadingIndicator" class="text-center py-5">
+            <div class="spinner-border text-primary" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+            <p class="mt-2 text-muted">Loading following...</p>
+        </div>
+
+        <!-- Error Alert -->
+        <div id="errorAlert" class="alert alert-danger d-none" role="alert">
+            <i class="bi bi-exclamation-triangle-fill"></i>
+            <span id="errorMessage"></span>
+        </div>
+
+        <!-- Following Content -->
+        <div id="followingContent" class="d-none">
+            <!-- Header -->
+            <div class="d-flex justify-content-between align-items-center mb-4">
+                <div>
+                    <h2>
+                        <a th:href="@{/profile/{username}(username=${username})}" class="text-decoration-none text-muted">
+                            <i class="bi bi-arrow-left"></i>
+                        </a>
+                        Following
+                    </h2>
+                    <p class="text-muted mb-0" id="followingSubtitle">People that @<span id="usernameDisplay"></span> follows</p>
+                </div>
+            </div>
+
+            <!-- Following List -->
+            <div class="card">
+                <div class="card-body">
+                    <!-- List -->
+                    <div id="followingList">
+                        <!-- Will be populated by JavaScript -->
+                    </div>
+
+                    <!-- Empty State -->
+                    <div id="followingEmpty" class="text-center py-5 d-none">
+                        <i class="bi bi-people" style="font-size: 3rem; color: #d1d5db;"></i>
+                        <p class="text-muted mt-3">Not following anyone yet</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Custom Scripts -->
+    <th:block layout:fragment="scripts">
+        <script th:inline="javascript">
+            const targetUsername = /*[[${username}]]*/ '';
+
+            document.addEventListener('DOMContentLoaded', function() {
+                document.getElementById('usernameDisplay').textContent = targetUsername;
+                loadFollowing();
+
+                async function loadFollowing() {
+                    try {
+                        const response = await fetch(`/api/users/${targetUsername}/following`);
+
+                        if (!response.ok) {
+                            throw new Error('Failed to load following');
+                        }
+
+                        const following = await response.json();
+
+                        // Hide loading, show content
+                        document.getElementById('loadingIndicator').classList.add('d-none');
+                        document.getElementById('followingContent').classList.remove('d-none');
+
+                        if (following.length > 0) {
+                            renderFollowing(following);
+                        } else {
+                            document.getElementById('followingEmpty').classList.remove('d-none');
+                        }
+                    } catch (error) {
+                        console.error('Error loading following:', error);
+                        document.getElementById('loadingIndicator').classList.add('d-none');
+                        document.getElementById('errorMessage').textContent = 'Failed to load following.';
+                        document.getElementById('errorAlert').classList.remove('d-none');
+                    }
+                }
+
+                function renderFollowing(following) {
+                    const list = document.getElementById('followingList');
+                    list.innerHTML = following.map(user => `
+                        <div class="d-flex align-items-center py-3 border-bottom">
+                            <div class="me-3">
+                                ${user.avatarUrl ?
+                                    `<img src="${escapeHtml(user.avatarUrl)}" alt="${escapeHtml(user.displayName || user.username)}" class="rounded-circle" width="48" height="48">` :
+                                    `<div class="avatar-placeholder rounded-circle" style="width: 48px; height: 48px;">
+                                        <i class="bi bi-person-circle"></i>
+                                    </div>`
+                                }
+                            </div>
+                            <div class="flex-grow-1">
+                                <div class="d-flex justify-content-between align-items-start">
+                                    <div>
+                                        <h6 class="mb-0">
+                                            ${user.local ?
+                                                `<a href="/profile/${escapeHtml(user.username)}" class="text-decoration-none">${escapeHtml(user.displayName || user.username)}</a>` :
+                                                `<span>${escapeHtml(user.displayName || user.username)}</span>`
+                                            }
+                                            ${!user.local ? '<i class="bi bi-globe text-muted small" title="Remote user"></i>' : ''}
+                                        </h6>
+                                        <p class="text-muted small mb-0">
+                                            @${escapeHtml(user.handle)}
+                                        </p>
+                                        ${user.bio ? `<p class="small mt-1 mb-0 text-muted">${escapeHtml(user.bio)}</p>` : ''}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    `).join('');
+                }
+
+                function escapeHtml(text) {
+                    if (!text) return '';
+                    const div = document.createElement('div');
+                    div.textContent = text;
+                    return div.innerHTML;
+                }
+            });
+        </script>
+    </th:block>
+</body>
+</html>
diff --git a/src/main/resources/templates/profile/public.html b/src/main/resources/templates/profile/public.html
index b303502..e26c3e2 100644
--- a/src/main/resources/templates/profile/public.html
+++ b/src/main/resources/templates/profile/public.html
@@ -64,16 +64,20 @@
                                     </div>
                                 </div>
                                 <div class="col-4">
-                                    <div class="stat-card">
-                                        <div class="stat-value" id="followersCount">0</div>
-                                        <div class="stat-label">Followers</div>
-                                    </div>
+                                    <a th:href="@{/profile/{username}/followers(username=${username})}" class="text-decoration-none text-dark">
+                                        <div class="stat-card stat-card-hover">
+                                            <div class="stat-value" id="followersCount">0</div>
+                                            <div class="stat-label">Followers</div>
+                                        </div>
+                                    </a>
                                 </div>
                                 <div class="col-4">
-                                    <div class="stat-card">
-                                        <div class="stat-value" id="followingCount">0</div>
-                                        <div class="stat-label">Following</div>
-                                    </div>
+                                    <a th:href="@{/profile/{username}/following(username=${username})}" class="text-decoration-none text-dark">
+                                        <div class="stat-card stat-card-hover">
+                                            <div class="stat-value" id="followingCount">0</div>
+                                            <div class="stat-label">Following</div>
+                                        </div>
+                                    </a>
                                 </div>
                             </div>
 
@@ -179,6 +183,14 @@
                         document.getElementById('avatarPlaceholder').classList.add('d-none');
                     }
 
+                    // Follower/following counts
+                    if (user.followersCount !== undefined) {
+                        document.getElementById('followersCount').textContent = user.followersCount;
+                    }
+                    if (user.followingCount !== undefined) {
+                        document.getElementById('followingCount').textContent = user.followingCount;
+                    }
+
                     // Joined date
                     const joinedDate = new Date(user.createdAt);
                     document.getElementById('joinedDate').textContent = joinedDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
