diff --git a/packages/frontend/src/components/UserRecentNotes.vue b/packages/frontend/src/components/UserRecentNotes.vue
new file mode 100644
index 0000000000..0f7a871c77
--- /dev/null
+++ b/packages/frontend/src/components/UserRecentNotes.vue
@@ -0,0 +1,108 @@
+<!--
+SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkPullToRefresh :refresher="() => reload()">
+	<div v-if="user" :class="$style.userInfo">
+		<MkUserInfo :class="$style.userInfo" class="user" :user="user"/>
+		<MkNotes :noGap="true" :pagination="pagination"/>
+	</div>
+	<div v-else-if="loadError" :class="$style.panel">{{ loadError }}</div>
+	<MkLoading v-else-if="userId"/>
+</MkPullToRefresh>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, Ref, watch } from 'vue';
+import * as Misskey from 'misskey-js';
+import MkLoading from '@/components/global/MkLoading.vue';
+import MkNotes from '@/components/MkNotes.vue';
+import MkUserInfo from '@/components/MkUserInfo.vue';
+import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
+import { Paging } from '@/components/MkPagination.vue';
+import { misskeyApi } from '@/scripts/misskey-api.js';
+
+const props = withDefaults(defineProps<{
+	userId: string;
+	withRenotes?: boolean;
+	withReplies?: boolean;
+	onlyFiles?: boolean;
+}>(), {
+	withRenotes: false,
+	withReplies: true,
+	onlyFiles: false,
+});
+
+const loadError: Ref<string | null> = ref(null);
+const user: Ref<Misskey.entities.UserDetailed | null> = ref(null);
+
+const pagination: Paging<'users/notes'> = {
+	endpoint: 'users/notes' as const,
+	limit: 10,
+	params: computed(() => ({
+		userId: props.userId,
+		withRenotes: props.withRenotes,
+		withReplies: props.withReplies,
+		withFiles: props.onlyFiles,
+	})),
+};
+
+defineExpose({
+	reload,
+	user,
+});
+
+async function reload(): Promise<void> {
+	loadError.value = null;
+	user.value = null;
+
+	await Promise
+		.all([
+			// We need a User entity, but the pagination returns only UserLite.
+			// An additional request is needed to "upgrade" the object.
+			misskeyApi('users/show', { userId: props.userId }),
+
+			// Wait for 1 second to match the animation effects in MkHorizontalSwipe, MkPullToRefresh, and MkPagination.
+			// Otherwise, the page appears to load "backwards".
+			new Promise(resolve => setTimeout(resolve, 1000)),
+		])
+		.then(([u]) => user.value = u)
+		.catch(error => {
+			console.error('Error fetching user info', error);
+
+			return error.value =
+				typeof(error) === 'string'
+					? String(error)
+					: JSON.stringify(error);
+		});
+}
+
+watch(() => props.userId, async () => {
+	await reload();
+});
+
+onMounted(async () => {
+	await reload();
+});
+
+</script>
+
+<style lang="scss" module>
+
+.panel {
+	background: var(--panel);
+}
+
+.userInfo {
+	margin-bottom: 12px;
+}
+
+@container (min-width: 451px) {
+	.userInfo {
+		margin-bottom: 24px;
+	}
+}
+
+</style>
diff --git a/packages/frontend/src/pages/following-feed.vue b/packages/frontend/src/pages/following-feed.vue
index 17b4f35cde..06f2040ca0 100644
--- a/packages/frontend/src/pages/following-feed.vue
+++ b/packages/frontend/src/pages/following-feed.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.root">
-	<MkPageHeader v-model:tab="currentTab" :class="$style.header" :tabs="headerTabs" :actions="headerActions" @update:tab="onChangeTab"/>
+	<MkPageHeader v-model:tab="currentTab" :class="$style.header" :tabs="headerTabs" :actions="headerActions" :displayBackButton="true" @update:tab="onChangeTab"/>
 
 	<div :class="$style.notes">
 		<MkHorizontalSwipe v-model:tab="currentTab" :tabs="headerTabs">
@@ -29,15 +29,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 
 	<div v-if="isWideViewport" :class="$style.user">
-		<MkHorizontalSwipe v-model:tab="currentTab" :tabs="headerTabs">
-			<MkPullToRefresh :refresher="() => reloadUserNotes()">
-				<div v-if="selectedUser" :class="$style.userInfo">
-					<MkUserInfo :class="$style.userInfo" class="user" :user="selectedUser"/>
-					<MkNotes :noGap="true" :pagination="userNotesPagination"/>
-				</div>
-				<div v-else-if="selectedUserError" :class="$style.panel">{{ selectedUserError }}</div>
-				<MkLoading v-else-if="selectedUserId"/>
-			</MkPullToRefresh>
+		<MkHorizontalSwipe v-if="selectedUserId" v-model:tab="currentTab" :tabs="headerTabs">
+			<UserRecentNotes ref="userRecentNotes" :userId="selectedUserId" :withRenotes="withUserRenotes" :withReplies="withUserReplies" :onlyFiles="withOnlyFiles"/>
 		</MkHorizontalSwipe>
 	</div>
 </div>
@@ -62,15 +55,12 @@ import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
 import { Tab } from '@/components/global/MkPageHeader.tabs.vue';
 import { PageHeaderItem } from '@/types/page-header.js';
 import FollowingFeedEntry from '@/components/FollowingFeedEntry.vue';
-import MkNotes from '@/components/MkNotes.vue';
-import MkUserInfo from '@/components/MkUserInfo.vue';
-import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useRouter } from '@/router/supplier.js';
 import * as os from '@/os.js';
 import MkPageHeader from '@/components/global/MkPageHeader.vue';
 import { $i } from '@/account.js';
-import MkLoading from '@/components/global/MkLoading.vue';
 import { checkWordMute } from '@/scripts/check-word-mute.js';
+import UserRecentNotes from '@/components/UserRecentNotes.vue';
 
 const props = withDefaults(defineProps<{
 	initialTab?: FollowingFeedTab,
@@ -85,6 +75,7 @@ const router = useRouter();
 // eslint-disable-next-line vue/no-setup-props-reactivity-loss
 const currentTab: Ref<FollowingFeedTab> = ref(props.initialTab);
 const mutualsOnly: Ref<boolean> = computed(() => currentTab.value === mutualsTab);
+const userRecentNotes = shallowRef<InstanceType<typeof UserRecentNotes>>();
 
 // We have to disable the per-user feed on small displays, and it must be done through JS instead of CSS.
 // Otherwise, the second column will waste resources in the background.
@@ -92,47 +83,13 @@ const wideViewportQuery = window.matchMedia('(min-width: 750px)');
 const isWideViewport: Ref<boolean> = ref(wideViewportQuery.matches);
 wideViewportQuery.addEventListener('change', () => isWideViewport.value = wideViewportQuery.matches);
 
-const selectedUserError: Ref<string> = ref('');
-const selectedUserId: Ref<string> = ref('');
-const selectedUser: Ref<Misskey.entities.UserDetailed | null> = ref(null);
+const selectedUserId: Ref<string | null> = ref(null);
 
-async function userSelected(user: Misskey.entities.UserLite): Promise<void> {
+function userSelected(user: Misskey.entities.UserLite): void {
 	if (isWideViewport.value) {
-		await showUserNotes(user.id);
+		selectedUserId.value = user.id;
 	} else {
-		if (user.host) {
-			router.push(`/@${user.username}@${user.host}`);
-		} else {
-			router.push(`/@${user.username}`);
-		}
-	}
-}
-
-async function showUserNotes(userId: string): Promise<void> {
-	selectedUserError.value = '';
-	selectedUserId.value = userId;
-	selectedUser.value = null;
-
-	if (userId) {
-		await Promise
-			.all([
-				// We need a User entity, but the pagination returns only UserLite.
-				// An additional request is needed to "upgrade" the object.
-				misskeyApi('users/show', { userId }),
-
-				// Wait for 1 second to match the animation effects in MkHorizontalSwipe, MkPullToRefresh, and MkPagination.
-				// Otherwise, the page appears to load "backwards".
-				new Promise(resolve => setTimeout(resolve, 1000)),
-			])
-			.then(([user]) => selectedUser.value = user)
-			.catch(error => {
-				console.error('Error fetching user info', error);
-
-				return selectedUserError.value =
-					typeof(error) === 'string'
-						? String(error)
-						: JSON.stringify(error);
-			});
+		router.push(`/following-feed/${user.id}`);
 	}
 }
 
@@ -141,7 +98,7 @@ async function reloadLatestNotes() {
 }
 
 async function reloadUserNotes() {
-	await showUserNotes(selectedUserId.value);
+	await userRecentNotes.value?.reload();
 }
 
 async function reload() {
@@ -155,12 +112,12 @@ async function onListReady(): Promise<void> {
 	if (!selectedUserId.value && latestNotesPaging.value?.items.size) {
 		// This just gets the first user ID
 		const selectedNote: Misskey.entities.Note = latestNotesPaging.value.items.values().next().value;
-		await showUserNotes(selectedNote.userId);
+		selectedUserId.value = selectedNote.userId;
 	}
 }
 
 async function onChangeTab(): Promise<void> {
-	await showUserNotes('');
+	selectedUserId.value = null;
 }
 
 function isSoftMuted(note: Misskey.entities.Note): boolean {
@@ -207,16 +164,6 @@ const latestNotesPagination: Paging<'notes/following'> = {
 const withUserRenotes = ref(false);
 const withUserReplies = ref(true);
 const withOnlyFiles = ref(false);
-const userNotesPagination: Paging<'users/notes'> = {
-	endpoint: 'users/notes' as const,
-	limit: 10,
-	params: computed(() => ({
-		userId: selectedUserId.value,
-		withRenotes: withUserRenotes.value,
-		withReplies: withUserReplies.value,
-		withFiles: withOnlyFiles.value,
-	})),
-};
 
 const headerActions = computed(() => isWideViewport.value ? [
 	{
diff --git a/packages/frontend/src/pages/user/recent-notes.vue b/packages/frontend/src/pages/user/recent-notes.vue
new file mode 100644
index 0000000000..dc7b498022
--- /dev/null
+++ b/packages/frontend/src/pages/user/recent-notes.vue
@@ -0,0 +1,86 @@
+<template>
+<MkStickyContainer>
+	<template #header>
+		<MkPageHeader :actions="headerActions" :displayBackButton="true"/>
+	</template>
+	<UserRecentNotes ref="userRecentNotes" :userId="userId" :withRenotes="withRenotes" :withReplies="withReplies" :onlyFiles="onlyFiles"/>
+</MkStickyContainer>
+</template>
+
+<script setup lang="ts">
+
+import { computed, ref, shallowRef } from 'vue';
+import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { i18n } from '@/i18n.js';
+import { PageHeaderItem } from '@/types/page-header.js';
+import * as os from '@/os.js';
+import MkPageHeader from '@/components/global/MkPageHeader.vue';
+import UserRecentNotes from '@/components/UserRecentNotes.vue';
+import { acct } from '@/filters/user.js';
+
+defineProps<{
+	userId: string;
+}>();
+
+const userRecentNotes = shallowRef<InstanceType<typeof UserRecentNotes>>();
+const user = computed(() => userRecentNotes.value?.user);
+const withRenotes = ref(false);
+const withReplies = ref(true);
+const onlyFiles = ref(false);
+
+const headerActions = [
+	{
+		icon: 'ti ti-refresh',
+		text: i18n.ts.reload,
+		handler: () => userRecentNotes.value?.reload(),
+	} satisfies PageHeaderItem,
+	{
+		icon: 'ti ti-dots',
+		text: i18n.ts.options,
+		handler: (ev) => {
+			os.popupMenu([
+				{
+					type: 'switch',
+					text: i18n.ts.showRenotes,
+					ref: withRenotes,
+				}, {
+					type: 'switch',
+					text: i18n.ts.showRepliesToOthersInTimeline,
+					ref: withReplies,
+					disabled: onlyFiles,
+				},
+				{
+					type: 'divider',
+				},
+				{
+					type: 'switch',
+					text: i18n.ts.fileAttachedOnly,
+					ref: onlyFiles,
+					disabled: withReplies,
+				},
+			], ev.currentTarget ?? ev.target);
+		},
+	} satisfies PageHeaderItem,
+];
+
+// Based on user/index.vue
+definePageMetadata(() => ({
+	title: i18n.ts.user,
+	icon: 'ti ti-user',
+	...user.value ? {
+		title: user.value.name ? ` (@${user.value.username})` : `@${user.value.username}`,
+		subtitle: `@${acct(user.value)}`,
+		userName: user.value,
+		avatar: user.value,
+		path: `/@${user.value.username}`,
+		share: {
+			title: user.value.name,
+		},
+	} : {},
+}));
+
+</script>
+
+<style lang="scss" module>
+
+</style>
diff --git a/packages/frontend/src/router/definition.ts b/packages/frontend/src/router/definition.ts
index 6ebaa95cdc..ab17f92ac6 100644
--- a/packages/frontend/src/router/definition.ts
+++ b/packages/frontend/src/router/definition.ts
@@ -231,6 +231,9 @@ const routes: RouteDef[] = [{
 	path: '/following-feed',
 	component: page(() => import('@/pages/following-feed.vue')),
 	hash: 'initialTab',
+}, {
+	path: '/following-feed/:userId',
+	component: page(() => import('@/pages/user/recent-notes.vue')),
 }, {
 	path: '/search',
 	component: page(() => import('@/pages/search.vue')),