diff --git a/components/app/interface/settings/_layout/Content.tsx b/components/app/interface/settings/_layout/Content.tsx
index 38eb8e56..9a05367f 100644
--- a/components/app/interface/settings/_layout/Content.tsx
+++ b/components/app/interface/settings/_layout/Content.tsx
@@ -113,9 +113,9 @@ const CloseAnchor = styled.a`
   transition: ${(props) => props.theme!.transitions.fast} background-color;
 
   svg {
-    transition: ${(props) => props.theme!.transitions.fast} background-color;
     color: ${(props) =>
       props.theme!.colours["settings-close-anchor"]} !important;
+    transition: ${(props) => props.theme!.transitions.fast} background-color;
   }
 
   &:hover {
@@ -151,7 +151,7 @@ const CloseAction = styled.div`
     justify-content: center;
     width: 36px;
     font-weight: 600;
-    color: ${(props) => props.theme!.colours["settings-content-foreground"]};
     font-size: 0.75rem;
+    color: ${(props) => props.theme!.colours["settings-foreground"]};
   }
 `;
diff --git a/components/app/interface/settings/_layout/SidebarButton.tsx b/components/app/interface/settings/_layout/SidebarButton.tsx
index c2b91a3c..a60f0a62 100644
--- a/components/app/interface/settings/_layout/SidebarButton.tsx
+++ b/components/app/interface/settings/_layout/SidebarButton.tsx
@@ -19,6 +19,7 @@ export const SidebarButton = styled.a<Props>`
   font-size: 15px;
   user-select: none;
   transition: background-color 0.1s ease-in-out;
+  fill: ${(props) => props.theme!.colours["settings-sidebar-foreground"]};
   color: ${(props) => props.theme!.colours["settings-sidebar-foreground"]};
 
   svg {
diff --git a/components/app/interface/settings/client/Account.tsx b/components/app/interface/settings/client/Account.tsx
index bd3db939..325ed740 100644
--- a/components/app/interface/settings/client/Account.tsx
+++ b/components/app/interface/settings/client/Account.tsx
@@ -68,9 +68,9 @@ function UserInformation() {
                 </div>
               </div>
             </ProfileDetails>
-            <div class="button">
+            {/*<div class="button">
               <MdEdit {...iconSize(22)} />
-            </div>
+  </div>*/}
           </div>
           <BadgeContainer>
             <ProfileBadges>
@@ -119,6 +119,7 @@ const ProfileBadges = styled.div`
   display: flex;
 
   background: ${(props) => props.theme!.colours["settings-background"]};
+  fill: ${(props) => props.theme!.colours["settings-foreground"]};
 `;
 
 /**
@@ -133,7 +134,7 @@ const AccountBox = styled(Row)`
       rgba(255, 255, 255, 0.7)
     ),
     url("https://autumn.revolt.chat/backgrounds/PA-U1R3u-iw72V-WH0C9aDN1rBTbnm-sKNR8YN4RL8?width=1000");
-  color: ${(props) => props.theme!.colours["foreground"]};
+  color: black;
 
   .column {
     display: flex;
diff --git a/components/app/interface/settings/client/index.tsx b/components/app/interface/settings/client/index.tsx
index 4c7f85fc..f979e5f6 100644
--- a/components/app/interface/settings/client/index.tsx
+++ b/components/app/interface/settings/client/index.tsx
@@ -122,11 +122,11 @@ const Config: SettingsConfiguration<{ server: Server }> = {
               title: <></>,
               hidden: true,
             },
-            {
+            /*{
               id: "profile",
               icon: <MdAccountCircle {...iconSize(20)} />,
               title: t("app.settings.pages.profile.title"),
-            },
+            },*/
             {
               id: "sessions",
               icon: <MdVerifiedUser {...iconSize(20)} />,
@@ -154,7 +154,7 @@ const Config: SettingsConfiguration<{ server: Server }> = {
             },
           ],
         },
-        {
+        /*{
           title: t("app.settings.categories.client_settings"),
           entries: [
             {
@@ -212,15 +212,15 @@ const Config: SettingsConfiguration<{ server: Server }> = {
               title: t("app.settings.pages.experiments.title"),
             },
           ],
-        },
+        },*/
         {
           entries: [
-            {
+            /*{
               onClick: () =>
                 getController("modal").push({ type: "changelog", posts: [] }),
               icon: <MdFormatListBulleted {...iconSize(20)} />,
               title: t("app.special.modals.changelogs.title"),
-            },
+            },*/
             {
               href: "https://github.com/revoltchat",
               icon: <MdMemory {...iconSize(20)} />,
diff --git a/components/app/menus/ChannelContextMenu.tsx b/components/app/menus/ChannelContextMenu.tsx
index c1afbfef..8a86ca4f 100644
--- a/components/app/menus/ChannelContextMenu.tsx
+++ b/components/app/menus/ChannelContextMenu.tsx
@@ -7,6 +7,7 @@ import { getController } from "@revolt/common";
 import MdBadge from "@material-design-icons/svg/outlined/badge.svg?component-solid";
 import MdDelete from "@material-design-icons/svg/outlined/delete.svg?component-solid";
 import MdLibraryAdd from "@material-design-icons/svg/outlined/library_add.svg?component-solid";
+import MdMarkChatRead from "@material-design-icons/svg/outlined/mark_chat_read.svg?component-solid";
 import MdShield from "@material-design-icons/svg/outlined/shield.svg?component-solid";
 
 import {
@@ -21,6 +22,13 @@ import {
  * @returns
  */
 export function ChannelContextMenu(props: { channel: Channel }) {
+  /**
+   * Mark server as read
+   */
+  function markAsRead() {
+    props.channel.ack();
+  }
+
   /**
    * Create a new channel
    */
@@ -60,6 +68,13 @@ export function ChannelContextMenu(props: { channel: Channel }) {
 
   return (
     <ContextMenu>
+      <Show when={props.channel.unread}>
+        <ContextMenuButton icon={MdMarkChatRead} onClick={markAsRead}>
+          Mark as read
+        </ContextMenuButton>
+        <ContextMenuDivider />
+      </Show>
+
       <Show when={props.channel.server?.havePermission("ManageChannel")}>
         {/* TODO re order */}
         <ContextMenuButton icon={MdLibraryAdd} onClick={createChannel}>
@@ -72,6 +87,7 @@ export function ChannelContextMenu(props: { channel: Channel }) {
         </ContextMenuButton>
         <ContextMenuDivider />
       </Show>
+
       <ContextMenuButton icon={MdShield} onClick={openAdminPanel}>
         Admin Panel
       </ContextMenuButton>
diff --git a/components/app/menus/ContextMenu.tsx b/components/app/menus/ContextMenu.tsx
index d189e580..9226d640 100644
--- a/components/app/menus/ContextMenu.tsx
+++ b/components/app/menus/ContextMenu.tsx
@@ -13,6 +13,7 @@ export const ContextMenu = styled.div`
     props.theme!.colours["component-context-menu-background"]};
   color: ${(props) =>
     props.theme!.colours["component-context-menu-foreground"]};
+  fill: ${(props) => props.theme!.colours["component-context-menu-foreground"]};
 
   box-shadow: 0 0 3px
     ${(props) => props.theme!.colours["component-context-menu-shadow"]};
diff --git a/components/app/menus/MessageContextMenu.tsx b/components/app/menus/MessageContextMenu.tsx
index ea170952..bfb70a26 100644
--- a/components/app/menus/MessageContextMenu.tsx
+++ b/components/app/menus/MessageContextMenu.tsx
@@ -40,7 +40,7 @@ export function MessageContextMenu(props: { message: Message }) {
    * Mark message as unread
    */
   function markAsUnread() {
-    props.message.ack();
+    props.message.channel!.ack(props.message, false, false, true);
   }
 
   /**
diff --git a/components/auth/src/flows/FlowHome.tsx b/components/auth/src/flows/FlowHome.tsx
index fd614eea..9a57159d 100644
--- a/components/auth/src/flows/FlowHome.tsx
+++ b/components/auth/src/flows/FlowHome.tsx
@@ -18,8 +18,7 @@ const AccountSwitcher = styled(Column)`
 
 const Logo = styled(RevoltSvg)`
   margin: auto;
-  fill: ${(props) => props.theme!.colours.foreground};
-  /* filter: invert(1); */
+  filter: ${(props) => props.theme!.effects.svg.light};
 `;
 
 /**
diff --git a/components/client/Controller.ts b/components/client/Controller.ts
index 577b6f16..84e59552 100644
--- a/components/client/Controller.ts
+++ b/components/client/Controller.ts
@@ -83,7 +83,9 @@ export default class ClientController {
    */
   createClient(session: PrivateSession) {
     if (typeof session === "string") throw "Bot login not supported";
-    if (this.#clients.get(session.user_id)) throw "User client already exists";
+    // if (this.#clients.get(session.user_id)) throw "User client already exists";
+    this.#clients.delete(session.user_id);
+    // TODO: yeah whatever
 
     const client = new Client({
       baseURL: CONFIGURATION.DEFAULT_API_URL,
diff --git a/components/modal/modals/DemoJoinLounge.tsx b/components/modal/modals/DemoJoinLounge.tsx
new file mode 100644
index 00000000..2825eb28
--- /dev/null
+++ b/components/modal/modals/DemoJoinLounge.tsx
@@ -0,0 +1,26 @@
+import { useTranslation } from "@revolt/i18n";
+
+import { createFormModal } from "../form";
+import { PropGenerator } from "../types";
+
+const DemoJoinLounge: PropGenerator<"demo"> = (props) => {
+  const t = useTranslation();
+
+  return createFormModal({
+    modalProps: {
+      title: "You are about to join the Revolt server",
+      description:
+        "Here you will be able to test the client and give feedback.",
+    },
+    schema: {},
+    data: {},
+    callback: async () => {
+      await props.client.api.post(`/invites/Testers`);
+    },
+    submit: {
+      children: t("app.special.modals.actions.ok"),
+    },
+  });
+};
+
+export default DemoJoinLounge;
diff --git a/components/modal/modals/index.tsx b/components/modal/modals/index.tsx
index a0e8d8ab..833d2b39 100644
--- a/components/modal/modals/index.tsx
+++ b/components/modal/modals/index.tsx
@@ -23,6 +23,7 @@ import delete_bot from "./DeleteBot";
 import delete_channel from "./DeleteChannel";
 import delete_message from "./DeleteMessage";
 import delete_server from "./DeleteServer";
+import demo from "./DemoJoinLounge";
 import edit_email from "./EditEmail";
 import edit_keybind from "./EditKeybind";
 import edit_password from "./EditPassword";
@@ -44,6 +45,7 @@ import sign_out_sessions from "./SignOutSessions";
 import signed_out from "./SignedOut";
 
 const Modals: Record<AllModals["type"], PropGenerator<any>> = {
+  demo,
   add_friend,
   ban_member,
   changelog,
diff --git a/components/modal/types.ts b/components/modal/types.ts
index b377696b..4d174e83 100644
--- a/components/modal/types.ts
+++ b/components/modal/types.ts
@@ -22,6 +22,7 @@ import { ChangelogPost } from "./modals/Changelog";
 export type Modals =
   | {
       type:
+        | "demo"
         | "add_friend"
         | "create_group"
         | "create_or_join_server"
diff --git a/components/ui/components/design/atoms/display/Header.tsx b/components/ui/components/design/atoms/display/Header.tsx
index 160a0eec..f2206788 100644
--- a/components/ui/components/design/atoms/display/Header.tsx
+++ b/components/ui/components/design/atoms/display/Header.tsx
@@ -68,13 +68,7 @@ export const HeaderWithImage = styled(Header)`
   > * {
     flex-grow: 1;
     padding: 6px 14px;
-    color: ${(props) =>
-      props.theme!.colours["sidebar-header-with-image-text-foreground"]};
-    background: linear-gradient(
-      0deg,
-      ${(props) =>
-        props.theme!.colours["sidebar-header-with-image-text-background"]},
-      transparent
-    );
+    color: white;
+    background: linear-gradient(0deg, black, transparent);
   }
 `;
diff --git a/components/ui/components/design/atoms/inputs/CategoryButton.tsx b/components/ui/components/design/atoms/inputs/CategoryButton.tsx
index 5eb7dca9..f6fd5928 100644
--- a/components/ui/components/design/atoms/inputs/CategoryButton.tsx
+++ b/components/ui/components/design/atoms/inputs/CategoryButton.tsx
@@ -144,6 +144,8 @@ const IconWrapper = styled.div`
   svg {
     color: ${(props) =>
       props.theme!.colours["component-categorybtn-foreground-description"]};
+    fill: ${(props) =>
+      props.theme!.colours["component-categorybtn-foreground-description"]};
   }
 `;
 
diff --git a/components/ui/components/design/atoms/inputs/MenuButton.tsx b/components/ui/components/design/atoms/inputs/MenuButton.tsx
index b59d7ccc..e9fa3b59 100644
--- a/components/ui/components/design/atoms/inputs/MenuButton.tsx
+++ b/components/ui/components/design/atoms/inputs/MenuButton.tsx
@@ -57,6 +57,15 @@ const Base = styled(Row)<Pick<Props, "size" | "attention">>`
 
   ${(props) => generateTypographyCSS(props.theme!, "menu-button")};
 
+  fill: ${(props) =>
+    props.theme!.colours[
+      props.attention === "active" || props.attention === "selected"
+        ? "component-menubtn-selected-foreground"
+        : props.attention === "muted"
+        ? "component-menubtn-muted-foreground"
+        : "component-menubtn-default-foreground"
+    ]};
+
   color: ${(props) =>
     props.theme!.colours[
       props.attention === "active" || props.attention === "selected"
diff --git a/components/ui/components/navigation/channels/ServerSidebar.tsx b/components/ui/components/navigation/channels/ServerSidebar.tsx
index 448ab5b7..d6b4c213 100644
--- a/components/ui/components/navigation/channels/ServerSidebar.tsx
+++ b/components/ui/components/navigation/channels/ServerSidebar.tsx
@@ -175,13 +175,18 @@ export const ServerSidebar = (props: Props) => {
         <List gap="lg">
           <div />
           <For each={props.server.orderedChannels}>
-            {(category) => (
-              <Category
-                category={category}
-                channelId={props.channelId}
-                menuGenerator={props.menuGenerator}
-              />
-            )}
+            {(category) =>
+              ![
+                "01G3E05H65N1K6WM64SPVJ4PSE",
+                "01HC0JQH88WC02Y0S1VE9WEBRM",
+              ].includes(category.id) && (
+                <Category
+                  category={category}
+                  channelId={props.channelId}
+                  menuGenerator={props.menuGenerator}
+                />
+              )
+            }
           </For>
           <div />
         </List>
@@ -204,9 +209,9 @@ function ServerInfo(
           <TextWithEmoji content={props.server.name} />
         </OverflowingText>
       </ServerName>
-      <SettingsLink onClick={props.openServerSettings}>
+      {/* <SettingsLink onClick={props.openServerSettings}>
         <BiSolidCog size={18} />
-      </SettingsLink>
+      </SettingsLink> */}
     </Row>
   );
 }
@@ -381,7 +386,7 @@ function Entry(
               <MdPersonAdd {...iconSize("14px")} />
             </a>
 
-            <a
+            {/* <a
               use:floating={{
                 tooltip: {
                   placement: "top",
@@ -398,7 +403,7 @@ function Entry(
               }}
             >
               <MdSettings {...iconSize("14px")} />
-            </a>
+            </a> */}
           </>
         }
       >
diff --git a/components/ui/components/navigation/servers/ServerList.tsx b/components/ui/components/navigation/servers/ServerList.tsx
index edf782d4..031a4e98 100644
--- a/components/ui/components/navigation/servers/ServerList.tsx
+++ b/components/ui/components/navigation/servers/ServerList.tsx
@@ -1,10 +1,6 @@
-import {
-  BiRegularPlus,
-  BiSolidCheckShield,
-  BiSolidCog,
-  BiSolidMegaphone,
-} from "solid-icons/bi";
-import { Accessor, For, Show, onCleanup, onMount } from "solid-js";
+import { BiSolidCheckShield, BiSolidCog } from "solid-icons/bi";
+import { BiSolidMegaphone } from "solid-icons/bi";
+import { Accessor, For, Show, batch, onCleanup, onMount } from "solid-js";
 import { JSX } from "solid-js";
 import { styled } from "solid-styled-components";
 
@@ -133,6 +129,48 @@ export const ServerList = (props: Props) => {
     );
   });
 
+  function Item(props: { accentColour: string; darkMode?: boolean }) {
+    return (
+      <EntryContainer
+        style={{ cursor: "pointer" }}
+        onClick={() => {
+          batch(() => {
+            (window as any)._demo_setAccent(props.accentColour);
+            (window as any)._demo_setDarkMode(props.darkMode ?? false);
+          });
+        }}
+      >
+        <Avatar
+          size={42}
+          fallback={
+            <div
+              style={{
+                width: "32px",
+                height: "32px",
+                overflow: "hidden",
+                background: props.darkMode ? "#101010" : "#f0f0f0",
+                "border-radius": "50%",
+              }}
+            >
+              <div
+                style={{
+                  width: "0",
+                  height: "0",
+                  border: "solid 20px",
+                  "border-color":
+                    props.accentColour +
+                    " transparent transparent " +
+                    props.accentColour,
+                }}
+              />
+            </div>
+          }
+          interactive
+        />
+      </EntryContainer>
+    );
+  }
+
   return (
     <ServerListBase>
       <div
@@ -175,7 +213,7 @@ export const ServerList = (props: Props) => {
             </Link>
           </EntryContainer>
         </Show>
-        <For each={props.unreadConversations.slice(0, 9)}>
+        {/* <For each={props.unreadConversations.slice(0, 9)}>
           {(conversation) => (
             <Tooltip placement="right" content={conversation.displayName}>
               <EntryContainer use:floating={props.menuGenerator(conversation)}>
@@ -204,7 +242,7 @@ export const ServerList = (props: Props) => {
               </EntryContainer>
             </Tooltip>
           )}
-        </For>
+        </For> */}
         <Show when={props.unreadConversations.length > 9}>
           <EntryContainer>
             <Link href={`/`}>
@@ -216,58 +254,54 @@ export const ServerList = (props: Props) => {
           </EntryContainer>
         </Show>
         <LineDivider />
-        <Draggable items={props.orderedServers} onChange={props.setServerOrder}>
-          {(item) => (
-            <Show
-              when={
-                item.$exists /** reactivity lags behind here for some reason,
-                                 just check existence before continuing */
-              }
-            >
-              <Tooltip placement="right" content={item.name}>
-                <EntryContainer use:floating={props.menuGenerator(item)}>
-                  <Show when={props.selectedServer() === item.id}>
-                    <PositionSwoosh>
-                      <Swoosh />
-                    </PositionSwoosh>
-                  </Show>
-                  <Link href={`/server/${item.id}`}>
-                    <Avatar
-                      size={42}
-                      src={item.iconURL}
-                      holepunch={item.unread ? "top-right" : "none"}
-                      overlay={
-                        <>
-                          <Show when={item.unread}>
-                            <UnreadsGraphic
-                              count={item.mentions.length}
-                              unread
-                            />
-                          </Show>
-                        </>
-                      }
-                      fallback={item.name}
-                      interactive
-                    />
-                  </Link>
-                </EntryContainer>
-              </Tooltip>
-            </Show>
-          )}
-        </Draggable>
-        <Tooltip placement="right" content={"Create or join a server"}>
-          <EntryContainer>
-            <a onClick={() => props.onCreateOrJoinServer()}>
-              <Avatar
-                size={42}
-                fallback={
-                  /*<MdPlus {...iconSize("24px")} />*/ <BiRegularPlus
-                    size={20}
-                  />
-                }
-              />
-            </a>
-          </EntryContainer>
+
+        <Tooltip placement="right" content={"Coral Orange (Light)"}>
+          <Item accentColour="#FF5733" />
+        </Tooltip>
+        <Tooltip placement="right" content={"Coral Orange (Dark)"}>
+          <Item accentColour="#FF5733" darkMode />
+        </Tooltip>
+        <Tooltip placement="right" content={"Purple (Light)"}>
+          <Item accentColour="#8C5FD3" />
+        </Tooltip>
+        <Tooltip placement="right" content={"Purple (Dark)"}>
+          <Item accentColour="#8C5FD3" darkMode />
+        </Tooltip>
+        <Tooltip placement="right" content={"Green (Light)"}>
+          <Item accentColour="#B4CBAF" />
+        </Tooltip>
+        <Tooltip placement="right" content={"Green (Dark)"}>
+          <Item accentColour="#B4CBAF" darkMode />
+        </Tooltip>
+        <Tooltip placement="right" content={"Blue (Light)"}>
+          <Item accentColour="#5231E7" />
+        </Tooltip>
+        <Tooltip placement="right" content={"Blue (Dark)"}>
+          <Item accentColour="#5231E7" darkMode />
+        </Tooltip>
+        <Tooltip placement="right" content={"Pink (Light)"}>
+          <Item accentColour="#FFC0CB" />
+        </Tooltip>
+        <Tooltip placement="right" content={"Pink (Dark)"}>
+          <Item accentColour="#FFC0CB" darkMode />
+        </Tooltip>
+        <Tooltip placement="right" content={"Cyan (Light)"}>
+          <Item accentColour="#00b7c3" />
+        </Tooltip>
+        <Tooltip placement="right" content={"Cyan (Dark)"}>
+          <Item accentColour="#00b7c3" darkMode />
+        </Tooltip>
+        <Tooltip placement="right" content={"Yellow (Light)"}>
+          <Item accentColour="#f5cb42" />
+        </Tooltip>
+        <Tooltip placement="right" content={"Yellow (Dark)"}>
+          <Item accentColour="#f5cb42" darkMode />
+        </Tooltip>
+        <Tooltip placement="right" content={"Lime (Light)"}>
+          <Item accentColour="#42f5a1" />
+        </Tooltip>
+        <Tooltip placement="right" content={"Lime (Dark)"}>
+          <Item accentColour="#42f5a1" darkMode />
         </Tooltip>
       </div>
       <Shadow>
diff --git a/components/ui/directives/ripple.ts b/components/ui/directives/ripple.ts
index 6e35f49b..f37da59c 100644
--- a/components/ui/directives/ripple.ts
+++ b/components/ui/directives/ripple.ts
@@ -1,4 +1,4 @@
-import { Accessor, JSX } from "solid-js";
+import { Accessor, JSX, createEffect, on } from "solid-js";
 import { css, useTheme } from "solid-styled-components";
 
 /**
@@ -13,58 +13,71 @@ export function ripple(
   const theme = useTheme();
   const props = accessor();
 
-  // FIXME: there is a bug here if theme is changed, this class just disappears
+  /**
+   * Apply the ripple classes
+   */
+  function applyClasses() {
+    el.classList.add(
+      css`
+        overflow: hidden;
+        position: relative;
 
-  el.classList.add(
-    css`
-      overflow: hidden;
-      position: relative;
+        * {
+          z-index: 1;
+        }
 
-      * {
-        z-index: 1;
-      }
+        &::before {
+          content: " ";
+          position: absolute;
+          width: 100%;
+          height: 100%;
 
-      &::before {
-        content: " ";
-        position: absolute;
-        width: 100%;
-        height: 100%;
+          opacity: 0;
+          z-index: 0;
+          transform: scale(2);
+          pointer-events: none;
+          background: ${theme.darkMode ? "white" : "black"};
 
-        opacity: 0;
-        z-index: 0;
-        transform: scale(2);
-        pointer-events: none;
-        background: ${theme.darkMode ? "white" : "black"};
+          transition: ${theme.transitions.fast};
+        }
 
-        transition: ${theme.transitions.fast};
-      }
+        &:hover::before {
+          opacity: ${theme.effects.ripple.hover.toString()};
+        }
+      `
+    );
 
-      &:hover::before {
-        opacity: ${theme.effects.ripple.hover.toString()};
-      }
-    `
-  );
+    if (typeof props === "boolean" || props.enable)
+      el.classList.add(css`
+        &::after {
+          content: " ";
+          position: absolute;
+          width: 100%;
+          aspect-ratio: 1;
+
+          z-index: 0;
+          border-radius: 50%;
+          transform: scale(0);
+          pointer-events: none;
+          background: ${theme.darkMode ? "white" : "black"};
+          opacity: ${theme.effects.ripple.hover.toString()};
 
-  if (typeof props === "boolean" || props.enable)
-    el.classList.add(css`
-      &::after {
-        content: " ";
-        position: absolute;
-        width: 100%;
-        aspect-ratio: 1;
+          transition: ${theme.transitions.medium};
+        }
 
-        z-index: 0;
-        border-radius: 50%;
-        transform: scale(0);
-        pointer-events: none;
-        background: ${theme.darkMode ? "white" : "black"};
-        opacity: ${theme.effects.ripple.hover.toString()};
+        &:active::after {
+          transform: scale(8);
+        }
+      `);
+  }
 
-        transition: ${theme.transitions.medium};
-      }
+  applyClasses();
 
-      &:active::after {
-        transform: scale(8);
-      }
-    `);
+  // FIXME: there is a bug here if theme is changed, this class just disappears
+  createEffect(
+    on(
+      () => theme.darkMode + theme.colours.foreground,
+      () => applyClasses()
+    )
+  );
 }
diff --git a/components/ui/directives/scroll.ts b/components/ui/directives/scroll.ts
index 65ee18ec..d6fcf6b6 100644
--- a/components/ui/directives/scroll.ts
+++ b/components/ui/directives/scroll.ts
@@ -16,7 +16,7 @@ export function scrollable(
   el.classList.add(css`
     will-change: transform;
     ${props.offsetTop ? "padding-top: " + props.offsetTop + "px;" : ""}
-    ${"overflow-" + (props?.direction ?? "y")}: scroll;
+    ${"overflow-" + (props?.direction ?? "y")}: auto;
     ${"overflow-" + ((props?.direction ?? "y") === "y" ? "x" : "y")}: hidden;
 
     scrollbar-width: ${props?.showOnHover ? "none" : "initial"};
diff --git a/components/ui/styled.d.ts b/components/ui/styled.d.ts
index ff3303d7..7a0f4498 100644
--- a/components/ui/styled.d.ts
+++ b/components/ui/styled.d.ts
@@ -178,6 +178,10 @@ declare module "solid-styled-components" {
       ripple: {
         hover: number;
       };
+      svg: {
+        light: string;
+        dark: string;
+      };
       muted: string;
       hover: string;
       active: string;
diff --git a/components/ui/themes/darkTheme.ts b/components/ui/themes/darkTheme.ts
index 1bed4df9..c2220636 100644
--- a/components/ui/themes/darkTheme.ts
+++ b/components/ui/themes/darkTheme.ts
@@ -551,6 +551,10 @@ export const darkTheme: (
       ripple: {
         hover: 0.05,
       },
+      svg: {
+        light: darkMode ? "invert(1)" : "invert(0)",
+        dark: darkMode ? "invert(0)" : "invert(1)",
+      },
       muted: "brightness(0)", // DEPRECATE
       hover: "brightness(0)", // DEPRECATE
       active: "brightness(0)", // DEPRECATE
diff --git a/packages/client/src/interface/Content.tsx b/packages/client/src/interface/Content.tsx
index 68575c61..9c715834 100644
--- a/packages/client/src/interface/Content.tsx
+++ b/packages/client/src/interface/Content.tsx
@@ -1,12 +1,10 @@
-import { Component, onMount } from "solid-js";
+import { Component, Show, onMount } from "solid-js";
 
+import { useClient } from "@revolt/client";
 import { modalController } from "@revolt/modal";
 import { Navigate, Route, Routes } from "@revolt/routing";
 import { state } from "@revolt/state";
 
-import { DevelopmentPage } from "./Development";
-import { Friends } from "./Friends";
-import { HomePage } from "./Home";
 import { ServerHome } from "./ServerHome";
 import { ChannelPage } from "./channels/ChannelPage";
 
@@ -17,6 +15,28 @@ function PWARedirect() {
   return <Navigate href={state.layout.getLastActivePath()} />;
 }
 
+/**
+ * Demo redirect
+ */
+function DemoRedirect() {
+  const client = useClient();
+
+  onMount(() => {
+    if (!client().servers.has("01F7ZSBSFHQ8TA81725KQCSDDP")) {
+      modalController.push({
+        type: "demo",
+        client: client(),
+      });
+    }
+  });
+
+  return (
+    <Show when={client().servers.has("01F7ZSBSFHQ8TA81725KQCSDDP")}>
+      <Navigate href="/server/01F7ZSBSFHQ8TA81725KQCSDDP" />
+    </Show>
+  );
+}
+
 /**
  * Open settings and redirect to last active path
  */
@@ -40,11 +60,11 @@ export const Content: Component = () => {
           </Routes>
         }
       />
-      <Route path="/channel/:channel" component={ChannelPage} />
-      <Route path="/dev" component={DevelopmentPage} />
-      <Route path="/friends" component={Friends} />
-      <Route path="/app" component={HomePage} />
-      <Route path="/pwa" component={PWARedirect} />
+      {/* <Route path="/channel/:channel" component={ChannelPage} /> */}
+      {/* <Route path="/dev" component={DevelopmentPage} /> */}
+      {/* <Route path="/friends" component={Friends} /> */}
+      <Route path="/app" component={DemoRedirect} />
+      {/* <Route path="/pwa" component={PWARedirect} /> */}
       <Route path="/settings" component={SettingsRedirect} />
       <Route path="/" element={<Navigate href="/app" />} />
     </Routes>
diff --git a/packages/client/src/interface/Sidebar.tsx b/packages/client/src/interface/Sidebar.tsx
index bb73193f..22f13ead 100644
--- a/packages/client/src/interface/Sidebar.tsx
+++ b/packages/client/src/interface/Sidebar.tsx
@@ -21,7 +21,6 @@ export const Sidebar = (props: {
 }) => {
   const user = useUser();
   const client = useClient();
-  const params = useSmartParams();
 
   return (
     <div style={{ display: "flex", "flex-shrink": 0 }}>
@@ -33,7 +32,7 @@ export const Sidebar = (props: {
           (channel) => channel.unread
         )}
         user={user()!}
-        selectedServer={() => params().serverId}
+        selectedServer={() => "01F7ZSBSFHQ8TA81725KQCSDDP"}
         onCreateOrJoinServer={() =>
           modalController.push({
             type: "create_or_join_server",
@@ -42,11 +41,7 @@ export const Sidebar = (props: {
         }
         menuGenerator={props.menuGenerator}
       />
-      <Routes>
-        <Route path="/server/:server/*" component={Server} />
-        <Route path="/admin" element={null} />
-        <Route path="/*" component={Home} />
-      </Routes>
+      <Server />
     </div>
   );
 };
@@ -100,7 +95,7 @@ const Server: Component = () => {
    * Resolve the server
    * @returns Server
    */
-  const server = () => client()!.servers.get(params().serverId!)!;
+  const server = () => client()!.servers.get("01F7ZSBSFHQ8TA81725KQCSDDP")!;
 
   /**
    * Open the server information modal