diff --git a/PRD-enhanced-tag-system.md b/PRD-enhanced-tag-system.md
new file mode 100644
index 0000000..fe7cb95
--- /dev/null
+++ b/PRD-enhanced-tag-system.md
@@ -0,0 +1,610 @@
+# Product Requirements Document: Enhanced Tag System
+
+## Overview
+
+Upgrade the current JSON-based tag system to a relational database model with advanced tagging features including tag filtering, related posts, tag management, and an improved tag input UI with typeahead functionality.
+
+## Goals
+
+- Enable efficient querying and filtering of posts by tags
+- Provide tag management capabilities for content curation
+- Show related posts based on shared tags
+- Implement intuitive tag input with typeahead and keyboard shortcuts
+- Build analytics and insights around tag usage
+- Maintain backward compatibility during migration
+
+## Technical Constraints
+
+- **Framework**: SvelteKit with Svelte 5 runes mode
+- **Database**: PostgreSQL with Prisma ORM
+- **Hosting**: Railway (existing infrastructure)
+- **Design System**: Use existing admin component library
+- **Performance**: Tag operations should be sub-100ms
+
+## Current State vs Target State
+
+### Current Implementation
+- Tags stored as JSON arrays: `tags: ['announcement', 'meta', 'cms']`
+- Simple display-only functionality
+- No querying capabilities
+- Manual tag input with Add button
+
+### Target Implementation
+- Relational many-to-many tag system
+- Full CRUD operations for tags
+- Advanced filtering and search
+- Typeahead tag input with keyboard navigation
+- Tag analytics and management interface
+
+## Database Schema Changes
+
+### New Tables
+
+```sql
+-- Tags table
+CREATE TABLE tags (
+  id SERIAL PRIMARY KEY,
+  name VARCHAR(100) UNIQUE NOT NULL,
+  slug VARCHAR(100) UNIQUE NOT NULL,
+  description TEXT,
+  color VARCHAR(7), -- Hex color for tag styling
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Post-Tag junction table
+CREATE TABLE post_tags (
+  id SERIAL PRIMARY KEY,
+  post_id INTEGER REFERENCES posts(id) ON DELETE CASCADE,
+  tag_id INTEGER REFERENCES tags(id) ON DELETE CASCADE,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  UNIQUE(post_id, tag_id)
+);
+
+-- Tag usage analytics (optional)
+CREATE TABLE tag_analytics (
+  id SERIAL PRIMARY KEY,
+  tag_id INTEGER REFERENCES tags(id) ON DELETE CASCADE,
+  usage_count INTEGER DEFAULT 1,
+  last_used TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+### Prisma Schema Updates
+
+```prisma
+model Tag {
+  id          Int       @id @default(autoincrement())
+  name        String    @unique @db.VarChar(100)
+  slug        String    @unique @db.VarChar(100)
+  description String?   @db.Text
+  color       String?   @db.VarChar(7)  // Hex color
+  createdAt   DateTime  @default(now())
+  updatedAt   DateTime  @updatedAt
+  
+  // Relations
+  posts       PostTag[]
+  
+  @@index([name])
+  @@index([slug])
+}
+
+model PostTag {
+  id        Int      @id @default(autoincrement())
+  postId    Int
+  tagId     Int
+  createdAt DateTime @default(now())
+  
+  // Relations
+  post      Post     @relation(fields: [postId], references: [id], onDelete: Cascade)
+  tag       Tag      @relation(fields: [tagId], references: [id], onDelete: Cascade)
+  
+  @@unique([postId, tagId])
+  @@index([postId])
+  @@index([tagId])
+}
+
+// Update existing Post model
+model Post {
+  // ... existing fields
+  tags      PostTag[]  // Replace: tags Json?
+}
+```
+
+## Core Features
+
+### 1. Tag Management Interface
+
+#### Admin Tag Manager (`/admin/tags`)
+- **Tag List View**
+  - DataTable with tag name, usage count, created date
+  - Search and filter capabilities
+  - Bulk operations (delete, merge, rename)
+  - Color coding and visual indicators
+
+- **Tag Detail/Edit View**
+  - Edit tag name, description, color
+  - View all posts using this tag
+  - Usage analytics and trends
+  - Merge with other tags functionality
+
+#### Tag Analytics Dashboard
+- **Usage Statistics**
+  - Most/least used tags
+  - Tag usage trends over time
+  - Orphaned tags (no posts)
+  - Tag co-occurrence patterns
+
+- **Tag Insights**
+  - Suggested tag consolidations
+  - Similar tags detection
+  - Tag performance metrics
+
+### 2. Enhanced Tag Input Component (`TagInput.svelte`)
+
+#### Features
+- **Typeahead Search**: Real-time search of existing tags
+- **Keyboard Navigation**: Arrow keys to navigate suggestions
+- **Instant Add**: Press Enter to add tag without button click
+- **Visual Feedback**: Highlight matching text in suggestions
+- **Tag Validation**: Prevent duplicates and invalid characters
+- **Quick Actions**: Backspace to remove last tag
+
+#### Component API
+```typescript
+interface TagInputProps {
+  tags: string[] | Tag[]           // Current tags
+  suggestions?: Tag[]              // Available tags for typeahead
+  placeholder?: string             // Input placeholder text
+  maxTags?: number                // Maximum number of tags
+  allowNew?: boolean              // Allow creating new tags
+  size?: 'small' | 'medium' | 'large'
+  disabled?: boolean
+  onTagAdd?: (tag: Tag) => void
+  onTagRemove?: (tag: Tag) => void
+  onTagCreate?: (name: string) => void
+}
+```
+
+#### Svelte 5 Implementation
+```svelte
+<script lang="ts">
+  let {
+    tags = $bindable([]),
+    suggestions = [],
+    placeholder = "Add tags...",
+    maxTags = 10,
+    allowNew = true,
+    size = 'medium',
+    disabled = false,
+    onTagAdd,
+    onTagRemove,
+    onTagCreate
+  }: TagInputProps = $props()
+
+  let inputValue = $state('')
+  let showSuggestions = $state(false)
+  let selectedIndex = $state(-1)
+  let inputElement: HTMLInputElement
+
+  // Filtered suggestions based on input
+  let filteredSuggestions = $derived(
+    suggestions.filter(tag => 
+      tag.name.toLowerCase().includes(inputValue.toLowerCase()) &&
+      !tags.some(t => t.id === tag.id)
+    )
+  )
+
+  // Handle keyboard navigation
+  function handleKeydown(e: KeyboardEvent) {
+    switch (e.key) {
+      case 'Enter':
+        e.preventDefault()
+        if (selectedIndex >= 0) {
+          addExistingTag(filteredSuggestions[selectedIndex])
+        } else if (inputValue.trim() && allowNew) {
+          createNewTag(inputValue.trim())
+        }
+        break
+      case 'ArrowDown':
+        e.preventDefault()
+        selectedIndex = Math.min(selectedIndex + 1, filteredSuggestions.length - 1)
+        break
+      case 'ArrowUp':
+        e.preventDefault()
+        selectedIndex = Math.max(selectedIndex - 1, -1)
+        break
+      case 'Backspace':
+        if (!inputValue && tags.length > 0) {
+          removeTag(tags[tags.length - 1])
+        }
+        break
+      case 'Escape':
+        showSuggestions = false
+        selectedIndex = -1
+        break
+    }
+  }
+</script>
+```
+
+### 3. Post Filtering by Tags
+
+#### Frontend Components
+- **Tag Filter Bar**: Multi-select tag filtering
+- **Tag Cloud**: Visual tag representation with usage counts
+- **Search Integration**: Combine text search with tag filters
+
+#### API Endpoints
+```typescript
+// GET /api/posts?tags=javascript,react&operation=AND
+// GET /api/posts?tags=design,ux&operation=OR
+interface PostsQueryParams {
+  tags?: string[]               // Tag names or IDs
+  operation?: 'AND' | 'OR'     // How to combine multiple tags
+  page?: number
+  limit?: number
+  status?: 'published' | 'draft'
+}
+
+// GET /api/tags/suggest?q=java
+interface TagSuggestResponse {
+  tags: Array<{
+    id: number
+    name: string
+    slug: string
+    usageCount: number
+  }>
+}
+```
+
+### 4. Related Posts Feature
+
+#### Implementation
+- **Algorithm**: Find posts sharing the most tags
+- **Weighting**: Consider tag importance and recency
+- **Exclusions**: Don't show current post in related list
+- **Limit**: Show 3-6 related posts maximum
+
+#### Component (`RelatedPosts.svelte`)
+```svelte
+<script lang="ts">
+  let { postId, tags, limit = 4 }: {
+    postId: number
+    tags: Tag[]
+    limit?: number
+  } = $props()
+
+  let relatedPosts = $state<Post[]>([])
+
+  $effect(async () => {
+    const tagIds = tags.map(t => t.id)
+    const response = await fetch(`/api/posts/related?postId=${postId}&tagIds=${tagIds.join(',')}&limit=${limit}`)
+    relatedPosts = await response.json()
+  })
+</script>
+```
+
+## API Specification
+
+### Tag Management APIs
+
+```typescript
+// GET /api/tags - List all tags
+interface TagsResponse {
+  tags: Tag[]
+  total: number
+  page: number
+  limit: number
+}
+
+// POST /api/tags - Create new tag
+interface CreateTagRequest {
+  name: string
+  description?: string
+  color?: string
+}
+
+// PUT /api/tags/[id] - Update tag
+interface UpdateTagRequest {
+  name?: string
+  description?: string
+  color?: string
+}
+
+// DELETE /api/tags/[id] - Delete tag
+// Returns: 204 No Content
+
+// POST /api/tags/merge - Merge tags
+interface MergeTagsRequest {
+  sourceTagIds: number[]
+  targetTagId: number
+}
+
+// GET /api/tags/[id]/posts - Get posts for tag
+interface TagPostsResponse {
+  posts: Post[]
+  tag: Tag
+  total: number
+}
+
+// GET /api/tags/analytics - Tag usage analytics
+interface TagAnalyticsResponse {
+  mostUsed: Array<{ tag: Tag; count: number }>
+  leastUsed: Array<{ tag: Tag; count: number }>
+  trending: Array<{ tag: Tag; growth: number }>
+  orphaned: Tag[]
+}
+```
+
+### Enhanced Post APIs
+
+```typescript
+// GET /api/posts/related?postId=123&tagIds=1,2,3&limit=4
+interface RelatedPostsResponse {
+  posts: Array<{
+    id: number
+    title: string
+    slug: string
+    excerpt?: string
+    publishedAt: string
+    tags: Tag[]
+    sharedTagsCount: number  // Number of tags in common
+  }>
+}
+
+// PUT /api/posts/[id]/tags - Update post tags
+interface UpdatePostTagsRequest {
+  tagIds: number[]
+}
+```
+
+## User Interface Components
+
+### 1. TagInput Component Features
+
+#### Visual States
+- **Default**: Clean input with placeholder
+- **Focused**: Show suggestions dropdown
+- **Typing**: Filter and highlight matches
+- **Selected**: Navigate with keyboard
+- **Adding**: Smooth animation for new tags
+- **Full**: Disable input when max tags reached
+
+#### Accessibility
+- **ARIA Labels**: Proper labeling for screen readers
+- **Keyboard Navigation**: Full keyboard accessibility
+- **Focus Management**: Logical tab order
+- **Announcements**: Screen reader feedback for actions
+
+### 2. Tag Display Components
+
+#### TagPill Component
+```svelte
+<script lang="ts">
+  let {
+    tag,
+    size = 'medium',
+    removable = false,
+    clickable = false,
+    showCount = false,
+    onRemove,
+    onClick
+  }: TagPillProps = $props()
+</script>
+
+<span 
+  class="tag-pill tag-pill-{size}"
+  style="--tag-color: {tag.color}"
+  class:clickable
+  class:removable
+  onclick={onClick}
+>
+  {tag.name}
+  {#if showCount}
+    <span class="tag-count">({tag.usageCount})</span>
+  {/if}
+  {#if removable}
+    <button onclick={onRemove} class="tag-remove">×</button>
+  {/if}
+</span>
+```
+
+#### TagCloud Component
+```svelte
+<script lang="ts">
+  let {
+    tags,
+    maxTags = 50,
+    minFontSize = 12,
+    maxFontSize = 24,
+    onClick
+  }: TagCloudProps = $props()
+
+  // Calculate font sizes based on usage
+  let tagSizes = $derived(calculateTagSizes(tags, minFontSize, maxFontSize))
+</script>
+```
+
+### 3. Admin Interface Updates
+
+#### Posts List with Tag Filtering
+- **Filter Bar**: Multi-select tag filter above posts list
+- **Tag Pills**: Show tags on each post item
+- **Quick Filter**: Click tag to filter by that tag
+- **Clear Filters**: Easy way to reset all filters
+
+#### Posts Edit Form Integration
+- **Replace Current**: Swap existing tag input with new TagInput
+- **Preserve UX**: Maintain current metadata popover
+- **Tag Management**: Quick access to create/edit tags
+
+## Migration Strategy
+
+### Phase 1: Database Migration (Week 1)
+1. **Create Migration Script**
+   - Create new tables (tags, post_tags)
+   - Migrate existing JSON tags to relational format
+   - Create indexes for performance
+
+2. **Data Migration**
+   - Extract unique tags from existing posts
+   - Create tag records with auto-generated slugs
+   - Create post_tag relationships
+   - Validate data integrity
+
+3. **Backward Compatibility**
+   - Keep original tags JSON field temporarily
+   - Dual-write to both systems during transition
+
+### Phase 2: API Development (Week 1-2)
+1. **Tag Management APIs**
+   - CRUD operations for tags
+   - Tag suggestions and search
+   - Analytics endpoints
+
+2. **Enhanced Post APIs**
+   - Update post endpoints for relational tags
+   - Related posts algorithm
+   - Tag filtering capabilities
+
+3. **Testing & Validation**
+   - Unit tests for all endpoints
+   - Performance testing for queries
+   - Data consistency checks
+
+### Phase 3: Frontend Components (Week 2-3)
+1. **Core Components**
+   - TagInput with typeahead
+   - TagPill and TagCloud
+   - Tag management interface
+
+2. **Integration**
+   - Update MetadataPopover
+   - Add tag filtering to posts list
+   - Implement related posts component
+
+3. **Admin Interface**
+   - Tag management dashboard
+   - Analytics views
+   - Bulk operations interface
+
+### Phase 4: Features & Polish (Week 3-4)
+1. **Advanced Features**
+   - Tag merging functionality
+   - Usage analytics
+   - Tag suggestions based on content
+
+2. **Performance Optimization**
+   - Query optimization
+   - Caching strategies
+   - Load testing
+
+3. **Cleanup**
+   - Remove JSON tags field
+   - Documentation updates
+   - Final testing
+
+## Success Metrics
+
+### Performance
+- Tag search responses under 50ms
+- Post filtering responses under 100ms
+- Page load times maintained or improved
+
+### Usability
+- Reduced clicks to add tags (eliminate Add button)
+- Faster tag input with typeahead
+- Improved content discovery through related posts
+
+### Content Management
+- Ability to merge duplicate tags
+- Insights into tag usage patterns
+- Better content organization capabilities
+
+### Analytics
+- Track tag usage growth over time
+- Identify content gaps through tag analysis
+- Measure impact on content engagement
+
+## Technical Considerations
+
+### Performance
+- **Database Indexes**: Proper indexing on tag names and relationships
+- **Query Optimization**: Efficient joins for tag filtering
+- **Caching**: Cache popular tag lists and related posts
+- **Pagination**: Handle large tag lists efficiently
+
+### Data Integrity
+- **Constraints**: Prevent duplicate tag names
+- **Cascading Deletes**: Properly handle tag/post deletions
+- **Validation**: Ensure tag names follow naming conventions
+- **Backup Strategy**: Safe migration with rollback capability
+
+### User Experience
+- **Progressive Enhancement**: Graceful degradation if JS fails
+- **Loading States**: Smooth loading indicators
+- **Error Handling**: Clear error messages for users
+- **Responsive Design**: Works well on all device sizes
+
+## Future Enhancements
+
+### Advanced Features (Post-MVP)
+- **Hierarchical Tags**: Parent/child tag relationships
+- **Tag Synonyms**: Alternative names for the same concept
+- **Auto-tagging**: ML-based tag suggestions from content
+- **Tag Templates**: Predefined tag sets for different content types
+
+### Integrations
+- **External APIs**: Import tags from external sources
+- **Search Integration**: Enhanced search with tag faceting
+- **Analytics**: Deep tag performance analytics
+- **Content Recommendations**: AI-powered related content
+
+## Risk Assessment
+
+### High Risk
+- **Data Migration**: Complex migration of existing tag data
+- **Performance Impact**: New queries might affect page load times
+- **User Adoption**: Users need to learn new tag input interface
+
+### Mitigation Strategies
+- **Staged Rollout**: Deploy to staging first, then gradual production rollout
+- **Performance Monitoring**: Continuous monitoring during migration
+- **User Training**: Clear documentation and smooth UX transitions
+- **Rollback Plan**: Ability to revert to JSON tags if needed
+
+## Success Criteria
+
+### Must Have
+- ✅ All existing tags migrated successfully
+- ✅ Tag input works with keyboard-only navigation
+- ✅ Posts can be filtered by single or multiple tags
+- ✅ Related posts show based on shared tags
+- ✅ Performance remains acceptable (< 100ms for most operations)
+
+### Should Have
+- ✅ Tag management interface for admins
+- ✅ Tag usage analytics and insights
+- ✅ Ability to merge duplicate tags
+- ✅ Tag color coding and visual improvements
+
+### Could Have
+- Tag auto-suggestions based on post content
+- Tag trending and popularity metrics
+- Advanced tag analytics and reporting
+- Integration with external tag sources
+
+## Timeline
+
+**Total Duration**: 4 weeks
+
+- **Week 1**: Database migration and API development
+- **Week 2**: Core frontend components and basic integration
+- **Week 3**: Advanced features and admin interface
+- **Week 4**: Polish, testing, and production deployment
+
+## Conclusion
+
+This enhanced tag system will significantly improve content organization, discoverability, and management capabilities while providing a modern, intuitive user interface built with Svelte 5 runes. The migration strategy ensures minimal disruption while delivering substantial improvements in functionality and user experience.
\ No newline at end of file
diff --git a/prisma/seed.ts b/prisma/seed.ts
index 791f5e5..58cba1c3 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -169,24 +169,28 @@ async function main() {
 
 	console.log(`✅ Created ${labsProjects.length} labs projects`)
 
-	// Create test posts
+	// Create test posts using new simplified types
 	const posts = await Promise.all([
 		prisma.post.create({
 			data: {
 				slug: 'hello-world',
-				postType: 'blog',
+				postType: 'essay',
 				title: 'Hello World',
 				content: {
 					blocks: [
-						{ type: 'paragraph', content: 'This is my first blog post on the new CMS!' },
+						{ type: 'paragraph', content: 'This is my first essay on the new CMS!' },
 						{
 							type: 'paragraph',
-							content: 'The system supports multiple post types and rich content editing.'
+							content: 'The system now uses a simplified post type system with just essays and posts.'
+						},
+						{
+							type: 'paragraph',
+							content: 'Essays are perfect for longer-form content with titles and excerpts, while posts are great for quick thoughts and updates.'
 						}
 					]
 				},
-				excerpt: 'Welcome to my new blog powered by a custom CMS.',
-				tags: ['announcement', 'meta'],
+				excerpt: 'Welcome to my new blog powered by a custom CMS with simplified post types.',
+				tags: ['announcement', 'meta', 'cms'],
 				status: 'published',
 				publishedAt: new Date()
 			}
@@ -194,30 +198,79 @@ async function main() {
 		prisma.post.create({
 			data: {
 				slug: 'quick-thought',
-				postType: 'microblog',
+				postType: 'post',
 				content: {
 					blocks: [
 						{
 							type: 'paragraph',
-							content: 'Just pushed a major update to the site. Feeling good about the progress!'
+							content: 'Just pushed a major update to the site. The new simplified post types are working great! 🎉'
 						}
 					]
 				},
+				tags: ['update', 'development'],
 				status: 'published',
 				publishedAt: new Date(Date.now() - 86400000) // Yesterday
 			}
 		}),
 		prisma.post.create({
 			data: {
-				slug: 'great-article',
-				postType: 'link',
-				title: 'Great Article on Web Performance',
-				linkUrl: 'https://web.dev/performance',
-				linkDescription:
-					'This article perfectly explains the core web vitals and how to optimize for them.',
+				slug: 'design-systems-thoughts',
+				postType: 'essay',
+				title: 'Thoughts on Design Systems',
+				content: {
+					blocks: [
+						{
+							type: 'paragraph',
+							content: 'Design systems have become essential for maintaining consistency across large products.'
+						},
+						{
+							type: 'paragraph',
+							content: 'The key is finding the right balance between flexibility and constraints.'
+						},
+						{
+							type: 'paragraph',
+							content: 'Too rigid, and designers feel boxed in. Too flexible, and you lose consistency.'
+						}
+					]
+				},
+				excerpt: 'Exploring the balance between flexibility and constraints in design systems.',
+				tags: ['design', 'systems', 'ux'],
 				status: 'published',
 				publishedAt: new Date(Date.now() - 172800000) // 2 days ago
 			}
+		}),
+		prisma.post.create({
+			data: {
+				slug: 'morning-coffee',
+				postType: 'post',
+				content: {
+					blocks: [
+						{
+							type: 'paragraph',
+							content: 'Perfect morning for coding with a fresh cup of coffee ☕'
+						}
+					]
+				},
+				tags: ['life', 'coffee'],
+				status: 'published',
+				publishedAt: new Date(Date.now() - 259200000) // 3 days ago
+			}
+		}),
+		prisma.post.create({
+			data: {
+				slug: 'weekend-project',
+				postType: 'post',
+				content: {
+					blocks: [
+						{
+							type: 'paragraph',
+							content: 'Built a small CLI tool over the weekend. Sometimes the best projects come from scratching your own itch.'
+						}
+					]
+				},
+				tags: ['projects', 'cli', 'weekend'],
+				status: 'draft'
+			}
 		})
 	])
 
diff --git a/src/assets/icons/metadata.svg b/src/assets/icons/metadata.svg
new file mode 100644
index 0000000..371b5da
--- /dev/null
+++ b/src/assets/icons/metadata.svg
@@ -0,0 +1,3 @@
+<svg fill="currentColor" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 36.4023 19.3164 C 38.8398 19.3164 40.9257 17.7461 41.6992 15.5898 L 49.8085 15.5898 C 50.7695 15.5898 51.6133 14.7461 51.6133 13.6914 C 51.6133 12.6367 50.7695 11.8164 49.8085 11.8164 L 41.7226 11.8164 C 40.9257 9.6367 38.8398 8.0430 36.4023 8.0430 C 33.9648 8.0430 31.8789 9.6367 31.1054 11.8164 L 6.2851 11.8164 C 5.2304 11.8164 4.3867 12.6367 4.3867 13.6914 C 4.3867 14.7461 5.2304 15.5898 6.2851 15.5898 L 31.1054 15.5898 C 31.8789 17.7461 33.9648 19.3164 36.4023 19.3164 Z M 6.1913 26.1133 C 5.2304 26.1133 4.3867 26.9570 4.3867 28.0117 C 4.3867 29.0664 5.2304 29.8867 6.1913 29.8867 L 14.5586 29.8867 C 15.3320 32.0898 17.4179 33.6601 19.8554 33.6601 C 22.3164 33.6601 24.4023 32.0898 25.1757 29.8867 L 49.7149 29.8867 C 50.7695 29.8867 51.6133 29.0664 51.6133 28.0117 C 51.6133 26.9570 50.7695 26.1133 49.7149 26.1133 L 25.1757 26.1133 C 24.3789 23.9570 22.2929 22.3867 19.8554 22.3867 C 17.4413 22.3867 15.3554 23.9570 14.5586 26.1133 Z M 36.4023 47.9570 C 38.8398 47.9570 40.9257 46.3867 41.6992 44.2070 L 49.8085 44.2070 C 50.7695 44.2070 51.6133 43.3867 51.6133 42.3320 C 51.6133 41.2773 50.7695 40.4336 49.8085 40.4336 L 41.6992 40.4336 C 40.9257 38.2539 38.8398 36.7070 36.4023 36.7070 C 33.9648 36.7070 31.8789 38.2539 31.1054 40.4336 L 6.2851 40.4336 C 5.2304 40.4336 4.3867 41.2773 4.3867 42.3320 C 4.3867 43.3867 5.2304 44.2070 6.2851 44.2070 L 31.1054 44.2070 C 31.8789 46.3867 33.9648 47.9570 36.4023 47.9570 Z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index 10ee1ea..3090706 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -12,11 +12,24 @@ body {
 }
 
 // Heading font weights
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
 	font-weight: 500;
 }
 
 // Button and input font inheritance
-button, input, textarea, select {
+button,
+input,
+textarea,
+select {
 	font-family: inherit;
-}
\ No newline at end of file
+}
+
+input,
+textarea {
+	box-sizing: border-box;
+}
diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss
index ae28c14..74108c6 100644
--- a/src/assets/styles/variables.scss
+++ b/src/assets/styles/variables.scss
@@ -101,7 +101,7 @@ $yellow-30: #cc9900;
 $yellow-20: #996600;
 $yellow-10: #664400;
 
-$salmon-pink: #ffbdb3; // Desaturated salmon pink for hover states
+$salmon-pink: #ffd5cf; // Desaturated salmon pink for hover states
 
 $bg-color: #e8e8e8;
 $page-color: #ffffff;
diff --git a/src/lib/components/admin/AdminNavBar.svelte b/src/lib/components/admin/AdminNavBar.svelte
index 86c4a73..d0c0d76 100644
--- a/src/lib/components/admin/AdminNavBar.svelte
+++ b/src/lib/components/admin/AdminNavBar.svelte
@@ -191,13 +191,12 @@
 		}
 
 		&:hover {
-			color: $red-60;
-			background-color: $salmon-pink;
+			background-color: $grey-70;
 		}
 
 		&.active {
-			color: white;
-			background-color: $red-60;
+			color: $red-60;
+			background-color: $salmon-pink;
 		}
 
 		.nav-icon {
diff --git a/src/lib/components/admin/AlbumListItem.svelte b/src/lib/components/admin/AlbumListItem.svelte
new file mode 100644
index 0000000..312f06f
--- /dev/null
+++ b/src/lib/components/admin/AlbumListItem.svelte
@@ -0,0 +1,303 @@
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import { createEventDispatcher } from 'svelte'
+	import AdminByline from './AdminByline.svelte'
+
+	interface Photo {
+		id: number
+		url: string
+		thumbnailUrl: string | null
+		caption: string | null
+	}
+
+	interface Album {
+		id: number
+		slug: string
+		title: string
+		description: string | null
+		date: string | null
+		location: string | null
+		coverPhotoId: number | null
+		isPhotography: boolean
+		status: string
+		showInUniverse: boolean
+		publishedAt: string | null
+		createdAt: string
+		updatedAt: string
+		photos: Photo[]
+		_count: {
+			photos: number
+		}
+	}
+
+	interface Props {
+		album: Album
+		isDropdownActive?: boolean
+	}
+
+	let { album, isDropdownActive = false }: Props = $props()
+
+	const dispatch = createEventDispatcher<{
+		toggleDropdown: { albumId: number; event: MouseEvent }
+		edit: { album: Album; event: MouseEvent }
+		togglePublish: { album: Album; event: MouseEvent }
+		delete: { album: Album; event: MouseEvent }
+	}>()
+
+	function formatRelativeTime(dateString: string): string {
+		const date = new Date(dateString)
+		const now = new Date()
+		const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)
+
+		if (diffInSeconds < 60) return 'just now'
+		
+		const minutes = Math.floor(diffInSeconds / 60)
+		if (diffInSeconds < 3600) return `${minutes} ${minutes === 1 ? 'minute' : 'minutes'} ago`
+		
+		const hours = Math.floor(diffInSeconds / 3600)
+		if (diffInSeconds < 86400) return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`
+		
+		const days = Math.floor(diffInSeconds / 86400)
+		if (diffInSeconds < 2592000) return `${days} ${days === 1 ? 'day' : 'days'} ago`
+		
+		const months = Math.floor(diffInSeconds / 2592000)
+		if (diffInSeconds < 31536000) return `${months} ${months === 1 ? 'month' : 'months'} ago`
+		
+		const years = Math.floor(diffInSeconds / 31536000)
+		return `${years} ${years === 1 ? 'year' : 'years'} ago`
+	}
+
+	function handleAlbumClick() {
+		goto(`/admin/albums/${album.id}/edit`)
+	}
+
+	function handleToggleDropdown(event: MouseEvent) {
+		dispatch('toggleDropdown', { albumId: album.id, event })
+	}
+
+	function handleEdit(event: MouseEvent) {
+		dispatch('edit', { album, event })
+	}
+
+	function handleTogglePublish(event: MouseEvent) {
+		dispatch('togglePublish', { album, event })
+	}
+
+	function handleDelete(event: MouseEvent) {
+		dispatch('delete', { album, event })
+	}
+
+	// Get thumbnail - try cover photo first, then first photo
+	function getThumbnailUrl(): string | null {
+		if (album.coverPhotoId && album.photos.length > 0) {
+			const coverPhoto = album.photos.find(p => p.id === album.coverPhotoId)
+			if (coverPhoto) {
+				return coverPhoto.thumbnailUrl || coverPhoto.url
+			}
+		}
+		
+		// Fallback to first photo
+		if (album.photos.length > 0) {
+			return album.photos[0].thumbnailUrl || album.photos[0].url
+		}
+		
+		return null
+	}
+
+	function getPhotoCount(): number {
+		return album._count?.photos || 0
+	}
+</script>
+
+<div
+	class="album-item"
+	role="button"
+	tabindex="0"
+	onclick={handleAlbumClick}
+	onkeydown={(e) => e.key === 'Enter' && handleAlbumClick()}
+>
+	<div class="album-thumbnail">
+		{#if getThumbnailUrl()}
+			<img src={getThumbnailUrl()} alt="{album.title} thumbnail" class="thumbnail-image" />
+		{:else}
+			<div class="thumbnail-placeholder">
+				<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+					<path
+						d="M19 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.11 21 21 20.1 21 19V5C21 3.9 20.11 3 19 3ZM19 19H5V5H19V19ZM13.96 12.29L11.21 15.83L9.25 13.47L6.5 17H17.5L13.96 12.29Z"
+						fill="currentColor"
+					/>
+				</svg>
+			</div>
+		{/if}
+	</div>
+
+	<div class="album-info">
+		<h3 class="album-title">{album.title}</h3>
+		<AdminByline 
+			sections={[
+				album.isPhotography ? 'Photography' : 'Album',
+				album.status === 'published' ? 'Published' : 'Draft',
+				`${getPhotoCount()} ${getPhotoCount() === 1 ? 'photo' : 'photos'}`,
+				album.status === 'published' && album.publishedAt 
+					? `Published ${formatRelativeTime(album.publishedAt)}`
+					: `Created ${formatRelativeTime(album.createdAt)}`
+			]} 
+		/>
+	</div>
+
+	<div class="dropdown-container">
+		<button class="action-button" onclick={handleToggleDropdown} aria-label="Album actions">
+			<svg
+				width="20"
+				height="20"
+				viewBox="0 0 20 20"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<circle cx="10" cy="4" r="1.5" fill="currentColor" />
+				<circle cx="10" cy="10" r="1.5" fill="currentColor" />
+				<circle cx="10" cy="16" r="1.5" fill="currentColor" />
+			</svg>
+		</button>
+
+		{#if isDropdownActive}
+			<div class="dropdown-menu">
+				<button class="dropdown-item" onclick={handleEdit}> Edit album </button>
+				<button class="dropdown-item" onclick={handleTogglePublish}>
+					{album.status === 'published' ? 'Unpublish' : 'Publish'} album
+				</button>
+				<div class="dropdown-divider"></div>
+				<button class="dropdown-item delete" onclick={handleDelete}> Delete album </button>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style lang="scss">
+	.album-item {
+		display: flex;
+		box-sizing: border-box;
+		align-items: center;
+		gap: $unit-2x;
+		padding: $unit-2x;
+		background: white;
+		border-radius: $unit-2x;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		width: 100%;
+		text-align: left;
+
+		&:hover {
+			background-color: $grey-95;
+		}
+	}
+
+	.album-thumbnail {
+		flex-shrink: 0;
+		width: 60px;
+		height: 60px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: $unit;
+		overflow: hidden;
+		background-color: $grey-90;
+
+		.thumbnail-image {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		.thumbnail-placeholder {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			height: 100%;
+			color: $grey-50;
+		}
+	}
+
+	.album-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: $unit-half;
+		min-width: 0;
+	}
+
+	.album-title {
+		font-size: 1rem;
+		font-weight: 600;
+		color: $grey-10;
+		margin: 0;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.dropdown-container {
+		position: relative;
+		flex-shrink: 0;
+	}
+
+	.action-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 36px;
+		height: 36px;
+		padding: 0;
+		background: transparent;
+		border: none;
+		border-radius: $unit;
+		cursor: pointer;
+		color: $grey-30;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background-color: rgba(0, 0, 0, 0.05);
+		}
+	}
+
+	.dropdown-menu {
+		position: absolute;
+		top: 100%;
+		right: 0;
+		margin-top: $unit-half;
+		background: white;
+		border: 1px solid $grey-85;
+		border-radius: $unit;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+		overflow: hidden;
+		min-width: 180px;
+		z-index: 10;
+	}
+
+	.dropdown-item {
+		width: 100%;
+		padding: $unit-2x $unit-3x;
+		background: none;
+		border: none;
+		text-align: left;
+		font-size: 0.875rem;
+		color: $grey-20;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+
+		&:hover {
+			background-color: $grey-95;
+		}
+
+		&.delete {
+			color: $red-60;
+		}
+	}
+
+	.dropdown-divider {
+		height: 1px;
+		background-color: $grey-90;
+		margin: $unit-half 0;
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/components/admin/Input.svelte b/src/lib/components/admin/Input.svelte
index c1888cd..5fb6978 100644
--- a/src/lib/components/admin/Input.svelte
+++ b/src/lib/components/admin/Input.svelte
@@ -348,6 +348,7 @@
 	.input-large {
 		padding: $unit-2x $unit-3x;
 		font-size: 16px;
+		box-sizing: border-box;
 	}
 
 	// Shape variants - pill vs rounded
diff --git a/src/lib/components/admin/MetadataPopover.svelte b/src/lib/components/admin/MetadataPopover.svelte
new file mode 100644
index 0000000..1860bc3
--- /dev/null
+++ b/src/lib/components/admin/MetadataPopover.svelte
@@ -0,0 +1,315 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import Input from './Input.svelte'
+
+	type Props = {
+		post: any
+		postType: 'post' | 'essay'
+		slug: string
+		excerpt: string
+		tags: string[]
+		tagInput: string
+		triggerElement: HTMLElement
+		onAddTag: () => void
+		onRemoveTag: (tag: string) => void
+		onDelete: () => void
+	}
+
+	let {
+		post,
+		postType,
+		slug = $bindable(),
+		excerpt = $bindable(),
+		tags = $bindable(),
+		tagInput = $bindable(),
+		triggerElement,
+		onAddTag,
+		onRemoveTag,
+		onDelete
+	}: Props = $props()
+
+	let popoverElement: HTMLDivElement
+	let portalTarget: HTMLElement
+
+	function updatePosition() {
+		if (!popoverElement || !triggerElement) return
+
+		const triggerRect = triggerElement.getBoundingClientRect()
+		const popoverRect = popoverElement.getBoundingClientRect()
+		const viewportWidth = window.innerWidth
+		const viewportHeight = window.innerHeight
+
+		// Find the AdminPage container to align with its right edge
+		const adminPage =
+			document.querySelector('.admin-page') || document.querySelector('[data-admin-page]')
+		const adminPageRect = adminPage?.getBoundingClientRect()
+
+		// Position below the trigger button
+		let top = triggerRect.bottom + 8
+
+		// Align closer to the right edge of AdminPage, with some padding
+		let left: number
+		if (adminPageRect) {
+			// Position to align with AdminPage right edge minus padding
+			left = adminPageRect.right - popoverRect.width - 24
+		} else {
+			// Fallback to viewport-based positioning
+			left = triggerRect.right - popoverRect.width
+		}
+
+		// Ensure we don't go off-screen horizontally
+		if (left < 16) {
+			left = 16
+		} else if (left + popoverRect.width > viewportWidth - 16) {
+			left = viewportWidth - popoverRect.width - 16
+		}
+
+		// Adjust if would go off-screen vertically
+		if (top + popoverRect.height > viewportHeight - 16) {
+			top = triggerRect.top - popoverRect.height - 8
+		}
+
+		popoverElement.style.position = 'fixed'
+		popoverElement.style.top = `${top}px`
+		popoverElement.style.left = `${left}px`
+		popoverElement.style.zIndex = '1000'
+	}
+
+	onMount(() => {
+		// Create portal target
+		portalTarget = document.createElement('div')
+		portalTarget.style.position = 'absolute'
+		portalTarget.style.top = '0'
+		portalTarget.style.left = '0'
+		portalTarget.style.pointerEvents = 'none'
+		document.body.appendChild(portalTarget)
+
+		// Initial positioning
+		updatePosition()
+
+		// Update position on scroll/resize
+		const handleUpdate = () => updatePosition()
+		window.addEventListener('scroll', handleUpdate, true)
+		window.addEventListener('resize', handleUpdate)
+
+		return () => {
+			window.removeEventListener('scroll', handleUpdate, true)
+			window.removeEventListener('resize', handleUpdate)
+			if (portalTarget) {
+				document.body.removeChild(portalTarget)
+			}
+		}
+	})
+
+	$effect(() => {
+		if (popoverElement && portalTarget && triggerElement) {
+			portalTarget.appendChild(popoverElement)
+			portalTarget.style.pointerEvents = 'auto'
+			updatePosition()
+		}
+	})
+</script>
+
+<div class="metadata-popover" bind:this={popoverElement}>
+	<div class="popover-content">
+		<h3>Post Settings</h3>
+
+		<Input 
+			label="Slug" 
+			bind:value={slug} 
+			placeholder="post-slug"
+		/>
+
+		{#if postType === 'essay'}
+			<Input 
+				type="textarea"
+				label="Excerpt" 
+				bind:value={excerpt}
+				rows={3}
+				placeholder="Brief description..."
+			/>
+		{/if}
+
+		<div class="tags-section">
+			<Input 
+				label="Tags"
+				bind:value={tagInput}
+				onkeydown={(e) => e.key === 'Enter' && (e.preventDefault(), onAddTag())}
+				placeholder="Add tags..."
+			/>
+			<button type="button" onclick={onAddTag} class="add-tag-btn">Add</button>
+			
+			{#if tags.length > 0}
+				<div class="tags">
+					{#each tags as tag}
+						<span class="tag">
+							{tag}
+							<button onclick={() => onRemoveTag(tag)}>×</button>
+						</span>
+					{/each}
+				</div>
+			{/if}
+		</div>
+
+		<div class="metadata">
+			<p>Created: {new Date(post.createdAt).toLocaleString()}</p>
+			<p>Updated: {new Date(post.updatedAt).toLocaleString()}</p>
+			{#if post.publishedAt}
+				<p>Published: {new Date(post.publishedAt).toLocaleString()}</p>
+			{/if}
+		</div>
+	</div>
+
+	<div class="popover-footer">
+		<button class="btn btn-danger" onclick={onDelete}>
+			<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+				<path
+					d="M4 4L12 12M4 12L12 4"
+					stroke="currentColor"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+			Delete Post
+		</button>
+	</div>
+</div>
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+
+	.metadata-popover {
+		background: white;
+		border: 1px solid $grey-80;
+		border-radius: $card-corner-radius;
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+		min-width: 420px;
+		max-width: 480px;
+		display: flex;
+		flex-direction: column;
+		pointer-events: auto;
+	}
+
+	.popover-content {
+		padding: $unit-3x;
+		display: flex;
+		flex-direction: column;
+		gap: $unit-3x;
+
+		h3 {
+			font-size: 1.125rem;
+			font-weight: 600;
+			margin: 0;
+			color: $grey-10;
+		}
+	}
+
+	.popover-footer {
+		padding: $unit-3x;
+		border-top: 1px solid $grey-90;
+		display: flex;
+		justify-content: flex-start;
+	}
+
+	.tags-section {
+		display: flex;
+		flex-direction: column;
+		gap: $unit;
+	}
+
+	.add-tag-btn {
+		align-self: flex-start;
+		margin-top: $unit-half;
+		padding: $unit $unit-2x;
+		background: $grey-10;
+		color: white;
+		border: none;
+		border-radius: 6px;
+		font-size: 13px;
+		cursor: pointer;
+		transition: background-color 0.15s ease;
+
+		&:hover {
+			background: $grey-20;
+		}
+	}
+
+	.tags {
+		display: flex;
+		flex-wrap: wrap;
+		gap: $unit;
+		margin-top: $unit;
+	}
+
+	.tag {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		padding: 4px $unit-2x;
+		background: $grey-80;
+		border-radius: 20px;
+		font-size: 0.75rem;
+
+		button {
+			background: none;
+			border: none;
+			color: $grey-40;
+			cursor: pointer;
+			padding: 0;
+			font-size: 1rem;
+			line-height: 1;
+
+			&:hover {
+				color: $grey-10;
+			}
+		}
+	}
+
+	.metadata {
+		font-size: 0.75rem;
+		color: $grey-40;
+
+		p {
+			margin: $unit-half 0;
+		}
+	}
+
+	.btn {
+		padding: $unit-2x $unit-3x;
+		border: none;
+		border-radius: 50px;
+		font-size: 0.925rem;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		display: flex;
+		align-items: center;
+		gap: $unit;
+
+		&:disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+
+		&.btn-small {
+			padding: $unit $unit-2x;
+			font-size: 0.875rem;
+		}
+
+		&.btn-danger {
+			background-color: #dc2626;
+			color: white;
+
+			&:hover:not(:disabled) {
+				background-color: #b91c1c;
+			}
+		}
+	}
+
+	@include breakpoint('phone') {
+		.metadata-popover {
+			min-width: 280px;
+			max-width: calc(100vw - 2rem);
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/ProjectForm.svelte b/src/lib/components/admin/ProjectForm.svelte
index 7363fb2..ad55230 100644
--- a/src/lib/components/admin/ProjectForm.svelte
+++ b/src/lib/components/admin/ProjectForm.svelte
@@ -223,7 +223,17 @@
 <AdminPage>
 	<header slot="header">
 		<div class="header-left">
-			<!-- Empty spacer for balance -->
+			<button class="btn-icon" onclick={() => goto('/admin/projects')}>
+				<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+					<path
+						d="M12.5 15L7.5 10L12.5 5"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</button>
 		</div>
 		<div class="header-center">
 			<AdminSegmentedControl
@@ -356,6 +366,9 @@
 
 		.header-left {
 			width: 250px;
+			display: flex;
+			align-items: center;
+			gap: $unit-2x;
 		}
 
 		.header-center {
@@ -371,6 +384,25 @@
 		}
 	}
 
+	.btn-icon {
+		width: 40px;
+		height: 40px;
+		border: none;
+		background: none;
+		color: $grey-40;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 8px;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background: $grey-90;
+			color: $grey-10;
+		}
+	}
+
 	.admin-container {
 		width: 100%;
 		margin: 0 auto;
diff --git a/src/lib/server/api-utils.ts b/src/lib/server/api-utils.ts
index 1f237ea..8273860 100644
--- a/src/lib/server/api-utils.ts
+++ b/src/lib/server/api-utils.ts
@@ -47,7 +47,7 @@ export function isValidStatus(status: any): status is Status {
 }
 
 // Post type validation
-export const VALID_POST_TYPES = ['blog', 'microblog', 'link', 'photo', 'album'] as const
+export const VALID_POST_TYPES = ['post', 'essay'] as const
 export type PostType = (typeof VALID_POST_TYPES)[number]
 
 export function isValidPostType(type: any): type is PostType {
diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
index 5cf7089..01421bb 100644
--- a/src/routes/admin/+page.svelte
+++ b/src/routes/admin/+page.svelte
@@ -1,62 +1,8 @@
 <script lang="ts">
-	import AdminPage from '$lib/components/admin/AdminPage.svelte'
-	import Button from '$lib/components/admin/Button.svelte'
 	import { goto } from '$app/navigation'
+	import { onMount } from 'svelte'
 
-	function goToMediaLibraryTest() {
-		goto('/admin/media-library-test')
-	}
-</script>
-
-<AdminPage title="Dashboard" subtitle="Admin overview and quick actions">
-	<div class="dashboard-content">
-		<section class="quick-actions">
-			<h2>Quick Actions</h2>
-			<div class="actions-grid">
-				<Button variant="primary" onclick={() => goto('/admin/projects/new')}>
-					New Project
-				</Button>
-				<Button variant="primary" onclick={() => goto('/admin/posts/new')}>
-					New Post
-				</Button>
-				<Button variant="secondary" onclick={() => goto('/admin/media')}>
-					Browse Media
-				</Button>
-				<Button variant="ghost" onclick={goToMediaLibraryTest}>
-					Test Media Library
-				</Button>
-				<Button variant="ghost" onclick={() => goto('/admin/form-components-test')}>
-					Test Form Components
-				</Button>
-			</div>
-		</section>
-	</div>
-</AdminPage>
-
-<style lang="scss">
-	.dashboard-content {
-		max-width: 800px;
-		margin: 0 auto;
-		padding: $unit-4x;
-	}
-
-	.quick-actions {
-		background: white;
-		padding: $unit-4x;
-		border-radius: $card-corner-radius;
-		border: 1px solid $grey-90;
-
-		h2 {
-			margin: 0 0 $unit-3x 0;
-			font-size: 1.25rem;
-			font-weight: 600;
-			color: $grey-10;
-		}
-	}
-
-	.actions-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-		gap: $unit-2x;
-	}
-</style>
\ No newline at end of file
+	onMount(() => {
+		goto('/admin/projects', { replaceState: true })
+	})
+</script>
\ No newline at end of file
diff --git a/src/routes/admin/albums/+page.svelte b/src/routes/admin/albums/+page.svelte
index c554bb0..a707996 100644
--- a/src/routes/admin/albums/+page.svelte
+++ b/src/routes/admin/albums/+page.svelte
@@ -4,17 +4,48 @@
 	import AdminPage from '$lib/components/admin/AdminPage.svelte'
 	import AdminHeader from '$lib/components/admin/AdminHeader.svelte'
 	import AdminFilters from '$lib/components/admin/AdminFilters.svelte'
-	import DataTable from '$lib/components/admin/DataTable.svelte'
+	import AlbumListItem from '$lib/components/admin/AlbumListItem.svelte'
+	import DeleteConfirmationModal from '$lib/components/admin/DeleteConfirmationModal.svelte'
 	import Button from '$lib/components/admin/Button.svelte'
 	import Select from '$lib/components/admin/Select.svelte'
-	import LoadingSpinner from '$lib/components/admin/LoadingSpinner.svelte'
+
+	interface Photo {
+		id: number
+		url: string
+		thumbnailUrl: string | null
+		caption: string | null
+	}
+
+	interface Album {
+		id: number
+		slug: string
+		title: string
+		description: string | null
+		date: string | null
+		location: string | null
+		coverPhotoId: number | null
+		isPhotography: boolean
+		status: string
+		showInUniverse: boolean
+		publishedAt: string | null
+		createdAt: string
+		updatedAt: string
+		photos: Photo[]
+		_count: {
+			photos: number
+		}
+	}
 
 	// State
-	let albums = $state<any[]>([])
+	let albums = $state<Album[]>([])
+	let filteredAlbums = $state<Album[]>([])
 	let isLoading = $state(true)
 	let error = $state('')
 	let total = $state(0)
 	let albumTypeCounts = $state<Record<string, number>>({})
+	let showDeleteModal = $state(false)
+	let albumToDelete = $state<Album | null>(null)
+	let activeDropdown = $state<number | null>(null)
 
 	// Filter state
 	let photographyFilter = $state<string>('all')
@@ -26,72 +57,29 @@
 		{ value: 'false', label: 'Regular albums' }
 	]
 
-	const columns = [
-		{
-			key: 'title',
-			label: 'Title',
-			width: '40%',
-			render: (album: any) => {
-				return album.title || '(Untitled Album)'
-			}
-		},
-		{
-			key: 'type',
-			label: 'Type',
-			width: '20%',
-			render: (album: any) => {
-				const baseType = '🖼️ Album'
-				if (album.isPhotography) {
-					return `${baseType} 📸`
-				}
-				return baseType
-			}
-		},
-		{
-			key: 'photoCount',
-			label: 'Photos',
-			width: '15%',
-			render: (album: any) => {
-				return album._count?.photos || 0
-			}
-		},
-		{
-			key: 'status',
-			label: 'Status',
-			width: '15%',
-			render: (album: any) => {
-				return album.status === 'published' ? '🟢 Published' : '⚪ Draft'
-			}
-		},
-		{
-			key: 'updatedAt',
-			label: 'Updated',
-			width: '10%',
-			render: (album: any) => {
-				return new Date(album.updatedAt).toLocaleDateString()
-			}
-		}
-	]
-
 	onMount(async () => {
 		await loadAlbums()
+		// Close dropdown when clicking outside
+		document.addEventListener('click', handleOutsideClick)
+		return () => document.removeEventListener('click', handleOutsideClick)
 	})
 
+	function handleOutsideClick(event: MouseEvent) {
+		const target = event.target as HTMLElement
+		if (!target.closest('.dropdown-container')) {
+			activeDropdown = null
+		}
+	}
+
 	async function loadAlbums() {
 		try {
-			isLoading = true
 			const auth = localStorage.getItem('admin_auth')
 			if (!auth) {
 				goto('/admin/login')
 				return
 			}
 
-			let url = '/api/albums'
-			if (photographyFilter !== 'all') {
-				url += `?isPhotography=${photographyFilter}`
-			}
-
-			const response = await fetch(url, {
+			const response = await fetch('/api/albums', {
 				headers: { Authorization: `Basic ${auth}` }
 			})
 
@@ -114,6 +102,9 @@
 				regular: albums.filter((a) => !a.isPhotography).length
 			}
 			albumTypeCounts = counts
+
+			// Apply initial filter
+			applyFilter()
 		} catch (err) {
 			error = 'Failed to load albums'
 			console.error(err)
@@ -122,12 +113,89 @@
 		}
 	}
 
-	function handleRowClick(album: any) {
-		goto(`/admin/albums/${album.id}/edit`)
+	function applyFilter() {
+		if (photographyFilter === 'all') {
+			filteredAlbums = albums
+		} else if (photographyFilter === 'true') {
+			filteredAlbums = albums.filter((album) => album.isPhotography === true)
+		} else if (photographyFilter === 'false') {
+			filteredAlbums = albums.filter((album) => album.isPhotography === false)
+		}
+	}
+
+	function handleToggleDropdown(event: CustomEvent<{ albumId: number; event: MouseEvent }>) {
+		event.detail.event.stopPropagation()
+		activeDropdown = activeDropdown === event.detail.albumId ? null : event.detail.albumId
+	}
+
+	function handleEdit(event: CustomEvent<{ album: Album; event: MouseEvent }>) {
+		event.detail.event.stopPropagation()
+		goto(`/admin/albums/${event.detail.album.id}/edit`)
+	}
+
+	async function handleTogglePublish(event: CustomEvent<{ album: Album; event: MouseEvent }>) {
+		event.detail.event.stopPropagation()
+		activeDropdown = null
+
+		const album = event.detail.album
+
+		try {
+			const auth = localStorage.getItem('admin_auth')
+			const newStatus = album.status === 'published' ? 'draft' : 'published'
+
+			const response = await fetch(`/api/albums/${album.id}`, {
+				method: 'PATCH',
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Basic ${auth}`
+				},
+				body: JSON.stringify({ status: newStatus })
+			})
+
+			if (response.ok) {
+				await loadAlbums()
+			}
+		} catch (err) {
+			console.error('Failed to update album status:', err)
+		}
+	}
+
+	function handleDelete(event: CustomEvent<{ album: Album; event: MouseEvent }>) {
+		event.detail.event.stopPropagation()
+		activeDropdown = null
+		albumToDelete = event.detail.album
+		showDeleteModal = true
+	}
+
+	async function confirmDelete() {
+		if (!albumToDelete) return
+
+		try {
+			const auth = localStorage.getItem('admin_auth')
+
+			const response = await fetch(`/api/albums/${albumToDelete.id}`, {
+				method: 'DELETE',
+				headers: { Authorization: `Basic ${auth}` }
+			})
+
+			if (response.ok) {
+				await loadAlbums()
+			}
+		} catch (err) {
+			console.error('Failed to delete album:', err)
+		} finally {
+			showDeleteModal = false
+			albumToDelete = null
+		}
+	}
+
+	function cancelDelete() {
+		showDeleteModal = false
+		albumToDelete = null
 	}
 
 	function handleFilterChange() {
-		loadAlbums()
+		applyFilter()
 	}
 
 	function handleNewAlbum() {
@@ -158,41 +226,94 @@
 			{/snippet}
 		</AdminFilters>
 
-		<!-- Albums Table -->
+		<!-- Albums List -->
 		{#if isLoading}
-			<div class="loading-container">
-				<LoadingSpinner />
+			<div class="loading">
+				<div class="spinner"></div>
+				<p>Loading albums...</p>
+			</div>
+		{:else if filteredAlbums.length === 0}
+			<div class="empty-state">
+				<p>
+					{#if photographyFilter === 'all'}
+						No albums found. Create your first album!
+					{:else}
+						No albums found matching the current filters. Try adjusting your filters or create a new album.
+					{/if}
+				</p>
 			</div>
 		{:else}
-			<DataTable
-				data={albums}
-				{columns}
-				loading={isLoading}
-				emptyMessage="No albums found. Create your first album!"
-				onRowClick={handleRowClick}
-			/>
+			<div class="albums-list">
+				{#each filteredAlbums as album}
+					<AlbumListItem
+						{album}
+						isDropdownActive={activeDropdown === album.id}
+						ontoggleDropdown={handleToggleDropdown}
+						onedit={handleEdit}
+						ontogglePublish={handleTogglePublish}
+						ondelete={handleDelete}
+					/>
+				{/each}
+			</div>
 		{/if}
 	{/if}
 </AdminPage>
 
+<DeleteConfirmationModal
+	bind:isOpen={showDeleteModal}
+	title="Delete album?"
+	message={albumToDelete
+		? `Are you sure you want to delete "${albumToDelete.title}"? This action cannot be undone.`
+		: ''}
+	onConfirm={confirmDelete}
+	onCancel={cancelDelete}
+/>
+
 <style lang="scss">
-	@import '$styles/variables.scss';
-
-
 	.error {
-		background: rgba(239, 68, 68, 0.1);
-		color: #dc2626;
-		padding: $unit-3x;
-		border-radius: $unit-2x;
-		border: 1px solid rgba(239, 68, 68, 0.2);
-		margin-bottom: $unit-4x;
+		text-align: center;
+		padding: $unit-6x;
+		color: #d33;
 	}
 
+	.loading {
+		padding: $unit-8x;
+		text-align: center;
+		color: $grey-40;
 
-	.loading-container {
+		.spinner {
+			width: 32px;
+			height: 32px;
+			border: 3px solid $grey-80;
+			border-top-color: $primary-color;
+			border-radius: 50%;
+			margin: 0 auto $unit-2x;
+			animation: spin 0.8s linear infinite;
+		}
+
+		p {
+			margin: 0;
+		}
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.empty-state {
+		padding: $unit-8x;
+		text-align: center;
+		color: $grey-40;
+
+		p {
+			margin: 0;
+		}
+	}
+
+	.albums-list {
 		display: flex;
-		justify-content: center;
-		align-items: center;
-		min-height: 400px;
+		flex-direction: column;
 	}
 </style>
diff --git a/src/routes/admin/posts/[id]/edit/+page.svelte b/src/routes/admin/posts/[id]/edit/+page.svelte
index 01f1d1b..aff4675 100644
--- a/src/routes/admin/posts/[id]/edit/+page.svelte
+++ b/src/routes/admin/posts/[id]/edit/+page.svelte
@@ -3,72 +3,86 @@
 	import { goto } from '$app/navigation'
 	import { onMount } from 'svelte'
 	import AdminPage from '$lib/components/admin/AdminPage.svelte'
-	import FormField from '$lib/components/admin/FormField.svelte'
-	import FormFieldWrapper from '$lib/components/admin/FormFieldWrapper.svelte'
 	import Editor from '$lib/components/admin/Editor.svelte'
 	import LoadingSpinner from '$lib/components/admin/LoadingSpinner.svelte'
-	import PhotoPostForm from '$lib/components/admin/PhotoPostForm.svelte'
-	import AlbumForm from '$lib/components/admin/AlbumForm.svelte'
+	import MetadataPopover from '$lib/components/admin/MetadataPopover.svelte'
 	import type { JSONContent } from '@tiptap/core'
 
-	let post: any = null
-	let loading = true
-	let saving = false
+	let post = $state<any>(null)
+	let loading = $state(true)
+	let saving = $state(false)
+	let loadError = $state('')
 
-	let title = ''
-	let postType: 'blog' | 'microblog' | 'link' | 'photo' | 'album' = 'blog'
-	let status: 'draft' | 'published' = 'draft'
-	let slug = ''
-	let excerpt = ''
-	let linkUrl = ''
-	let linkDescription = ''
-	let content: JSONContent = { type: 'doc', content: [] }
-	let tags: string[] = []
-	let tagInput = ''
-	let showMetadata = false
-	let isPublishDropdownOpen = false
+	let title = $state('')
+	let postType = $state<'post' | 'essay'>('post')
+	let status = $state<'draft' | 'published'>('draft')
+	let slug = $state('')
+	let excerpt = $state('')
+	let content = $state<JSONContent>({ type: 'doc', content: [] })
+	let tags = $state<string[]>([])
+	let tagInput = $state('')
+	let showMetadata = $state(false)
+	let isPublishDropdownOpen = $state(false)
 	let publishButtonRef: HTMLButtonElement
+	let metadataButtonRef: HTMLButtonElement
 
 	const postTypeConfig = {
-		blog: { icon: '📝', label: 'Blog Post', showTitle: true, showContent: true },
-		microblog: { icon: '💭', label: 'Microblog', showTitle: false, showContent: true },
-		link: { icon: '🔗', label: 'Link', showTitle: true, showContent: false },
-		photo: { icon: '📷', label: 'Photo', showTitle: true, showContent: false },
-		album: { icon: '🖼️', label: 'Album', showTitle: true, showContent: false }
+		post: { icon: '💭', label: 'Post', showTitle: false, showContent: true },
+		essay: { icon: '📝', label: 'Essay', showTitle: true, showContent: true }
 	}
 
 	let config = $derived(postTypeConfig[postType])
 
 	onMount(async () => {
+		// Wait a tick to ensure page params are loaded
+		await new Promise((resolve) => setTimeout(resolve, 0))
 		await loadPost()
 	})
 
 	async function loadPost() {
+		const postId = $page.params.id
+
+		if (!postId) {
+			loadError = 'No post ID provided'
+			loading = false
+			return
+		}
+
 		const auth = localStorage.getItem('admin_auth')
+
 		if (!auth) {
 			goto('/admin/login')
 			return
 		}
 
 		try {
-			const response = await fetch(`/api/posts/${$page.params.id}`, {
+			const response = await fetch(`/api/posts/${postId}`, {
 				headers: { Authorization: `Basic ${auth}` }
 			})
+
 			if (response.ok) {
 				post = await response.json()
+
 				// Populate form fields
 				title = post.title || ''
-				postType = post.type || post.postType
-				status = post.status
+				postType = post.postType || 'post'
+				status = post.status || 'draft'
 				slug = post.slug || ''
 				excerpt = post.excerpt || ''
-				linkUrl = post.link_url || post.linkUrl || ''
-				linkDescription = post.link_description || post.linkDescription || ''
 				content = post.content || { type: 'doc', content: [] }
 				tags = post.tags || []
+			} else {
+				if (response.status === 404) {
+					loadError = 'Post not found'
+				} else if (response.status === 401) {
+					goto('/admin/login')
+					return
+				} else {
+					loadError = `Failed to load post: ${response.status} ${response.statusText}`
+				}
 			}
 		} catch (error) {
-			console.error('Failed to load post:', error)
+			loadError = 'Network error occurred while loading post'
 		} finally {
 			loading = false
 		}
@@ -94,14 +108,14 @@
 
 		saving = true
 		const postData = {
-			title: config.showTitle ? title : null,
+			title: config?.showTitle ? title : null,
 			slug,
 			type: postType,
 			status: publishStatus || status,
-			content: config.showContent ? content : null,
-			excerpt: postType === 'blog' ? excerpt : undefined,
-			link_url: postType === 'link' ? linkUrl : undefined,
-			link_description: postType === 'link' ? linkDescription : undefined,
+			content: config?.showContent ? content : null,
+			excerpt: postType === 'essay' ? excerpt : undefined,
+			link_url: undefined,
+			linkDescription: undefined,
 			tags
 		}
 
@@ -157,12 +171,31 @@
 		}
 	}
 
+	function handleMetadataPopover(event: MouseEvent) {
+		const target = event.target as Node
+		// Don't close if clicking inside the metadata button or anywhere in a metadata popover
+		if (
+			metadataButtonRef?.contains(target) ||
+			document.querySelector('.metadata-popover')?.contains(target)
+		) {
+			return
+		}
+		showMetadata = false
+	}
+
 	$effect(() => {
 		if (isPublishDropdownOpen) {
 			document.addEventListener('click', handlePublishDropdown)
 			return () => document.removeEventListener('click', handlePublishDropdown)
 		}
 	})
+
+	$effect(() => {
+		if (showMetadata) {
+			document.addEventListener('click', handleMetadataPopover)
+			return () => document.removeEventListener('click', handleMetadataPopover)
+		}
+	})
 </script>
 
 <AdminPage>
@@ -180,33 +213,41 @@
 						/>
 					</svg>
 				</button>
-				<h1>{config.icon} Edit {config.label}</h1>
 			</div>
 			<div class="header-actions">
-				<button class="btn btn-text" onclick={handleDelete}>
-					<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-						<path
-							d="M4 4L12 12M4 12L12 4"
-							stroke="currentColor"
-							stroke-width="1.5"
-							stroke-linecap="round"
-							stroke-linejoin="round"
+				<div class="metadata-popover-container">
+					<button
+						class="btn btn-text"
+						onclick={(e) => {
+							e.stopPropagation()
+							showMetadata = !showMetadata
+						}}
+						bind:this={metadataButtonRef}
+					>
+						<svg width="16" height="16" viewBox="0 0 56 56" fill="none">
+							<path
+								fill="currentColor"
+								d="M 36.4023 19.3164 C 38.8398 19.3164 40.9257 17.7461 41.6992 15.5898 L 49.8085 15.5898 C 50.7695 15.5898 51.6133 14.7461 51.6133 13.6914 C 51.6133 12.6367 50.7695 11.8164 49.8085 11.8164 L 41.7226 11.8164 C 40.9257 9.6367 38.8398 8.0430 36.4023 8.0430 C 33.9648 8.0430 31.8789 9.6367 31.1054 11.8164 L 6.2851 11.8164 C 5.2304 11.8164 4.3867 12.6367 4.3867 13.6914 C 4.3867 14.7461 5.2304 15.5898 6.2851 15.5898 L 31.1054 15.5898 C 31.8789 17.7461 33.9648 19.3164 36.4023 19.3164 Z M 6.1913 26.1133 C 5.2304 26.1133 4.3867 26.9570 4.3867 28.0117 C 4.3867 29.0664 5.2304 29.8867 6.1913 29.8867 L 14.5586 29.8867 C 15.3320 32.0898 17.4179 33.6601 19.8554 33.6601 C 22.3164 33.6601 24.4023 32.0898 25.1757 29.8867 L 49.7149 29.8867 C 50.7695 29.8867 51.6133 29.0664 51.6133 28.0117 C 51.6133 26.9570 50.7695 26.1133 49.7149 26.1133 L 25.1757 26.1133 C 24.3789 23.9570 22.2929 22.3867 19.8554 22.3867 C 17.4413 22.3867 15.3554 23.9570 14.5586 26.1133 Z M 36.4023 47.9570 C 38.8398 47.9570 40.9257 46.3867 41.6992 44.2070 L 49.8085 44.2070 C 50.7695 44.2070 51.6133 43.3867 51.6133 42.3320 C 51.6133 41.2773 50.7695 40.4336 49.8085 40.4336 L 41.6992 40.4336 C 40.9257 38.2539 38.8398 36.7070 36.4023 36.7070 C 33.9648 36.7070 31.8789 38.2539 31.1054 40.4336 L 6.2851 40.4336 C 5.2304 40.4336 4.3867 41.2773 4.3867 42.3320 C 4.3867 43.3867 5.2304 44.2070 6.2851 44.2070 L 31.1054 44.2070 C 31.8789 46.3867 33.9648 47.9570 36.4023 47.9570 Z"
+							/>
+						</svg>
+						Metadata
+					</button>
+
+					{#if showMetadata && metadataButtonRef}
+						<MetadataPopover
+							{post}
+							{postType}
+							triggerElement={metadataButtonRef}
+							bind:slug
+							bind:excerpt
+							bind:tags
+							bind:tagInput
+							onAddTag={addTag}
+							onRemoveTag={removeTag}
+							onDelete={handleDelete}
 						/>
-					</svg>
-					Delete
-				</button>
-				<button class="btn btn-text" onclick={() => (showMetadata = !showMetadata)}>
-					<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-						<path
-							d="M8 4V8L10 10M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 8 4.68629 8 8Z"
-							stroke="currentColor"
-							stroke-width="1.5"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						/>
-					</svg>
-					Metadata
-				</button>
+					{/if}
+				</div>
 				{#if status === 'draft'}
 					<div class="publish-dropdown">
 						<button
@@ -253,153 +294,25 @@
 		<div class="loading-container">
 			<LoadingSpinner />
 		</div>
-	{:else if post && postType === 'photo'}
-		<PhotoPostForm 
-			mode="edit" 
-			postId={post.id}
-			initialData={{
-				title: post.title,
-				content: post.content,
-				featuredImage: post.featuredImage,
-				status: post.status,
-				tags: post.tags
-			}}
-		/>
-	{:else if post && postType === 'album'}
-		<AlbumForm 
-			mode="edit" 
-			postId={post.id}
-			initialData={{
-				title: post.title,
-				content: post.content,
-				gallery: post.gallery || [],
-				status: post.status,
-				tags: post.tags
-			}}
-		/>
+	{:else if loadError}
+		<div class="error-container">
+			<h2>Error Loading Post</h2>
+			<p>{loadError}</p>
+			<button class="btn btn-primary" onclick={() => loadPost()}>Try Again</button>
+		</div>
 	{:else if post}
 		<div class="post-composer">
 			<div class="main-content">
-				{#if config.showTitle}
+				{#if config?.showTitle}
 					<input type="text" bind:value={title} placeholder="Title" class="title-input" />
 				{/if}
 
-				{#if postType === 'link'}
-					<div class="link-fields">
-						<input
-							type="url"
-							bind:value={linkUrl}
-							placeholder="https://example.com"
-							class="link-url-input"
-							required
-						/>
-						<textarea
-							bind:value={linkDescription}
-							class="link-description"
-							rows="3"
-							placeholder="What makes this link interesting?"
-						/>
-					</div>
-				{:else if postType === 'photo'}
-					<div class="photo-upload">
-						<div class="photo-placeholder">
-							<svg width="48" height="48" viewBox="0 0 48 48" fill="none">
-								<path
-									d="M40 14H31.5L28 10H20L16.5 14H8C5.8 14 4 15.8 4 18V34C4 36.2 5.8 38 8 38H40C42.2 38 44 36.2 44 34V18C44 15.8 42.2 14 40 14ZM24 32C19.6 32 16 28.4 16 24C16 19.6 19.6 16 24 16C28.4 16 32 19.6 32 24C32 28.4 28.4 32 24 32Z"
-									fill="currentColor"
-									opacity="0.1"
-								/>
-								<path
-									d="M24 28C26.2091 28 28 26.2091 28 24C28 21.7909 26.2091 20 24 20C21.7909 20 20 21.7909 20 24C20 26.2091 21.7909 28 24 28Z"
-									fill="currentColor"
-									opacity="0.3"
-								/>
-							</svg>
-							<p>Click to upload photo</p>
-						</div>
-					</div>
-				{:else if postType === 'album'}
-					<div class="album-upload">
-						<div class="album-placeholder">
-							<svg width="48" height="48" viewBox="0 0 48 48" fill="none">
-								<rect x="8" y="8" width="24" height="24" rx="2" fill="currentColor" opacity="0.1" />
-								<rect
-									x="16"
-									y="16"
-									width="24"
-									height="24"
-									rx="2"
-									fill="currentColor"
-									opacity="0.2"
-								/>
-								<path
-									d="M16 24L20 20L24 24L32 16L40 24V38C40 39.1046 39.1046 40 38 40H18C16.8954 40 16 39.1046 16 38V24Z"
-									fill="currentColor"
-									opacity="0.3"
-								/>
-							</svg>
-							<p>Click to upload photos</p>
-							<span class="album-hint">Select multiple photos</span>
-						</div>
-					</div>
-				{/if}
-
-				{#if config.showContent}
+				{#if config?.showContent}
 					<div class="editor-wrapper">
 						<Editor bind:data={content} placeholder="Continue writing..." />
 					</div>
 				{/if}
 			</div>
-
-			{#if showMetadata}
-				<aside class="metadata-sidebar">
-					<h3>Post Settings</h3>
-
-					<FormField label="Slug" bind:value={slug} />
-
-					{#if postType === 'blog'}
-						<FormFieldWrapper label="Excerpt">
-							<textarea
-								bind:value={excerpt}
-								class="form-textarea"
-								rows="3"
-								placeholder="Brief description..."
-							/>
-						</FormFieldWrapper>
-					{/if}
-
-					<FormFieldWrapper label="Tags">
-						<div class="tag-input-wrapper">
-							<input
-								type="text"
-								bind:value={tagInput}
-								onkeydown={(e) => e.key === 'Enter' && (e.preventDefault(), addTag())}
-								placeholder="Add tags..."
-								class="form-input"
-							/>
-							<button type="button" onclick={addTag} class="btn btn-small">Add</button>
-						</div>
-						{#if tags.length > 0}
-							<div class="tags">
-								{#each tags as tag}
-									<span class="tag">
-										{tag}
-										<button onclick={() => removeTag(tag)}>×</button>
-									</span>
-								{/each}
-							</div>
-						{/if}
-					</FormFieldWrapper>
-
-					<div class="metadata">
-						<p>Created: {new Date(post.created_at || post.createdAt).toLocaleString()}</p>
-						<p>Updated: {new Date(post.updated_at || post.updatedAt).toLocaleString()}</p>
-						{#if post.published_at || post.publishedAt}
-							<p>Published: {new Date(post.published_at || post.publishedAt).toLocaleString()}</p>
-						{/if}
-					</div>
-				</aside>
-			{/if}
 		</div>
 	{:else}
 		<div class="error">Post not found</div>
@@ -416,17 +329,30 @@
 		min-height: 400px;
 	}
 
+	.error-container {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		min-height: 400px;
+		text-align: center;
+		gap: $unit-2x;
+
+		h2 {
+			color: $grey-20;
+			margin: 0;
+		}
+
+		p {
+			color: $grey-40;
+			margin: 0;
+		}
+	}
+
 	.header-left {
 		display: flex;
 		align-items: center;
 		gap: $unit-2x;
-
-		h1 {
-			font-size: 1.5rem;
-			font-weight: 700;
-			margin: 0;
-			color: $grey-10;
-			}
 	}
 
 	.header-actions {
@@ -545,10 +471,6 @@
 		display: grid;
 		grid-template-columns: 1fr;
 		gap: $unit-4x;
-
-		&:has(.metadata-sidebar) {
-			grid-template-columns: 1fr 300px;
-		}
 	}
 
 	.main-content {
@@ -560,7 +482,7 @@
 
 	.title-input {
 		width: 100%;
-		padding: 0;
+		padding: 0 $unit-2x;
 		border: none;
 		font-size: 2.5rem;
 		font-weight: 700;
@@ -576,182 +498,13 @@
 		}
 	}
 
-	.link-fields {
-		display: flex;
-		flex-direction: column;
-		gap: $unit-2x;
-	}
-
-	.link-url-input {
-		width: 100%;
-		padding: $unit-2x $unit-3x;
-		border: 1px solid $grey-80;
-		border-radius: 8px;
-		font-size: 1.125rem;
-		background-color: $grey-95;
-
-		&:focus {
-			outline: none;
-			border-color: $grey-50;
-			background-color: white;
-		}
-	}
-
-	.link-description {
-		width: 100%;
-		padding: $unit-2x $unit-3x;
-		border: 1px solid $grey-80;
-		border-radius: 8px;
-		font-size: 1rem;
-		background-color: $grey-95;
-		resize: vertical;
-
-		&:focus {
-			outline: none;
-			border-color: $grey-50;
-			background-color: white;
-		}
-	}
-
-	.photo-upload,
-	.album-upload {
-		width: 100%;
-	}
-
-	.photo-placeholder,
-	.album-placeholder {
-		border: 2px dashed $grey-80;
-		border-radius: 12px;
-		padding: $unit-8x;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: $unit-2x;
-		cursor: pointer;
-		transition: all 0.2s ease;
-		background: $grey-95;
-
-		&:hover {
-			border-color: $grey-60;
-			background: $grey-90;
-		}
-
-		svg {
-			color: $grey-50;
-		}
-
-		p {
-			margin: 0;
-			color: $grey-30;
-			}
-	}
-
-	.album-hint {
-		font-size: 0.875rem;
-		color: $grey-50;
-	}
-
 	.editor-wrapper {
 		width: 100%;
 		min-height: 400px;
 	}
 
-	.metadata-sidebar {
-		background: $grey-95;
-		border-radius: 12px;
-		padding: $unit-3x;
-		height: fit-content;
-		position: sticky;
-		top: $unit-3x;
-
-		h3 {
-			font-size: 1.125rem;
-			font-weight: 600;
-			margin: 0 0 $unit-3x;
-			color: $grey-10;
-			}
-
-		> * + * {
-			margin-top: $unit-3x;
-		}
-	}
-
-	.form-textarea {
-		width: 100%;
-		padding: $unit-2x;
-		border: 1px solid $grey-80;
-		border-radius: 8px;
-		font-size: 0.875rem;
-		background-color: white;
-		resize: vertical;
-
-		&:focus {
-			outline: none;
-			border-color: $grey-50;
-		}
-	}
-
-	.form-input {
-		width: 100%;
-		padding: $unit $unit-2x;
-		border: 1px solid $grey-80;
-		border-radius: 8px;
-		font-size: 0.875rem;
-		background-color: white;
-
-		&:focus {
-			outline: none;
-			border-color: $grey-50;
-		}
-	}
-
-	.tag-input-wrapper {
-		display: flex;
-		gap: $unit;
-
-		input {
-			flex: 1;
-		}
-	}
-
-	.tags {
-		display: flex;
-		flex-wrap: wrap;
-		gap: $unit;
-		margin-top: $unit;
-	}
-
-	.tag {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
-		padding: 4px $unit-2x;
-		background: $grey-80;
-		border-radius: 20px;
-		font-size: 0.75rem;
-
-		button {
-			background: none;
-			border: none;
-			color: $grey-40;
-			cursor: pointer;
-			padding: 0;
-			font-size: 1rem;
-			line-height: 1;
-
-			&:hover {
-				color: $grey-10;
-			}
-		}
-	}
-
-	.metadata {
-		font-size: 0.75rem;
-		color: $grey-40;
-
-		p {
-			margin: $unit-half 0;
-		}
+	.metadata-popover-container {
+		position: relative;
 	}
 
 	.error {
@@ -759,14 +512,4 @@
 		color: $grey-40;
 		padding: 2rem;
 	}
-
-	@include breakpoint('phone') {
-		.post-composer {
-			grid-template-columns: 1fr;
-		}
-
-		.metadata-sidebar {
-			position: static;
-		}
-	}
 </style>
diff --git a/src/routes/api/albums/+server.ts b/src/routes/api/albums/+server.ts
index af78fc3..6850832 100644
--- a/src/routes/api/albums/+server.ts
+++ b/src/routes/api/albums/+server.ts
@@ -33,13 +33,23 @@ export const GET: RequestHandler = async (event) => {
 		// Get total count
 		const total = await prisma.album.count({ where })
 
-		// Get albums with photo count
+		// Get albums with photo count and photos for thumbnails
 		const albums = await prisma.album.findMany({
 			where,
 			orderBy: { createdAt: 'desc' },
 			skip,
 			take: limit,
 			include: {
+				photos: {
+					select: {
+						id: true,
+						url: true,
+						thumbnailUrl: true,
+						caption: true
+					},
+					orderBy: { displayOrder: 'asc' },
+					take: 5 // Only get first 5 photos for thumbnails
+				},
 				_count: {
 					select: { photos: true }
 				}