diff --git a/frontend/src/lib/components/AlbumPanel.svelte b/frontend/src/lib/components/AlbumPanel.svelte
index 976c46b..e5ae80e 100644
--- a/frontend/src/lib/components/AlbumPanel.svelte
+++ b/frontend/src/lib/components/AlbumPanel.svelte
@@ -4,6 +4,7 @@
 	import Icon from './Icon.svelte';
 	import CoverPicker from './CoverPicker.svelte';
 	import Comments from './Comments.svelte';
+	import PanelSection from './PanelSection.svelte';
 	import { albums } from '$lib/stores/albums.svelte';
 	import { auth } from '$lib/stores/auth.svelte';
 	import type { Album, Photo } from '$lib/types';
@@ -86,6 +87,18 @@
 		node.select();
 	}
 
+	function formatSize(bytes: number): string {
+		if (!bytes) return '—';
+		const units = ['Б', 'КБ', 'МБ', 'ГБ'];
+		let v = bytes;
+		let i = 0;
+		while (v >= 1024 && i < units.length - 1) {
+			v /= 1024;
+			i++;
+		}
+		return `${i > 0 && v < 10 ? v.toFixed(1) : Math.round(v)} ${units[i]}`;
+	}
+
 	async function resetCover() {
 		if (!album) return;
 		try {
@@ -102,76 +115,88 @@
 
 {#if photoId}
 	{#if photo}
-		<div class="space-y-4 p-4">
-			{#if editingName}
-				<form class="relative" onsubmit={saveName}>
-					<input
-						bind:value={nameDraft}
-						use:autofocus
-						aria-label="Имя файла"
-						class="border-border bg-bg text-text w-full rounded-lg border py-1 pr-16 pl-2 text-sm"
-					/>
-					<div class="absolute top-1/2 right-1 flex -translate-y-1/2 items-center gap-0.5">
-						<button
-							type="submit"
-							class="text-primary hover:bg-bg-muted inline-flex items-center justify-center rounded-md p-1 disabled:opacity-50"
-							aria-label="Сохранить"
-							title="Сохранить"
-							disabled={savingName || !nameDraft.trim()}
-						>
-							<Icon name="check" class="size-4" />
-						</button>
-						<button
-							type="button"
-							class="text-text-muted hover:text-text inline-flex items-center justify-center rounded-md p-1"
-							aria-label="Отмена"
-							title="Отмена"
-							onclick={() => (editingName = false)}
-						>
-							<Icon name="close" class="size-4" />
-						</button>
-					</div>
-				</form>
-				{#if nameError}<p class="text-danger text-xs">{nameError}</p>{/if}
-			{:else if canRename}
-				<button
-					type="button"
-					class="text-text hover:text-primary block w-full truncate text-left text-sm font-semibold"
-					title="Переименовать"
-					onclick={startEdit}
-				>
-					{photo.original_filename}
-				</button>
-			{:else}
-				<h2 class="text-text truncate text-sm font-semibold">{photo.original_filename}</h2>
-			{/if}
-			<div>
-				<div class={metaRow}><span>Автор</span><span class="text-text">{photo.uploader.name}</span></div>
-				{#if photo.taken_at}
-					<div class={metaRow}>
-						<span>Снято</span>
-						<span class="text-text">{new Date(photo.taken_at).toLocaleString()}</span>
-					</div>
+		<div>
+			<div class="p-4">
+				{#if editingName}
+					<form class="relative" onsubmit={saveName}>
+						<input
+							bind:value={nameDraft}
+							use:autofocus
+							aria-label="Имя файла"
+							class="border-border bg-bg text-text w-full rounded-lg border py-1 pr-16 pl-2 text-sm"
+						/>
+						<div class="absolute top-1/2 right-1 flex -translate-y-1/2 items-center gap-0.5">
+							<button
+								type="submit"
+								class="text-primary hover:bg-bg-muted inline-flex items-center justify-center rounded-md p-1 disabled:opacity-50"
+								aria-label="Сохранить"
+								title="Сохранить"
+								disabled={savingName || !nameDraft.trim()}
+							>
+								<Icon name="check" class="size-4" />
+							</button>
+							<button
+								type="button"
+								class="text-text-muted hover:text-text inline-flex items-center justify-center rounded-md p-1"
+								aria-label="Отмена"
+								title="Отмена"
+								onclick={() => (editingName = false)}
+							>
+								<Icon name="close" class="size-4" />
+							</button>
+						</div>
+					</form>
+					{#if nameError}<p class="text-danger mt-1 text-xs">{nameError}</p>{/if}
+				{:else if canRename}
+					<button
+						type="button"
+						class="text-text hover:text-primary block w-full truncate text-left text-sm font-semibold"
+						title="Переименовать"
+						onclick={startEdit}
+					>
+						{photo.original_filename}
+					</button>
+				{:else}
+					<h2 class="text-text truncate text-sm font-semibold">{photo.original_filename}</h2>
 				{/if}
-				<div class={metaRow}>
-					<span>Размер</span>
-					<span class="text-text">{photo.width}×{photo.height}</span>
-				</div>
 			</div>
-			<div>
-				<span class="text-text-muted mb-1 block text-xs font-semibold tracking-wide uppercase">
-					Комментарии
-				</span>
+
+			<PanelSection id="photo-info" title="Информация">
+				<dl class="space-y-1">
+					<div class={metaRow}><span>Автор</span><span class="text-text">{photo.uploader.name}</span></div>
+					<div class={metaRow}><span>Файл</span><span class="text-text">{formatSize(photo.size)}</span></div>
+					<div class={metaRow}><span>Тип</span><span class="text-text">{photo.mime_type}</span></div>
+					<div class={metaRow}>
+						<span>Разрешение</span>
+						<span class="text-text">{photo.width}×{photo.height}</span>
+					</div>
+					{#if photo.taken_at}
+						<div class={metaRow}>
+							<span>Снято</span>
+							<span class="text-text">{new Date(photo.taken_at).toLocaleString()}</span>
+						</div>
+					{/if}
+					{#if photo.latitude != null && photo.longitude != null}
+						<div class={metaRow}>
+							<span>Координаты</span>
+							<span class="text-text">{photo.latitude.toFixed(5)}, {photo.longitude.toFixed(5)}</span>
+						</div>
+					{/if}
+					<div class={metaRow}>
+						<span>Загружено</span>
+						<span class="text-text">{new Date(photo.created_at).toLocaleString()}</span>
+					</div>
+				</dl>
+			</PanelSection>
+
+			<PanelSection id="photo-comments" title="Комментарии">
 				<Comments photoId={photo.id} />
-			</div>
+			</PanelSection>
 		</div>
 	{/if}
 {:else if album}
-	<div class="space-y-5 p-4">
-		<div>
-			<span class="text-text-muted mb-2 block text-xs font-semibold tracking-wide uppercase">
-				Обложка
-			</span>
+	<div>
+		<PanelSection id="album-cover" title="Обложка">
 			<div class="bg-bg-muted border-border aspect-video overflow-hidden rounded-lg border">
 				{#if album.cover_thumb_url}
 					<img src={album.cover_thumb_url} alt="" class="h-full w-full object-cover" />
@@ -202,33 +227,35 @@
 					{/if}
 				</div>
 			{/if}
-		</div>
+		</PanelSection>
 
-		<div>
+		<PanelSection id="album-info" title="Информация">
 			<h2 class="text-text text-lg font-semibold">{album.title}</h2>
 			{#if album.description}<p class="text-text-muted text-sm">{album.description}</p>{/if}
 			<p class="text-text-subtle mt-1 text-xs">
 				{album.photos_count ?? 0} фото · {album.members_count ?? 0} участников
 			</p>
 			{#if error}<p class="text-danger mt-2 text-sm">{error}</p>{/if}
-		</div>
+		</PanelSection>
 
-		<nav class="space-y-0.5" aria-label="Навигация по альбому">
-			<a class={navLink} href="/albums/{album.id}/members">
-				<Icon name="group" class="size-4" />
-				Участники
-			</a>
-			{#if canEdit}
-				<a class={navLink} href="/albums/{album.id}/settings">
-					<Icon name="settings" class="size-4" />
-					Настройки
+		<PanelSection id="album-nav" title="Навигация">
+			<nav class="space-y-0.5" aria-label="Навигация по альбому">
+				<a class={navLink} href="/albums/{album.id}/members">
+					<Icon name="group" class="size-4" />
+					Участники
 				</a>
-				<a class={navLink} href="/albums/{album.id}/settings#share">
-					<Icon name="add_link" class="size-4" />
-					Ссылки для просмотра
-				</a>
-			{/if}
-		</nav>
+				{#if canEdit}
+					<a class={navLink} href="/albums/{album.id}/settings">
+						<Icon name="settings" class="size-4" />
+						Настройки
+					</a>
+					<a class={navLink} href="/albums/{album.id}/settings#share">
+						<Icon name="add_link" class="size-4" />
+						Ссылки для просмотра
+					</a>
+				{/if}
+			</nav>
+		</PanelSection>
 	</div>
 
 	{#if picking}
diff --git a/frontend/src/lib/components/PanelSection.svelte b/frontend/src/lib/components/PanelSection.svelte
new file mode 100644
index 0000000..9c20767
--- /dev/null
+++ b/frontend/src/lib/components/PanelSection.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Icon from './Icon.svelte';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		id: string;
+		title: string;
+		open?: boolean;
+		children: Snippet;
+	}
+
+	let { id, title, open = true, children }: Props = $props();
+
+	// svelte-ignore state_referenced_locally
+	let isOpen = $state(open);
+
+	onMount(() => {
+		const v = localStorage.getItem(`panel-section-${id}`);
+		if (v === '0') isOpen = false;
+		else if (v === '1') isOpen = true;
+	});
+
+	function toggle() {
+		isOpen = !isOpen;
+		localStorage.setItem(`panel-section-${id}`, isOpen ? '1' : '0');
+	}
+</script>
+
+<section class="border-border border-b">
+	<button
+		type="button"
+		class="text-text-muted hover:text-text flex w-full items-center justify-between gap-2 px-4 py-2.5 text-left"
+		aria-expanded={isOpen}
+		onclick={toggle}
+	>
+		<span class="text-xs font-semibold tracking-wide uppercase">{title}</span>
+		<Icon
+			name="expand_more"
+			class="size-4 shrink-0 transition-transform {isOpen ? 'rotate-180' : ''}"
+		/>
+	</button>
+	{#if isOpen}
+		<div class="px-4 pb-4">{@render children()}</div>
+	{/if}
+</section>