diff --git a/package.json b/package.json
index 4887ec53..a8ba73f6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "photon-lemmy",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "private": true,
   "scripts": {
     "dev": "vite dev",
@@ -42,7 +42,7 @@
     "@dicebear/initials": "^6.0.4",
     "lemmy-js-client": "^0.18.0-rc.2",
     "markdown-it": "^13.0.1",
-    "mono-svelte": "^0.2.20"
+    "mono-svelte": "^0.3.2"
   },
   "type": "module"
 }
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index cab81aa3..dd55de9e 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -92,11 +92,6 @@ profile.subscribe(async (p) => {
     username: user?.user.local_user_view.person.name,
     avatar: user?.user.local_user_view.person.avatar,
   }))
-
-  profile.update((pro) => {
-    console.log(pro)
-    return pro
-  })
 })
 
 export async function setUser(jwt: string, inst: string, username: string) {
diff --git a/src/lib/components/lemmy/Sort.svelte b/src/lib/components/lemmy/Sort.svelte
index edf38714..4cbef531 100644
--- a/src/lib/components/lemmy/Sort.svelte
+++ b/src/lib/components/lemmy/Sort.svelte
@@ -23,7 +23,7 @@
         }}
       >
         <span slot="label" class="flex items-center gap-1">
-          <Icon src={Clock} size="16" mini />
+          <Icon src={Clock} size="15" mini />
           Time
         </span>
         <option value="TopAll">All</option>
@@ -47,7 +47,7 @@
     }}
   >
     <span slot="label" class="flex items-center gap-1">
-      <Icon src={ChartBar} size="14" mini />
+      <Icon src={ChartBar} size="13" mini />
       Sort
     </span>
     <option value="Active">Active</option>
diff --git a/src/lib/components/lemmy/community/CommunityItem.svelte b/src/lib/components/lemmy/community/CommunityItem.svelte
index dc47bd1f..f520f4a4 100644
--- a/src/lib/components/lemmy/community/CommunityItem.svelte
+++ b/src/lib/components/lemmy/community/CommunityItem.svelte
@@ -4,12 +4,15 @@
   import Subscribe from '../../../../routes/communities/Subscribe.svelte'
   import {
     ChatBubbleOvalLeftEllipsis,
+    Check,
     Icon,
     PencilSquare,
+    Plus,
     UserGroup,
   } from 'svelte-hero-icons'
   import FormattedNumber from '$lib/components/util/FormattedNumber.svelte'
   import { Button } from 'mono-svelte'
+  import { isSubscribed } from '$lib/util.js'
 
   export let community: CommunityView
 </script>
@@ -17,7 +20,7 @@
 <div class="py-4 flex flex-col gap-1 text-sm max-w-full">
   <div class="flex flex-row items-center">
     <span
-      class="break-words max-w-full w-max text-base font-bold text-sky-400 hover:underline"
+      class="break-words max-w-full w-max text-base font-bold hover:underline"
     >
       <CommunityLink
         showInstance={false}
@@ -40,9 +43,22 @@
                   : 'NotSubscribed'
             }
           }}
-          color={community.subscribed == 'Subscribed' ? 'primary' : 'ghost'}
+          color={isSubscribed(community.subscribed) ? 'elevatedLow' : 'primary'}
+          class={isSubscribed(community.subscribed)
+            ? 'text-slate-600 dark:text-zinc-400'
+            : ''}
         >
-          {community.subscribed == 'Subscribed' ? 'Subscribed' : 'Subscribe'}
+          <Icon
+            src={isSubscribed(community.subscribed) ? Check : Plus}
+            size="16"
+            mini
+            slot="prefix"
+          />
+          {#if isSubscribed(community.subscribed)}
+            Subscribed
+          {:else}
+            Subscribe
+          {/if}
         </Button>
       </Subscribe>
     </div>
diff --git a/src/lib/components/lemmy/post/Post.svelte b/src/lib/components/lemmy/post/Post.svelte
index 3702645e..5a802aa9 100644
--- a/src/lib/components/lemmy/post/Post.svelte
+++ b/src/lib/components/lemmy/post/Post.svelte
@@ -49,10 +49,10 @@
     {#if view == 'list' || view == 'compact'}
       <div
         class="absolute -inset-0.5 group-hover:-inset-2 group-hover:-inset-y-3 group-hover:md:-inset-4
-      transition-all -z-[5] rounded-xl group-hover:bg-slate-100 group-hover:dark:bg-zinc-900"
+      transition-all rounded-xl group-hover:bg-slate-50 group-hover:dark:bg-zinc-900"
       />
     {/if}
-    <div class="flex flex-row gap-2 max-w-full w-full">
+    <div class="flex flex-row gap-2 max-w-full w-full z-10">
       <div class="flex flex-col w-full gap-2">
         <div class="flex flex-col w-full gap-2">
           <PostMeta
diff --git a/src/lib/components/lemmy/post/PostActions.svelte b/src/lib/components/lemmy/post/PostActions.svelte
index 0d14e0a9..d64e97b4 100644
--- a/src/lib/components/lemmy/post/PostActions.svelte
+++ b/src/lib/components/lemmy/post/PostActions.svelte
@@ -75,7 +75,7 @@
   </Modal>
 {/if}
 
-<div class="flex flex-row gap-2 items-center h-8">
+<div class="flex flex-row gap-2 items-center h-8 [&>*]:z-10">
   <PostVote
     post={post.post}
     bind:vote={post.my_vote}
diff --git a/src/lib/components/markdown/Markdown.svelte b/src/lib/components/markdown/Markdown.svelte
index 4eb82d22..ae22ac19 100644
--- a/src/lib/components/markdown/Markdown.svelte
+++ b/src/lib/components/markdown/Markdown.svelte
@@ -22,7 +22,7 @@
 
 <div
   bind:this={div}
-  class="break-words flex flex-col markdown gap-2 leading-[1.5]"
+  class="break-words flex flex-col markdown gap-2 leading-[1.5] font-sans"
 >
   {#if inline}
     {@html mdInline.render(source)}
diff --git a/src/lib/components/ui/Navbar.svelte b/src/lib/components/ui/Navbar.svelte
index fe4cbe6c..09a9c2b7 100644
--- a/src/lib/components/ui/Navbar.svelte
+++ b/src/lib/components/ui/Navbar.svelte
@@ -41,7 +41,7 @@
 </script>
 
 <nav
-  class="flex flex-row gap-2 items-center sticky top-0 bg-slate-100/80
+  class="flex flex-row gap-2 items-center sticky top-0 bg-slate-50/80
   dark:bg-black/80 backdrop-blur-3xl w-full mx-auto px-4 py-2 z-50 box-border h-16"
 >
   <div class="flex flex-row gap-2 items-center mr-auto">
@@ -92,9 +92,7 @@
       <Button
         href="/admin"
         aria-label="Admin"
-        class="max-md:w-9 max-md:h-8 max-md:!p-0
-        dark:text-zinc-300 text-slate-700 hover:text-inherit hover:dark:text-inherit
-      hover:bg-slate-200 relative hover:border-slate-300"
+        class="max-md:w-9 max-md:h-8 max-md:!p-0 relative"
       >
         <Icon src={CommandLine} mini size="16" slot="prefix" />
         <span class="hidden md:inline">Admin</span>
@@ -104,8 +102,7 @@
       <Button
         href="/moderation"
         aria-label="Moderation"
-        class="max-md:w-9 max-md:h-8 max-md:!p-0 dark:text-zinc-300 text-slate-700
-        hover:text-inherit hover:bg-slate-200 hover:dark:text-inherit relative hover:border-slate-300"
+        class="max-md:w-9 max-md:h-8 max-md:!p-0 dark:text-zinc-300 text-slate-700 relative"
       >
         {#if $profile?.user?.reports ?? 0 > 0}
           <div
@@ -119,8 +116,7 @@
     <Button
       href="/search"
       aria-label="Search"
-      class="max-md:w-9 max-md:h-8 max-md:!p-0
-      dark:text-zinc-300 text-slate-700 hover:text-inherit hover:dark:text-inherit hover:bg-slate-200 hover:border-slate-300"
+      class="max-md:w-9 max-md:h-8 max-md:!p-0"
     >
       <Icon mini src={MagnifyingGlass} width={16} slot="prefix" />
       <span class="hidden md:inline">Search</span>
@@ -128,9 +124,7 @@
     <Button
       href="/communities"
       aria-label="Communities"
-      class="max-md:w-9 max-md:h-8 max-md:!p-0
-      dark:text-zinc-300 text-slate-700 hover:text-inherit
-      hover:dark:text-inherit hover:bg-slate-200 hover:border-slate-300"
+      class="max-md:w-9 max-md:h-8 max-md:!p-0"
     >
       <Icon mini src={GlobeAlt} size="16" slot="prefix" />
       <span class="hidden md:inline">Explore</span>
diff --git a/src/lib/components/ui/sidebar/CommunityList.svelte b/src/lib/components/ui/sidebar/CommunityList.svelte
index 6d3be453..62b3b247 100644
--- a/src/lib/components/ui/sidebar/CommunityList.svelte
+++ b/src/lib/components/ui/sidebar/CommunityList.svelte
@@ -16,7 +16,7 @@
     animate:flip={{ duration: 500, easing: expoOut }}
   >
     <Button
-      class="hover:bg-slate-200 w-full h-max {expanded ? '' : '!p-1.5'}"
+      class="font-normal w-full h-max {expanded ? '' : '!p-1.5'}"
       color="tertiary"
       alignment="left"
       href="/c/{follow.name}@{new URL(follow.actor_id).hostname}"
diff --git a/src/lib/components/ui/sidebar/ProfileButton.svelte b/src/lib/components/ui/sidebar/ProfileButton.svelte
index 170ef6c5..a55c6b56 100644
--- a/src/lib/components/ui/sidebar/ProfileButton.svelte
+++ b/src/lib/components/ui/sidebar/ProfileButton.svelte
@@ -32,7 +32,7 @@
 
     switching = false
   }}
-  class="w-full hover:bg-slate-200 {expanded ? '' : '!p-1.5'}"
+  class="w-full {expanded ? '' : '!p-1.5'}"
 >
   <ProfileAvatar
     profile={prof}
diff --git a/src/lib/components/ui/sidebar/Sidebar.svelte b/src/lib/components/ui/sidebar/Sidebar.svelte
index 4465b687..f55b4f58 100644
--- a/src/lib/components/ui/sidebar/Sidebar.svelte
+++ b/src/lib/components/ui/sidebar/Sidebar.svelte
@@ -20,7 +20,7 @@
 
 <nav
   class="hidden sm:flex flex-col pl-4 pr-4 py-4 overflow-auto sticky top-16 bottom-0
-  gap-1 max-h-[calc(100svh-4rem)] w-full bg-slate-100 dark:bg-black
+  gap-1 max-h-[calc(100svh-4rem)] w-full bg-slate-50 dark:bg-black
   {$userSettings.expandSidebar
     ? 'max-w-[25%] resize-x min-w-[12rem]'
     : 'w-max max-w-max min-w-max'}"
@@ -28,7 +28,7 @@
   <Button
     on:click={() =>
       ($userSettings.expandSidebar = !$userSettings.expandSidebar)}
-    class="w-max !p-2 hover:bg-slate-200"
+    class="w-max !p-2"
     aria-label="Collapse sidebar"
   >
     <Icon
diff --git a/src/lib/components/ui/sidebar/SidebarButton.svelte b/src/lib/components/ui/sidebar/SidebarButton.svelte
index 0763f972..c6ffdf95 100644
--- a/src/lib/components/ui/sidebar/SidebarButton.svelte
+++ b/src/lib/components/ui/sidebar/SidebarButton.svelte
@@ -9,7 +9,9 @@
   color="tertiary"
   alignment="left"
   on:click
-  class="hover:bg-slate-200 {expanded ? '' : '!p-1.5'} {$$props.class}"
+  class="hover:bg-slate-100 font-normal {expanded
+    ? ''
+    : '!p-1.5'} {$$props.class}"
 >
   <slot />
 </Button>
diff --git a/src/lib/settings.ts b/src/lib/settings.ts
index 5a173ffa..f30a0f80 100644
--- a/src/lib/settings.ts
+++ b/src/lib/settings.ts
@@ -56,8 +56,9 @@ interface Settings {
   randomPlaceholders: boolean
   modlogCardView: boolean | undefined
   debugInfo: boolean
-  systemUI: boolean
   expandImages: boolean
+
+  font: 'inter' | 'system' | 'browser'
 }
 
 export const defaultSettings: Settings = {
@@ -93,9 +94,9 @@ export const defaultSettings: Settings = {
   randomPlaceholders: toBool(env.PUBLIC_RANDOM_PLACEHOLDERS) ?? true,
   modlogCardView: toBool(env.PUBLIC_MODLOG_CARD_VIEW) ?? undefined,
   debugInfo: false,
-  systemUI: true,
   expandImages: true,
   view: 'list',
+  font: 'system',
 }
 
 export const userSettings = writable(defaultSettings)
diff --git a/src/lib/util.ts b/src/lib/util.ts
index e663528f..a1a81e63 100644
--- a/src/lib/util.ts
+++ b/src/lib/util.ts
@@ -2,6 +2,7 @@ import { goto } from '$app/navigation'
 import { toast } from 'mono-svelte'
 import { userSettings } from '$lib/settings.js'
 import { get } from 'svelte/store'
+import type { SubscribedType } from 'lemmy-js-client'
 
 export const findClosestNumber = (numbers: number[], target: number): number =>
   numbers.reduce((prev, curr) =>
@@ -98,3 +99,9 @@ export const trycatch = <T>(func: () => T): Maybe<T> => {
 export const removeItem = <T>(array: T[], predicate: (item: T) => boolean) => {
   array.splice(array.findIndex(predicate), 1)
 }
+
+export const DOMAIN_REGEX = /^((?!-)[A-Za-z0-9-]{1,63}\.)+[A-Za-z]{2,63}/gi
+export const DOMAIN_REGEX_FORMS = '^((?!-)[A-Za-z0-9-]{1,63}.)+[A-Za-z]{2,63}'
+
+export const isSubscribed = (subscribed: SubscribedType) =>
+  subscribed == 'Pending' || subscribed == 'Subscribed'
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 18da9799..44a7dd6f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -42,9 +42,14 @@
 </svelte:head>
 
 <div
-  class="flex flex-col min-h-screen {$userSettings.systemUI
+  class="flex flex-col min-h-screen
+  font-inter
+  {$userSettings.font == 'inter'
+    ? 'font-inter'
+    : $userSettings.font == 'system'
     ? 'font-system'
-    : 'font-sans'}"
+    : 'font-sans'}
+  "
 >
   <Navbar />
   <ToastContainer />
@@ -53,7 +58,7 @@
     <Sidebar />
     <main
       class="p-3 sm:p-6 min-w-0 w-full flex-[3] sm:rounded-tl-lg
-      border-slate-200 dark:border-zinc-900 sm:border-l border-t"
+      border-slate-200 dark:border-zinc-900 sm:border-l border-t bg-slate-25 dark:bg-zinc-950"
     >
       <slot />
     </main>
diff --git a/src/routes/communities/+page.svelte b/src/routes/communities/+page.svelte
index 8715c934..98dc66a5 100644
--- a/src/routes/communities/+page.svelte
+++ b/src/routes/communities/+page.svelte
@@ -4,42 +4,71 @@
   import { page } from '$app/stores'
   import {
     ChatBubbleOvalLeftEllipsis,
+    Check,
     GlobeAmericas,
     Icon,
+    InformationCircle,
     PencilSquare,
+    Plus,
     QuestionMarkCircle,
     UserGroup,
   } from 'svelte-hero-icons'
   import CommunityLink from '$lib/components/lemmy/community/CommunityLink.svelte'
   import Subscribe from './Subscribe.svelte'
   import Pageination from '$lib/components/ui/Pageination.svelte'
-  import { searchParam } from '$lib/util.js'
+  import {
+    DOMAIN_REGEX,
+    DOMAIN_REGEX_FORMS,
+    isSubscribed,
+    searchParam,
+  } from '$lib/util.js'
   import { addSubscription } from '$lib/lemmy/user.js'
-  import { LINKED_INSTANCE_URL } from '$lib/instance.js'
   import { profile } from '$lib/auth.js'
-  import { Button, Select, TextInput } from 'mono-svelte'
+  import { Button, Material, Popover, Select, TextInput } from 'mono-svelte'
   import Sort from '$lib/components/lemmy/Sort.svelte'
+  import Placeholder from '$lib/components/ui/Placeholder.svelte'
+  import FormattedNumber from '$lib/components/util/FormattedNumber.svelte'
+  import CommunityItem from '$lib/components/lemmy/community/CommunityItem.svelte'
 
   export let data
 
-  let search = ''
+  let search = data.query || ''
+  let instance = ''
 </script>
 
 <svelte:head>
   <title>Communities</title>
 </svelte:head>
 
-<h1 class="text-2xl font-bold">Communities</h1>
-<p class="text-slate-600 dark:text-zinc-400 mt-2">
-  Can't find a community on your home instance? Go to the <a
-    href="/search"
-    class="text-blue-500 hover:underline"
+<h1 class="text-2xl font-bold">
+  <span>Communities</span>
+  <Popover
+    openOnHover
+    class="!inline-flex"
+    targetClass="inline"
+    origin="bottom-center"
   >
-    search
-  </a>
-  page, and search with this syntax:
-  <code>!community@instance.com</code>
-</p>
+    <Icon
+      src={InformationCircle}
+      size="20"
+      mini
+      slot="target"
+      class="!inline"
+    />
+    <Material slot="popover" color="distinct" class="w-72">
+      <p class="font-normal">
+        Can't find a community on your home instance? Go to the <a
+          href="/search"
+          class="text-blue-500 hover:underline"
+        >
+          search
+        </a>
+        page, and search with this syntax:
+        <code>!community@instance.com</code>
+      </p>
+    </Material>
+  </Popover>
+</h1>
 <div class="flex flex-row flex-wrap gap-4 mt-4">
   <Select
     bind:value={data.type}
@@ -54,124 +83,33 @@
     <option value="Subscribed">Subscribed</option>
   </Select>
   <Sort selected={data.sort} />
-  <div class="flex flex-col sm:flex-row gap-2 sm:ml-auto items-center">
-    <TextInput
-      bind:value={search}
-      on:change={() => () => searchParam($page.url, 'q', search, 'page')}
-    />
-    <Button
-      on:click={() => searchParam($page.url, 'q', search, 'page')}
-      color="ghost"
-      class="h-max"
-    >
-      Search
-    </Button>
-  </div>
+  <form
+    on:submit|preventDefault={() =>
+      goto(`/search?q=${search}&type=Communities`)}
+    class="flex flex-col sm:flex-row gap-2 sm:ml-auto items-center"
+  >
+    <TextInput bind:value={search} />
+    <Button submit color="ghost" class="h-max">Search</Button>
+  </form>
 </div>
 <ul class="flex flex-col divide-y dark:divide-zinc-800">
   {#if data.communities.length == 0}
-    <div
-      class="text-slate-600 dark:text-zinc-400 flex flex-col justify-center items-center py-8"
-    >
-      <Icon src={QuestionMarkCircle} size="32" solid />
-      <h1 class="font-bold text-2xl">No communities</h1>
-      <p class="mt-2 text-center">
-        There are no communities with that name. Try refining your search.
-      </p>
-    </div>
+    <Placeholder
+      icon={QuestionMarkCircle}
+      title="No communities"
+      description="There are no communities that match this filter. Try refining your
+  search."
+    />
   {/if}
   {#each data.communities as community}
-    <li class="py-3">
-      <div
-        class="
-  flex flex-col gap-1 text-sm max-w-full"
-      >
-        <div class="flex flex-row items-center">
-          <span
-            class="break-words max-w-full w-max text-base font-bold text-sky-400 hover:underline"
-          >
-            <CommunityLink
-              showInstance={false}
-              avatar
-              community={community.community}
-            />
-          </span>
-          <div class="ml-auto">
-            <Subscribe {community} let:subscribe let:subscribing>
-              <Button
-                disabled={subscribing || !$profile?.jwt}
-                loading={subscribing}
-                on:click={async () => {
-                  const res = await subscribe()
-
-                  if (res) {
-                    community.subscribed =
-                      res.community_view.subscribed != 'NotSubscribed'
-                        ? 'Subscribed'
-                        : 'NotSubscribed'
-
-                    addSubscription(
-                      community.community,
-                      res.community_view.subscribed == 'Subscribed' ||
-                        res.community_view.subscribed == 'Pending'
-                    )
-                  }
-                }}
-                color={community.subscribed == 'Subscribed'
-                  ? 'primary'
-                  : 'ghost'}
-              >
-                {community.subscribed == 'Subscribed'
-                  ? 'Subscribed'
-                  : 'Subscribe'}
-              </Button>
-            </Subscribe>
-          </div>
-        </div>
-        <span class="opacity-80 mb-2">
-          {new URL(community.community.actor_id).hostname}
-        </span>
-        <div class="flex flex-row gap-3 items-center">
-          <div class="flex flex-row gap-1 items-center">
-            <Icon src={UserGroup} width={16} mini />
-            <span>
-              {Intl.NumberFormat('en', { notation: 'compact' }).format(
-                community.counts.subscribers
-              )}
-            </span>
-          </div>
-          <div class="flex flex-row gap-1 items-center">
-            <Icon src={PencilSquare} mini width={16} />
-            <span>
-              {Intl.NumberFormat('en', { notation: 'compact' }).format(
-                community.counts.posts
-              )}
-            </span>
-          </div>
-          <div class="flex flex-row gap-1 items-center">
-            <Icon src={ChatBubbleOvalLeftEllipsis} mini width={16} />
-            <span>
-              {Intl.NumberFormat('en', { notation: 'compact' }).format(
-                community.counts.comments
-              )}
-            </span>
-          </div>
-        </div>
-      </div>
-    </li>
+    <CommunityItem {community} />
   {/each}
 </ul>
 {#if data.communities.length > 0}
   <div class="mt-2 w-full">
     <Pageination
       page={Number($page.url.searchParams.get('page')) || 1}
-      on:change={(p) => {
-        $page.url.searchParams.set('page', p.detail.toString())
-
-        goto($page.url.toString(), {
-          invalidateAll: true,
-        })
-      }}
+      on:change={(p) => searchParam($page.url, 'page', p.detail.toString())}
     />
   </div>
 {/if}
diff --git a/src/routes/communities/+page.ts b/src/routes/communities/+page.ts
index 53f6e95a..42387580 100644
--- a/src/routes/communities/+page.ts
+++ b/src/routes/communities/+page.ts
@@ -25,6 +25,8 @@ export async function load({ url, fetch }) {
       })),
       type: type,
       sort: sort,
+      query: query,
+      page: page,
     }
   } else {
     return {
@@ -37,6 +39,8 @@ export async function load({ url, fetch }) {
       })),
       type: type,
       sort: sort,
+      query: query,
+      page: page,
     }
   }
 }
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index b6f26956..d19673d0 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -26,23 +26,46 @@
   <title>Settings</title>
 </svelte:head>
 
-<div class="flex flex-col">
-  <h1 class="text-3xl font-bold flex justify-between">
-    Settings <Button
-      on:click={() => {
-        toast({
-          content:
-            'Are you sure you want to reset your settings to the default?',
-          action: () => ($userSettings = defaultSettings),
-        })
-      }}
-      class="font-normal"
-    >
-      <Icon src={ArrowPath} mini size="16" slot="prefix" />
-      Reset to default
-    </Button>
-  </h1>
-  <SectionTitle class="mt-4">General</SectionTitle>
+<h1 class="text-3xl font-bold flex justify-between">
+  Settings <Button
+    on:click={() => {
+      toast({
+        content: 'Are you sure you want to reset your settings to the default?',
+        action: () => ($userSettings = defaultSettings),
+      })
+    }}
+    class="font-normal"
+  >
+    <Icon src={ArrowPath} mini size="16" slot="prefix" />
+    Reset to default
+  </Button>
+</h1>
+
+<div class="flex flex-col max-w-4xl mx-auto">
+  <SectionTitle class="mt-4">UI</SectionTitle>
+  <Setting>
+    <span slot="title">Post style</span>
+    <ViewSelect />
+    <p slot="description">
+      {#if $userSettings.view == 'list'}
+        Show posts in a list, with post bodies and compact images.
+      {:else if $userSettings.view == 'compact'}
+        Show posts in a list, without post bodies and with tighter spacing.
+      {:else if $userSettings.view == 'card'}
+        Show posts in cards, with large images.
+      {/if}
+    </p>
+  </Setting>
+  <Setting>
+    <span slot="title">Random placeholders</span>
+    <span slot="description">
+      Show a random placeholder for forms for comments, posts, etc.
+    </span>
+    <Checkbox bind:checked={$userSettings.randomPlaceholders}>
+      {$userSettings.randomPlaceholders ? 'Enabled' : 'Disabled'}
+    </Checkbox>
+  </Setting>
+
   <Setting>
     <span slot="title">Default sort</span>
     <span slot="description">The default sort to use for feeds.</span>
@@ -76,17 +99,42 @@
     </div>
   </Setting>
   <Setting>
-    <span slot="title">Post style</span>
-    <ViewSelect />
-    <p>
-      {#if $userSettings.view == 'list'}
-        Show posts in a list, with post bodies and compact images.
-      {:else if $userSettings.view == 'compact'}
-        Show posts in a list, without post bodies and with tighter spacing.
-      {:else if $userSettings.view == 'card'}
-        Show posts in cards, with large images.
-      {/if}
-    </p>
+    <span slot="title">Use display name</span>
+    <span slot="description">
+      Show a user's display name instead of their account username.
+    </span>
+
+    <Checkbox bind:checked={$userSettings.displayNames}>
+      {$userSettings.displayNames ? 'Enabled' : 'Disabled'}
+    </Checkbox>
+  </Setting>
+
+  <SectionTitle class="mt-4">Posts</SectionTitle>
+  <Setting>
+    <span slot="title">Fade read posts</span>
+    <span slot="description">Fade the title of posts you've already read.</span>
+    <Checkbox bind:checked={$userSettings.markReadPosts}>
+      {$userSettings.markReadPosts ? 'Enabled' : 'Disabled'}
+    </Checkbox>
+  </Setting>
+  <Setting>
+    <span slot="title">NSFW blur</span>
+    <span slot="description">
+      Blur images and remove post bodies of NSFW content.
+    </span>
+    <Checkbox bind:checked={$userSettings.nsfwBlur}>
+      {$userSettings.nsfwBlur ? 'Enabled' : 'Disabled'}
+    </Checkbox>
+  </Setting>
+  <Setting>
+    <span slot="title">Expand Images</span>
+    <span slot="description">
+      Clicking on an image brings you to an expanded view rather than sending
+      you to the post page.
+    </span>
+    <Checkbox bind:checked={$userSettings.expandImages}>
+      {$userSettings.expandImages ? 'Enabled' : 'Disabled'}
+    </Checkbox>
   </Setting>
   <Setting>
     <span slot="title">Hide Posts</span>
@@ -110,45 +158,6 @@
       </Checkbox>
     </div>
   </Setting>
-  <Setting>
-    <Checkbox slot="title" bind:checked={$userSettings.displayNames}>
-      Use display name
-    </Checkbox>
-    <span slot="description">
-      Show a user's display name instead of their account username.
-    </span>
-  </Setting>
-  <Setting>
-    <Checkbox slot="title" bind:checked={$userSettings.randomPlaceholders}>
-      Random placeholders
-    </Checkbox>
-    <span slot="description">
-      Show a random placeholder for forms for comments, posts, etc.
-    </span>
-  </Setting>
-
-  <SectionTitle class="mt-4">UI</SectionTitle>
-  <Setting>
-    <Checkbox bind:checked={$userSettings.markReadPosts} slot="title">
-      Fade read posts
-    </Checkbox>
-    <span slot="description">Fade the title of posts you've already read.</span>
-  </Setting>
-  <Setting>
-    <Checkbox bind:checked={$userSettings.nsfwBlur} slot="title">
-      NSFW blur
-    </Checkbox>
-    <span slot="description">Blur images of NSFW content.</span>
-  </Setting>
-  <Setting>
-    <Checkbox bind:checked={$userSettings.expandImages} slot="title">
-      Expand Images
-    </Checkbox>
-    <span slot="description">
-      Clicking on an image brings you to an expanded view rather than sending
-      you to the post page.
-    </span>
-  </Setting>
 
   <SectionTitle class="mt-4">Instances</SectionTitle>
   <Setting>
@@ -215,17 +224,19 @@
     <span slot="title">Font</span>
     <span slot="description">What font Photon should use.</span>
     <MultiSelect
-      options={[true, false]}
-      optionNames={['System UI', 'Browser Font']}
-      bind:selected={$userSettings.systemUI}
+      options={['inter', 'system', 'browser']}
+      optionNames={['Inter', 'System UI', 'Browser Font']}
+      bind:selected={$userSettings.font}
     />
   </Setting>
   <Setting>
-    <Checkbox bind:checked={$userSettings.debugInfo} slot="title">
-      Debug Info
-    </Checkbox>
+    <span slot="title">Debug Info</span>
     <span slot="description">
       Show an option to show debug information. (in posts and such)
     </span>
+
+    <Checkbox bind:checked={$userSettings.debugInfo}>
+      {$userSettings.debugInfo ? 'Enabled' : 'Disabled'}
+    </Checkbox>
   </Setting>
 </div>
diff --git a/src/routes/settings/Setting.svelte b/src/routes/settings/Setting.svelte
index edf6913a..7f386b4d 100644
--- a/src/routes/settings/Setting.svelte
+++ b/src/routes/settings/Setting.svelte
@@ -2,12 +2,20 @@
   import { Material } from 'mono-svelte'
 </script>
 
-<Material padding="lg" class="flex flex-col gap-3 my-2">
-  <h1 class="font-bold"><slot name="title" /></h1>
-  {#if $$slots.description}
-    <p class="text-slate-700 dark:text-zinc-300">
-      <slot name="description" />
-    </p>
+<Material color="distinct" padding="none" class="my-2">
+  <div class="px-5 pt-5 flex flex-col gap-3" class:pb-5={!$$slots.default}>
+    <h1 class="font-bold text-lg"><slot name="title" /></h1>
+    {#if $$slots.description}
+      <p class="text-slate-800 dark:text-zinc-200">
+        <slot name="description" />
+      </p>
+    {/if}
+  </div>
+  {#if $$slots.default}
+    <div
+      class="w-full px-5 py-3 bg-slate-50 dark:bg-zinc-950 border-t dark:border-zinc-800 mt-4"
+    >
+      <slot />
+    </div>
   {/if}
-  <slot />
 </Material>
diff --git a/src/style/app.css b/src/style/app.css
index 0ff6711a..c3fb20b6 100644
--- a/src/style/app.css
+++ b/src/style/app.css
@@ -18,8 +18,14 @@
   }
 }
 
+@font-face {
+  font-family: 'Inter';
+  src: url('/font/Inter.woff2') format('woff2');
+  font-display: swap;
+}
+
 body {
-  @apply bg-slate-50 text-slate-900 dark:bg-zinc-950 dark:text-zinc-100 accent-slate-950 dark:accent-zinc-50;
+  @apply bg-slate-100 text-slate-900 dark:bg-zinc-950 dark:text-zinc-100 accent-slate-950 dark:accent-zinc-50;
 }
 
 .dark {
diff --git a/tailwind.config.js b/tailwind.config.js
index 70b7ce96..806cb493 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,6 +10,7 @@ export default {
       sans: ['sans-serif'],
       system: ['system-ui'],
       serif: ['serif'],
+      inter: ['Inter'],
     },
     extend: {
       animation: {
@@ -21,6 +22,9 @@ export default {
         },
       },
       colors: {
+        slate: {
+          25: 'rgb(252,253,254)',
+        },
         zinc: {
           700: '#34343b',
           800: '#1f1f24',
diff --git a/yarn.lock b/yarn.lock
index d0d636a3..25d22afc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2977,10 +2977,10 @@ mlly@^1.2.0, mlly@^1.4.0:
     pkg-types "^1.0.3"
     ufo "^1.1.2"
 
-mono-svelte@^0.2.20:
-  version "0.2.20"
-  resolved "https://registry.yarnpkg.com/mono-svelte/-/mono-svelte-0.2.20.tgz#561e8f3c3d516e68da44c01a8f122f13efeeabfd"
-  integrity sha512-JeB1TCTm6JysEjIjRprG8S+o/VTlcQQp2zkQ3daF/QotDO+rF2n18KEsbtFFestt0dpIVzE14A4oLNowFmNClA==
+mono-svelte@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/mono-svelte/-/mono-svelte-0.3.2.tgz#646a247698b7aac4cd8c6c0d03ad448081e6b310"
+  integrity sha512-CiJzyCtQ6xM8XXhowyqIqCp8R4Q7IVDHbg7Ly+W5QSjfaBRYFbv2L/qhi0FkvBzQ6WOSoCK8Lz0vN81WbaPbyA==
 
 mri@^1.1.0:
   version "1.2.0"