diff --git a/packages/fastui-bootstrap/src/index.tsx b/packages/fastui-bootstrap/src/index.tsx
index 225983b1..03d1975f 100644
--- a/packages/fastui-bootstrap/src/index.tsx
+++ b/packages/fastui-bootstrap/src/index.tsx
@@ -31,7 +31,7 @@ export const classNameGenerator: ClassNameGenerator = ({ props, fullPath, subEle
   const { type } = props
   switch (type) {
     case 'Page':
-      return 'container py-4'
+      return 'container mt-80'
     case 'Button':
       return 'btn btn-primary'
     case 'Table':
@@ -99,7 +99,7 @@ export const classNameGenerator: ClassNameGenerator = ({ props, fullPath, subEle
         case 'title':
           return 'navbar-brand'
         default:
-          return 'navbar navbar-expand-lg bg-body-tertiary'
+          return 'border-bottom fixed-top bg-body'
       }
     case 'Link':
       return {
diff --git a/packages/fastui-bootstrap/src/navbar.tsx b/packages/fastui-bootstrap/src/navbar.tsx
index ee3efabd..a571b4a0 100644
--- a/packages/fastui-bootstrap/src/navbar.tsx
+++ b/packages/fastui-bootstrap/src/navbar.tsx
@@ -8,7 +8,7 @@ export const Navbar: FC<components.NavbarProps> = (props) => {
     return link
   })
   return (
-    <BootstrapNavbar expand="lg" className="bg-body-tertiary">
+    <BootstrapNavbar expand="lg" className={useClassName(props)}>
       <div className={useClassName(props, { el: 'contents' })}>
         <NavbarTitle {...props} />
         <BootstrapNavbar.Toggle aria-controls="navbar-collapse" />
diff --git a/packages/vanilla/src/App.tsx b/packages/vanilla/src/App.tsx
index 7afb3184..baff96c5 100644
--- a/packages/vanilla/src/App.tsx
+++ b/packages/vanilla/src/App.tsx
@@ -3,7 +3,7 @@ import * as bootstrap from 'fastui-bootstrap'
 
 export default function App() {
   return (
-    <div className="app">
+    <div className="top-offset">
       <FastUI
         rootUrl="/api"
         classNameGenerator={bootstrap.classNameGenerator}
diff --git a/packages/vanilla/src/main.scss b/packages/vanilla/src/main.scss
index 8bae6805..f77562bc 100644
--- a/packages/vanilla/src/main.scss
+++ b/packages/vanilla/src/main.scss
@@ -1,5 +1,22 @@
+$primary: black;
+$link-color: #0d6efd;  // bootstrap primary
+
 @import 'bootstrap/scss/bootstrap';
 
+:root {
+  --bs-font-sans-serif: 'IBM Plex Sans', sans-serif;
+}
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;1,400&display=swap');
+
+.bg-body {
+  --bs-bg-opacity: 0.6;
+  backdrop-filter: blur(8px);
+}
+
+.top-offset {
+  margin-top: 80px;
+}
+
 // custom spinner from https://cssloaders.github.io/
 
 .spinner,
diff --git a/python/demo/main.py b/python/demo/main.py
index 3f9d2b80..d2f0bb46 100644
--- a/python/demo/main.py
+++ b/python/demo/main.py
@@ -1,12 +1,13 @@
 from __future__ import annotations as _annotations
 
 import asyncio
+import sys
 from collections import defaultdict
 from datetime import datetime
 from enum import StrEnum
 from typing import Annotated, Literal
 
-from fastapi import UploadFile
+from fastapi import FastAPI, UploadFile
 from fastui import AnyComponent, FastUI, dev_fastapi_app
 from fastui import components as c
 from fastui.events import GoToEvent, PageEvent
@@ -19,8 +20,12 @@
 from .shared import navbar
 from .tables import router
 
-# app = FastAPI()
-app = dev_fastapi_app()
+frontend_reload = '--reload' in sys.argv
+if frontend_reload:
+    # dev_fastapi_app reloads in the browser when the Python source changes
+    app = dev_fastapi_app()
+else:
+    app = FastAPI()
 app.include_router(router, prefix='/api/table')