Index: frontend/src/pages/Dashboard/components/DashboardSidebar.jsx
===================================================================
--- frontend/src/pages/Dashboard/components/DashboardSidebar.jsx	(revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9)
+++ frontend/src/pages/Dashboard/components/DashboardSidebar.jsx	(revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9)
@@ -0,0 +1,106 @@
+import React from "react";
+import { NavLink, useLocation } from "react-router-dom";
+
+import {
+  Button,
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@relume_io/relume-ui";
+
+import {
+  MdTune,
+  MdFitnessCenter,
+  MdMonitorWeight,
+  MdAccountBalanceWallet,
+  MdTrendingUp,
+  MdChecklist,
+  MdAdd,
+} from "react-icons/md";
+
+import logo from "../../../assets/logo.png";
+
+const navItems = [
+  { title: "Control Center", to: "/dashboard/control-center", icon: MdTune },
+  { title: "Training", to: "/dashboard/training", icon: MdFitnessCenter },
+  { title: "Weight", to: "/dashboard/weight", icon: MdMonitorWeight },
+  { title: "Finance", to: "/dashboard/finance", icon: MdAccountBalanceWallet },
+  { title: "Investing", to: "/dashboard/investing", icon: MdTrendingUp },
+  { title: "Discipline", to: "/dashboard/discipline", icon: MdChecklist },
+];
+
+const DashboardSidebar = () => {
+  const location = useLocation();
+
+  return (
+    <Sidebar
+      className="py-6"
+      closeButtonClassName="fixed top-4 right-4"
+      collapsible="none"
+    >
+      <SidebarHeader className="hidden lg:block">
+        <NavLink to="/" className="flex items-center gap-3 px-2">
+          <img src={logo} alt="Trekr" className="h-10 w-auto rounded-2xl" />
+        </NavLink>
+      </SidebarHeader>
+
+      <SidebarContent className="mt-6">
+        <SidebarMenu>
+          {navItems.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              {(() => {
+                const isActive =
+                  location.pathname === item.to ||
+                  location.pathname.startsWith(`${item.to}/`);
+
+                return (
+                  <SidebarMenuButton
+                    asChild
+                    isActive={isActive}
+                    className={
+                      isActive
+                        ? "!bg-green-400 !text-black hover:!bg-green-400 active:!bg-green-400"
+                        : ""
+                    }
+                  >
+                    <NavLink
+                      to={item.to}
+                      className="flex w-full items-center gap-3"
+                    >
+                      <item.icon
+                        className={
+                          isActive
+                            ? "size-6 shrink-0 text-black"
+                            : "size-6 shrink-0"
+                        }
+                      />
+                      <span className={isActive ? "text-black" : ""}>
+                        {item.title}
+                      </span>
+                    </NavLink>
+                  </SidebarMenuButton>
+                );
+              })()}
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+
+        <div className="mt-6 px-2">
+          <Button
+            variant="secondary"
+            className="w-full justify-start gap-2 !bg-green-400 !text-black hover:!bg-green-500"
+            type="button"
+          >
+            <MdAdd className="size-5" />
+            <span>Add Custom</span>
+          </Button>
+        </div>
+      </SidebarContent>
+    </Sidebar>
+  );
+};
+
+export default DashboardSidebar;
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;