diff --git a/ui/_/code/quill.js b/ui/_/code/quill.js
index 8e102ad..28d3487 100644
--- a/ui/_/code/quill.js
+++ b/ui/_/code/quill.js
@@ -1,6 +1,7 @@
 /*
     Sam Russell
     Captured Sun
+    11.17.25.2 - Fixing onNavigate() and onAppear()
     11.17.25 - Added dynamic function to have units in style func parameters.
     11.14.25 - Added onTouch, onTap. Changed style setters to work with Safari. Added center() funcs.
     11.13.25 - changed onFocus() to be a boolean event, added onInput()
@@ -273,7 +274,6 @@ function extendHTMLElementWithStyleSetters() {
 
     allStyleProps.forEach(prop => {
         if (prop === "translate") return;
-        if(prop === "position") console.log("position")
 
         const type = cssValueType(prop);
 
@@ -792,7 +792,7 @@ window.Triangle = function (width = "40px", height = "40px") {
 /* EVENTS */
 
 HTMLElement.prototype.onAppear = function(func) {
-    func(this);
+    func.call(this);
     return this;
 };
 
@@ -867,15 +867,33 @@ HTMLElement.prototype.onTap = function(cb) {
 
 /* WHY THIS LISTENER IS THE WAY IT IS: 
 - If we dispatch the "navigate" event on the window (as one would expect for a "navigate" event), a listener placed on the element will not pick it up.
-- However, if we add the listener here on the window, it won't have the "this" scope that a callback normally would. Which makes it much less useful.
+- However, if we add the listener on the window, it won't have the "this" scope that a callback normally would. Which makes it much less useful.
 - Then, if we try to add that scope using bind(), it makes the function.toString() unreadable, which means we cannot detect duplicate listeners.
 - Therefore, we just have to attach the navigate event to the element, and manually trigger that when the window listener fires.
 */
+navigateListeners = []
 HTMLElement.prototype.onNavigate = function(cb) {
     this._storeListener("navigate", cb);
-    window.addEventListener("navigate", () => this.dispatchEvent(new CustomEvent("navigate")))
+
+    let found = false
+    for(entry of navigateListeners) {
+        if(entry.cb.toString() === cb.toString() &&
+            this.nodeName === entry.el.nodeName) {
+            found = true
+            break;
+        }
+    }
+    if(found === false) {
+        navigateListeners.push({el: this, cb: cb})
+    }
+
     return this;
 };
+window.addEventListener("navigate", () => {
+    for(entry of navigateListeners) {
+        entry.el.dispatchEvent(new CustomEvent("navigate"))
+    }
+})
 
 HTMLElement.prototype.onEvent = function(name, cb) {
     window._storeListener(window, name, cb);
diff --git a/ui/public/components/Home.js b/ui/public/components/Home.js
deleted file mode 100644
index 2c35d51..0000000
--- a/ui/public/components/Home.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import "./NavBar.js"
-
-class Home extends Shadow {
-    render() {
-        img("_/images/knight.png", "29vw")
-            .position("absolute")
-            .left(50, vw).top(50, vh)
-            .center()
-
-        p("H   Y   P   E   R   I   A")
-            .x(50, vw).y(50, vh)
-            .center()
-            .color("var(--gold)")
-            .fontSize(5, vw)
-
-        NavBar()
-
-        p("A CLASSICAL CHRISTIAN ASSOCIATION")
-            .x(50, vw).y(94, vh)
-            .center()
-            .letterSpacing(0.3, em)
-    }
-}
-
-register(Home)
\ No newline at end of file
diff --git a/ui/public/components/NavBar.js b/ui/public/components/NavBar.js
index 350bf91..f148c08 100644
--- a/ui/public/components/NavBar.js
+++ b/ui/public/components/NavBar.js
@@ -1,10 +1,41 @@
 class NavBar extends Shadow {
+    NavButton(text) {
+
+        function normalizeText(text) {
+            return text.toLowerCase().replace(/[\s?]+/g, "");
+        }
+
+        function isSelected(el) {
+            return ("/" + normalizeText(el.innerText)) === window.location.pathname
+        }
+
+        return p(text)
+                .cursor("default")
+                .textUnderlineOffset(0.5, em)
+                .onAppear(function() {
+                    this.style.textDecoration = isSelected(this) ? "underline" : ""
+                })
+                .onHover(function (hovering) {
+                    if(hovering) {
+                        this.style.textDecoration = "underline"
+                    } else if(!isSelected(this)) {
+                        this.style.textDecoration = ""
+                    }
+                })
+                .onClick(function (done) {
+                    if(done) {
+                        window.navigateTo(normalizeText(this.innerText))
+                    }
+                })
+        
+    }
+
     render() {
         HStack(() => {
-            p("WHY?")
-            p("EVENTS")
-            p("JOIN")
-            p("SIGN IN")
+            this.NavButton("WHY?")
+            this.NavButton("EVENTS")
+            this.NavButton("JOIN")
+            this.NavButton("SIGN IN")
         })
         .x(50, vw).y(4, em)
         .center()
@@ -13,30 +44,6 @@ class NavBar extends Shadow {
         .gap(3, em)
         .paddingRight(2, em)
         .onNavigate(() => {
-            console.log("hi")
-        })
-        .onAppear(() => {
-            Array.from(this.$("p")).forEach((el) => {
-                el.addEventListener("mousedown", (e) => {
-                    el.classList.add("touched")
-                })
-            })
-            window.addEventListener("mouseup", (e) => {
-                let target = e.target
-                if(!target.matches("app-menu p")) {
-                    return
-                }
-
-                target.classList.remove("touched")
-
-                if(target.classList.contains("selected")) {
-                    this.selected = ""
-                    window.navigateTo("/")
-                } else {
-                    this.selected = target.innerText
-                    window.navigateTo("/app/" + target.innerText.toLowerCase())
-                }
-            })
         })
     }
 }
diff --git a/ui/public/index.js b/ui/public/index.js
index b14af88..b6b7e32 100644
--- a/ui/public/index.js
+++ b/ui/public/index.js
@@ -1,2 +1,2 @@
-import "./components/Home.js"
+import "./pages/Home.js"
 Home()
\ No newline at end of file
diff --git a/ui/public/pages/Events.js b/ui/public/pages/Events.js
new file mode 100644
index 0000000..97d2f58
--- /dev/null
+++ b/ui/public/pages/Events.js
@@ -0,0 +1,7 @@
+class Events extends Shadow {
+    render() {
+
+    }
+}
+
+register(Events)
\ No newline at end of file
diff --git a/ui/public/pages/Home.js b/ui/public/pages/Home.js
new file mode 100644
index 0000000..5fc5916
--- /dev/null
+++ b/ui/public/pages/Home.js
@@ -0,0 +1,55 @@
+import "../components/NavBar.js"
+import "./Why.js"
+import "./Events.js"
+import "./Join.js"
+import "./SignIn.js"
+
+class Home extends Shadow {
+    render() {
+
+        ZStack(() => {
+
+            NavBar()
+    
+            switch(window.location.pathname) {
+                case "/":
+                    img("_/images/knight.png", "29vw")
+                        .position("absolute")
+                        .left(50, vw).top(50, vh)
+                        .center()
+            
+                    p("H   Y   P   E   R   I   A")
+                        .x(50, vw).y(50, vh)
+                        .center()
+                        .color("var(--gold)")
+                        .fontSize(5, vw)
+            
+            
+                    p("A CLASSICAL CHRISTIAN ASSOCIATION")
+                        .x(50, vw).y(94, vh)
+                        .center()
+                        .letterSpacing(0.3, em)
+                    break;
+                case "/why":
+                    Why()
+                    break;
+                case "/events":
+                    Events()
+                    break;
+                case "/join":
+                    Join()
+                    break;
+                case "/signin":
+                    SignIn()
+                    break;
+            }
+
+        })
+        .onNavigate(() => {
+            this.rerender()
+        })
+            
+    }
+}
+
+register(Home)
\ No newline at end of file
diff --git a/ui/public/pages/Join.js b/ui/public/pages/Join.js
new file mode 100644
index 0000000..41abbc1
--- /dev/null
+++ b/ui/public/pages/Join.js
@@ -0,0 +1,9 @@
+class Join extends Shadow {
+    render() {
+        p("Membership is invitation-only. Look out for us in person, or come to an event!")
+        .x(50, vw).y(50, vh)
+        .center()
+    }
+}
+
+register(Join)
\ No newline at end of file
diff --git a/ui/public/pages/SIgnIn.js b/ui/public/pages/SIgnIn.js
new file mode 100644
index 0000000..91f672e
--- /dev/null
+++ b/ui/public/pages/SIgnIn.js
@@ -0,0 +1,7 @@
+class SignIn extends Shadow {
+    render() {
+
+    }
+}
+
+register(SignIn)
\ No newline at end of file
diff --git a/ui/public/pages/Why.js b/ui/public/pages/Why.js
new file mode 100644
index 0000000..c56016c
--- /dev/null
+++ b/ui/public/pages/Why.js
@@ -0,0 +1,7 @@
+class Why extends Shadow {
+    render() {
+
+    }
+}
+
+register(Why)
\ No newline at end of file
diff --git a/ui/public/pages/about.html b/ui/public/pages/about.html
deleted file mode 100644
index 2287388..0000000
--- a/ui/public/pages/about.html
+++ /dev/null
@@ -1,86 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>Hyperia</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" href="_/icons/logo.svg">
-    <link rel="stylesheet" href="_/code/shared.css">
-    <style>
-      #items {
-          position: absolute;
-          top: 50vh;
-          left: 50vw;
-          transform: translate(-50%, -50%);
-
-          display: flex;
-          flex-direction: column;
-          align-items: center; /* centers children horizontally */
-          text-align: center;  /* ensures text inside spans is centered */
-      }
-
-    @media (max-width: 600px) {
-        input {
-            width: 50vw
-        }
-    }
-    </style>
-    <script src="_/code/quill.js"></script>
-    <script type="module">
-        import PageFooter from "./components/Footer.js"
-        import NavBar from "./components/NavBar.js"
-        import SideBar from "./components/SideBar.js"
-    </script>
-  </head>
-  <body>
-    <span id="title" onclick='console.log("hey"); window.location.href="/"'>hyperia</span>
-    <div class="links" style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw">
-      <a href="join">join</a>
-      <span>|</span>
-      <a href="signin">sign in</a>
-    </div>
-
-    <div id="items">
-
-      <form id="signup-form">
-        <input name="email" id="email" placeholder="email" required style="margin-bottom: 15px;">
-        <br>
-        <p id="applicant-message" style="color: green; font-size: 1em; margin: 0.5em 0; margin-bottom: 1em"></p>
-        <button type="submit" style="background-color: rgb(193, 135, 29)">Sign Up</button>
-      </form>
-
-      <script>
-        document.getElementById('signup-form').addEventListener('submit', async (e) => {
-          e.preventDefault(); // prevent page reload
-
-          const email = document.getElementById('email').value;
-          const messageEl = document.getElementById('applicant-message');
-
-          try {
-            const res = await fetch('/api/signup', {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/x-www-form-urlencoded',
-              },
-              body: new URLSearchParams({ email }),
-            });
-
-            if (res.ok) {
-              const data = await res.json();
-              messageEl.style.color = 'green';
-              messageEl.textContent = data.message;
-            } else {
-              const error = await res.text();
-              messageEl.style.color = 'red';
-              messageEl.textContent = 'Error: ' + error;
-            }
-          } catch (err) {
-            messageEl.style.color = 'red';
-            messageEl.textContent = 'Error submitting form.';
-            console.error(err);
-          }
-        });
-      </script>
-
-    </div>
-  </body>
-</html>
\ No newline at end of file
diff --git a/ui/public/pages/join.html b/ui/public/pages/join.html
deleted file mode 100644
index 74e2da4..0000000
--- a/ui/public/pages/join.html
+++ /dev/null
@@ -1,118 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>Hyperia</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" href="_/icons/logo.svg">
-    <link rel="stylesheet" href="_/code/shared.css">
-    <style>
-      #items {
-          position: absolute;
-          top: 50vh;
-          left: 50vw;
-          transform: translate(-50%, -50%);
-
-          display: flex;
-          flex-direction: column;
-          align-items: center; /* centers children horizontally */
-          text-align: center;  /* ensures text inside spans is centered */
-      }
-
-      input {
-        background-color: transparent;
-        border: none;
-        border-radius: 5px;
-        border-top: 2px solid var(--accent);
-        border-bottom: 2px solid var(--accent);
-        height: 2em;
-        width: 15vw;
-        padding: 0.2em;
-        transition: border .2s, padding .2s;
-        color: var(--accent)
-      }
-      input::placeholder {
-        color: var(--accent);
-      }
-      input:focus {
-        outline: none;
-        padding: 0.4em;
-        border-top: 2px solid var(--red);
-        border-bottom: 2px solid var(--red);
-      }
-      input:focus::placeholder {
-        color: var(--red)
-      }
-      input:-webkit-autofill,
-      input:-webkit-autofill:focus {
-          transition: background-color 600000s 0s, color 600000s 0s;
-      }
-      input[data-autocompleted] {
-          background-color: #c7a67b !important;
-      }
-
-    @media (max-width: 600px) {
-        input {
-            width: 50vw
-        }
-    }
-    </style>
-    <script src="_/code/quill.js"></script>
-    <script type="module">
-        import PageFooter from "./components/Footer.js"
-        import NavBar from "./components/NavBar.js"
-        import SideBar from "./components/SideBar.js"
-    </script>
-  </head>
-  <body>
-    <span id="title" onclick='console.log("hey"); window.location.href="/"'>hyperia</span>
-    <div class="links" style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw">
-      <a href="join">join</a>
-      <span>|</span>
-      <a href="signin">sign in</a>
-    </div>
-
-    <div id="items">
-
-      <form id="signup-form">
-        <input name="email" id="email" placeholder="email" required style="margin-bottom: 15px;">
-        <br>
-        <p id="applicant-message" style="color: green; font-size: 1em; margin: 0.5em 0; margin-bottom: 1em"></p>
-        <button type="submit" style="background-color: rgb(193, 135, 29)">Sign Up</button>
-      </form>
-
-      <script>
-        document.getElementById('signup-form').addEventListener('submit', async (e) => {
-          e.preventDefault(); // prevent page reload
-
-          const email = document.getElementById('email').value;
-          const messageEl = document.getElementById('applicant-message');
-
-          try {
-            const res = await fetch('/api/signup', {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/x-www-form-urlencoded',
-              },
-              body: new URLSearchParams({ email }),
-            });
-
-            if (res.ok) {
-              const data = await res.json();
-              messageEl.style.color = 'green';
-              messageEl.textContent = data.message;
-            } else {
-              const error = await res.text();
-              messageEl.style.color = 'red';
-              messageEl.textContent = 'Error: ' + error;
-            }
-          } catch (err) {
-            messageEl.style.color = 'red';
-            messageEl.textContent = 'Error submitting form.';
-            console.error(err);
-          }
-        });
-      </script>
-
-    </div>
-  </body>
-</html>
\ No newline at end of file
diff --git a/ui/public/pages/signin.html b/ui/public/pages/signin.html
deleted file mode 100644
index f4802ba..0000000
--- a/ui/public/pages/signin.html
+++ /dev/null
@@ -1,86 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>Hyperia</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" href="_/icons/logo.svg">
-    <link rel="stylesheet" href="_/code/shared.css">
-    <style>
-      #items {
-          position: absolute;
-          top: 50vh;
-          left: 50vw;
-          transform: translate(-50%, -50%);
-
-          display: flex;
-          flex-direction: column;
-          align-items: center; /* centers children horizontally */
-          text-align: center;  /* ensures text inside spans is centered */
-      }
-
-      input {
-        background-color: transparent;
-        border: none;
-        border-radius: 5px;
-        border-top: 2px solid var(--accent);
-        border-bottom: 2px solid var(--accent);
-        height: 2em;
-        width: 15vw;
-        padding: 0.2em;
-        transition: border .2s, padding .2s;
-        color: var(--accent)
-      }
-      input::placeholder {
-        color: var(--accent);
-      }
-      input:focus {
-        outline: none;
-        padding: 0.4em;
-        border-top: 2px solid var(--red);
-        border-bottom: 2px solid var(--red);
-      }
-      input:focus::placeholder {
-        color: var(--red)
-      }
-      input:-webkit-autofill,
-      input:-webkit-autofill:focus {
-          transition: background-color 600000s 0s, color 600000s 0s;
-      }
-      input[data-autocompleted] {
-          background-color: #c7a67b !important;
-      }
-
-    @media (max-width: 600px) {
-        input {
-            width: 50vw
-        }
-    }
-    </style>
-    <script src="_/code/quill.js"></script>
-    <script type="module">
-        import PageFooter from "./components/Footer.js"
-        import NavBar from "./components/NavBar.js"
-        import SideBar from "./components/SideBar.js"
-    </script>
-  </head>
-  <body>
-    <span id="title" onclick='console.log("hey"); window.location.href="/"'>hyperia</span>
-    <div class="links" style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw">
-      <a href="join">join</a>
-      <span>|</span>
-      <a href="signin">sign in</a>
-    </div>
-
-    <div id="items">
-      <form id="login-form" action="/login" method="POST">
-        <input name="email" placeholder="email" style="margin-bottom: 15px;" required>
-        <br>
-        <input name="password" type="password" placeholder="password" required>
-        <br>
-        <p id="applicant-message" style="color: green; margin-left: 10px; display: inline-block; margin: 0px; margin-left: 20px; font-size: 1em"></p>
-        <br>
-        <button type="submit" style="background-color: rgb(193, 135, 29)">Sign In</button>
-      </form>
-    </div>
-  </body>
-</html>
\ No newline at end of file