diff --git a/web/src/routes/__root.tsx b/web/src/routes/__root.tsx
index d50bfff..34629dc 100644
--- a/web/src/routes/__root.tsx
+++ b/web/src/routes/__root.tsx
@@ -1,15 +1,20 @@
-import { createRootRoute, Outlet } from '@tanstack/react-router';
+import { createRootRouteWithContext, Outlet } from '@tanstack/react-router';
+import { ReactNode } from 'react';
 
 import { Navbar } from '@/components/Navbar';
 import { Toaster } from '@/components/ui/Toaster';
 
-export const Route = createRootRoute({
+export interface MyRouterContext {
+    title: string;
+    suffix?: ReactNode;
+}
+
+export const Route = createRootRouteWithContext<MyRouterContext>()({
     component: () => (
         <>
             <Navbar />
             <Toaster />
             <Outlet />
-            {/* <TanStackRouterDevtools /> */}
         </>
     ),
 });
diff --git a/web/src/routes/index.tsx b/web/src/routes/index.tsx
index 72ea893..d6d9459 100644
--- a/web/src/routes/index.tsx
+++ b/web/src/routes/index.tsx
@@ -1,4 +1,4 @@
-import { createFileRoute, createRootRouteWithContext, Link } from '@tanstack/react-router';
+import { createFileRoute, Link } from '@tanstack/react-router';
 import { FiArrowRight } from 'react-icons/fi';
 
 import { useInstanceStatistics } from '@/api/instance_settings';
@@ -48,10 +48,6 @@ const Page = () => {
     );
 };
 
-export interface MyRouterContext {
-    title: string;
-}
-
-export const Route = createRootRouteWithContext<MyRouterContext>()({
+export const Route = createFileRoute('/')({
     component: Page,
 });
diff --git a/web/src/routes/settings/_layout.tsx b/web/src/routes/settings/_layout.tsx
index 630d949..bf935ba 100644
--- a/web/src/routes/settings/_layout.tsx
+++ b/web/src/routes/settings/_layout.tsx
@@ -1,7 +1,6 @@
 import {
     createFileRoute,
     Outlet,
-    useRouteContext,
     useRouterState,
 } from '@tanstack/react-router';
 
@@ -15,13 +14,14 @@ export const Route = createFileRoute('/settings/_layout')({
 function RouteComponent() {
     const matches = useRouterState({ select: (s) => s.matches });
 
-    // @ts-expect-error
-    // eslint-disable-next-line prefer-destructuring
-    const title = matches[matches.length - 1].context['title'];
+    const { title, suffix } = matches[matches.length - 1].context;
 
     return (
-        <SidePage title={title} sidebar={<SettingsNav />}>
-            <Outlet />
-        </SidePage>
+        <SidePage
+            title={title}
+            suffix={suffix}
+            sidebar={<SettingsNav />}
+            children={<Outlet />}
+        />
     );
 }
diff --git a/web/src/routes/settings/_layout/fields/index.tsx b/web/src/routes/settings/_layout/fields/index.tsx
index 4f690bd..96c28b1 100644
--- a/web/src/routes/settings/_layout/fields/index.tsx
+++ b/web/src/routes/settings/_layout/fields/index.tsx
@@ -317,6 +317,7 @@ export const Route = createFileRoute('/settings/_layout/fields/')({
     context() {
         return {
             title: 'Field Definitions',
+            suffix: <div>TODO: Create</div>,
         };
     },
     component: RouteComponent,