diff --git a/src/components/App.tsx b/src/components/App.tsx
index 0fae68e..2fda47e 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,13 +1,11 @@
 import { For } from "solid-js";
-import { A } from "solid-start";
 import { Motion, Presence } from "@motionone/solid";
 
 import logo from '~/assets/icons/mutiny-logo.svg';
-import mutiny_m from '~/assets/icons/m.svg';
-import scan from '~/assets/icons/scan.svg';
-import settings from '~/assets/icons/settings.svg';
 import send from '~/assets/icons/send.svg';
 import BalanceBox from "./BalanceBox";
+import SafeArea from "./SafeArea";
+import NavBar from "./NavBar";
 
 // TODO: use this reload prompt for real
 // import ReloadPrompt from "./Reload";
@@ -28,57 +26,41 @@ function ActivityItem() {
 
 export default function App() {
     return (
-        <div class="safe-top safe-left safe-right safe-bottom">
-            <div class="disable-scrollbars max-h-screen h-full overflow-y-scroll">
-                <main class='flex flex-col gap-4 py-8 px-4'>
-                    <header>
-                        <img src={logo} class="App-logo" alt="logo" />
+        <SafeArea>
+            <main class='flex flex-col gap-4 py-8 px-4'>
+                <header>
+                    <img src={logo} class="App-logo" alt="logo" />
+                </header>
+                {/* <ReloadPrompt /> */}
+                <BalanceBox />
+                <div class='rounded-xl p-4 flex flex-col gap-2 bg-[rgba(0,0,0,0.5)]'>
+                    <header class='text-sm font-semibold uppercase'>
+                        Activity
                     </header>
-                    {/* <ReloadPrompt /> */}
-                    <BalanceBox />
-                    <div class='rounded-xl p-4 flex flex-col gap-2 bg-[rgba(0,0,0,0.5)]'>
-                        <header class='text-sm font-semibold uppercase'>
-                            Activity
-                        </header>
-                        <For each={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}>
-                            {() =>
-                                <Presence>
-                                    <Motion
-                                        initial={{ opacity: 0, scaleY: 0 }}
-                                        animate={{ opacity: 1, scaleY: 1 }}
-                                        exit={{ opacity: 0, scaleY: 0 }}
-                                        transition={{ duration: 0.3 }}
-                                    >
-                                        <ActivityItem />
-                                    </Motion>
-                                </Presence>
-                            }
-                        </For>
-                        <div class='flex justify-end py-4'>
-                            <a href="#" class='underline text-sm'>
-                                MORE
-                            </a>
-                        </div>
+                    <For each={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}>
+                        {() =>
+                            <Presence>
+                                <Motion
+                                    initial={{ opacity: 0, scaleY: 0 }}
+                                    animate={{ opacity: 1, scaleY: 1 }}
+                                    exit={{ opacity: 0, scaleY: 0 }}
+                                    transition={{ duration: 0.3 }}
+                                >
+                                    <ActivityItem />
+                                </Motion>
+                            </Presence>
+                        }
+                    </For>
+                    <div class='flex justify-end py-4'>
+                        <a href="#" class='underline text-sm'>
+                            MORE
+                        </a>
                     </div>
-                    {/* safety div */}
-                    <div class="h-32" />
-                </main>
-                <nav class='bg-black fixed bottom-0 shadow-lg z-40 w-full safe-bottom'>
-                    <ul class='h-16 flex justify-between px-16 items-center'>
-                        <li class='h-full border-t-2 border-b-2 border-b-black flex flex-col justify-center'>
-                            <img src={mutiny_m} alt="home" />
-                        </li>
-                        <li>
-                            <A href="/scanner">
-                                <img src={scan} alt="scan" />
-                            </A>
-                        </li>
-                        <li>
-                            <img src={settings} alt="settings" />
-                        </li>
-                    </ul>
-                </nav>
-            </div>
-        </div >
+                </div>
+                {/* safety div */}
+                <div class="h-32" />
+            </main>
+            <NavBar activeTab="home" />
+        </SafeArea>
     );
 }
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
new file mode 100644
index 0000000..0649931
--- /dev/null
+++ b/src/components/NavBar.tsx
@@ -0,0 +1,28 @@
+import mutiny_m from '~/assets/icons/m.svg';
+import scan from '~/assets/icons/scan.svg';
+import settings from '~/assets/icons/settings.svg';
+
+import { A } from "solid-start";
+
+type ActiveTab = 'home' | 'scan' | 'settings';
+
+export default function NavBar(props: { activeTab: ActiveTab }) {
+    const activeStyle = 'h-full border-t-2 border-b-2 border-b-black flex flex-col justify-center'
+    return (<nav class='bg-black fixed bottom-0 shadow-lg z-40 w-full safe-bottom'>
+        <ul class='h-16 flex justify-between px-16 items-center'>
+            <li class={props.activeTab === "home" ? activeStyle : ""}>
+                <img src={mutiny_m} alt="home" />
+            </li>
+            <li class={props.activeTab === "scan" ? activeStyle : ""}>
+                <A href="/scanner">
+                    <img src={scan} alt="scan" />
+                </A>
+            </li>
+            <li class={props.activeTab === "settings" ? activeStyle : ""}>
+                <A href="/settings">
+                    <img src={settings} alt="settings" />
+                </A>
+            </li>
+        </ul>
+    </nav>)
+}
\ No newline at end of file
diff --git a/src/components/SafeArea.tsx b/src/components/SafeArea.tsx
new file mode 100644
index 0000000..0b24a9a
--- /dev/null
+++ b/src/components/SafeArea.tsx
@@ -0,0 +1,9 @@
+export default function SafeArea(props) {
+    return (
+        <div class="safe-top safe-left safe-right safe-bottom">
+            <div class="disable-scrollbars max-h-screen h-full overflow-y-scroll">
+                {props.children}
+            </div>
+        </div >
+    )
+}
\ No newline at end of file
diff --git a/src/components/waitlist/Notes.tsx b/src/components/waitlist/Notes.tsx
index df196ae..5df6a1d 100644
--- a/src/components/waitlist/Notes.tsx
+++ b/src/components/waitlist/Notes.tsx
@@ -34,9 +34,19 @@ const Note: Component<{ e: NostrEvent }> = (props) => {
     )
 }
 
+function filterReplies(event: Event) {
+    // If there's a "p" tag or an "e" tag we want to return false, otherwise true
+    for (const tag of event.tags) {
+        if (tag[0] === "p" || tag[0] === "e") {
+            return false
+        }
+    }
+    return true
+}
+
 const Notes: Component<{ notes: Event[] }> = (props) => {
     return (<ul class="flex flex-col">
-        <For each={props.notes.filter((event) => !event.tags.length).sort((a, b) => b.created_at - a.created_at)}>
+        <For each={props.notes.filter(filterReplies).sort((a, b) => b.created_at - a.created_at)}>
             {(item) =>
                 <li class="w-full"><Note e={item as NostrEvent} /></li>
             }
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
new file mode 100644
index 0000000..1a30016
--- /dev/null
+++ b/src/routes/Settings.tsx
@@ -0,0 +1,27 @@
+import { Button } from "~/components/Button";
+import NavBar from "~/components/NavBar";
+import SafeArea from "~/components/SafeArea";
+
+export default function Settings() {
+
+    function clearWaitlistId() {
+        localStorage.removeItem('waitlist_id');
+        window.location.reload();
+    }
+
+    function setTestWaitlistId() {
+        localStorage.setItem('waitlist_id', 'npub17zcnktw7svnechf5g666t33d7slw36sz8el3ep4c7kmyfwjhxn9qjvavs6');
+        // reload the window
+        window.location.reload();
+    }
+
+    return (
+        <SafeArea>
+            <main class='flex flex-col gap-4 py-8 px-4'>
+                <Button onClick={clearWaitlistId}>Clear waitlist_id</Button>
+                <Button onClick={setTestWaitlistId}>Use test waitlist_id</Button>
+            </main>
+            <NavBar activeTab="settings" />
+        </SafeArea>
+    )
+}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index a65f66e..71859d8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -9,7 +9,7 @@ const pwaOptions: Partial<VitePWAOptions> = {
   base: '/',
   registerType: "autoUpdate",
   devOptions: {
-    enabled: true
+    enabled: false
   },
   includeAssets: ['favicon.ico', 'robots.txt'],
   manifest: {