diff --git a/src/App.svelte b/src/App.svelte
index 88aac34..ff972b9 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
-    import { chats } from './chats';
+    import { chats } from './lib/chats';
     import { type TransitionConfig } from 'svelte/transition';
     import { quadOut as easing } from 'svelte/easing';
     import CommentRenderer from './components/CommentRenderer.svelte';
+    import { url } from './lib/url';
 
     const child = new WeakMap<Node, number>();
     let container: HTMLDivElement;
     let queued = false;
 
+    $: top = $url.searchParams.get('layout') === 'top';
+
     function queue() {
         if (queued) return;
         function fn() {
@@ -17,7 +20,7 @@
             container.childNodes.forEach((node) => {
                 n += child.get(node) ?? 0;
             });
-            container.scrollTo({ top: -n });
+            container.scrollTo({ top: top ? n : -n });
         }
         requestAnimationFrame(fn);
     }
@@ -38,7 +41,9 @@
 </script>
 
 <div
-    class="main flex flex-col-reverse h-screen w-screen overflow-hidden px-3 py-2"
+    class="flex h-screen w-screen overflow-hidden px-3 py-2"
+    class:bottom={!top}
+    class:top
     bind:this={container}
 >
     {#each [...$chats].reverse() as chat (`${chat.service}/${chat.data.id}`)}
@@ -49,7 +54,8 @@
 </div>
 
 <style lang="postcss">
-    .main {
+    .bottom {
+        @apply flex-col-reverse;
         mask-image: linear-gradient(
             180deg,
             rgba(0, 0, 0, 0) 0%,
@@ -58,4 +64,14 @@
             rgba(0, 0, 0, 1) 100%
         );
     }
+    .top {
+        @apply flex-col;
+        mask-image: linear-gradient(
+            0deg,
+            rgba(0, 0, 0, 0) 0%,
+            rgba(0, 0, 0, 0.25) 15%,
+            rgba(0, 0, 0, 1) 30%,
+            rgba(0, 0, 0, 1) 100%
+        );
+    }
 </style>
diff --git a/src/chats.ts b/src/lib/chats.ts
similarity index 100%
rename from src/chats.ts
rename to src/lib/chats.ts
diff --git a/src/lib/url.ts b/src/lib/url.ts
new file mode 100644
index 0000000..1104ba3
--- /dev/null
+++ b/src/lib/url.ts
@@ -0,0 +1,3 @@
+import { readable } from 'svelte/store';
+
+export const url = readable(new URL(window.location.href));
diff --git a/src/main.ts b/src/main.ts
index a658236..d5c58e3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,7 @@
 import './app.pcss';
 import App from './App.svelte';
 import type { Comment } from '@onecomme.com/onesdk/types/Comment';
-import { chats } from './chats';
+import { chats } from './lib/chats';
 
 if (import.meta.env.DEV) {
     globalThis.OneSDK = (await import('@onecomme.com/onesdk')).default;