diff --git a/.changeset/poor-seahorses-wonder.md b/.changeset/poor-seahorses-wonder.md
new file mode 100644
index 0000000..7a3ca22
--- /dev/null
+++ b/.changeset/poor-seahorses-wonder.md
@@ -0,0 +1,5 @@
+---
+"namesake": minor
+---
+
+Redesign app layout for optimal line length and taller scroll area
diff --git a/src/components/AppHeader/AppHeader.tsx b/src/components/AppHeader/AppHeader.tsx
deleted file mode 100644
index c4a72c0..0000000
--- a/src/components/AppHeader/AppHeader.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useAuthActions } from "@convex-dev/auth/react";
-import { api } from "@convex/_generated/api";
-import { RiAccountCircleFill } from "@remixicon/react";
-import { Authenticated, useQuery } from "convex/react";
-import { Button } from "../Button";
-import { Link } from "../Link";
-import { Logo } from "../Logo";
-import { Menu, MenuItem, MenuTrigger } from "../Menu";
-
-export const AppHeader = () => {
-  const { signOut } = useAuthActions();
-  const role = useQuery(api.users.getCurrentUserRole);
-  const isAdmin = role === "admin";
-
-  const handleSignOut = async () => {
-    await signOut();
-  };
-
-  return (
-    <div className="flex shrink-0 gap-4 bg-gray-app items-center w-screen h-14 px-4 border-b border-gray-dim sticky top-0 z-20">
-      <Link href={{ to: "/" }}>
-        <Logo className="h-[1.25rem]" />
-      </Link>
-      <Authenticated>
-        <Link href={{ to: "/" }}>Quests</Link>
-        {isAdmin && <Link href={{ to: "/admin/quests" }}>Admin</Link>}
-        <div className="ml-auto">
-          <MenuTrigger>
-            <Button
-              aria-label="User settings"
-              variant="icon"
-              icon={RiAccountCircleFill}
-            />
-            <Menu>
-              <MenuItem href={{ to: "/settings/overview" }}>Settings</MenuItem>
-              <MenuItem
-                href="https://namesake.fyi/chat"
-                target="_blank"
-                rel="noreferrer"
-              >
-                Support&hellip;
-              </MenuItem>
-              <MenuItem onAction={handleSignOut}>Sign out</MenuItem>
-            </Menu>
-          </MenuTrigger>
-        </div>
-      </Authenticated>
-    </div>
-  );
-};
diff --git a/src/components/AppHeader/index.ts b/src/components/AppHeader/index.ts
deleted file mode 100644
index 5ab21b4..0000000
--- a/src/components/AppHeader/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./AppHeader";
diff --git a/src/components/AppSidebar/AppSidebar.tsx b/src/components/AppSidebar/AppSidebar.tsx
new file mode 100644
index 0000000..7d41602
--- /dev/null
+++ b/src/components/AppSidebar/AppSidebar.tsx
@@ -0,0 +1,103 @@
+import { useAuthActions } from "@convex-dev/auth/react";
+import { api } from "@convex/_generated/api";
+import {
+  RiAccountCircleFill,
+  RiAddLine,
+  RiAdminLine,
+  RiSettings3Line,
+} from "@remixicon/react";
+import { useQuery } from "convex/react";
+import { Badge } from "../Badge";
+import { Button } from "../Button";
+import { Link } from "../Link";
+import { Logo } from "../Logo";
+import { Menu, MenuItem, MenuTrigger } from "../Menu";
+import { Tooltip } from "../Tooltip";
+import { TooltipTrigger } from "../Tooltip";
+
+type AppSidebarProps = {
+  children: React.ReactNode;
+};
+
+export const AppSidebar = ({ children }: AppSidebarProps) => {
+  const { signOut } = useAuthActions();
+  const user = useQuery(api.users.getCurrentUser);
+  const isAdmin = user?.role === "admin";
+
+  const handleSignOut = async () => {
+    await signOut();
+  };
+
+  return (
+    <nav className="w-80 flex flex-col shrink-0 sticky top-0 h-screen -ml-4 overflow-y-auto border-r border-gray-dim">
+      <div className="flex gap-2 items-center h-16 shrink-0 px-4 sticky top-0 bg-gray-app z-20">
+        <Link href={{ to: "/" }} className="p-1 -m-1">
+          <Logo className="h-[1.25rem]" />
+        </Link>
+        <Badge className="-mb-1" variant="waiting">
+          Beta
+        </Badge>
+        <div className="ml-auto">
+          <TooltipTrigger>
+            <Link
+              href={{ to: "/browse" }}
+              button={{
+                variant: "icon",
+                className: "-mr-1",
+              }}
+            >
+              <RiAddLine size={20} />
+            </Link>
+            <Tooltip placement="right">Browse and add quests</Tooltip>
+          </TooltipTrigger>
+        </div>
+      </div>
+      <div className="px-4 flex-1">{children}</div>
+      <div className="px-4 h-16 shrink-0 flex items-center sticky bottom-0 bg-gray-app">
+        <MenuTrigger>
+          <Button
+            aria-label="User settings"
+            variant="ghost"
+            icon={RiAccountCircleFill}
+          >
+            {user?.name}
+          </Button>
+          <Menu placement="top start">
+            <MenuItem
+              href="https://namesake.fyi/chat"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Support&hellip;
+            </MenuItem>
+            <MenuItem onAction={handleSignOut}>Sign out</MenuItem>
+          </Menu>
+        </MenuTrigger>
+        <div className="flex ml-auto">
+          {isAdmin && (
+            <TooltipTrigger>
+              <Link
+                aria-label="Admin"
+                href={{ to: "/admin" }}
+                button={{ variant: "icon" }}
+              >
+                <RiAdminLine size={20} />
+              </Link>
+              <Tooltip placement="top">Admin</Tooltip>
+            </TooltipTrigger>
+          )}
+          <TooltipTrigger>
+            <Link
+              aria-label="Settings"
+              href={{ to: "/settings/overview" }}
+              button={{ variant: "icon" }}
+            >
+              <RiSettings3Line size={20} />
+            </Link>
+            <Tooltip placement="top">Settings</Tooltip>
+          </TooltipTrigger>
+        </div>
+      </div>
+    </nav>
+  );
+};
diff --git a/src/components/AppSidebar/index.ts b/src/components/AppSidebar/index.ts
new file mode 100644
index 0000000..2b27d49
--- /dev/null
+++ b/src/components/AppSidebar/index.ts
@@ -0,0 +1 @@
+export * from "./AppSidebar";
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index 57b335b..fdad6e0 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -42,11 +42,11 @@ const icon = tv({
   },
 });
 
-export function Badge({ icon: Icon, ...props }: BadgeProps) {
+export function Badge({ icon: Icon, className, ...props }: BadgeProps) {
   return (
     <div
       {...props}
-      className={badge({ variant: props.variant, size: props.size })}
+      className={badge({ variant: props.variant, size: props.size, className })}
     >
       {Icon && <Icon className={icon({ variant: props.variant })} />}
       {props.children}
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index abbfdd4..d4c80ac 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -16,7 +16,7 @@ export interface ButtonProps extends AriaButtonProps {
 
 export const buttonStyles = tv({
   extend: focusRing,
-  base: "py-2 text-sm font-medium whitespace-nowrap rounded-lg flex gap-1 items-center justify-center border border-black/10 dark:border-white/10 cursor-pointer",
+  base: "py-2 text-sm font-medium whitespace-nowrap rounded-lg flex gap-1.5 items-center justify-center border border-black/10 dark:border-white/10 cursor-pointer",
   variants: {
     variant: {
       primary: "bg-purple-solid text-white",
diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx
index aca0cc3..7a4cde3 100644
--- a/src/components/Container/Container.tsx
+++ b/src/components/Container/Container.tsx
@@ -1,14 +1,14 @@
-import { twMerge } from "tailwind-merge";
+import { tv } from "tailwind-variants";
 
 export interface ContainerProps {
   className?: string;
   children: React.ReactNode;
 }
 
+const containerStyles = tv({
+  base: "max-w-full w-[1200px] px-4 lg:px-6 xl:px-8 mx-auto",
+});
+
 export function Container({ className, children }: ContainerProps) {
-  return (
-    <div className={twMerge("w-full flex-1 p-6 mx-auto", className)}>
-      {children}
-    </div>
-  );
+  return <div className={containerStyles({ className })}>{children}</div>;
 }
diff --git a/src/components/Nav/Nav.tsx b/src/components/Nav/Nav.tsx
index fec0721..1ab43fd 100644
--- a/src/components/Nav/Nav.tsx
+++ b/src/components/Nav/Nav.tsx
@@ -21,7 +21,7 @@ export const Nav = ({ routes }: NavProps) => {
   const matchRoute = useMatchRoute();
 
   return (
-    <nav className="flex flex-col w-[160px] shrink-0 pt-5 pl-6">
+    <div>
       {routes.map(({ href, label, icon }) => {
         const current = matchRoute({ ...href, fuzzy: true });
         const Icon = icon;
@@ -38,6 +38,6 @@ export const Nav = ({ routes }: NavProps) => {
           </Link>
         );
       })}
-    </nav>
+    </div>
   );
 };
diff --git a/src/components/PageHeader/PageHeader.stories.tsx b/src/components/PageHeader/PageHeader.stories.tsx
index 3804e14..6682d4f 100644
--- a/src/components/PageHeader/PageHeader.stories.tsx
+++ b/src/components/PageHeader/PageHeader.stories.tsx
@@ -28,19 +28,10 @@ export const Badged: Story = {
   },
 };
 
-export const Subtitle: Story = {
-  args: {
-    title: "Court Order",
-    badge: <Badge>MA</Badge>,
-    subtitle: "Case #123456",
-  },
-};
-
 export const Actions: Story = {
   args: {
     title: "Court Order",
     badge: <Badge>MA</Badge>,
-    subtitle: "Case #123456",
     children: <Button>Mark complete</Button>,
   },
 };
diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx
index 88ae348..e69f431 100644
--- a/src/components/PageHeader/PageHeader.tsx
+++ b/src/components/PageHeader/PageHeader.tsx
@@ -5,7 +5,6 @@ export interface PageHeaderProps {
   title: string;
   icon?: RemixiconComponentType;
   badge?: React.ReactNode;
-  subtitle?: string;
   children?: React.ReactNode;
   className?: string;
 }
@@ -14,14 +13,13 @@ export const PageHeader = ({
   title,
   icon: Icon,
   badge,
-  subtitle,
   children,
   className,
 }: PageHeaderProps) => {
   return (
     <header
       className={twMerge(
-        "h-12 flex shrink-0 items-center justify-between gap-6 text-gray-normal",
+        "h-16 flex bg-gray-app shrink-0 items-center justify-between gap-6 text-gray-normal sticky top-0 z-20",
         className,
       )}
     >
@@ -31,7 +29,6 @@ export const PageHeader = ({
           <h1 className="text-xl font-medium">{title}</h1>
           {badge}
         </div>
-        {subtitle && <p className="text-gray-dim">{subtitle}</p>}
       </div>
       <div className="flex items-center gap-2">{children}</div>
     </header>
diff --git a/src/components/SearchField/SearchField.tsx b/src/components/SearchField/SearchField.tsx
index afad43a..f9b718a 100644
--- a/src/components/SearchField/SearchField.tsx
+++ b/src/components/SearchField/SearchField.tsx
@@ -18,12 +18,14 @@ export interface SearchFieldProps extends AriaSearchFieldProps {
   label?: string;
   description?: string;
   errorMessage?: string | ((validation: ValidationResult) => string);
+  placeholder?: string;
 }
 
 export function SearchField({
   label,
   description,
   errorMessage,
+  placeholder,
   ...props
 }: SearchFieldProps) {
   return (
@@ -40,7 +42,10 @@ export function SearchField({
           aria-hidden
           className="w-4 h-4 ml-3 text-gray-dim forced-colors:text-[ButtonText] group-disabled:opacity-50 forced-colors:group-disabled:text-[GrayText]"
         />
-        <Input className="[&::-webkit-search-cancel-button]:hidden" />
+        <Input
+          placeholder={placeholder}
+          className="[&::-webkit-search-cancel-button]:hidden"
+        />
         <Button
           variant="icon"
           className="mr-1 w-7 h-7 p-0 group-empty:invisible"
diff --git a/src/components/StatusSelect/StatusSelect.tsx b/src/components/StatusSelect/StatusSelect.tsx
index 425988b..d9b08a4 100644
--- a/src/components/StatusSelect/StatusSelect.tsx
+++ b/src/components/StatusSelect/StatusSelect.tsx
@@ -50,7 +50,7 @@ export function StatusSelect({ status, isCore, onChange }: StatusSelectProps) {
         <RiArrowDropDownFill size={16} className="right-0" />
       </Button>
       <Menu
-        placement="bottom start"
+        placement="bottom end"
         selectionMode="single"
         selectedKeys={selectedStatus}
         disallowEmptySelection
diff --git a/src/components/index.ts b/src/components/index.ts
index 591c6d5..e675dbc 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,6 +1,6 @@
 export * from "./AlertDialog";
 export * from "./AnimateChangeInHeight";
-export * from "./AppHeader";
+export * from "./AppSidebar";
 export * from "./Badge";
 export * from "./Banner";
 export * from "./Breadcrumbs";
diff --git a/src/components/utils.ts b/src/components/utils.ts
index 97a6c9b..58ebb18 100644
--- a/src/components/utils.ts
+++ b/src/components/utils.ts
@@ -7,7 +7,7 @@ export const focusRing = tv({
   variants: {
     isFocusVisible: {
       false: "outline-0",
-      true: "outline-2",
+      true: "outline-2 z-99",
     },
   },
 });
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 080e4f9..5229d7a 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -15,7 +15,6 @@ import {
 } from "@tanstack/react-router";
 import type { ConvexAuthState } from "convex/react";
 import { useTheme } from "next-themes";
-import React, { Suspense } from "react";
 import { RouterProvider } from "react-aria-components";
 import { Toaster } from "sonner";
 
@@ -40,16 +39,6 @@ function RootRoute() {
   const router = useRouter();
   const { theme } = useTheme();
 
-  const TanStackRouterDevtools =
-    process.env.NODE_ENV === "production"
-      ? () => null // Render nothing in production
-      : React.lazy(() =>
-          // Lazy load in development
-          import("@tanstack/router-devtools").then((res) => ({
-            default: res.TanStackRouterDevtools,
-          })),
-        );
-
   return (
     // TODO: Improve this API
     // https://github.com/adobe/react-spectrum/issues/6587
@@ -64,13 +53,11 @@ function RootRoute() {
       }
     >
       <Outlet />
-      <Suspense>
-        <TanStackRouterDevtools />
-      </Suspense>
       <Toaster
         theme={theme as "light" | "dark" | "system"}
         offset={16}
         gap={8}
+        position="bottom-left"
         toastOptions={{
           unstyled: true,
           classNames: {
diff --git a/src/routes/_authenticated.tsx b/src/routes/_authenticated.tsx
index 559a76e..6a2d547 100644
--- a/src/routes/_authenticated.tsx
+++ b/src/routes/_authenticated.tsx
@@ -1,4 +1,3 @@
-import { AppHeader } from "@/components";
 import { Navigate, Outlet, createFileRoute } from "@tanstack/react-router";
 import { useConvexAuth } from "convex/react";
 
@@ -12,8 +11,7 @@ function AuthenticatedRoute() {
   if (!isAuthenticated) return <Navigate to="/signin" />;
 
   return (
-    <main className="flex flex-col h-screen text-gray-normal">
-      <AppHeader />
+    <main className="text-gray-normal">
       <Outlet />
     </main>
   );
diff --git a/src/routes/_authenticated/_home.tsx b/src/routes/_authenticated/_home.tsx
index 7c6e185..5a439d4 100644
--- a/src/routes/_authenticated/_home.tsx
+++ b/src/routes/_authenticated/_home.tsx
@@ -1,13 +1,13 @@
 import {
   Badge,
   Button,
+  Container,
   Disclosure,
   DisclosureGroup,
   DisclosurePanel,
   Empty,
   GridList,
   GridListItem,
-  Link,
   Menu,
   MenuItem,
   MenuSection,
@@ -16,6 +16,7 @@ import {
   Tooltip,
   TooltipTrigger,
 } from "@/components";
+import { AppSidebar } from "@/components/AppSidebar/AppSidebar";
 import { api } from "@convex/_generated/api";
 import {
   CATEGORIES,
@@ -33,7 +34,7 @@ import {
   TIME_UNITS_ORDER,
   type TimeUnit,
 } from "@convex/constants";
-import { RiAddLine, RiListCheck2, RiSignpostLine } from "@remixicon/react";
+import { RiListCheck2, RiSignpostLine } from "@remixicon/react";
 import { Outlet, createFileRoute } from "@tanstack/react-router";
 import { Authenticated, Unauthenticated, useQuery } from "convex/react";
 import { useEffect, useState } from "react";
@@ -130,8 +131,8 @@ function IndexRoute() {
     ];
 
     return (
-      <div className="flex flex-col w-80 border-r border-gray-dim">
-        <div className="flex items-center py-3 px-4 h-16 border-b border-gray-dim">
+      <AppSidebar>
+        <div className="flex items-center mb-4 bg-gray-app z-10">
           <ProgressBar
             label="Quests complete"
             value={completedQuests}
@@ -156,104 +157,93 @@ function IndexRoute() {
                 </MenuSection>
               </Menu>
             </MenuTrigger>
-            <Tooltip>Group by</Tooltip>
-          </TooltipTrigger>
-          <TooltipTrigger>
-            <Link
-              aria-label="Add quest"
-              href={{ to: "/browse" }}
-              button={{ variant: "icon", className: "-mr-1" }}
-            >
-              <RiAddLine size={20} />
-            </Link>
-            <Tooltip>Add quests</Tooltip>
+            <Tooltip placement="right">Group by</Tooltip>
           </TooltipTrigger>
         </div>
-        <div className="flex-1 p-2 overflow-y-auto">
-          <DisclosureGroup
-            allowsMultipleExpanded
-            defaultExpandedKeys={[...allCategoryKeys]}
-          >
-            {Object.entries(groupedQuests)
-              .sort(([groupA], [groupB]) =>
-                sortGroupedQuests(groupA, groupB, groupByValue),
-              )
-              .map(([group, quests]) => {
-                if (quests.length === 0) return null;
-                let groupDetails: GroupDetails;
-                switch (groupByValue) {
-                  case "category":
-                    groupDetails = CATEGORIES[group as keyof typeof CATEGORIES];
-                    break;
-                  case "status":
-                    groupDetails = STATUS[group as keyof typeof STATUS];
-                    break;
-                  case "timeRequired":
-                    groupDetails = TIME_UNITS[group as keyof typeof TIME_UNITS];
-                    break;
-                  case "dateAdded":
-                    groupDetails = DATE_ADDED[group as keyof typeof DATE_ADDED];
-                    break;
-                }
-                const { label, icon: Icon } = groupDetails;
+        <DisclosureGroup
+          allowsMultipleExpanded
+          defaultExpandedKeys={[...allCategoryKeys]}
+          className="-ml-2"
+        >
+          {Object.entries(groupedQuests)
+            .sort(([groupA], [groupB]) =>
+              sortGroupedQuests(groupA, groupB, groupByValue),
+            )
+            .map(([group, quests]) => {
+              if (quests.length === 0) return null;
+              let groupDetails: GroupDetails;
+              switch (groupByValue) {
+                case "category":
+                  groupDetails = CATEGORIES[group as keyof typeof CATEGORIES];
+                  break;
+                case "status":
+                  groupDetails = STATUS[group as keyof typeof STATUS];
+                  break;
+                case "timeRequired":
+                  groupDetails = TIME_UNITS[group as keyof typeof TIME_UNITS];
+                  break;
+                case "dateAdded":
+                  groupDetails = DATE_ADDED[group as keyof typeof DATE_ADDED];
+                  break;
+              }
+              const { label, icon: Icon } = groupDetails;
 
-                return (
-                  <Disclosure
-                    defaultExpanded
-                    key={label}
-                    id={label}
-                    title={
-                      <div className="flex items-center gap-2">
-                        <Icon size={16} className="text-gray-dim" />
-                        {label}
-                        <Badge className="ml-auto">{quests.length}</Badge>
-                      </div>
-                    }
-                  >
-                    <DisclosurePanel>
-                      <GridList
-                        aria-label={`${group} quests`}
-                        className="border-none"
-                      >
-                        {quests.map((quest) => (
-                          <GridListItem
-                            textValue={quest.title}
-                            key={quest._id}
-                            href={{
-                              to: "/quests/$questId",
-                              params: { questId: quest.questId },
-                            }}
-                            className="hover:bg-gray-3 dark:hover:bg-graydark-3 rounded-md pl-8 h-8"
-                          >
-                            <div className="flex items-center justify-between gap-2 w-full">
-                              <div
-                                className={twMerge(
-                                  quest.completionTime && "opacity-40",
-                                )}
-                              >
-                                {quest.title}
-                              </div>
+              return (
+                <Disclosure
+                  defaultExpanded
+                  key={label}
+                  id={label}
+                  title={
+                    <div className="flex items-center gap-2">
+                      <Icon size={16} className="text-gray-dim" />
+                      {label}
+                      <Badge className="ml-auto">{quests.length}</Badge>
+                    </div>
+                  }
+                >
+                  <DisclosurePanel>
+                    <GridList
+                      aria-label={`${group} quests`}
+                      className="border-none"
+                    >
+                      {quests.map((quest) => (
+                        <GridListItem
+                          textValue={quest.title}
+                          key={quest._id}
+                          href={{
+                            to: "/quests/$questId",
+                            params: { questId: quest.questId },
+                          }}
+                          className="hover:bg-gray-3 dark:hover:bg-graydark-3 rounded-md pl-8 h-8"
+                        >
+                          <div className="flex items-center justify-between gap-2 w-full">
+                            <div
+                              className={twMerge(
+                                quest.completionTime && "opacity-40",
+                              )}
+                            >
+                              {quest.title}
                             </div>
-                          </GridListItem>
-                        ))}
-                      </GridList>
-                    </DisclosurePanel>
-                  </Disclosure>
-                );
-              })}
-          </DisclosureGroup>
-        </div>
-      </div>
+                          </div>
+                        </GridListItem>
+                      ))}
+                    </GridList>
+                  </DisclosurePanel>
+                </Disclosure>
+              );
+            })}
+        </DisclosureGroup>
+      </AppSidebar>
     );
   };
 
   return (
     <>
       <Authenticated>
-        <div className="flex flex-1 min-h-0">
+        <Container className="flex gap-6">
           <MyQuests />
           <Outlet />
-        </div>
+        </Container>
       </Authenticated>
       <Unauthenticated>
         <h1>Please log in</h1>
diff --git a/src/routes/_authenticated/_home/quests.$questId.tsx b/src/routes/_authenticated/_home/quests.$questId.tsx
index ede43a2..268db34 100644
--- a/src/routes/_authenticated/_home/quests.$questId.tsx
+++ b/src/routes/_authenticated/_home/quests.$questId.tsx
@@ -1,7 +1,6 @@
 import {
   Badge,
   Button,
-  Container,
   DialogTrigger,
   Empty,
   Link,
@@ -38,9 +37,9 @@ const StatGroup = ({
   value,
   children,
 }: { label: string; value: string; children?: React.ReactNode }) => (
-  <div className="flex flex-col">
-    <div className="text-gray-dim">{label}</div>
-    <div className="text-2xl flex gap-0.5 items-center">
+  <div className="flex flex-col flex-1 bg-gray-2 dark:bg-graydark-2 py-3 px-4 rounded-lg">
+    <div className="text-gray-dim text-sm">{label}</div>
+    <div className="text-xl flex gap-0.5 items-center">
       {value}
       {children}
     </div>
@@ -114,6 +113,21 @@ const QuestTimeRequired = ({
   return <StatGroup label="Time" value={formattedTime} />;
 };
 
+const QuestUrls = ({ urls }: { urls?: string[] }) => {
+  if (!urls || urls.length === 0) return null;
+
+  return (
+    <div className="flex flex-col items-start gap-1 mb-4">
+      {urls.map((url) => (
+        <Link key={url} href={url} className="inline-flex gap-1 items-center">
+          <RiLink size={20} />
+          {url}
+        </Link>
+      ))}
+    </div>
+  );
+};
+
 function QuestDetailRoute() {
   const { questId } = Route.useParams();
   const navigate = useNavigate();
@@ -145,11 +159,10 @@ function QuestDetailRoute() {
     return <Empty title="Quest not found" icon={RiSignpostLine} />;
 
   return (
-    <div className="flex flex-col flex-1">
+    <div className="w-full">
       <PageHeader
         title={quest.title}
         badge={quest.jurisdiction && <Badge>{quest.jurisdiction}</Badge>}
-        className="px-6 border-b border-gray-dim h-16"
       >
         <StatusSelect
           status={userQuest.status as Status}
@@ -172,35 +185,18 @@ function QuestDetailRoute() {
           </Menu>
         </MenuTrigger>
       </PageHeader>
-      <Container className="overflow-y-auto">
-        <div className="flex gap-4 mb-4">
-          <QuestCosts costs={quest.costs} />
-          <QuestTimeRequired
-            timeRequired={quest.timeRequired as TimeRequired}
-          />
-        </div>
-        {quest.urls && (
-          <div className="flex flex-col items-start gap-1 mb-4">
-            {quest.urls.map((url) => (
-              <Link
-                key={url}
-                href={url}
-                className="inline-flex gap-1 items-center"
-              >
-                <RiLink size={20} />
-                {url}
-              </Link>
-            ))}
-          </div>
-        )}
-        {quest.content ? (
-          <Markdown className="prose dark:prose-invert">
-            {quest.content}
-          </Markdown>
-        ) : (
-          "No content"
-        )}
-      </Container>
+      <div className="flex gap-4 mb-4">
+        <QuestCosts costs={quest.costs} />
+        <QuestTimeRequired timeRequired={quest.timeRequired as TimeRequired} />
+      </div>
+      <QuestUrls urls={quest.urls} />
+      {quest.content ? (
+        <Markdown className="prose dark:prose-invert max-w-full">
+          {quest.content}
+        </Markdown>
+      ) : (
+        "No content"
+      )}
     </div>
   );
 }
diff --git a/src/routes/_authenticated/admin/forms/$formId.tsx b/src/routes/_authenticated/admin/forms/$formId.tsx
index f56ae5b..5830afc 100644
--- a/src/routes/_authenticated/admin/forms/$formId.tsx
+++ b/src/routes/_authenticated/admin/forms/$formId.tsx
@@ -24,8 +24,12 @@ function AdminFormDetailRoute() {
     <div>
       <PageHeader
         title={form.title}
-        badge={<Badge size="lg">{form.jurisdiction}</Badge>}
-        subtitle={form.formCode}
+        badge={
+          <>
+            <Badge size="lg">{form.jurisdiction}</Badge>
+            <Badge size="lg">{form.formCode}</Badge>
+          </>
+        }
       />
       {fileUrl && (
         <object
diff --git a/src/routes/_authenticated/admin/quests/$questId.tsx b/src/routes/_authenticated/admin/quests/$questId.tsx
index 1ef1471..7b55a9d 100644
--- a/src/routes/_authenticated/admin/quests/$questId.tsx
+++ b/src/routes/_authenticated/admin/quests/$questId.tsx
@@ -4,6 +4,7 @@ import {
   Checkbox,
   Form,
   NumberField,
+  PageHeader,
   RichTextEditor,
   Select,
   SelectItem,
@@ -250,84 +251,87 @@ function AdminQuestDetailRoute() {
   };
 
   return (
-    <Form className="w-full items-start" onSubmit={handleSubmit}>
-      <Select
-        label="Category"
-        name="category"
-        selectedKey={category}
-        onSelectionChange={(value) => setCategory(value as Category)}
-        placeholder="Select a category"
-        isRequired
-      >
-        {Object.entries(CATEGORIES).map(([key, { label, icon }]) => {
-          const Icon = icon ?? RiQuestionLine;
-          return (
-            <SelectItem key={key} id={key} textValue={key}>
-              <Icon size={20} /> {label}
-            </SelectItem>
-          );
-        })}
-      </Select>
-      <TextField
-        label="Title"
-        name="title"
-        isRequired
-        value={title}
-        onChange={(value) => setTitle(value)}
-      />
-      <Select
-        label="Jurisdiction"
-        name="jurisdiction"
-        selectedKey={jurisdiction}
-        onSelectionChange={(key) => setJurisdiction(key as Jurisdiction)}
-        placeholder="Select a jurisdiction"
-      >
-        {Object.entries(JURISDICTIONS).map(([value, label]) => (
-          <SelectItem key={value} id={value}>
-            {label}
-          </SelectItem>
-        ))}
-      </Select>
-      <CostsInput costs={costs} onChange={setCosts} />
-      <TimeRequiredInput
-        timeRequired={timeRequired}
-        onChange={setTimeRequired}
-      />
-      <div className="flex flex-col gap-2">
-        {urls.map((url, index) => (
-          <URLInput
-            // biome-ignore lint/suspicious/noArrayIndexKey:
-            key={index}
-            value={url}
-            onChange={(value) => {
-              const newUrls = [...urls];
-              newUrls[index] = value;
-              setUrls(newUrls);
-            }}
-            onRemove={() => {
-              setUrls(urls.filter((_, i) => i !== index));
-            }}
-            hideLabel={index > 0}
-          />
-        ))}
-        <Button
-          type="button"
-          variant="secondary"
-          onPress={() => setUrls([...urls, ""])}
+    <>
+      <PageHeader title={title} />
+      <Form className="w-full items-start" onSubmit={handleSubmit}>
+        <Select
+          label="Category"
+          name="category"
+          selectedKey={category}
+          onSelectionChange={(value) => setCategory(value as Category)}
+          placeholder="Select a category"
+          isRequired
         >
-          Add URL
-        </Button>
-      </div>
-      <RichTextEditor
-        markdown={content}
-        onChange={setContent}
-        showReadingScore
-      />
-      <div className="flex gap-2 justify-end">
-        <Button type="submit" variant="primary">
-          Save
-        </Button>
-      </div>
-    </Form>
+          {Object.entries(CATEGORIES).map(([key, { label, icon }]) => {
+            const Icon = icon ?? RiQuestionLine;
+            return (
+              <SelectItem key={key} id={key} textValue={key}>
+                <Icon size={20} /> {label}
+              </SelectItem>
+            );
+          })}
+        </Select>
+        <TextField
+          label="Title"
+          name="title"
+          isRequired
+          value={title}
+          onChange={(value) => setTitle(value)}
+        />
+        <Select
+          label="Jurisdiction"
+          name="jurisdiction"
+          selectedKey={jurisdiction}
+          onSelectionChange={(key) => setJurisdiction(key as Jurisdiction)}
+          placeholder="Select a jurisdiction"
+        >
+          {Object.entries(JURISDICTIONS).map(([value, label]) => (
+            <SelectItem key={value} id={value}>
+              {label}
+            </SelectItem>
+          ))}
+        </Select>
+        <CostsInput costs={costs} onChange={setCosts} />
+        <TimeRequiredInput
+          timeRequired={timeRequired}
+          onChange={setTimeRequired}
+        />
+        <div className="flex flex-col gap-2">
+          {urls.map((url, index) => (
+            <URLInput
+              // biome-ignore lint/suspicious/noArrayIndexKey:
+              key={index}
+              value={url}
+              onChange={(value) => {
+                const newUrls = [...urls];
+                newUrls[index] = value;
+                setUrls(newUrls);
+              }}
+              onRemove={() => {
+                setUrls(urls.filter((_, i) => i !== index));
+              }}
+              hideLabel={index > 0}
+            />
+          ))}
+          <Button
+            type="button"
+            variant="secondary"
+            onPress={() => setUrls([...urls, ""])}
+          >
+            Add URL
+          </Button>
+        </div>
+        <RichTextEditor
+          markdown={content}
+          onChange={setContent}
+          showReadingScore
+        />
+        <div className="flex gap-2 justify-end">
+          <Button type="submit" variant="primary">
+            Save
+          </Button>
+        </div>
+      </Form>
+    </>
   );
 }
diff --git a/src/routes/_authenticated/admin/quests/index.tsx b/src/routes/_authenticated/admin/quests/index.tsx
index 8692625..856c7b2 100644
--- a/src/routes/_authenticated/admin/quests/index.tsx
+++ b/src/routes/_authenticated/admin/quests/index.tsx
@@ -224,7 +224,7 @@ function QuestsRoute() {
   const quests = useQuery(api.quests.getAllQuests);
 
   return (
-    <div>
+    <>
       <PageHeader title="Quests">
         <Button onPress={() => setIsNewQuestModalOpen(true)} variant="primary">
           <RiAddLine />
@@ -263,6 +263,6 @@ function QuestsRoute() {
         onOpenChange={setIsNewQuestModalOpen}
         onSubmit={() => setIsNewQuestModalOpen(false)}
       />
-    </div>
+    </>
   );
 }
diff --git a/src/routes/_authenticated/admin/route.tsx b/src/routes/_authenticated/admin/route.tsx
index 0d3d2c1..6e1488d 100644
--- a/src/routes/_authenticated/admin/route.tsx
+++ b/src/routes/_authenticated/admin/route.tsx
@@ -1,4 +1,4 @@
-import { Container, Nav } from "@/components";
+import { AppSidebar, Container, Nav } from "@/components";
 import { RiFileTextLine, RiInputField, RiSignpostLine } from "@remixicon/react";
 import { Outlet, createFileRoute, redirect } from "@tanstack/react-router";
 
@@ -19,29 +19,31 @@ export const Route = createFileRoute("/_authenticated/admin")({
 
 function AdminRoute() {
   return (
-    <div className="flex flex-1 max-w-screen min-h-0">
-      <Nav
-        routes={[
-          {
-            icon: RiSignpostLine,
-            href: { to: "/admin/quests" },
-            label: "Quests",
-          },
-          {
-            icon: RiFileTextLine,
-            href: { to: "/admin/forms" },
-            label: "Forms",
-          },
-          {
-            icon: RiInputField,
-            href: { to: "/admin/fields" },
-            label: "Fields",
-          },
-        ]}
-      />
-      <Container className="overflow-y-auto">
+    <Container className="flex gap-6">
+      <AppSidebar>
+        <Nav
+          routes={[
+            {
+              icon: RiSignpostLine,
+              href: { to: "/admin/quests" },
+              label: "Quests",
+            },
+            {
+              icon: RiFileTextLine,
+              href: { to: "/admin/forms" },
+              label: "Forms",
+            },
+            {
+              icon: RiInputField,
+              href: { to: "/admin/fields" },
+              label: "Fields",
+            },
+          ]}
+        />
+      </AppSidebar>
+      <div className="w-full">
         <Outlet />
-      </Container>
-    </div>
+      </div>
+    </Container>
   );
 }
diff --git a/src/routes/_authenticated/browse/index.tsx b/src/routes/_authenticated/browse/index.tsx
index 28be573..f947001 100644
--- a/src/routes/_authenticated/browse/index.tsx
+++ b/src/routes/_authenticated/browse/index.tsx
@@ -1,7 +1,9 @@
 import {
+  AppSidebar,
   Badge,
   Button,
   Card,
+  Container,
   Link,
   PageHeader,
   SearchField,
@@ -102,11 +104,11 @@ const QuestCategoryRow = ({ category }: { category: Category }) => {
 
   return (
     <div className="flex flex-col gap-2">
-      <h3 className="text-gray-dim font-semibold flex gap-2 items-center px-8 py-2 bg-gray-app sticky top-0">
+      <h3 className="text-gray-dim font-semibold flex gap-2 items-center py-2">
         <Icon size={16} />
         {label}
       </h3>
-      <div className="w-full overflow-x-auto flex gap-4 px-8 pb-4">
+      <div className="w-full flex flex-wrap gap-4 pb-4 overflow-x-auto">
         {quests?.map((quest) => {
           const userQuest = userQuests?.find((uq) => uq.questId === quest._id);
           const questCount = questCounts?.find(
@@ -145,7 +147,7 @@ const SearchResultsGrid = ({
   if (!quests) return;
 
   return (
-    <div className="flex flex-wrap items-center gap-4 px-8">
+    <div className="flex flex-wrap items-center gap-4">
       {quests.map((quest) => (
         <QuestCard
           key={quest._id}
@@ -167,15 +169,22 @@ function IndexRoute() {
   );
 
   return (
-    <div className="flex flex-col gap-6 flex-1 overflow-y-auto">
-      <PageHeader title="Browse quests" className="px-8 pt-4">
-        <SearchField value={search} onChange={setSearch} />
-      </PageHeader>
-      {filteredQuests && search !== "" ? (
-        <SearchResultsGrid quests={filteredQuests} />
-      ) : (
-        <QuestCategoryGrid />
-      )}
-    </div>
+    <Container className="flex gap-6">
+      <AppSidebar>
+        <SearchField
+          value={search}
+          onChange={setSearch}
+          placeholder="Search quests"
+        />
+      </AppSidebar>
+      <div className="w-full">
+        <PageHeader title="Browse quests" />
+        {filteredQuests && search !== "" ? (
+          <SearchResultsGrid quests={filteredQuests} />
+        ) : (
+          <QuestCategoryGrid />
+        )}
+      </div>
+    </Container>
   );
 }
diff --git a/src/routes/_authenticated/settings/data.tsx b/src/routes/_authenticated/settings/data.tsx
index ad5f474..f2cd985 100644
--- a/src/routes/_authenticated/settings/data.tsx
+++ b/src/routes/_authenticated/settings/data.tsx
@@ -8,14 +8,11 @@ export const Route = createFileRoute("/_authenticated/settings/data")({
 
 function DataRoute() {
   return (
-    <div>
-      <PageHeader
-        title="Data"
-        subtitle="Manage, modify, or delete your data."
-      />
+    <>
+      <PageHeader title="Data" />
       <Banner variant="success" icon={RiLock2Line}>
         Data shown here is end-to-end encrypted. Only you can access it.
       </Banner>
-    </div>
+    </>
   );
 }
diff --git a/src/routes/_authenticated/settings/route.tsx b/src/routes/_authenticated/settings/route.tsx
index 8e70b31..c9a0d10 100644
--- a/src/routes/_authenticated/settings/route.tsx
+++ b/src/routes/_authenticated/settings/route.tsx
@@ -1,4 +1,4 @@
-import { Container, Nav } from "@/components";
+import { AppSidebar, Container, Nav } from "@/components";
 import { RiLock2Line, RiSettings3Line } from "@remixicon/react";
 import { Outlet, createFileRoute } from "@tanstack/react-router";
 
@@ -8,8 +8,8 @@ export const Route = createFileRoute("/_authenticated/settings")({
 
 function SettingsRoute() {
   return (
-    <>
-      <div className="flex flex-1 max-w-screen min-h-0">
+    <Container className="flex gap-6">
+      <AppSidebar>
         <Nav
           routes={[
             {
@@ -24,10 +24,10 @@ function SettingsRoute() {
             },
           ]}
         />
-        <Container className="overflow-y-auto">
-          <Outlet />
-        </Container>
+      </AppSidebar>
+      <div className="w-full">
+        <Outlet />
       </div>
-    </>
+    </Container>
   );
 }
diff --git a/src/styles/index.css b/src/styles/index.css
index 4edfffb..dda8a9f 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -17,14 +17,16 @@
 body {
   @apply bg-gray-app;
   color-scheme: dark light;
-  height: 100dvh;
-  overflow: hidden;
 }
 
 .mdxeditor-root-contenteditable li {
   margin: 0;
 }
 
+.mdxeditor-popup-container:empty {
+  display: none;
+}
+
 .prose {
   line-height: 1.5;