Index: frontend/src/pages/Dashboard/components/DashboardTopbar.jsx
===================================================================
--- frontend/src/pages/Dashboard/components/DashboardTopbar.jsx	(revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9)
+++ frontend/src/pages/Dashboard/components/DashboardTopbar.jsx	(revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9)
@@ -0,0 +1,59 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+import { MdLogout } from "react-icons/md";
+
+import logo from "../../../assets/logo.png";
+
+const DashboardTopbar = ({ username, onLogout }) => {
+  return (
+    <>
+      {/* Desktop */}
+      <div className="sticky top-0 z-30 hidden min-h-16 w-full items-center border-b border-base-300 bg-base-100 px-6 lg:flex lg:px-8">
+        <div className="mx-auto grid size-full grid-cols-1 items-center justify-end justify-items-end gap-4 lg:grid-cols-[1fr_max-content] lg:justify-between lg:justify-items-stretch">
+          <div className="flex items-center gap-3"></div>
+
+          <div className="flex items-center gap-3">
+            <span className="text-sm opacity-80">{username || "—"}</span>
+            <button
+              type="button"
+              className="btn btn-ghost btn-sm"
+              onClick={onLogout}
+              aria-label="Log out"
+              title="Log out"
+            >
+              <MdLogout className="size-5" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile */}
+      <div className="fixed left-0 right-0 top-0 z-30 flex min-h-16 w-full items-center justify-between border-b border-base-300 bg-base-100 px-6 lg:hidden">
+        <div className="flex items-center gap-4">
+          <Link
+            to="/dashboard"
+            className="flex items-center gap-3"
+            aria-label="Trekr dashboard"
+          >
+            <img src={logo} alt="Trekr" className="h-10 w-auto rounded-2xl" />
+          </Link>
+        </div>
+        <div className="flex items-center gap-3">
+          <span className="text-sm opacity-80">{username || "—"}</span>
+          <button
+            type="button"
+            className="btn btn-ghost btn-sm"
+            onClick={onLogout}
+            aria-label="Log out"
+            title="Log out"
+          >
+            <MdLogout className="size-5" />
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DashboardTopbar;