diff --git a/apps/web/content-collections.ts b/apps/web/content-collections.ts
index 2c32f966b7..6b91aa3654 100644
--- a/apps/web/content-collections.ts
+++ b/apps/web/content-collections.ts
@@ -143,9 +143,7 @@ const changelog = defineCollection({
   directory: "content/changelog",
   include: "*.mdx",
   exclude: "AGENTS.md",
-  schema: z.object({
-    created: z.coerce.date(),
-  }),
+  schema: z.object({}),
   transform: async (document, context) => {
     const mdx = await compileMDX(context, document, {
       remarkPlugins: [remarkGfm, mdxMermaid],
diff --git a/apps/web/content/changelog/1.0.0-nightly.1.mdx b/apps/web/content/changelog/1.0.0-nightly.1.mdx
index fec68a6980..5811cfc082 100644
--- a/apps/web/content/changelog/1.0.0-nightly.1.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.1.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-11-18T07:50:16Z"
 ---
 
 - Initial release.
diff --git a/apps/web/content/changelog/1.0.0-nightly.10.mdx b/apps/web/content/changelog/1.0.0-nightly.10.mdx
index 634a030401..c974d8b72c 100644
--- a/apps/web/content/changelog/1.0.0-nightly.10.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.10.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-02T12:16:50Z"
 ---
 
 - Add Intel macOS (x86_64) support.
diff --git a/apps/web/content/changelog/1.0.0-nightly.11.mdx b/apps/web/content/changelog/1.0.0-nightly.11.mdx
index 2c4ab42dd6..1367f02bf2 100644
--- a/apps/web/content/changelog/1.0.0-nightly.11.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.11.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-03T11:56:00Z"
 ---
 
 - Add .deb build for Linux x86_64.
diff --git a/apps/web/content/changelog/1.0.0-nightly.12.mdx b/apps/web/content/changelog/1.0.0-nightly.12.mdx
index 9e748bb35a..859aa91a54 100644
--- a/apps/web/content/changelog/1.0.0-nightly.12.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.12.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-05T11:34:59Z"
 ---
 
 - Add Gladia STT provider with realtime and batch transcription support.
diff --git a/apps/web/content/changelog/1.0.0-nightly.13.mdx b/apps/web/content/changelog/1.0.0-nightly.13.mdx
index c60ad0ca34..08c97f77a4 100644
--- a/apps/web/content/changelog/1.0.0-nightly.13.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.13.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-07T11:35:33Z"
 ---
 
 - Unify VAD logic with StreamingVad for better audio processing.
diff --git a/apps/web/content/changelog/1.0.0-nightly.14.mdx b/apps/web/content/changelog/1.0.0-nightly.14.mdx
index e4ffc978a7..4f79b04831 100644
--- a/apps/web/content/changelog/1.0.0-nightly.14.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.14.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-09T09:35:40Z"
 ---
 
 - Fix Ollama CORS error by adding Origin header for requests.
diff --git a/apps/web/content/changelog/1.0.0-nightly.15.mdx b/apps/web/content/changelog/1.0.0-nightly.15.mdx
index 3ec0c82e35..cf95337469 100644
--- a/apps/web/content/changelog/1.0.0-nightly.15.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.15.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-10T11:33:49Z"
 ---
 
 - Implement free trial support in desktop app with new onboarding flow.
diff --git a/apps/web/content/changelog/1.0.0-nightly.16.mdx b/apps/web/content/changelog/1.0.0-nightly.16.mdx
index a43ffd0df0..6aa53f100a 100644
--- a/apps/web/content/changelog/1.0.0-nightly.16.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.16.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-11T10:48:48Z"
 ---
 
 - Add Export Transcript menu item to session overflow menu.
diff --git a/apps/web/content/changelog/1.0.0-nightly.17.mdx b/apps/web/content/changelog/1.0.0-nightly.17.mdx
index 693e0651e4..877761bb17 100644
--- a/apps/web/content/changelog/1.0.0-nightly.17.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.17.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-12T09:04:58Z"
 ---
 
 - Add app info to MicStopped event, so that the app ignored list can also be applied to MicStopped events, consistent with MicStarted events.
diff --git a/apps/web/content/changelog/1.0.0-nightly.18.mdx b/apps/web/content/changelog/1.0.0-nightly.18.mdx
index 46f0477838..1a0e63b1fe 100644
--- a/apps/web/content/changelog/1.0.0-nightly.18.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.18.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-14T00:00:00Z"
 ---
 
 ## OTA
diff --git a/apps/web/content/changelog/1.0.0-nightly.19.mdx b/apps/web/content/changelog/1.0.0-nightly.19.mdx
index 30bdfff3dd..f5cf493556 100644
--- a/apps/web/content/changelog/1.0.0-nightly.19.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.19.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-15T00:00:00Z"
 ---
 
 ## Onboarding
diff --git a/apps/web/content/changelog/1.0.0-nightly.2.mdx b/apps/web/content/changelog/1.0.0-nightly.2.mdx
index a320547957..6e4d39443a 100644
--- a/apps/web/content/changelog/1.0.0-nightly.2.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.2.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-11-18T09:03:33Z"
 ---
 
 - Fix app icon padding.
diff --git a/apps/web/content/changelog/1.0.0-nightly.20.mdx b/apps/web/content/changelog/1.0.0-nightly.20.mdx
index 0c5d433f49..abc267cd30 100644
--- a/apps/web/content/changelog/1.0.0-nightly.20.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.20.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-15T00:00:00Z"
 ---
 
 ## Onboarding
diff --git a/apps/web/content/changelog/1.0.0-nightly.21.mdx b/apps/web/content/changelog/1.0.0-nightly.21.mdx
index 3104eff8b1..96c45d52ef 100644
--- a/apps/web/content/changelog/1.0.0-nightly.21.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.21.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-16T00:00:00Z"
 ---
 
 ## Notification
diff --git a/apps/web/content/changelog/1.0.0-nightly.22.mdx b/apps/web/content/changelog/1.0.0-nightly.22.mdx
index f313b82d28..490ece32c4 100644
--- a/apps/web/content/changelog/1.0.0-nightly.22.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.22.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-18T00:00:00Z"
 ---
 
 ## Session
diff --git a/apps/web/content/changelog/1.0.0-nightly.23.mdx b/apps/web/content/changelog/1.0.0-nightly.23.mdx
index b20ab1fb65..0da4401f46 100644
--- a/apps/web/content/changelog/1.0.0-nightly.23.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.23.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-18T00:00:00Z"
 ---
 
 - Remove `react-scan` that was accidentally included in the production build.
diff --git a/apps/web/content/changelog/1.0.0-nightly.24.mdx b/apps/web/content/changelog/1.0.0-nightly.24.mdx
index 122cc856dd..23482c6455 100644
--- a/apps/web/content/changelog/1.0.0-nightly.24.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.24.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-18T00:00:00Z"
 ---
 
 - Fix OTA update check interval.
diff --git a/apps/web/content/changelog/1.0.0-nightly.25.mdx b/apps/web/content/changelog/1.0.0-nightly.25.mdx
index f472b2a0cc..94f899735b 100644
--- a/apps/web/content/changelog/1.0.0-nightly.25.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.25.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-21T00:00:00Z"
 ---
 
 - New onboarding experience with background music.
diff --git a/apps/web/content/changelog/1.0.0-nightly.26.mdx b/apps/web/content/changelog/1.0.0-nightly.26.mdx
index c73b2cb34e..1e61605118 100644
--- a/apps/web/content/changelog/1.0.0-nightly.26.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.26.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-22T00:00:00Z"
 ---
 
 - Fix fatal error around keywords handling for Deepgram and Gladia.
diff --git a/apps/web/content/changelog/1.0.0-nightly.27.mdx b/apps/web/content/changelog/1.0.0-nightly.27.mdx
index 97da337f70..88a745c8c8 100644
--- a/apps/web/content/changelog/1.0.0-nightly.27.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.27.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-24T00:00:00Z"
 ---
 
 - Add calendar picker UI with permission handling.
diff --git a/apps/web/content/changelog/1.0.0-nightly.28.mdx b/apps/web/content/changelog/1.0.0-nightly.28.mdx
index 2acb540315..0ea3dc3827 100644
--- a/apps/web/content/changelog/1.0.0-nightly.28.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.28.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-26T00:00:00Z"
 ---
 
 - Fix onboarding freeze issue.
diff --git a/apps/web/content/changelog/1.0.0-nightly.29.mdx b/apps/web/content/changelog/1.0.0-nightly.29.mdx
index 80ce7f1812..c4ce1be008 100644
--- a/apps/web/content/changelog/1.0.0-nightly.29.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.29.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-26T00:00:00Z"
 ---
 
 - Fix race condition in Windows command operations.
diff --git a/apps/web/content/changelog/1.0.0-nightly.3.mdx b/apps/web/content/changelog/1.0.0-nightly.3.mdx
index 23152bb38a..73ae51a209 100644
--- a/apps/web/content/changelog/1.0.0-nightly.3.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.3.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-11-19T00:11:42Z"
 ---
 
 - Validate Tiptap document JSON before initializing editor.
diff --git a/apps/web/content/changelog/1.0.0-nightly.30.mdx b/apps/web/content/changelog/1.0.0-nightly.30.mdx
index b9c86c3cdf..d86a207893 100644
--- a/apps/web/content/changelog/1.0.0-nightly.30.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.30.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-27T00:00:00Z"
 ---
 
 - Fix search results to display proper UI with highlighted matches instead of raw JSON.
diff --git a/apps/web/content/changelog/1.0.0-nightly.31.mdx b/apps/web/content/changelog/1.0.0-nightly.31.mdx
index 6738aae475..5165ca48f9 100644
--- a/apps/web/content/changelog/1.0.0-nightly.31.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.31.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-27T00:00:00Z"
 ---
 
 - Fix file upload and batch transcription
diff --git a/apps/web/content/changelog/1.0.0-nightly.32.mdx b/apps/web/content/changelog/1.0.0-nightly.32.mdx
index 454c9dcba6..4774bdf2c1 100644
--- a/apps/web/content/changelog/1.0.0-nightly.32.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.32.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-12-27T00:00:00Z"
 ---
 
 ## Search & Indexing
@@ -123,4 +122,3 @@ created: "2025-12-27T00:00:00Z"
 - Improve orphan removal error handling
 - Various refactors and code cleanup
 - Fix tests and improve error handling
-
diff --git a/apps/web/content/changelog/1.0.0-nightly.4.mdx b/apps/web/content/changelog/1.0.0-nightly.4.mdx
index 3b6fa3e319..57967da79b 100644
--- a/apps/web/content/changelog/1.0.0-nightly.4.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.4.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-11-19T10:50:39Z"
 ---
 
 - Add Google Generative AI provider support.
diff --git a/apps/web/content/changelog/1.0.0-nightly.5.mdx b/apps/web/content/changelog/1.0.0-nightly.5.mdx
index 137b2c1ef5..a77300f3d6 100644
--- a/apps/web/content/changelog/1.0.0-nightly.5.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.5.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-11-20T11:50:20Z"
 ---
 
 - Show only version string for OTA status.
diff --git a/apps/web/content/changelog/1.0.0-nightly.6.mdx b/apps/web/content/changelog/1.0.0-nightly.6.mdx
index f2d6dba0c8..847cfdb5a6 100644
--- a/apps/web/content/changelog/1.0.0-nightly.6.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.6.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-11-21T08:50:20Z"
 ---
 
 - `1.0.0-nightly.5` add experimental CLI, which breaks the app in release builds. This release fixes the issue.
diff --git a/apps/web/content/changelog/1.0.0-nightly.7.mdx b/apps/web/content/changelog/1.0.0-nightly.7.mdx
index 027e873947..db3a6186b8 100644
--- a/apps/web/content/changelog/1.0.0-nightly.7.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.7.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-11-23T09:33:23Z"
 ---
 
 - Add "Show in Finder" option to overflow menu.
diff --git a/apps/web/content/changelog/1.0.0-nightly.8.mdx b/apps/web/content/changelog/1.0.0-nightly.8.mdx
index eb89d35ec4..15cb428ea5 100644
--- a/apps/web/content/changelog/1.0.0-nightly.8.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.8.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-11-25T12:15:02Z"
 ---
 
 - Fix AGC with VAD and config modification.
diff --git a/apps/web/content/changelog/1.0.0-nightly.9.mdx b/apps/web/content/changelog/1.0.0-nightly.9.mdx
index 76dd35bbab..4d35da1edc 100644
--- a/apps/web/content/changelog/1.0.0-nightly.9.mdx
+++ b/apps/web/content/changelog/1.0.0-nightly.9.mdx
@@ -1,5 +1,4 @@
 ---
-created: "2025-11-26T12:00:00Z"
 ---
 
 - Remove memory settings from preferences.
diff --git a/apps/web/content/changelog/1.0.0.mdx b/apps/web/content/changelog/1.0.0.mdx
new file mode 100644
index 0000000000..3b95664998
--- /dev/null
+++ b/apps/web/content/changelog/1.0.0.mdx
@@ -0,0 +1,155 @@
+---
+---
+
+![v1.0.0](/api/images/changelog/v1.0.0.jpg)
+
+We're excited to announce Hyprnote 1.0.0, our first stable release! This release consolidates all the improvements from our nightly builds into a polished, production-ready experience.
+
+## Platform Support
+
+- macOS support for Apple Silicon (aarch64) and Intel (x86_64)
+- Linux support with AppImage and .deb distributions
+- Standardized artifact naming with architecture info
+
+## Speech-to-Text Providers
+
+- **Deepgram** - Full support with API key validation and keyword handling
+- **Gladia** - Complete support with code switching, partial transcripts, multi-channel audio, custom vocabulary, and speaker diarization
+- **OpenAI** - Realtime and batch transcription
+- **AssemblyAI** - Streaming and batch transcription
+- **Soniox** - STT provider support
+- **Whisper Large V3** - Local STT option
+- Language detection and multi-language support across providers
+
+## AI & LLM Support
+
+- Google Generative AI provider
+- OpenAI and Anthropic model providers
+- Ollama support with CORS fix
+- LLM configuration error rendering in editor
+
+## Audio & Recording
+
+- Scrolling waveform visualization in the listen button
+- Fixed recording issues with headphones (sample rate, distortion)
+- VAD (Voice Activity Detection) improvements with continuous masking
+- AGC (Automatic Gain Control) with VAD integration
+- Dual-websocket mode for multichannel support with local STT
+- 24k sample-rate on macOS to minimize resampling
+- Linux audio support via PulseAudio with headphone detection
+
+## Search & Indexing
+
+- Tantivy-based full-text search replacing Pagefind
+- Language detection and language-aware tokenization
+- Multi-collection indexing for scalable search
+- Search results with highlighted matches
+
+## Folder Management
+
+- Create, rename, delete, and move sessions between folders
+- Reveal session in Finder
+- Folder detection based on directory structure
+
+## Export
+
+- PDF export with typst-based formatting
+- JSON export with batch support
+- VTT export with speaker information
+- Transcript export improvements
+- Tab-aware export menu (memo, enhanced, transcript)
+
+## Editor
+
+- Tiptap document JSON validation
+- List navigation and backspace behavior improvements
+- Tab and shift-tab support for list indentation
+- Prompt editor with readonly ranges support
+- 20x faster tiptap JSON to markdown export with custom Rust implementation
+
+## Chat
+
+- Dedicated chat editor with slash command support
+- Chat trigger on hover near bottom
+- Resizable chat window
+
+## Settings
+
+- Unified settings.json configuration
+- Prompt, shortcut, template, and extensions tabs
+- Custom template support
+- App settings organized into tabs
+
+## Window & UI
+
+- Window size based on screen size
+- Persistent window position and size across restarts
+- macOS traffic light button positioning
+- Native menu support
+- Keyboard shortcuts for tab navigation
+- Tab restore functionality
+- Progressive blur effect at scroll ends
+- Responsive search with manual expansion
+- 20% rendering optimization for long transcripts
+- Fancy NotFound and ErrorBoundary components
+
+## Onboarding
+
+- Redesigned onboarding experience with background music
+- Free trial support
+- Auto model and provider selection for Pro trial
+- Back navigation in permissions and configuration screens
+
+## Updates & Distribution
+
+- OTA (Over-the-Air) updates with cache support
+- Tray menu with update check, status dialogs, and settings
+- Changelog tab shown automatically after updates
+- CLI update command
+- Homebrew distribution
+
+## Notifications
+
+- macOS notification enhancements
+- Notification collapse animation
+- Auto-start trigger improvements
+
+## Plugins
+
+- **JS Plugin** - JavaScript code evaluation via rquickjs
+- **Notify Plugin** - Filesystem watching with debouncing
+- **Overlay Plugin** - Floating controls with click-through behavior
+- **Hooks Plugin** - Event handling with 5-second timeout for user scripts
+- **Listener2 Plugin** - Batch and subtitle functionality
+- **Updater2 Plugin** - Update check functionality
+- **Deeplink2 Plugin** - Type-safe deep link handling
+- **Network Plugin** - Network availability monitoring
+
+## Calendar
+
+- Calendar picker UI with permission handling
+- Contact view opens in new tab when clicking participant chip
+
+## CLI
+
+- Experimental CLI support
+- CLI installer in app menu
+- --help and --version flags
+
+## Developer Experience
+
+- Deno-powered extensions runtime with iframe-based isolation
+- Separate devtool window
+- E2E tests using Linux WebDriver
+- PostHog analytics fixes
+- Sentry monitoring integration
+
+## Other Improvements
+
+- Prevent closing tab or quitting app during active listening
+- Session failure error surfacing in listen button tooltip
+- Disable listen button when offline with non-local model
+- Title generation after meetings
+- Inline codeblock wrapping
+- Sound effects playback fixes
+- Keyboard navigation improvements
diff --git a/apps/web/src/routes/_view/changelog/$slug.tsx b/apps/web/src/routes/_view/changelog/$slug.tsx
index dabb82e2b4..3fd4d8e248 100644
--- a/apps/web/src/routes/_view/changelog/$slug.tsx
+++ b/apps/web/src/routes/_view/changelog/$slug.tsx
@@ -1,39 +1,13 @@
 import { MDXContent } from "@content-collections/mdx/react";
 import { Icon } from "@iconify-icon/react";
-import { createFileRoute, notFound, useNavigate } from "@tanstack/react-router";
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-import { ChevronDown, ChevronLeft, ChevronRight, Menu, X } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
-import { useEffect, useRef, useState } from "react";
+import { createFileRoute, Link, notFound } from "@tanstack/react-router";
+import { ChevronLeft } from "lucide-react";
 import semver from "semver";
 
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@hypr/ui/components/ui/resizable";
-import { useIsMobile } from "@hypr/ui/hooks/use-mobile";
-import { cn } from "@hypr/utils";
-
-import {
-  type ChangelogWithMeta,
-  getChangelogBySlug,
-  getChangelogList,
-} from "@/changelog";
+import { getChangelogBySlug, getChangelogList } from "@/changelog";
 import { defaultMDXComponents } from "@/components/mdx";
-import { MockWindow } from "@/components/mock-window";
 import { NotFoundContent } from "@/components/not-found";
 
-dayjs.extend(relativeTime);
-
-const ITEMS_PER_PAGE = 20;
-
-type VersionGroup = {
-  baseVersion: string;
-  versions: ChangelogWithMeta[];
-};
-
 export const Route = createFileRoute("/_view/changelog/$slug")({
   component: Component,
   notFoundComponent: NotFoundContent,
@@ -45,13 +19,6 @@ export const Route = createFileRoute("/_view/changelog/$slug")({
 
     const allChangelogs = getChangelogList();
 
-    const nextChangelog = changelog.newerSlug
-      ? (getChangelogBySlug(changelog.newerSlug) ?? null)
-      : null;
-    const prevChangelog = changelog.olderSlug
-      ? (getChangelogBySlug(changelog.olderSlug) ?? null)
-      : null;
-
     const beforeVersion = changelog.beforeVersion;
     const diffUrl =
       beforeVersion != null
@@ -61,8 +28,6 @@ export const Route = createFileRoute("/_view/changelog/$slug")({
     return {
       changelog,
       allChangelogs,
-      nextChangelog,
-      prevChangelog,
       diffUrl,
     };
   },
@@ -102,460 +67,14 @@ export const Route = createFileRoute("/_view/changelog/$slug")({
 });
 
 function Component() {
-  const { changelog, allChangelogs } = Route.useLoaderData();
-
-  return (
-    <div
-      className="bg-linear-to-b from-white via-stone-50/20 to-white min-h-screen"
-      style={{ backgroundImage: "url(/patterns/dots.svg)" }}
-    >
-      <div className="max-w-6xl mx-auto border-x border-neutral-100 bg-white">
-        <HeroSection changelog={changelog} />
-        <ChangelogContentSection
-          changelog={changelog}
-          allChangelogs={allChangelogs}
-        />
-      </div>
-    </div>
-  );
-}
-
-function HeroSection({ changelog }: { changelog: ChangelogWithMeta }) {
-  const relativeTimeText = dayjs(changelog.created).fromNow();
-
-  return (
-    <div className="px-6 py-16 lg:py-24">
-      <div className="text-center max-w-3xl mx-auto">
-        <h1 className="text-3xl sm:text-4xl font-serif tracking-tight text-stone-600 mb-2">
-          Version {changelog.version}
-        </h1>
-        <p className="text-sm text-neutral-500 mb-6">{relativeTimeText}</p>
-        <DownloadButtons version={changelog.version} />
-      </div>
-    </div>
-  );
-}
-
-function DownloadButtons({ version }: { version: string }) {
-  const baseUrl = `https://github.com/fastrepl/hyprnote/releases/download/desktop_v${version}`;
-  const [isOpen, setIsOpen] = useState(false);
-  const [detectedOS, setDetectedOS] = useState<
-    "apple-silicon" | "apple-intel" | "linux-appimage" | "linux-deb"
-  >("apple-silicon");
-
-  useEffect(() => {
-    const userAgent = navigator.userAgent.toLowerCase();
-    if (userAgent.includes("mac")) {
-      setDetectedOS("apple-silicon");
-    } else if (userAgent.includes("linux")) {
-      setDetectedOS("linux-appimage");
-    }
-  }, []);
-
-  const platforms = [
-    {
-      id: "apple-silicon" as const,
-      icon: "ri:apple-fill",
-      label: "Apple Silicon",
-      url: `${baseUrl}/hyprnote-macos-aarch64.dmg`,
-    },
-    {
-      id: "apple-intel" as const,
-      icon: "ri:apple-fill",
-      label: "Intel Mac",
-      url: `${baseUrl}/hyprnote-macos-x86_64.dmg`,
-    },
-    {
-      id: "linux-appimage" as const,
-      icon: "simple-icons:linux",
-      label: "Linux (AppImage)",
-      url: `${baseUrl}/hyprnote-linux-x86_64.AppImage`,
-    },
-    {
-      id: "linux-deb" as const,
-      icon: "simple-icons:linux",
-      label: "Linux (.deb)",
-      url: `${baseUrl}/hyprnote-linux-x86_64.deb`,
-    },
-  ];
-
-  const primaryPlatform =
-    platforms.find((p) => p.id === detectedOS) || platforms[0];
-  const otherPlatforms = platforms.filter((p) => p.id !== detectedOS);
-
-  return (
-    <div className="relative inline-block mt-6">
-      <div className="flex items-center bg-linear-to-t from-stone-600 to-stone-500 text-white rounded-full shadow-md hover:shadow-lg hover:scale-[102%] active:scale-[98%] transition-all overflow-hidden">
-        <a
-          download
-          href={primaryPlatform.url}
-          className="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium"
-        >
-          <Icon icon={primaryPlatform.icon} className="text-base" />
-          <span>Download for {primaryPlatform.label}</span>
-        </a>
-        <div className="w-px h-7 bg-stone-400/50" />
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            setIsOpen(!isOpen);
-          }}
-          className="cursor-pointer px-3 pl-2.5 pr-3"
-          aria-label="Show other platforms"
-        >
-          <ChevronDown size={16} />
-        </button>
-      </div>
-
-      <AnimatePresence>
-        {isOpen && (
-          <>
-            <motion.div
-              className="fixed inset-0 z-40"
-              onClick={() => setIsOpen(false)}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-            />
-            <motion.div
-              className="absolute top-full mt-2 right-0 bg-white border border-stone-200 rounded-lg shadow-lg overflow-hidden z-50 min-w-[200px]"
-              initial={{ opacity: 0, y: -10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -10 }}
-              transition={{ duration: 0.15 }}
-            >
-              {otherPlatforms.map((platform) => (
-                <a
-                  key={platform.id}
-                  download
-                  href={platform.url}
-                  onClick={() => setIsOpen(false)}
-                  className="flex items-center gap-3 px-4 py-3 hover:bg-stone-50 transition-colors border-b border-stone-100 last:border-b-0"
-                >
-                  <Icon
-                    icon={platform.icon}
-                    className="text-base text-stone-600"
-                  />
-                  <span className="text-sm font-medium text-stone-700">
-                    {platform.label}
-                  </span>
-                </a>
-              ))}
-            </motion.div>
-          </>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}
-
-function ChangelogContentSection({
-  changelog,
-  allChangelogs,
-}: {
-  changelog: ChangelogWithMeta;
-  allChangelogs: ChangelogWithMeta[];
-}) {
-  const isMobile = useIsMobile();
-  const [drawerOpen, setDrawerOpen] = useState(false);
-  const relativeTimeText = dayjs(changelog.created).fromNow();
-
-  return (
-    <section className="px-6 pb-16 lg:pb-24">
-      <div className="max-w-4xl mx-auto">
-        <MockWindow
-          title={
-            isMobile
-              ? undefined
-              : `Version ${changelog.version} · ${relativeTimeText}`
-          }
-          className="rounded-lg w-full max-w-none"
-          prefixIcons={
-            isMobile && (
-              <button
-                onClick={() => setDrawerOpen(true)}
-                className="p-1 hover:bg-neutral-200 rounded transition-colors"
-                aria-label="Open version list"
-              >
-                <Menu className="w-4 h-4 text-neutral-600" />
-              </button>
-            )
-          }
-        >
-          <div className="h-[600px] relative">
-            {isMobile ? (
-              <>
-                <MobileSidebarDrawer
-                  open={drawerOpen}
-                  onClose={() => setDrawerOpen(false)}
-                  changelog={changelog}
-                  allChangelogs={allChangelogs}
-                />
-                <ChangelogContent changelog={changelog} />
-              </>
-            ) : (
-              <ChangelogSplitView
-                changelog={changelog}
-                allChangelogs={allChangelogs}
-              />
-            )}
-          </div>
-          <ChangelogStatusBar changelog={changelog} />
-        </MockWindow>
-      </div>
-    </section>
-  );
-}
-
-function ChangelogSplitView({
-  changelog,
-  allChangelogs,
-}: {
-  changelog: ChangelogWithMeta;
-  allChangelogs: ChangelogWithMeta[];
-}) {
-  return (
-    <ResizablePanelGroup direction="horizontal" className="h-[600px]">
-      <ResizablePanel defaultSize={35} minSize={25} maxSize={45}>
-        <ChangelogSidebar changelog={changelog} allChangelogs={allChangelogs} />
-      </ResizablePanel>
-      <ResizableHandle withHandle className="bg-neutral-200 w-px" />
-      <ResizablePanel defaultSize={65}>
-        <ChangelogContent changelog={changelog} />
-      </ResizablePanel>
-    </ResizablePanelGroup>
-  );
-}
-
-function MobileSidebarDrawer({
-  open,
-  onClose,
-  changelog,
-  allChangelogs,
-}: {
-  open: boolean;
-  onClose: () => void;
-  changelog: ChangelogWithMeta;
-  allChangelogs: ChangelogWithMeta[];
-}) {
-  return (
-    <AnimatePresence>
-      {open && (
-        <>
-          <motion.div
-            className="absolute inset-0 z-40 bg-black/20"
-            onClick={onClose}
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.2 }}
-          />
-          <motion.div
-            className="absolute left-0 top-0 bottom-0 z-50 w-72 bg-white border-r border-neutral-200 shadow-lg"
-            initial={{ x: "-100%" }}
-            animate={{ x: 0 }}
-            exit={{ x: "-100%" }}
-            transition={{
-              type: "tween",
-              duration: 0.2,
-              ease: "easeOut",
-            }}
-          >
-            <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 bg-stone-50">
-              <span className="text-sm font-medium text-stone-600">
-                All Versions
-              </span>
-              <button
-                onClick={onClose}
-                className="p-1 hover:bg-neutral-200 rounded transition-colors"
-                aria-label="Close drawer"
-              >
-                <X className="w-4 h-4 text-neutral-600" />
-              </button>
-            </div>
-            <div className="h-[calc(100%-49px)] overflow-hidden">
-              <ChangelogSidebar
-                changelog={changelog}
-                allChangelogs={allChangelogs}
-                onNavigate={onClose}
-              />
-            </div>
-          </motion.div>
-        </>
-      )}
-    </AnimatePresence>
-  );
-}
+  const { changelog, diffUrl } = Route.useLoaderData();
 
-function groupVersions(changelogs: ChangelogWithMeta[]): VersionGroup[] {
-  const groups = new Map<string, ChangelogWithMeta[]>();
-
-  for (const changelog of changelogs) {
-    const version = semver.parse(changelog.version);
-    if (version) {
-      const baseVersion = `${version.major}.${version.minor}.${version.patch}`;
-      if (!groups.has(baseVersion)) {
-        groups.set(baseVersion, []);
-      }
-      groups.get(baseVersion)!.push(changelog);
-    }
-  }
-
-  return Array.from(groups.entries())
-    .map(([baseVersion, versions]) => ({
-      baseVersion,
-      versions: versions.sort((a, b) => semver.rcompare(a.version, b.version)),
-    }))
-    .sort((a, b) => semver.rcompare(a.baseVersion, b.baseVersion));
-}
-
-function ChangelogSidebar({
-  changelog,
-  allChangelogs,
-  onNavigate,
-}: {
-  changelog: ChangelogWithMeta;
-  allChangelogs: ChangelogWithMeta[];
-  onNavigate?: () => void;
-}) {
-  const navigate = useNavigate({ from: Route.fullPath });
-  const [currentPage, setCurrentPage] = useState(0);
-
-  const versionGroups = groupVersions(allChangelogs);
-  const totalPages = Math.ceil(versionGroups.length / ITEMS_PER_PAGE);
-  const startIndex = currentPage * ITEMS_PER_PAGE;
-  const endIndex = startIndex + ITEMS_PER_PAGE;
-  const paginatedGroups = versionGroups.slice(startIndex, endIndex);
-
-  const goToNextPage = () => {
-    if (currentPage < totalPages - 1) {
-      setCurrentPage(currentPage + 1);
-    }
-  };
-
-  const goToPrevPage = () => {
-    if (currentPage > 0) {
-      setCurrentPage(currentPage - 1);
-    }
-  };
-
-  const handleVersionClick = (slug: string) => {
-    navigate({
-      to: "/changelog/$slug",
-      params: { slug },
-      resetScroll: false,
-    });
-    onNavigate?.();
-  };
-
-  return (
-    <div className="h-full flex flex-col">
-      <div className="flex-1 p-4 overflow-y-auto">
-        <div className="space-y-4">
-          {paginatedGroups.map((group) => (
-            <div key={group.baseVersion}>
-              <div className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-2 px-2">
-                Version {group.baseVersion}
-              </div>
-              <div className="space-y-2">
-                {group.versions.map((version) => {
-                  const v = semver.parse(version.version);
-                  const isPrerelease = v && v.prerelease.length > 0;
-                  const iconUrl = isPrerelease
-                    ? "/api/images/icons/nightly-icon.png"
-                    : "/api/images/icons/stable-icon.png";
-
-                  return (
-                    <button
-                      key={version.slug}
-                      onClick={() => handleVersionClick(version.slug)}
-                      className={cn([
-                        "w-full bg-stone-50 border rounded-lg p-3 hover:border-stone-400 hover:bg-stone-100 transition-colors flex items-center gap-3 cursor-pointer",
-                        version.slug === changelog.slug
-                          ? "border-stone-600 bg-stone-100"
-                          : "border-neutral-200",
-                      ])}
-                    >
-                      <div className="w-10 h-10 shrink-0 flex items-center justify-center">
-                        <img
-                          src={iconUrl}
-                          alt={`Version ${version.version}`}
-                          width={40}
-                          height={40}
-                          className="w-10 h-10"
-                        />
-                      </div>
-                      <div className="flex-1 min-w-0 text-left">
-                        <p className="text-sm font-medium text-stone-600 truncate">
-                          v{version.version}
-                        </p>
-                        <p className="text-xs text-neutral-500">
-                          {isPrerelease ? "Nightly" : "Stable"}
-                        </p>
-                      </div>
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Pagination Controls */}
-      {totalPages > 1 && (
-        <div className="border-t border-neutral-200 p-3 bg-stone-50">
-          <div className="flex items-center justify-between">
-            <button
-              onClick={goToPrevPage}
-              disabled={currentPage === 0}
-              className={cn([
-                "px-3 py-1.5 text-xs rounded-full border transition-colors",
-                currentPage === 0
-                  ? "border-neutral-200 text-neutral-400 cursor-not-allowed"
-                  : "border-neutral-300 text-stone-600 hover:bg-stone-100 cursor-pointer",
-              ])}
-            >
-              <ChevronLeft className="w-4 h-4" />
-            </button>
-
-            <span className="text-xs text-neutral-500">
-              Page {currentPage + 1} of {totalPages}
-            </span>
-
-            <button
-              onClick={goToNextPage}
-              disabled={currentPage === totalPages - 1}
-              className={cn([
-                "px-3 py-1.5 text-xs rounded-full border transition-colors",
-                currentPage === totalPages - 1
-                  ? "border-neutral-200 text-neutral-400 cursor-not-allowed"
-                  : "border-neutral-300 text-stone-600 hover:bg-stone-100 cursor-pointer",
-              ])}
-            >
-              <ChevronRight className="w-4 h-4" />
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ChangelogContent({ changelog }: { changelog: ChangelogWithMeta }) {
-  const { diffUrl } = Route.useLoaderData();
-  const isMobile = useIsMobile();
-  const scrollRef = useRef<HTMLDivElement>(null);
   const currentVersion = semver.parse(changelog.version);
-  const isPrerelease = currentVersion && currentVersion.prerelease.length > 0;
+  const isPrerelease = !!(
+    currentVersion && currentVersion.prerelease.length > 0
+  );
   const isLatest = changelog.newerSlug === null;
 
-  useEffect(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    el.scrollTop = 0;
-  }, [changelog.slug]);
-
   let prereleaseType = "";
   let buildNumber = "";
   if (isPrerelease && currentVersion && currentVersion.prerelease.length > 0) {
@@ -563,70 +82,66 @@ function ChangelogContent({ changelog }: { changelog: ChangelogWithMeta }) {
     buildNumber = currentVersion.prerelease[1]?.toString() || "";
   }
 
-  const baseVersion = currentVersion
-    ? `v${currentVersion.major}.${currentVersion.minor}.${currentVersion.patch}`
-    : `v${changelog.version}`;
-
   return (
-    <div className="h-full flex flex-col">
-      <div className="h-[58px] px-4 flex items-center justify-between border-b border-neutral-200">
-        <div className="flex items-center gap-2">
-          <h2 className="font-medium text-stone-600">{baseVersion}</h2>
-          {isLatest && (
-            <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-linear-to-t from-amber-200 to-amber-100 text-amber-900 rounded-full">
-              <Icon icon="ri:rocket-fill" className="text-xs" />
-              Latest
-            </span>
-          )}
-          {prereleaseType && (
-            <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-linear-to-b from-[#03BCF1] to-[#127FE5] text-white rounded-full">
-              <Icon icon="ri:moon-fill" className="text-xs" />
-              {prereleaseType}
-            </span>
-          )}
-          {buildNumber && (
-            <span className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-linear-to-t from-neutral-200 to-neutral-100 text-neutral-900 rounded-full">
-              #{buildNumber}
-            </span>
-          )}
-        </div>
-        <div className="flex items-center gap-2">
-          {diffUrl && (
-            <a
-              href={diffUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className={
-                isMobile
-                  ? "size-8 flex items-center justify-center text-sm bg-linear-to-t from-neutral-200 to-neutral-100 text-neutral-900 rounded-full shadow-sm hover:shadow-md hover:scale-[102%] active:scale-[98%] transition-all"
-                  : "px-4 h-8 flex items-center gap-2 text-sm bg-linear-to-t from-neutral-200 to-neutral-100 text-neutral-900 rounded-full shadow-sm hover:shadow-md hover:scale-[102%] active:scale-[98%] transition-all"
-              }
-              title="View diff on GitHub"
+    <main
+      className="flex-1 bg-linear-to-b from-white via-stone-50/20 to-white min-h-screen"
+      style={{ backgroundImage: "url(/patterns/dots.svg)" }}
+    >
+      <div className="max-w-6xl mx-auto border-x border-neutral-100 bg-white">
+        <div className="max-w-3xl mx-auto px-6 py-16 lg:py-24">
+          <div className="text-center">
+            <Link
+              to="/changelog"
+              className="inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700 mb-8 transition-colors"
             >
-              <Icon icon="mdi:github" className="text-lg" />
-              {!isMobile && <span>View Diff</span>}
-            </a>
-          )}
-        </div>
-      </div>
-
-      <div ref={scrollRef} className="flex-1 p-6 overflow-y-auto">
-        <article className="prose prose-stone prose-headings:font-serif prose-headings:font-semibold prose-h1:text-3xl prose-h1:mt-8 prose-h1:mb-4 prose-h2:text-2xl prose-h2:mt-6 prose-h2:mb-3 prose-h3:text-xl prose-h3:mt-5 prose-h3:mb-2 prose-h4:text-lg prose-h4:mt-4 prose-h4:mb-2 prose-a:text-stone-600 prose-a:underline prose-a:decoration-dotted hover:prose-a:text-stone-800 prose-code:bg-stone-50 prose-code:border prose-code:border-neutral-200 prose-code:rounded prose-code:px-1.5 prose-code:py-0.5 prose-code:text-sm prose-code:font-mono prose-code:text-stone-700 prose-pre:bg-stone-50 prose-pre:border prose-pre:border-neutral-200 prose-pre:rounded-sm prose-pre:prose-code:bg-transparent prose-pre:prose-code:border-0 prose-pre:prose-code:p-0 prose-img:rounded-sm prose-img:border prose-img:border-neutral-200 prose-img:my-6 max-w-none">
-          <MDXContent code={changelog.mdx} components={defaultMDXComponents} />
-        </article>
-      </div>
-    </div>
-  );
-}
+              <ChevronLeft className="w-4 h-4" />
+              All versions
+            </Link>
+
+            <div className="flex flex-wrap items-center justify-center gap-3 mb-8">
+              <h1 className="text-3xl sm:text-4xl font-serif tracking-tight text-stone-600">
+                {changelog.version}
+              </h1>
+              {isLatest && (
+                <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-linear-to-t from-amber-200 to-amber-100 text-amber-900 rounded-full">
+                  <Icon icon="ri:rocket-fill" className="text-xs" />
+                  Latest
+                </span>
+              )}
+              {prereleaseType && (
+                <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-linear-to-b from-[#03BCF1] to-[#127FE5] text-white rounded-full">
+                  <Icon icon="ri:moon-fill" className="text-xs" />
+                  {prereleaseType}
+                </span>
+              )}
+              {buildNumber && (
+                <span className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-linear-to-t from-neutral-200 to-neutral-100 text-neutral-900 rounded-full">
+                  #{buildNumber}
+                </span>
+              )}
+            </div>
 
-function ChangelogStatusBar({ changelog }: { changelog: ChangelogWithMeta }) {
-  const { allChangelogs } = Route.useLoaderData();
+            {diffUrl && (
+              <a
+                href={diffUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium bg-linear-to-t from-stone-600 to-stone-500 text-white rounded-full shadow-md hover:shadow-lg hover:scale-[102%] active:scale-[98%] transition-all"
+              >
+                <Icon icon="mdi:github" className="text-base" />
+                View Diff
+              </a>
+            )}
+          </div>
 
-  return (
-    <div className="bg-stone-50 border-t border-neutral-200 px-4 py-2">
-      <span className="text-xs text-neutral-500">
-        Viewing v{changelog.version} • {allChangelogs.length} total versions
-      </span>
-    </div>
+          <article className="mt-12 prose prose-stone prose-headings:font-serif prose-headings:font-semibold prose-h2:text-2xl prose-h2:mt-8 prose-h2:mb-4 prose-h3:text-xl prose-h3:mt-6 prose-h3:mb-3 prose-h4:text-lg prose-h4:mt-4 prose-h4:mb-2 prose-a:text-stone-600 prose-a:underline prose-a:decoration-dotted hover:prose-a:text-stone-800 prose-code:bg-stone-50 prose-code:border prose-code:border-neutral-200 prose-code:rounded prose-code:px-1.5 prose-code:py-0.5 prose-code:text-sm prose-code:font-mono prose-code:text-stone-700 prose-pre:bg-stone-50 prose-pre:border prose-pre:border-neutral-200 prose-pre:rounded-sm prose-pre:prose-code:bg-transparent prose-pre:prose-code:border-0 prose-pre:prose-code:p-0 prose-img:rounded-lg prose-img:border prose-img:border-neutral-200 prose-img:my-6 max-w-none">
+            <MDXContent
+              code={changelog.mdx}
+              components={defaultMDXComponents}
+            />
+          </article>
+        </div>
+      </div>
+    </main>
   );
 }
diff --git a/apps/web/src/routes/_view/changelog/index.tsx b/apps/web/src/routes/_view/changelog/index.tsx
index 10d5a604a6..b0851517ef 100644
--- a/apps/web/src/routes/_view/changelog/index.tsx
+++ b/apps/web/src/routes/_view/changelog/index.tsx
@@ -1,9 +1,12 @@
+import { MDXContent } from "@content-collections/mdx/react";
 import { Icon } from "@iconify-icon/react";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import semver from "semver";
 
+import { cn } from "@hypr/utils";
+
 import { type ChangelogWithMeta, getChangelogList } from "@/changelog";
-import { MockWindow } from "@/components/mock-window";
+import { defaultMDXComponents } from "@/components/mdx";
 
 export const Route = createFileRoute("/_view/changelog/")({
   component: Component,
@@ -13,12 +16,12 @@ export const Route = createFileRoute("/_view/changelog/")({
   },
   head: () => ({
     meta: [
-      { title: "Changelog - Hyprnote Changelog" },
+      { title: "Changelog - Hyprnote" },
       {
         name: "description",
         content: "Track every update, improvement, and fix to Hyprnote",
       },
-      { property: "og:title", content: "Changelog - Hyprnote Changelog" },
+      { property: "og:title", content: "Changelog - Hyprnote" },
       {
         property: "og:description",
         content: "Track every update, improvement, and fix to Hyprnote",
@@ -29,176 +32,97 @@ export const Route = createFileRoute("/_view/changelog/")({
   }),
 });
 
-type SemanticVersionGroup = {
-  baseVersion: string;
-  versions: ChangelogWithMeta[];
-};
-
-function groupBySemanticVersion(
-  changelogs: ChangelogWithMeta[],
-): SemanticVersionGroup[] {
-  const groups = new Map<string, ChangelogWithMeta[]>();
-
-  for (const changelog of changelogs) {
-    const version = semver.parse(changelog.version);
-    if (version) {
-      const baseVersion = `${version.major}.${version.minor}.${version.patch}`;
-      if (!groups.has(baseVersion)) {
-        groups.set(baseVersion, []);
-      }
-      groups.get(baseVersion)!.push(changelog);
-    }
-  }
-
-  return Array.from(groups.entries())
-    .map(([baseVersion, versions]) => ({
-      baseVersion,
-      versions,
-    }))
-    .sort((a, b) => semver.rcompare(a.baseVersion, b.baseVersion));
-}
-
 function Component() {
   const { changelogs } = Route.useLoaderData();
-  const groups = groupBySemanticVersion(changelogs);
 
   return (
-    <div
-      className="bg-linear-to-b from-white via-stone-50/20 to-white min-h-screen"
+    <main
+      className="flex-1 bg-linear-to-b from-white via-stone-50/20 to-white min-h-screen"
       style={{ backgroundImage: "url(/patterns/dots.svg)" }}
     >
       <div className="max-w-6xl mx-auto border-x border-neutral-100 bg-white">
-        <HeroSection />
-        <ChangelogContentSection groups={groups} />
-      </div>
-    </div>
-  );
-}
-
-function HeroSection() {
-  return (
-    <div className="px-6 py-16 lg:py-24">
-      <div className="text-center max-w-3xl mx-auto">
-        <h1 className="text-4xl sm:text-5xl font-serif tracking-tight text-stone-600 mb-6">
-          Changelog
-        </h1>
-        <p className="text-lg sm:text-xl text-neutral-600">
-          Track every update, improvement, and fix to Hyprnote
-        </p>
-      </div>
-    </div>
-  );
-}
-
-function ChangelogContentSection({
-  groups,
-}: {
-  groups: SemanticVersionGroup[];
-}) {
-  return (
-    <section className="px-6 pb-16 lg:pb-24">
-      <div className="max-w-4xl mx-auto">
-        <MockWindow title="Changelog" className="rounded-lg w-full max-w-none">
-          <div className="h-[480px] overflow-y-auto">
-            <ChangelogGridView groups={groups} />
+        <div className="px-6 py-16 lg:py-24">
+          <HeroSection />
+          <div className="mt-16 max-w-4xl mx-auto">
+            {changelogs.map((changelog, index) => (
+              <ChangelogSection
+                key={changelog.slug}
+                changelog={changelog}
+                isFirst={index === 0}
+                isLast={index === changelogs.length - 1}
+              />
+            ))}
           </div>
-          <ChangelogStatusBar groups={groups} />
-        </MockWindow>
+        </div>
       </div>
-    </section>
+    </main>
   );
 }
 
-function ChangelogGridView({ groups }: { groups: SemanticVersionGroup[] }) {
-  if (groups.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center h-full text-center p-8">
-        <div className="mb-6">
-          <Icon
-            icon="mdi:clipboard-text-outline"
-            className="text-6xl text-neutral-300"
-          />
-        </div>
-        <p className="text-neutral-500">No releases yet. Stay tuned!</p>
-      </div>
-    );
-  }
-
+function HeroSection() {
   return (
-    <div className="p-8">
-      {groups.map((group, index) => (
-        <VersionGroup
-          key={group.baseVersion}
-          group={group}
-          isFirst={index === 0}
-        />
-      ))}
+    <div className="text-center">
+      <h1 className="text-4xl sm:text-5xl font-serif tracking-tight text-stone-600 mb-6">
+        Changelog
+      </h1>
+      <p className="text-lg sm:text-xl text-neutral-600">
+        Track every update, improvement, and fix to Hyprnote
+      </p>
     </div>
   );
 }
 
-function VersionGroup({
-  group,
+function ChangelogSection({
+  changelog,
   isFirst,
+  isLast,
 }: {
-  group: SemanticVersionGroup;
+  changelog: ChangelogWithMeta;
   isFirst: boolean;
+  isLast: boolean;
 }) {
-  return (
-    <div className={isFirst ? "mb-8" : "mb-8 border-t border-neutral-100 pt-8"}>
-      <div className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-4 px-2">
-        Version {group.baseVersion}
-      </div>
-      <div className="grid grid-cols-2 sm:grid-cols-4 gap-6 content-start">
-        {group.versions.map((changelog) => (
-          <VersionIcon key={changelog.slug} changelog={changelog} />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function VersionIcon({ changelog }: { changelog: ChangelogWithMeta }) {
-  const version = semver.parse(changelog.version);
-  const isPrerelease = version && version.prerelease.length > 0;
-  const iconUrl = isPrerelease
-    ? "/api/images/icons/nightly-icon.png"
-    : "/api/images/icons/stable-icon.png";
+  const currentVersion = semver.parse(changelog.version);
+  const isPrerelease = currentVersion && currentVersion.prerelease.length > 0;
 
   return (
-    <Link
-      to="/changelog/$slug"
-      params={{ slug: changelog.slug }}
-      className="group flex flex-col items-center text-center p-4 rounded-lg hover:bg-stone-50 transition-colors cursor-pointer h-fit"
+    <section
+      className={cn([
+        "grid grid-cols-1 md:grid-cols-[200px_1fr] gap-6 md:gap-12",
+        !isLast && "border-b border-neutral-100 pb-12 mb-12",
+      ])}
     >
-      <div className="mb-3 w-16 h-16 flex items-center justify-center">
-        <img
-          src={iconUrl}
-          alt={`Version ${changelog.version}`}
-          width={64}
-          height={64}
-          className="w-16 h-16 group-hover:scale-110 transition-transform"
-        />
-      </div>
-      <div className="font-medium text-stone-600 text-sm">
-        v{changelog.version}
+      <div className="md:sticky md:top-24 md:self-start">
+        <div className="flex items-center gap-2">
+          <h2 className="text-lg font-semibold text-stone-700">
+            {changelog.version}
+          </h2>
+          {isFirst && (
+            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 text-xs font-medium bg-linear-to-t from-amber-200 to-amber-100 text-amber-900 rounded-full">
+              <Icon icon="ri:rocket-fill" className="text-xs" />
+            </span>
+          )}
+          {isPrerelease && (
+            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 text-xs font-medium bg-linear-to-b from-[#03BCF1] to-[#127FE5] text-white rounded-full">
+              <Icon icon="ri:moon-fill" className="text-xs" />
+            </span>
+          )}
+        </div>
       </div>
-    </Link>
-  );
-}
 
-function ChangelogStatusBar({ groups }: { groups: SemanticVersionGroup[] }) {
-  const totalVersions = groups.reduce(
-    (sum, group) => sum + group.versions.length,
-    0,
-  );
-
-  return (
-    <div className="bg-stone-50 border-t border-neutral-200 px-4 py-2">
-      <span className="text-xs text-neutral-500">
-        {totalVersions} {totalVersions === 1 ? "version" : "versions"},{" "}
-        {groups.length} {groups.length === 1 ? "group" : "groups"}
-      </span>
-    </div>
+      <div>
+        <article className="prose prose-stone prose-sm prose-headings:font-serif prose-headings:font-semibold prose-h2:text-lg prose-h2:mt-4 prose-h2:mb-2 prose-h3:text-base prose-h3:mt-3 prose-h3:mb-1 prose-ul:my-2 prose-li:my-0.5 prose-a:text-stone-600 prose-a:underline prose-a:decoration-dotted hover:prose-a:text-stone-800 prose-code:bg-stone-50 prose-code:border prose-code:border-neutral-200 prose-code:rounded prose-code:px-1 prose-code:py-0.5 prose-code:text-xs prose-code:font-mono prose-code:text-stone-700 prose-img:rounded prose-img:border prose-img:border-neutral-200 prose-img:my-3 max-w-none">
+          <MDXContent code={changelog.mdx} components={defaultMDXComponents} />
+        </article>
+
+        <Link
+          to="/changelog/$slug"
+          params={{ slug: changelog.slug }}
+          className="inline-flex items-center gap-1 text-sm text-stone-600 hover:text-stone-900 transition-colors mt-4"
+        >
+          Read more
+          <Icon icon="mdi:arrow-right" className="text-base" />
+        </Link>
+      </div>
+    </section>
   );
 }