diff --git a/packages/frontend/src/components/MkMedias.vue b/packages/frontend/src/components/MkMedias.vue
new file mode 100644
index 0000000000..f54554e527
--- /dev/null
+++ b/packages/frontend/src/components/MkMedias.vue
@@ -0,0 +1,60 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+	<template v-for="file in note.files">
+		<div v-if="file.isSensitive && !showingFiles.includes(file.id)" :class="$style.sensitive" @click="showingFiles.push(file.id)">
+			<div>
+				<div><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}</div>
+				<div>{{ i18n.ts.clickToShow }}</div>
+			</div>
+		</div>
+		<MkA v-else :class="$style.img" :to="notePage(note)">
+			<!-- TODO: 画像以外のファイルに対応 -->
+			<ImgWithBlurhash :hash="file.blurhash" :src="thumbnail(file)" :title="file.name"/>
+		</MkA>
+	</template>
+</template>
+
+<script lang="ts" setup>
+
+import {notePage} from "@/filters/note.js";
+import {i18n} from "@/i18n.js";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
+import * as Misskey from "misskey-js";
+import {defaultStore} from "@/store.js";
+import {getStaticImageUrl} from "@/scripts/media-proxy.js";
+
+let showingFiles = $ref<string[]>([]);
+
+function thumbnail(image: Misskey.entities.DriveFile): string {
+	return defaultStore.state.disableShowingAnimatedImages
+		? getStaticImageUrl(image.url)
+		: image.thumbnailUrl;
+}
+
+const props = defineProps<{
+	note: Misskey.entities.Note;
+}>();
+</script>
+
+<style lang="scss" module>
+.img {
+	height: 220px;
+	border-radius: 6px;
+	overflow: clip;
+}
+
+.empty {
+	margin: 0;
+	padding: 16px;
+	text-align: center;
+}
+
+.sensitive {
+	display: grid;
+	place-items: center;
+}
+</style>
diff --git a/packages/frontend/src/pages/user/post-gallery.vue b/packages/frontend/src/pages/user/post-gallery.vue
index de5f5c5af9..1cfb7cdf07 100644
--- a/packages/frontend/src/pages/user/post-gallery.vue
+++ b/packages/frontend/src/pages/user/post-gallery.vue
@@ -6,71 +6,34 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 	<MkSpacer :contentMax="1100">
 		<div :class="$style.root">
-			<MkLoading v-if="fetching"/>
-			<div v-if="!fetching && files.length > 0" :class="$style.stream">
-				<template v-for="file in files" :key="file.note.id + file.file.id">
-					<div v-if="file.file.isSensitive && !showingFiles.includes(file.file.id)" :class="$style.sensitive" @click="showingFiles.push(file.file.id)">
-						<div>
-							<div><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}</div>
-							<div>{{ i18n.ts.clickToShow }}</div>
-						</div>
-					</div>
-					<MkA v-else :class="$style.img" :to="notePage(file.note)">
-						<!-- TODO: 画像以外のファイルに対応 -->
-						<ImgWithBlurhash :hash="file.file.blurhash" :src="thumbnail(file.file)" :title="file.file.name"/>
-					</MkA>
-				</template>
-			</div>
-			<p v-if="!fetching && files.length == 0" :class="$style.empty">{{ i18n.ts.nothing }}</p>
+			<MkPagination v-slot="{items}" :pagination="pagination">
+				<div :class="$style.stream">
+					<MkMedias v-for="note in items" :note="note"/>
+				</div>
+			</MkPagination>
 		</div>
 	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import * as Misskey from 'misskey-js';
-import { getStaticImageUrl } from '@/scripts/media-proxy.js';
-import { notePage } from '@/filters/note.js';
-import * as os from '@/os.js';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
-import { defaultStore } from '@/store.js';
-import { i18n } from '@/i18n.js';
+
+import MkMedias from "@/components/MkMedias.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import {computed} from "vue";
+import * as Misskey from "misskey-js";
 
 const props = defineProps<{
 	user: Misskey.entities.UserDetailed;
 }>();
 
-let fetching = $ref(true);
-let files = $ref<{
-	note: Misskey.entities.Note;
-	file: Misskey.entities.DriveFile;
-}[]>([]);
-let showingFiles = $ref<string[]>([]);
-
-function thumbnail(image: Misskey.entities.DriveFile): string {
-	return defaultStore.state.disableShowingAnimatedImages
-		? getStaticImageUrl(image.url)
-		: image.thumbnailUrl;
-}
-
-onMounted(() => {
-	os.api('users/notes', {
+const pagination = {
+	endpoint: 'users/notes' as const,
+	limit: 10,
+	params: computed(() => ({
 		userId: props.user.id,
 		withFiles: true,
-		excludeNsfw: defaultStore.state.nsfw !== 'ignore',
-		limit: 50,
-	}).then(notes => {
-		for (const note of notes) {
-			for (const file of note.files) {
-				files.push({
-					note,
-					file,
-				});
-			}
-		}
-		fetching = false;
-	});
-});
+	})),
+};
 </script>
 
 <style lang="scss" module>
@@ -80,34 +43,13 @@ onMounted(() => {
 
 .stream {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
 	grid-gap: 6px;
 }
 
-.img {
-	height: 200px;
-	border-radius: 6px;
-	overflow: clip;
-}
-
-@media (max-width: 568px) {
+@media (min-width: 720px) {
 	.stream {
-		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 	}
-
-	.img {
-		height: 120px;
-	}
-}
-
-.empty {
-	margin: 0;
-	padding: 16px;
-	text-align: center;
-}
-
-.sensitive {
-	display: grid;
-	place-items: center;
 }
 </style>