diff --git a/.vscode/settings.json b/.vscode/settings.json
index 93c3f4de..5e87e49d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,6 @@
 {
   "i18n-ally.localesPaths": [
-    "src/lib/i18n",
-    "src/routes/inbox/messages"
+    "src/lib/app/i18n"
   ],
   "i18n-ally.keystyle": "nested"
 }
\ No newline at end of file
diff --git a/src/lib/feature/comment/CommentListVirtualizer.svelte b/src/lib/feature/comment/CommentListVirtualizer.svelte
index 08a4f172..8bea18c7 100644
--- a/src/lib/feature/comment/CommentListVirtualizer.svelte
+++ b/src/lib/feature/comment/CommentListVirtualizer.svelte
@@ -1,4 +1,10 @@
 <script lang="ts">
+  import type { Post } from "$lib/api/types"
+  import VirtualList from "$lib/app/render/VirtualList.svelte"
+  import { onMount } from "svelte"
+  import type { CommentNodeI } from "./comments.svelte"
+  import CommentTree from "./CommentTree.svelte"
+
   interface Props {
     nodes: CommentNodeI[]
     post: Post
@@ -43,7 +49,7 @@
     >
       {#snippet item(index)}
         <div class={['px-3 sm:px-6', index % 2 == 1 && '']}>
-          <Comments
+          <CommentTree
             bind:nodes={() => [nodes[index]], (v) => (nodes[index] = v[0])}
             {post}
           />
diff --git a/src/lib/feature/comment/comments.svelte.ts b/src/lib/feature/comment/comments.svelte.ts
index 85c62fed..e321fe67 100644
--- a/src/lib/feature/comment/comments.svelte.ts
+++ b/src/lib/feature/comment/comments.svelte.ts
@@ -1,3 +1,7 @@
+import type { Comment, CommentView } from "$lib/api/types"
+import { t } from "$lib/app/i18n"
+import { SvelteMap } from "svelte/reactivity"
+
 export interface CommentNodeI {
   comment_view: CommentView
   children: Array<CommentNodeI>
diff --git a/src/lib/feature/feeds/feed.svelte.ts b/src/lib/feature/feeds/feed.svelte.ts
index 8d3c58c0..895fa1ca 100644
--- a/src/lib/feature/feeds/feed.svelte.ts
+++ b/src/lib/feature/feeds/feed.svelte.ts
@@ -132,7 +132,7 @@ export interface FeedTypes {
   ]
 }
 
-const feeds = new SvelteMap<keyof FeedTypes, Feed<any, any>>()
+export const feeds = new SvelteMap<keyof FeedTypes, Feed<any, any>>()
 
 export function feed<Type extends keyof FeedTypes>(
   id: Type,
diff --git a/src/routes/post/[instance]/[id=integer]/+page.ts b/src/routes/post/[instance]/[id=integer]/+page.ts
index 899cb225..628b0ff5 100644
--- a/src/routes/post/[instance]/[id=integer]/+page.ts
+++ b/src/routes/post/[instance]/[id=integer]/+page.ts
@@ -3,7 +3,8 @@ import { client } from '$lib/api/client.svelte'
 import { profile } from '$lib/app/auth.svelte'
 import { settings } from '$lib/app/settings.svelte'
 import { ReactiveState } from '$lib/app/util.svelte'
-import { feed } from '$lib/feature/feeds/feed.svelte'
+import CommunityCard from '$lib/feature/community/CommunityCard.svelte'
+import { Feed, feed, feeds, type FeedTypes } from '$lib/feature/feeds/feed.svelte'
 import { redirect } from '@sveltejs/kit'
 
 function buildContext(thread?: string) {
@@ -28,23 +29,10 @@ function buildContext(thread?: string) {
 async function findInFeed(id: '/' | '/c/[name]' | '/f/[id]', postId: string) {
   // this never actually loads anything
   if (id == '/') {
-    const resolved = feed(id, async (p) => ({
-      posts: (await client().getPosts(p)).posts,
-      client: {},
-      params: p,
-    })).peek()
-
-    return resolved
-      ? resolved?.posts?.find((i) => i.post.id.toString() == postId)
-      : undefined
+    return (feeds.get(id) as Feed<FeedTypes['/'][0], FeedTypes['/'][1]>)?.peek()
+      ?.posts.find((i) => i.post.id.toString() == postId)
   } else {
-    return feed(id, async (p) => ({
-      ...(await client().getPosts(p)),
-      client: {},
-      params: p,
-      community: await client().getCommunity({}),
-    }))
-      .peek()
+    return (feeds.get(id) as Feed<FeedTypes['/c/[name]'][0], FeedTypes['/c/[name]'][1]>)?.peek()
       ?.posts.find((i) => i.post.id.toString() == postId)
   }
 }
diff --git a/src/routes/settings/+layout.svelte b/src/routes/settings/+layout.svelte
index 59e8200e..77179c27 100644
--- a/src/routes/settings/+layout.svelte
+++ b/src/routes/settings/+layout.svelte
@@ -40,6 +40,31 @@
   <title>{$t('settings.title')}</title>
 </svelte:head>
 
+<Tabs
+  routes={[
+    {
+      href: '/settings/app',
+      name: $t('settings.app.title'),
+    },
+    {
+      href: '/settings/lemmy',
+      name: $t('settings.lemmy.title'),
+    },
+    {
+      href: '/settings/embeds',
+      name: $t('settings.embeds.title'),
+    },
+    {
+      href: '/settings/moderation',
+      name: $t('settings.moderation.title'),
+    },
+    {
+      href: '/settings/other',
+      name: $t('settings.other.title'),
+    },
+  ]}
+/>
+
 <Header pageHeader class="text-3xl font-bold flex justify-between">
   {$t('settings.title')}
   {#snippet extended()}
@@ -92,30 +117,4 @@
   {/snippet}
 </Header>
 
-<Tabs
-  routes={[
-    {
-      href: '/settings/app',
-      name: $t('settings.app.title'),
-    },
-    {
-      href: '/settings/lemmy',
-      name: $t('settings.lemmy.title'),
-    },
-    {
-      href: '/settings/embeds',
-      name: $t('settings.embeds.title'),
-    },
-    {
-      href: '/settings/moderation',
-      name: $t('settings.moderation.title'),
-    },
-    {
-      href: '/settings/other',
-      name: $t('settings.other.title'),
-    },
-  ]}
-  style="subpage"
-/>
-
 {@render children?.()}
diff --git a/src/routes/theme/+page.svelte b/src/routes/theme/+page.svelte
index b4ffa4fd..61360a50 100644
--- a/src/routes/theme/+page.svelte
+++ b/src/routes/theme/+page.svelte
@@ -44,64 +44,23 @@
         toast({ content: err as string, type: 'error' })
       }
     }}
-    title={$t('routes.theme.import')}
-    action={$t('routes.theme.import')}
+    title={$t('settings.import')}
+    action={$t('settings.import')}
   >
     <TextArea bind:value={importText} style="font-family: monospace;" />
   </Modal>
 {/if}
 
-<Header pageHeader>{$t('routes.theme.title')}</Header>
-<div class="flex flex-col gap-4 h-full">
-  <h3
-    class="relative -mb-7 z-10 left-6 font-medium text-sm bg-slate-25 dark:bg-zinc-925 w-max px-1"
-  >
-    {$t('routes.theme.preset.presets')}
-  </h3>
-  <Material
-    color="transparent"
-    rounding="2xl"
-    class="overflow-auto max-h-96 relative @container"
-  >
-    <div
-      class="grid grid-cols-1 @md:grid-cols-2 @xl:grid-cols-3 @3xl:grid-cols-4
-    gap-2"
-    >
-      {#each themeData.data.themes as theme, index (theme.id)}
-        <ThemePreset bind:theme={themeData.data.themes[index]} />
-      {/each}
-      <button
-        onclick={() => {
-          const newTheme = {
-            id: Math.max(...themeData.data.themes.map((t) => t.id)) + 1,
-            colors: getDefaultColors(),
-            name: $t('routes.theme.preset.new'),
-          }
+<Header pageHeader>{$t('routes.theme.title')}
 
-          themeData.data.themes = [...themeData.data.themes, newTheme]
+  {#snippet extended()}
 
-          themeData.data.currentTheme = newTheme.id
-        }}
-      >
-        <Material
-          color="none"
-          padding="sm"
-          class="border-dashed border-2 border-slate-400 dark:border-zinc-600
-        text-slate-400 dark:text-zinc-600 hover:border-slate-600 dark:hover:border-zinc-400
-        grid place-items-center w-14 h-14"
-          rounding="xl"
-        >
-          <Icon src={Plus} size="28" />
-        </Material>
-      </button>
-    </div>
-  </Material>
-  <div class="flex items-center gap-4">
+  <div class="flex items-center gap-2">
     <Button
       onclick={() => {
         importing = !importing
       }}
-      size="lg"
+      rounding="pill"
       disabled={themeData.current.id <= 0}
     >
       <Icon src={ArrowUpTray} size="16" mini />
@@ -112,7 +71,7 @@
         navigator.clipboard.writeText(JSON.stringify(themeData.current.colors))
         toast({ content: 'Copied theme to clipboard.' })
       }}
-      size="lg"
+      rounding="pill"
     >
       <Icon src={ArrowDownTray} size="16" mini />
       {$t('settings.export')}
@@ -144,12 +103,58 @@
           body: $t('routes.theme.resetWarning.description'),
         })
       }}
-      size="lg"
+      rounding="pill"
     >
       <Icon src={ArrowPath} size="16" mini />
       {$t('settings.reset')}
     </Button>
   </div>
+  {/snippet}
+</Header>
+<div class="flex flex-col gap-4 h-full">
+  <h3
+    class="relative -mb-7 z-10 left-6 font-medium text-sm bg-slate-25 dark:bg-zinc-925 w-max px-1"
+  >
+    {$t('routes.theme.preset.presets')}
+  </h3>
+  <Material
+    color="uniform"
+    rounding="2xl"
+    class="overflow-auto max-h-96 relative @container"
+  >
+    <div
+      class="grid grid-cols-1 @md:grid-cols-2 @xl:grid-cols-3 @3xl:grid-cols-4
+    gap-2"
+    >
+      {#each themeData.data.themes as theme, index (theme.id)}
+        <ThemePreset bind:theme={themeData.data.themes[index]} />
+      {/each}
+      <button
+        onclick={() => {
+          const newTheme = {
+            id: Math.max(...themeData.data.themes.map((t) => t.id)) + 1,
+            colors: getDefaultColors(),
+            name: $t('routes.theme.preset.new'),
+          }
+
+          themeData.data.themes = [...themeData.data.themes, newTheme]
+
+          themeData.data.currentTheme = newTheme.id
+        }}
+      >
+        <Material
+          color="none"
+          padding="sm"
+          class="border-dashed border-2 border-slate-400 dark:border-zinc-600
+        text-slate-400 dark:text-zinc-600 hover:border-slate-600 dark:hover:border-zinc-400
+        grid place-items-center w-14 h-14"
+          rounding="xl"
+        >
+          <Icon src={Plus} size="28" />
+        </Material>
+      </button>
+    </div>
+  </Material>
   {#if themeData.current.id <= 0}
     <Note>
       {$t('routes.theme.preset.description')}
@@ -161,7 +166,7 @@
     class:pointer-events-none={themeData.current.id <= 0}
   >
     <Material
-      color="transparent"
+      color="uniform"
       class="items-center gap-x-4 color-grid gap-y-2"
       rounding="2xl"
     >
@@ -205,7 +210,7 @@
       {#each Object.entries(defaultColors) as [category, value] (category)}
         <Material
           rounding="2xl"
-          color="transparent"
+          color="uniform"
           class="flex flex-col gap-2"
         >
           <Header