diff --git a/web/panda.config.ts b/web/panda.config.ts
index 1fbdb2f9c..f7e712831 100644
--- a/web/panda.config.ts
+++ b/web/panda.config.ts
@@ -13,6 +13,7 @@ import { headingInput } from "@/recipes/heading-input";
 import { input } from "@/recipes/input";
 import { popover } from "@/recipes/popover";
 import { richCard } from "@/recipes/rich-card";
+import { table } from "@/recipes/table";
 import { treeView } from "@/recipes/tree-view";
 import { typographyHeading } from "@/recipes/typography-heading";
 
@@ -239,6 +240,7 @@ export default defineConfig({
       },
       slotRecipes: {
         popover: popover,
+        table: table,
         treeView: treeView,
       },
       semanticTokens,
diff --git a/web/src/app/(dashboard)/@contextpane/[...catchAll]/page.tsx b/web/src/app/(dashboard)/@contextpane/[...catchAll]/page.tsx
new file mode 100644
index 000000000..221737a85
--- /dev/null
+++ b/web/src/app/(dashboard)/@contextpane/[...catchAll]/page.tsx
@@ -0,0 +1,5 @@
+import { RootContextPane } from "@/screens/site/RootContextPane";
+
+export default async function Page() {
+  return <RootContextPane />;
+}
diff --git a/web/src/app/(dashboard)/@contextpane/default.tsx b/web/src/app/(dashboard)/@contextpane/default.tsx
new file mode 100644
index 000000000..b5c264711
--- /dev/null
+++ b/web/src/app/(dashboard)/@contextpane/default.tsx
@@ -0,0 +1,5 @@
+import { RootContextPane } from "@/screens/site/RootContextPane";
+
+export default async function Default() {
+  return <RootContextPane />;
+}
diff --git a/web/src/app/(dashboard)/@contextpane/t/[slug]/default.tsx b/web/src/app/(dashboard)/@contextpane/t/[slug]/default.tsx
new file mode 100644
index 000000000..b5c264711
--- /dev/null
+++ b/web/src/app/(dashboard)/@contextpane/t/[slug]/default.tsx
@@ -0,0 +1,5 @@
+import { RootContextPane } from "@/screens/site/RootContextPane";
+
+export default async function Default() {
+  return <RootContextPane />;
+}
diff --git a/web/src/app/(dashboard)/@contextpane/t/[slug]/page.tsx b/web/src/app/(dashboard)/@contextpane/t/[slug]/page.tsx
new file mode 100644
index 000000000..d5e30059d
--- /dev/null
+++ b/web/src/app/(dashboard)/@contextpane/t/[slug]/page.tsx
@@ -0,0 +1,15 @@
+import { threadGet } from "@/api/openapi-server/threads";
+import { ThreadScreenContextPane } from "@/screens/thread/ThreadScreen/ThreadScreenContextPane";
+
+export default async function Page(props: { params: { slug: string } }) {
+  const { slug } = props.params;
+
+  try {
+    const { data } = await threadGet(slug);
+
+    return <ThreadScreenContextPane slug={slug} thread={data} />;
+  } catch (e) {
+    console.error(e);
+    return null;
+  }
+}
diff --git a/web/src/app/(dashboard)/@contextpane/t/default.tsx b/web/src/app/(dashboard)/@contextpane/t/default.tsx
new file mode 100644
index 000000000..b5c264711
--- /dev/null
+++ b/web/src/app/(dashboard)/@contextpane/t/default.tsx
@@ -0,0 +1,5 @@
+import { RootContextPane } from "@/screens/site/RootContextPane";
+
+export default async function Default() {
+  return <RootContextPane />;
+}
diff --git a/web/src/app/(dashboard)/layout.tsx b/web/src/app/(dashboard)/layout.tsx
index 877c815a0..18c899062 100644
--- a/web/src/app/(dashboard)/layout.tsx
+++ b/web/src/app/(dashboard)/layout.tsx
@@ -2,6 +2,9 @@ import { PropsWithChildren } from "react";
 
 import { Default } from "src/layouts/Default";
 
-export default async function Layout({ children }: PropsWithChildren) {
-  return <Default>{children}</Default>;
+export default async function Layout({
+  children,
+  contextpane,
+}: PropsWithChildren<{ contextpane: React.ReactNode }>) {
+  return <Default contextpane={contextpane}>{children}</Default>;
 }
diff --git a/web/src/app/default.tsx b/web/src/app/default.tsx
new file mode 100644
index 000000000..c6437a5e3
--- /dev/null
+++ b/web/src/app/default.tsx
@@ -0,0 +1,3 @@
+export default async function Page() {
+  return null;
+}
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index 110b6b2eb..d425c9851 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -13,7 +13,7 @@ import { Providers } from "./providers";
 
 export const dynamic = "force-dynamic";
 
-export default function RootLayout({ children }: PropsWithChildren) {
+export default async function RootLayout({ children }: PropsWithChildren) {
   return (
     <html lang="en">
       <head>
diff --git a/web/src/components/member/MemberBadge/MemberIdent.tsx b/web/src/components/member/MemberBadge/MemberIdent.tsx
index 63285b9aa..e0819d8bd 100644
--- a/web/src/components/member/MemberBadge/MemberIdent.tsx
+++ b/web/src/components/member/MemberBadge/MemberIdent.tsx
@@ -21,12 +21,7 @@ export function MemberIdent({
   roles = "hidden",
 }: Props) {
   return (
-    <HStack
-      minW="0"
-      w="full"
-      overflowY="hidden"
-      gap={size === "lg" ? "2" : "1"}
-    >
+    <HStack minW="0" w="full" overflow="hidden" gap={size === "lg" ? "2" : "1"}>
       {avatar === "visible" && <MemberAvatar profile={profile} size={size} />}
       <MemberName profile={profile} size={size} name={name} roles={roles} />
     </HStack>
@@ -47,7 +42,7 @@ export function MemberName({
             minW="0"
             fontSize={size === "lg" ? "md" : "sm"}
             fontWeight={size === "lg" ? "bold" : "medium"}
-            overflowX="hidden"
+            overflow="hidden"
             textWrap="nowrap"
             textOverflow="ellipsis"
             color="fg.default"
diff --git a/web/src/components/site/Navigation/ContextPane.tsx b/web/src/components/site/Navigation/ContextPane.tsx
new file mode 100644
index 000000000..7900ba693
--- /dev/null
+++ b/web/src/components/site/Navigation/ContextPane.tsx
@@ -0,0 +1,24 @@
+import React, { PropsWithChildren } from "react";
+
+import { Box, styled } from "@/styled-system/jsx";
+import { Floating } from "@/styled-system/patterns";
+
+export function ContextPane({ children }: PropsWithChildren) {
+  return (
+    <styled.nav
+      className={Floating()}
+      display="flex"
+      borderRadius="md"
+      flexDir="column"
+      gap="4"
+      width="full"
+      alignItems="start"
+      justifyContent="space-between"
+      overflowY="scroll"
+    >
+      <Box id="desktop-nav-right" w="full" height="full" p="2" pr="0">
+        <styled.aside w="full">{children}</styled.aside>
+      </Box>
+    </styled.nav>
+  );
+}
diff --git a/web/src/components/site/Navigation/Top/Top.tsx b/web/src/components/site/Navigation/DesktopCommandBar.tsx
similarity index 70%
rename from web/src/components/site/Navigation/Top/Top.tsx
rename to web/src/components/site/Navigation/DesktopCommandBar.tsx
index 4a8996723..8b7604862 100644
--- a/web/src/components/site/Navigation/Top/Top.tsx
+++ b/web/src/components/site/Navigation/DesktopCommandBar.tsx
@@ -4,14 +4,15 @@ import { HStack } from "@/styled-system/jsx";
 import { Floating } from "@/styled-system/patterns";
 import { getInfo } from "@/utils/info";
 
-import { Search } from "../Search/Search";
-import { SidebarToggle } from "../Sidebar/SidebarToggle";
-import { getServerSidebarState } from "../Sidebar/server";
-import { Title } from "../components/Title";
-import { Toolbar } from "../components/Toolbar";
-import styles from "../navigation.module.css";
+import styles from "./navigation.module.css";
 
-export async function Top() {
+import { MemberActions } from "./MemberActions";
+import { SidebarToggle } from "./NavigationPane/SidebarToggle";
+import { getServerSidebarState } from "./NavigationPane/server";
+import { Search } from "./Search/Search";
+import { Title } from "./Title";
+
+export async function DesktopCommandBar() {
   const { title } = await getInfo();
   const initialSidebarState = await getServerSidebarState();
 
@@ -35,7 +36,7 @@ export async function Top() {
       </HStack>
 
       <HStack className={styles["topbar-right"]}>
-        <Toolbar session={session} />
+        <MemberActions session={session} />
       </HStack>
     </HStack>
   );
diff --git a/web/src/components/site/Navigation/components/Toolbar.tsx b/web/src/components/site/Navigation/MemberActions.tsx
similarity index 83%
rename from web/src/components/site/Navigation/components/Toolbar.tsx
rename to web/src/components/site/Navigation/MemberActions.tsx
index 54352e32b..2a0d008d6 100644
--- a/web/src/components/site/Navigation/components/Toolbar.tsx
+++ b/web/src/components/site/Navigation/MemberActions.tsx
@@ -10,14 +10,14 @@ import { Account } from "@/api/openapi-schema";
 import { NotificationsMenu } from "@/components/notifications/NotificationsMenu";
 import { HStack } from "@/styled-system/jsx";
 
-import { AccountMenu } from "../AccountMenu/AccountMenu";
-import { ComposeAnchor } from "../Anchors/Compose";
+import { AccountMenu } from "./AccountMenu/AccountMenu";
+import { ComposeAnchor } from "./Anchors/Compose";
 
 type Props = {
   session: Account | undefined;
 };
 
-export function Toolbar({ session }: Props) {
+export function MemberActions({ session }: Props) {
   const account = useSession(session);
   return (
     <HStack w="full" gap="2" alignItems="center" justify="end" pr="1">
diff --git a/web/src/components/site/Navigation/Navpill/Navpill.tsx b/web/src/components/site/Navigation/MobileCommandBar/MobileCommandBar.tsx
similarity index 94%
rename from web/src/components/site/Navigation/Navpill/Navpill.tsx
rename to web/src/components/site/Navigation/MobileCommandBar/MobileCommandBar.tsx
index a2c28f9dd..d0bde622b 100644
--- a/web/src/components/site/Navigation/Navpill/Navpill.tsx
+++ b/web/src/components/site/Navigation/MobileCommandBar/MobileCommandBar.tsx
@@ -21,10 +21,10 @@ import { SettingsAnchor } from "../Anchors/Settings";
 import { ContentNavigationList } from "../ContentNavigationList/ContentNavigationList";
 import { Search } from "../Search/Search";
 
-import { useNavpill } from "./useNavpill";
+import { useMobileCommandBar } from "./useMobileCommandBar";
 
-export function Navpill() {
-  const { isExpanded, onExpand, onClose, account } = useNavpill();
+export function MobileCommandBar() {
+  const { isExpanded, onExpand, onClose, account } = useMobileCommandBar();
   return (
     <Toolpill onClickOutside={onClose}>
       <Presence
diff --git a/web/src/components/site/Navigation/Navpill/useNavpill.ts b/web/src/components/site/Navigation/MobileCommandBar/useMobileCommandBar.ts
similarity index 87%
rename from web/src/components/site/Navigation/Navpill/useNavpill.ts
rename to web/src/components/site/Navigation/MobileCommandBar/useMobileCommandBar.ts
index a42dccbf5..b56df1daf 100644
--- a/web/src/components/site/Navigation/Navpill/useNavpill.ts
+++ b/web/src/components/site/Navigation/MobileCommandBar/useMobileCommandBar.ts
@@ -3,9 +3,9 @@
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 
-import { useSession } from "src/auth";
+import { useSession } from "@/auth";
 
-export function useNavpill() {
+export function useMobileCommandBar() {
   const pathname = usePathname();
   const [isExpanded, setExpanded] = useState(false);
   const account = useSession();
diff --git a/web/src/components/site/Navigation/Navigation.tsx b/web/src/components/site/Navigation/Navigation.tsx
index 94e3cf7cf..81808aef2 100644
--- a/web/src/components/site/Navigation/Navigation.tsx
+++ b/web/src/components/site/Navigation/Navigation.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
 
 import { Box } from "@/styled-system/jsx";
 
@@ -6,12 +6,20 @@ import { Onboarding } from "../Onboarding/Onboarding";
 
 import styles from "./navigation.module.css";
 
-import { Left } from "./Left/Left";
-import { Navpill } from "./Navpill/Navpill";
-import { getServerSidebarState } from "./Sidebar/server";
-import { Top } from "./Top/Top";
+import { ContextPane } from "./ContextPane";
+import { DesktopCommandBar } from "./DesktopCommandBar";
+import { MobileCommandBar } from "./MobileCommandBar/MobileCommandBar";
+import { NavigationPane } from "./NavigationPane/NavigationPane";
+import { getServerSidebarState } from "./NavigationPane/server";
 
-export async function Navigation({ children }: PropsWithChildren) {
+type Props = {
+  contextpane: React.ReactNode;
+};
+
+export async function Navigation({
+  contextpane,
+  children,
+}: PropsWithChildren<Props>) {
   const showLeftBar = await getServerSidebarState();
 
   return (
@@ -40,19 +48,18 @@ export async function Navigation({ children }: PropsWithChildren) {
         className={styles["navgrid"]}
         pointerEvents="none"
       >
-        <Top />
+        <DesktopCommandBar />
 
         <Box className={styles["leftbar"]}>
-          <Left />
+          <NavigationPane />
         </Box>
 
         <Box className={styles["rightbar"]}>
-          {/* RIGHT BAR NOT DONE YET */}
-          {/* <Right /> */}
+          <ContextPane>{contextpane}</ContextPane>
         </Box>
 
         <Box className={styles["navpill"]}>
-          <Navpill />
+          <MobileCommandBar />
         </Box>
       </Box>
     </Box>
diff --git a/web/src/components/site/Navigation/Left/Left.tsx b/web/src/components/site/Navigation/NavigationPane/NavigationPane.tsx
similarity index 93%
rename from web/src/components/site/Navigation/Left/Left.tsx
rename to web/src/components/site/Navigation/NavigationPane/NavigationPane.tsx
index ce94555c7..3c520bfc8 100644
--- a/web/src/components/site/Navigation/Left/Left.tsx
+++ b/web/src/components/site/Navigation/NavigationPane/NavigationPane.tsx
@@ -5,7 +5,7 @@ import { Floating } from "@/styled-system/patterns";
 
 import { ContentNavigationList } from "../ContentNavigationList/ContentNavigationList";
 
-export function Left() {
+export function NavigationPane() {
   return (
     <styled.header
       display="flex"
diff --git a/web/src/components/site/Navigation/Sidebar/SidebarToggle.tsx b/web/src/components/site/Navigation/NavigationPane/SidebarToggle.tsx
similarity index 100%
rename from web/src/components/site/Navigation/Sidebar/SidebarToggle.tsx
rename to web/src/components/site/Navigation/NavigationPane/SidebarToggle.tsx
diff --git a/web/src/components/site/Navigation/Sidebar/server.ts b/web/src/components/site/Navigation/NavigationPane/server.ts
similarity index 100%
rename from web/src/components/site/Navigation/Sidebar/server.ts
rename to web/src/components/site/Navigation/NavigationPane/server.ts
diff --git a/web/src/components/site/Navigation/Sidebar/shared.ts b/web/src/components/site/Navigation/NavigationPane/shared.ts
similarity index 100%
rename from web/src/components/site/Navigation/Sidebar/shared.ts
rename to web/src/components/site/Navigation/NavigationPane/shared.ts
diff --git a/web/src/components/site/Navigation/Sidebar/useSidebar.ts b/web/src/components/site/Navigation/NavigationPane/useSidebar.ts
similarity index 100%
rename from web/src/components/site/Navigation/Sidebar/useSidebar.ts
rename to web/src/components/site/Navigation/NavigationPane/useSidebar.ts
diff --git a/web/src/components/site/Navigation/Right/Right.tsx b/web/src/components/site/Navigation/Right/Right.tsx
deleted file mode 100644
index 515846e96..000000000
--- a/web/src/components/site/Navigation/Right/Right.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Divider, VStack } from "@/styled-system/jsx";
-import { Floating } from "@/styled-system/patterns";
-
-export function Right() {
-  return (
-    <VStack className={Floating()} justify="space-between" px="4">
-      <p>Threadbase</p>
-      <p>Southclaws</p>
-
-      <Divider />
-
-      <p>sidebar stuff</p>
-      <p>sidebar stuff</p>
-      <p>sidebar stuff</p>
-      <p>sidebar stuff</p>
-      <p>sidebar stuff</p>
-      <p>sidebar stuff</p>
-      <p>sidebar stuff</p>
-      <p>sidebar stuff</p>
-      <p>sidebar stuff</p>
-      <p>sidebar stuff</p>
-    </VStack>
-  );
-}
diff --git a/web/src/components/site/Navigation/components/Title.tsx b/web/src/components/site/Navigation/Title.tsx
similarity index 100%
rename from web/src/components/site/Navigation/components/Title.tsx
rename to web/src/components/site/Navigation/Title.tsx
diff --git a/web/src/components/site/Navigation/navigation.module.css b/web/src/components/site/Navigation/navigation.module.css
index e50c7e9f1..f9db7f3ea 100644
--- a/web/src/components/site/Navigation/navigation.module.css
+++ b/web/src/components/site/Navigation/navigation.module.css
@@ -20,8 +20,6 @@
   --grid-col-padding-inner: var(--spacing-3);
   --grid-col-padding-inner-right: 0px;
 
-  --navgrid-right-bar-display: none;
-
   min-height: 100dvh;
 }
 
@@ -69,6 +67,10 @@
   display: none;
 }
 
+.rightbar {
+  display: none;
+}
+
 .navpill {
   display: block;
   grid-area: navpill;
@@ -143,22 +145,45 @@
     padding: 15px;
   }
 
+  .rightbar {
+    opacity: 0;
+    display: block;
+    grid-area: rightbar;
+    overflow: hidden;
+
+    /* NOTE: This maintains the shadow bleed despite the overflow hidden prop. */
+    margin: -15px;
+    padding: 15px;
+  }
+
   .navigation__container[data-leftbar-shown="false"] .leftbar {
     opacity: 0;
     pointer-events: none;
     /* NOTE: Doesn't work properly on initial page load, causes the sidebar to
     flicker visible and play the animation, need a way to not do this soon. */
-    /* animation: fadeOut 0.2s ease-in-out; */
+    /* animation: fadeOutLeft 0.2s ease-in-out; */
   }
 
   .navigation__container[data-leftbar-shown="true"] .leftbar {
     opacity: 1;
     pointer-events: all;
 
-    animation: fadeIn 0.2s ease-in-out;
+    animation: fadeInLeft 0.2s ease-in-out;
   }
 
-  @keyframes fadeIn {
+  .navigation__container[data-leftbar-shown="false"] .rightbar {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .navigation__container[data-leftbar-shown="true"] .rightbar {
+    opacity: 1;
+    pointer-events: all;
+
+    animation: fadeInRight 0.2s ease-in-out;
+  }
+
+  @keyframes fadeInLeft {
     from {
       opacity: 0;
       transform: translateX(-10px);
@@ -168,7 +193,7 @@
       transform: translateX(0px);
     }
   }
-  @keyframes fadeOut {
+  @keyframes fadeOutLeft {
     from {
       opacity: 1;
       transform: translateX(0px);
@@ -179,18 +204,25 @@
     }
   }
 
-  .rightbar {
-    display: var(--navgrid-right-bar-display);
-    grid-area: rightbar;
-
-    /* TODO: Remove this when the right is actually used */
-    pointer-events: none;
-
-    overflow: hidden;
-
-    /* NOTE: This maintains the shadow bleed despite the overflow hidden prop. */
-    margin: -15px;
-    padding: 15px;
+  @keyframes fadeInRight {
+    from {
+      opacity: 0;
+      transform: translateX(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0px);
+    }
+  }
+  @keyframes fadeOutRight {
+    from {
+      opacity: 1;
+      transform: translateX(0px);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(10px);
+    }
   }
 
   .navpill {
@@ -222,6 +254,11 @@
   .navigation__container[data-leftbar-shown="false"] .main {
     grid-column: leftbar / main;
   }
+
+  /* Hide the context pane when the screen is at "tablet" size */
+  .rightbar {
+    display: none;
+  }
 }
 
 .navigation__container *::-webkit-scrollbar {
diff --git a/web/src/components/ui/link-button.tsx b/web/src/components/ui/link-button.tsx
index fb371901b..f41b6b88b 100644
--- a/web/src/components/ui/link-button.tsx
+++ b/web/src/components/ui/link-button.tsx
@@ -23,7 +23,9 @@ export function LinkButton({
 
   const cn = cx(button(vp), css(stripped));
 
-  const isExternal = !href.toString().startsWith("/");
+  const isExternal = !(
+    href.toString().startsWith("/") || href.toString().startsWith("#")
+  );
 
   const target = isExternal ? "_blank" : undefined;
 
diff --git a/web/src/components/ui/table.tsx b/web/src/components/ui/table.tsx
index 32878db73..1ed8afe5a 100644
--- a/web/src/components/ui/table.tsx
+++ b/web/src/components/ui/table.tsx
@@ -1,27 +1,53 @@
-'use client'
-
-import { ark } from '@ark-ui/react/factory'
-import type { ComponentProps } from 'react'
-import { styled } from 'styled-system/jsx'
-import { table } from 'styled-system/recipes'
-import { createStyleContext } from '@/utils/create-style-context'
-
-const { withProvider, withContext } = createStyleContext(table)
-
-export const Root = withProvider(styled(ark.table), 'root')
-export const Body = withContext(styled(ark.tbody), 'body')
-export const Caption = withContext(styled(ark.caption), 'caption')
-export const Cell = withContext(styled(ark.td), 'cell')
-export const Footer = withContext(styled(ark.tfoot), 'footer')
-export const Head = withContext(styled(ark.thead), 'head')
-export const Header = withContext(styled(ark.th), 'header')
-export const Row = withContext(styled(ark.tr), 'row')
-
-export interface RootProps extends ComponentProps<typeof Root> {}
-export interface BodyProps extends ComponentProps<typeof Body> {}
-export interface CaptionProps extends ComponentProps<typeof Caption> {}
-export interface CellProps extends ComponentProps<typeof Cell> {}
-export interface FooterProps extends ComponentProps<typeof Footer> {}
-export interface HeadProps extends ComponentProps<typeof Head> {}
-export interface HeaderProps extends ComponentProps<typeof Header> {}
-export interface RowProps extends ComponentProps<typeof Row> {}
+"use client";
+
+import type { Assign, PolymorphicProps } from "@ark-ui/react";
+import { ark } from "@ark-ui/react/factory";
+import { type TableVariantProps, table } from "styled-system/recipes";
+
+import type { HTMLStyledProps } from "@/styled-system/types";
+import { createStyleContext } from "@/utils/create-style-context";
+
+const { withProvider, withContext } = createStyleContext(table);
+
+export interface RootProps
+  extends Assign<HTMLStyledProps<"table">, PolymorphicProps>,
+    TableVariantProps {}
+export const Root = withProvider<HTMLTableElement, RootProps>(
+  ark.table,
+  "root",
+);
+
+export const Body = withContext<
+  HTMLTableSectionElement,
+  Assign<HTMLStyledProps<"tbody">, PolymorphicProps>
+>(ark.tbody, "body");
+
+export const Caption = withContext<
+  HTMLTableCaptionElement,
+  Assign<HTMLStyledProps<"caption">, PolymorphicProps>
+>(ark.caption, "caption");
+
+export const Cell = withContext<
+  HTMLTableCellElement,
+  Assign<HTMLStyledProps<"td">, PolymorphicProps>
+>(ark.td, "cell");
+
+export const Foot = withContext<
+  HTMLTableSectionElement,
+  Assign<HTMLStyledProps<"tfoot">, PolymorphicProps>
+>(ark.tfoot, "footer");
+
+export const Head = withContext<
+  HTMLTableSectionElement,
+  Assign<HTMLStyledProps<"head">, PolymorphicProps>
+>(ark.thead, "head");
+
+export const Header = withContext<
+  HTMLTableCellElement,
+  Assign<HTMLStyledProps<"th">, PolymorphicProps>
+>(ark.th, "header");
+
+export const Row = withContext<
+  HTMLTableRowElement,
+  Assign<HTMLStyledProps<"tr">, PolymorphicProps>
+>(ark.tr, "row");
diff --git a/web/src/layouts/Default.tsx b/web/src/layouts/Default.tsx
index 9ca6b2c41..5fd45c015 100644
--- a/web/src/layouts/Default.tsx
+++ b/web/src/layouts/Default.tsx
@@ -1,10 +1,17 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, ReactNode } from "react";
 
 import { Navigation } from "src/components/site/Navigation/Navigation";
 
 import { Box, Flex, styled } from "@/styled-system/jsx";
 
-export async function Default(props: PropsWithChildren) {
+type Props = {
+  contextpane: ReactNode;
+};
+
+export async function Default({
+  contextpane,
+  children,
+}: PropsWithChildren<Props>) {
   return (
     <Flex
       minHeight="dvh"
@@ -13,14 +20,14 @@ export async function Default(props: PropsWithChildren) {
       backgroundColor="bg.site"
       vaul-drawer-wrapper=""
     >
-      <Navigation>
+      <Navigation contextpane={contextpane}>
         <styled.main
           containerType="inline-size"
           width="full"
           height="full"
           minW="0"
         >
-          {props.children}
+          {children}
           <Box height="24"></Box>
         </styled.main>
       </Navigation>
diff --git a/web/src/recipes/table.ts b/web/src/recipes/table.ts
new file mode 100644
index 000000000..a9cd43cab
--- /dev/null
+++ b/web/src/recipes/table.ts
@@ -0,0 +1,102 @@
+import { defineSlotRecipe } from "@pandacss/dev";
+
+export const table = defineSlotRecipe({
+  className: "table",
+  slots: ["root", "body", "cell", "footer", "head", "header", "row", "caption"],
+  base: {
+    root: {
+      captionSide: "bottom",
+      width: "full",
+    },
+    body: {
+      "& tr:last-child": {
+        borderBottomWidth: "0",
+      },
+    },
+    caption: {
+      color: "fg.subtle",
+    },
+    cell: {
+      verticalAlign: "middle",
+    },
+    footer: {
+      fontWeight: "medium",
+      borderTopWidth: "1px",
+      "& tr:last-child": {
+        borderBottomWidth: "0",
+      },
+    },
+    header: {
+      color: "fg.muted",
+      fontWeight: "medium",
+      textAlign: "left",
+      verticalAlign: "middle",
+    },
+    row: {
+      borderBottomWidth: "1px",
+      transitionDuration: "normal",
+      transitionProperty: "background, color",
+      transitionTimingFunction: "default",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "plain",
+  },
+  variants: {
+    variant: {
+      outline: {
+        root: {
+          borderWidth: "1px",
+        },
+        head: {
+          bg: "bg.subtle",
+        },
+      },
+      plain: {
+        row: {
+          _hover: {
+            bg: "bg.subtle",
+          },
+          _selected: {
+            bg: "bg.muted",
+          },
+        },
+      },
+    },
+    size: {
+      sm: {
+        root: {
+          textStyle: "xs",
+        },
+        caption: {
+          mt: "1",
+        },
+        cell: {
+          height: "8",
+          px: "2",
+        },
+        header: {
+          height: "11",
+          px: "3",
+        },
+      },
+      md: {
+        root: {
+          textStyle: "sm",
+        },
+        caption: {
+          mt: "4",
+        },
+        cell: {
+          height: "14",
+          px: "4",
+        },
+        header: {
+          height: "11",
+          px: "4",
+        },
+      },
+    },
+  },
+});
diff --git a/web/src/screens/site/RootContextPane.tsx b/web/src/screens/site/RootContextPane.tsx
new file mode 100644
index 000000000..fb8c66ba8
--- /dev/null
+++ b/web/src/screens/site/RootContextPane.tsx
@@ -0,0 +1,32 @@
+import Image from "next/image";
+
+import { Heading } from "@/components/ui/heading";
+import { css } from "@/styled-system/css";
+import { HStack, LStack } from "@/styled-system/jsx";
+import { getIconURL } from "@/utils/icon";
+import { getInfo } from "@/utils/info";
+
+export async function RootContextPane() {
+  const info = await getInfo();
+  const iconURL = getIconURL("512x512");
+
+  return (
+    <LStack>
+      <HStack w="full" justify="space-between" alignItems="start">
+        <Heading textWrap="wrap">{info.title}</Heading>
+
+        <Image
+          className={css({
+            borderRadius: "md",
+          })}
+          alt="Icon"
+          src={iconURL}
+          width={32}
+          height={32}
+        />
+      </HStack>
+
+      <p>{info.description}</p>
+    </LStack>
+  );
+}
diff --git a/web/src/screens/thread/ThreadScreen/ThreadScreenContextPane.tsx b/web/src/screens/thread/ThreadScreen/ThreadScreenContextPane.tsx
new file mode 100644
index 000000000..9c7ddb823
--- /dev/null
+++ b/web/src/screens/thread/ThreadScreen/ThreadScreenContextPane.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { formatDate } from "date-fns";
+import {
+  CalendarIcon,
+  HandHeartIcon,
+  PencilLineIcon,
+  TagIcon,
+  UsersIcon,
+} from "lucide-react";
+
+import { MemberBadge } from "@/components/member/MemberBadge/MemberBadge";
+import { Unready } from "@/components/site/Unready";
+import { Heading } from "@/components/ui/heading";
+import * as Table from "@/components/ui/table";
+import { cva } from "@/styled-system/css";
+import { HStack, LStack, styled } from "@/styled-system/jsx";
+import { button } from "@/styled-system/recipes";
+
+import { Props, useThreadScreen } from "./useThreadScreen";
+
+const valueStyles = cva({
+  base: {},
+  defaultVariants: {
+    style: "base",
+  },
+  variants: {
+    style: {
+      base: {},
+      numeric: {
+        fontVariant: "tabular-nums",
+        fontFamily: "mono",
+      },
+    },
+  },
+});
+
+export function ThreadScreenContextPane(props: Props) {
+  const { ready, error, form, isEditing, isEmpty, resetKey, data, handlers } =
+    useThreadScreen(props);
+  if (!ready) {
+    return <Unready error={error} />;
+  }
+
+  const { thread } = data;
+
+  const tableData = [
+    {
+      label: "ID",
+      icon: TagIcon,
+      value: thread.id,
+      style: "numeric" as const,
+    },
+    {
+      label: "author",
+      icon: PencilLineIcon,
+      value: (
+        <MemberBadge
+          profile={thread.author}
+          size="sm"
+          avatar="hidden"
+          name="full-horizontal"
+        />
+      ),
+    },
+    {
+      label: "started",
+      icon: CalendarIcon,
+      value: formatDate(thread.createdAt, "MMM d, yyyy"),
+    },
+    {
+      label: "replies",
+      icon: UsersIcon,
+      value: `${thread.reply_status.replies}`,
+    },
+    {
+      label: "participating",
+      icon: HandHeartIcon,
+      value: thread.reply_status.replied ? "Yes" : "No",
+    },
+  ];
+
+  return (
+    <LStack gap="1">
+      <Heading>{thread.title}</Heading>
+      <styled.p color="fg.muted">{thread.description}</styled.p>
+
+      <Table.Root size="sm">
+        <Table.Body>
+          {tableData.map((item) => (
+            <Table.Row key={item.label}>
+              <Table.Cell fontWeight="medium" color="fg.muted">
+                <HStack gap="1">
+                  <item.icon width="14" />
+                  <span>{item.label}</span>
+                </HStack>
+              </Table.Cell>
+              <Table.Cell
+                className={valueStyles({ style: item.style })}
+                display="flex"
+                justifyContent="flex-end"
+                alignItems="center"
+                textAlign="right"
+              >
+                {item.value}
+              </Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+
+      <styled.p>
+        <styled.a
+          color="fg.muted"
+          className={button({
+            variant: "subtle",
+            size: "xs",
+          })}
+          href="#"
+        >
+          scroll to top
+        </styled.a>
+      </styled.p>
+    </LStack>
+  );
+}
diff --git a/web/styled-system/recipes/index.d.ts b/web/styled-system/recipes/index.d.ts
index 586cf080f..6d4a31131 100644
--- a/web/styled-system/recipes/index.d.ts
+++ b/web/styled-system/recipes/index.d.ts
@@ -37,7 +37,6 @@ export * from './menu';
 export * from './number-input';
 export * from './pagination';
 export * from './pin-input';
-export * from './popover';
 export * from './progress';
 export * from './radio-button-group';
 export * from './radio-group';
@@ -53,6 +52,7 @@ export * from './tabs';
 export * from './tags-input';
 export * from './toast';
 export * from './toggle-group';
-export * from './qr-code';
 export * from './tooltip';
+export * from './qr-code';
+export * from './popover';
 export * from './tree-view';
\ No newline at end of file
diff --git a/web/styled-system/recipes/index.mjs b/web/styled-system/recipes/index.mjs
index 8c4688af9..b39291ac6 100644
--- a/web/styled-system/recipes/index.mjs
+++ b/web/styled-system/recipes/index.mjs
@@ -36,7 +36,6 @@ export * from './menu.mjs';
 export * from './number-input.mjs';
 export * from './pagination.mjs';
 export * from './pin-input.mjs';
-export * from './popover.mjs';
 export * from './progress.mjs';
 export * from './radio-button-group.mjs';
 export * from './radio-group.mjs';
@@ -52,6 +51,7 @@ export * from './tabs.mjs';
 export * from './tags-input.mjs';
 export * from './toast.mjs';
 export * from './toggle-group.mjs';
-export * from './qr-code.mjs';
 export * from './tooltip.mjs';
+export * from './qr-code.mjs';
+export * from './popover.mjs';
 export * from './tree-view.mjs';
\ No newline at end of file
diff --git a/web/styled-system/recipes/table.d.ts b/web/styled-system/recipes/table.d.ts
index 34eb2ec72..5f0971662 100644
--- a/web/styled-system/recipes/table.d.ts
+++ b/web/styled-system/recipes/table.d.ts
@@ -23,7 +23,7 @@ export type TableVariantProps = {
 
 export interface TableRecipe {
   __type: TableVariantProps
-  (props?: TableVariantProps): Pretty<Record<"root" | "body" | "cell" | "footer" | "head" | "header" | "row" | "caption" | "root" | "body" | "cell" | "footer" | "head" | "header" | "row" | "caption", string>>
+  (props?: TableVariantProps): Pretty<Record<"root" | "body" | "cell" | "footer" | "head" | "header" | "row" | "caption" | "root" | "body" | "cell" | "footer" | "head" | "header" | "row" | "caption" | "root" | "body" | "cell" | "footer" | "head" | "header" | "row" | "caption", string>>
   raw: (props?: TableVariantProps) => TableVariantProps
   variantMap: TableVariantMap
   variantKeys: Array<keyof TableVariant>
diff --git a/web/styled-system/recipes/table.mjs b/web/styled-system/recipes/table.mjs
index 510f3ace4..b34b0137d 100644
--- a/web/styled-system/recipes/table.mjs
+++ b/web/styled-system/recipes/table.mjs
@@ -68,6 +68,38 @@ const tableSlotNames = [
     "row",
     "table__row"
   ],
+  [
+    "caption",
+    "table__caption"
+  ],
+  [
+    "root",
+    "table__root"
+  ],
+  [
+    "body",
+    "table__body"
+  ],
+  [
+    "cell",
+    "table__cell"
+  ],
+  [
+    "footer",
+    "table__footer"
+  ],
+  [
+    "head",
+    "table__head"
+  ],
+  [
+    "header",
+    "table__header"
+  ],
+  [
+    "row",
+    "table__row"
+  ],
   [
     "caption",
     "table__caption"