Patina-Network · Kxlcl · Aug 26, 2026 · Aug 26, 2026
diff --git a/js/index.html b/js/index.html
@@ -3,6 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;600;700;900&display=swap"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>PatChats</title>
     <meta

diff --git a/js/src/app/layouts/PublicLayout.tsx b/js/src/app/layouts/PublicLayout.tsx
@@ -1,11 +1,21 @@
-import { Container } from "@mantine/core";
+import { PublicNavbar } from "@/app/layouts/PublicNavbar";
+import { AppShell, Container } from "@mantine/core";
 import { Outlet } from "react-router-dom";
 
 /** Chrome for public (unauthenticated) pages, e.g. landing and login. */
 export function PublicLayout() {
   return (
-    <Container py="xl" size="sm">
-      <Outlet />
-    </Container>
+    <AppShell header={{ height: 110 }} padding={0}>
+      <AppShell.Header
+        style={{ backgroundColor: "transparent", border: "none" }}
+      >
+        <PublicNavbar />
+      </AppShell.Header>
+      <AppShell.Main>
+        <Container py="xl" size="sm">
+          <Outlet />
+        </Container>
+      </AppShell.Main>
+    </AppShell>
   );
 }
diff --git a/js/src/app/layouts/PublicNavbar.tsx b/js/src/app/layouts/PublicNavbar.tsx
@@ -0,0 +1,61 @@
+import patchatsLogo from "@/assets/patchats-logo.svg";
+import { Button, Container, Group } from "@mantine/core";
+import { Link } from "react-router-dom";
+
+export function PublicNavbar() {
+  return (
+    <Container size="xl" h="100%" fluid>
+      <Group h="100%" justify="space-between" align="center">
+        <Link
+          to="/"
+          style={{
+            textDecoration: "none",
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          <img
+            src={patchatsLogo}
+            alt="Patina Network – PatChats"
+            height={100}
+          />
+        </Link>
+        <Group gap="sm">
+          <Button
+            component={Link}
+            to="/sign-up"
+            fw={400}
+            fz={16}
+            style={{
+              backgroundColor: "#60D1B7",
+              borderRadius: "1px",
+              color: "#000000",
+              fontFamily: "Figtree, sans-serif",
+              height: "40px",
+              minWidth: "100px",
+              padding: "10px 24px",
+            }}
+          >
+            Sign up
+          </Button>
+          <Button
+            component={Link}
+            to="/login"
+            variant="transparent"
+            c="white"
+            fw={400}
+            fz={16}
+            style={{
+              fontFamily: "Figtree, sans-serif",
+              height: "40px",
+              minWidth: "100px",
+              padding: "10px 24px",
+            }}
+          >
+            Log in
+          </Button>
+        </Group>
+      </Group>
+    </Container>
+  );
+}
diff --git a/js/src/assets/.gitkeep b/js/src/assets/.gitkeep
diff --git a/js/src/assets/patchats-logo.svg b/js/src/assets/patchats-logo.svg