diff --git a/apps/web/src/components/app-page-shell.tsx b/apps/web/src/components/app-page-shell.tsx
new file mode 100644
index 0000000..d963e76
--- /dev/null
+++ b/apps/web/src/components/app-page-shell.tsx
@@ -0,0 +1,123 @@
+import type { ReactNode } from "react";
+
+import { Badge } from "@open-learn/ui/components/badge";
+import { cn } from "@open-learn/ui/lib/utils";
+
+export function AppPage({ children, className }: { children: ReactNode; className?: string }) {
+  return <div className={cn("flex w-full min-w-0 flex-col gap-6", className)}>{children}</div>;
+}
+
+export function AppPageHeader({
+  eyebrow,
+  title,
+  description,
+  actions,
+  children,
+  className,
+}: {
+  eyebrow?: string;
+  title: string;
+  description?: string;
+  actions?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <section
+      className={cn(
+        "flex flex-col gap-4 border-b border-border/70 pb-4 lg:flex-row lg:items-end lg:justify-between",
+        className,
+      )}
+    >
+      <div className="min-w-0 flex-1">
+        {eyebrow ? (
+          <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+            {eyebrow}
+          </p>
+        ) : null}
+        <h1 className="mt-1 text-2xl font-semibold tracking-tight">{title}</h1>
+        {description ? (
+          <p className="mt-1 max-w-2xl text-sm text-muted-foreground">{description}</p>
+        ) : null}
+        {children ? <div className="mt-3">{children}</div> : null}
+      </div>
+
+      {actions ? (
+        <div className="flex shrink-0 flex-wrap items-center gap-2 lg:justify-end">{actions}</div>
+      ) : null}
+    </section>
+  );
+}
+
+export function AppPageHeaderMeta({
+  items,
+  className,
+}: {
+  items: Array<{ label: string; value: string }>;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex flex-wrap items-center gap-2", className)}>
+      {items.map((item) => (
+        <Badge
+          key={item.label}
+          variant="outline"
+          className="rounded-none border-border/70 px-2 py-1 text-[10px] uppercase tracking-[0.18em] text-muted-foreground"
+        >
+          {item.label}
+          <span className="ml-2 text-foreground">{item.value}</span>
+        </Badge>
+      ))}
+    </div>
+  );
+}
+
+export function AppSurface({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <section
+      className={cn(
+        "overflow-hidden rounded-none border border-border/60 bg-background ring-1 ring-foreground/10",
+        className,
+      )}
+    >
+      {children}
+    </section>
+  );
+}
+
+export function AppSurfaceHeader({
+  label,
+  title,
+  description,
+  actions,
+  className,
+}: {
+  label?: string;
+  title?: string;
+  description?: string;
+  actions?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-3 border-b border-border/60 bg-muted/15 px-4 py-3 lg:flex-row lg:items-start lg:justify-between",
+        className,
+      )}
+    >
+      <div className="min-w-0">
+        {label ? (
+          <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+            {label}
+          </p>
+        ) : null}
+        {title ? <p className="mt-0.5 text-sm font-medium">{title}</p> : null}
+        {description ? <p className="mt-1 text-xs text-muted-foreground">{description}</p> : null}
+      </div>
+
+      {actions ? (
+        <div className="flex shrink-0 flex-wrap items-center gap-2 lg:justify-end">{actions}</div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/archived-badge.tsx b/apps/web/src/components/archived-badge.tsx
new file mode 100644
index 0000000..b856de2
--- /dev/null
+++ b/apps/web/src/components/archived-badge.tsx
@@ -0,0 +1,18 @@
+import { cn } from "@open-learn/ui/lib/utils";
+
+interface ArchivedBadgeProps {
+  className?: string;
+}
+
+export function ArchivedBadge({ className }: ArchivedBadgeProps) {
+  return (
+    <span
+      className={cn(
+        "rounded-none border border-border/70 bg-muted px-1.5 py-0.5 text-xs text-muted-foreground",
+        className,
+      )}
+    >
+      archived
+    </span>
+  );
+}
diff --git a/apps/web/src/components/row-actions.tsx b/apps/web/src/components/row-actions.tsx
new file mode 100644
index 0000000..a002d9b
--- /dev/null
+++ b/apps/web/src/components/row-actions.tsx
@@ -0,0 +1,94 @@
+import type { ReactNode } from "react";
+
+import { ArchiveIcon, ArchiveRestoreIcon, MoreVerticalIcon, Trash2Icon } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@open-learn/ui/components/alert-dialog";
+import { Button } from "@open-learn/ui/components/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@open-learn/ui/components/dropdown-menu";
+
+interface RowActionsProps {
+  isArchived: boolean;
+  onToggleArchive: () => void;
+  isArchivePending: boolean;
+  onDelete: () => void;
+  deleteTitle: string;
+  deleteDescription: ReactNode;
+}
+
+export function RowActions({
+  isArchived,
+  onToggleArchive,
+  isArchivePending,
+  onDelete,
+  deleteTitle,
+  deleteDescription,
+}: RowActionsProps) {
+  return (
+    <AlertDialog>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon" className="h-8 w-8">
+            <MoreVerticalIcon className="h-4 w-4" />
+            <span className="sr-only">More options</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onClick={onToggleArchive} disabled={isArchivePending}>
+            {isArchived ? (
+              <>
+                <ArchiveRestoreIcon className="mr-2 h-4 w-4" />
+                Unarchive
+              </>
+            ) : (
+              <>
+                <ArchiveIcon className="mr-2 h-4 w-4" />
+                Archive
+              </>
+            )}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <AlertDialogTrigger asChild>
+            <DropdownMenuItem
+              className="text-destructive focus:text-destructive"
+              onSelect={(e) => e.preventDefault()}
+            >
+              <Trash2Icon className="mr-2 h-4 w-4" />
+              Delete
+            </DropdownMenuItem>
+          </AlertDialogTrigger>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{deleteTitle}</AlertDialogTitle>
+          <AlertDialogDescription>{deleteDescription}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={onDelete}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            Delete
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/apps/web/src/features/auth/components/oauth-buttons.tsx b/apps/web/src/features/auth/components/oauth-buttons.tsx
index 61af5cb..3c942e4 100644
--- a/apps/web/src/features/auth/components/oauth-buttons.tsx
+++ b/apps/web/src/features/auth/components/oauth-buttons.tsx
@@ -33,9 +33,10 @@ export default function OAuthButtons({ invitationId }: { invitationId?: string }
   }
 
   return (
-    <div className="flex gap-2 justify-center items-center my-4 mx-auto">
+    <div className="flex gap-2 justify-center items-center my-4 ">
       <Button
         type="button"
+        size="lg"
         variant="outline"
         className="w-full"
         disabled={loadingProvider !== null}
diff --git a/apps/web/src/features/auth/components/settings-dialog.tsx b/apps/web/src/features/auth/components/settings-dialog.tsx
index 170fda2..b4c8a01 100644
--- a/apps/web/src/features/auth/components/settings-dialog.tsx
+++ b/apps/web/src/features/auth/components/settings-dialog.tsx
@@ -11,6 +11,7 @@ import { Label } from "@open-learn/ui/components/label";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@open-learn/ui/components/tabs";
 import { useForm } from "@tanstack/react-form";
 import { KeyRoundIcon, PaletteIcon, UserIcon } from "lucide-react";
+import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import z from "zod";
 
@@ -54,6 +55,39 @@ export default function SettingsDialog({
 }: SettingsDialogProps) {
   const { setTheme, theme } = useTheme();
   const currentTheme = theme ?? "system";
+  const [canChangePassword, setCanChangePassword] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    if (!open) {
+      setCanChangePassword(null);
+      return;
+    }
+
+    setCanChangePassword(null);
+
+    let isCancelled = false;
+
+    async function loadAccounts() {
+      const { data, error } = await authClient.listAccounts();
+
+      if (isCancelled) {
+        return;
+      }
+
+      if (error) {
+        setCanChangePassword(false);
+        return;
+      }
+
+      setCanChangePassword(data.some((account) => account.providerId === "credential"));
+    }
+
+    void loadAccounts();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [open, user.email]);
 
   const profileForm = useForm({
     defaultValues: {
@@ -236,103 +270,105 @@ export default function SettingsDialog({
               </profileForm.Subscribe>
             </form>
 
-            <form
-              onSubmit={(event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                passwordForm.handleSubmit();
-              }}
-              className="grid gap-4 border border-border p-4"
-            >
-              <div className="flex items-center gap-2 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
-                <KeyRoundIcon className="size-3.5" />
-                Password
-              </div>
+            {canChangePassword ? (
+              <form
+                onSubmit={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  passwordForm.handleSubmit();
+                }}
+                className="grid gap-4 border border-border p-4"
+              >
+                <div className="flex items-center gap-2 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
+                  <KeyRoundIcon className="size-3.5" />
+                  Password
+                </div>
 
-              <div className="grid gap-2">
-                <Label htmlFor="settings-current-password">Current password</Label>
-                <passwordForm.Field name="currentPassword">
-                  {(field) => (
-                    <>
-                      <Input
-                        id="settings-current-password"
-                        name={field.name}
-                        type="password"
-                        value={field.state.value}
-                        onBlur={field.handleBlur}
-                        onChange={(event) => field.handleChange(event.target.value)}
-                      />
-                      {field.state.meta.errors.map((error) => (
-                        <p key={error?.message} className="text-xs text-destructive">
-                          {error?.message}
-                        </p>
-                      ))}
-                    </>
-                  )}
-                </passwordForm.Field>
-              </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="settings-current-password">Current password</Label>
+                  <passwordForm.Field name="currentPassword">
+                    {(field) => (
+                      <>
+                        <Input
+                          id="settings-current-password"
+                          name={field.name}
+                          type="password"
+                          value={field.state.value}
+                          onBlur={field.handleBlur}
+                          onChange={(event) => field.handleChange(event.target.value)}
+                        />
+                        {field.state.meta.errors.map((error) => (
+                          <p key={error?.message} className="text-xs text-destructive">
+                            {error?.message}
+                          </p>
+                        ))}
+                      </>
+                    )}
+                  </passwordForm.Field>
+                </div>
 
-              <div className="grid gap-2">
-                <Label htmlFor="settings-new-password">New password</Label>
-                <passwordForm.Field name="newPassword">
-                  {(field) => (
-                    <>
-                      <Input
-                        id="settings-new-password"
-                        name={field.name}
-                        type="password"
-                        value={field.state.value}
-                        onBlur={field.handleBlur}
-                        onChange={(event) => field.handleChange(event.target.value)}
-                      />
-                      {field.state.meta.errors.map((error) => (
-                        <p key={error?.message} className="text-xs text-destructive">
-                          {error?.message}
-                        </p>
-                      ))}
-                    </>
-                  )}
-                </passwordForm.Field>
-              </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="settings-new-password">New password</Label>
+                  <passwordForm.Field name="newPassword">
+                    {(field) => (
+                      <>
+                        <Input
+                          id="settings-new-password"
+                          name={field.name}
+                          type="password"
+                          value={field.state.value}
+                          onBlur={field.handleBlur}
+                          onChange={(event) => field.handleChange(event.target.value)}
+                        />
+                        {field.state.meta.errors.map((error) => (
+                          <p key={error?.message} className="text-xs text-destructive">
+                            {error?.message}
+                          </p>
+                        ))}
+                      </>
+                    )}
+                  </passwordForm.Field>
+                </div>
 
-              <div className="grid gap-2">
-                <Label htmlFor="settings-confirm-password">Confirm new password</Label>
-                <passwordForm.Field name="confirmPassword">
-                  {(field) => (
-                    <>
-                      <Input
-                        id="settings-confirm-password"
-                        name={field.name}
-                        type="password"
-                        value={field.state.value}
-                        onBlur={field.handleBlur}
-                        onChange={(event) => field.handleChange(event.target.value)}
-                      />
-                      {field.state.meta.errors.map((error) => (
-                        <p key={error?.message} className="text-xs text-destructive">
-                          {error?.message}
-                        </p>
-                      ))}
-                    </>
-                  )}
-                </passwordForm.Field>
-              </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="settings-confirm-password">Confirm new password</Label>
+                  <passwordForm.Field name="confirmPassword">
+                    {(field) => (
+                      <>
+                        <Input
+                          id="settings-confirm-password"
+                          name={field.name}
+                          type="password"
+                          value={field.state.value}
+                          onBlur={field.handleBlur}
+                          onChange={(event) => field.handleChange(event.target.value)}
+                        />
+                        {field.state.meta.errors.map((error) => (
+                          <p key={error?.message} className="text-xs text-destructive">
+                            {error?.message}
+                          </p>
+                        ))}
+                      </>
+                    )}
+                  </passwordForm.Field>
+                </div>
 
-              <passwordForm.Subscribe
-                selector={(state) => ({
-                  canSubmit: state.canSubmit,
-                  isSubmitting: state.isSubmitting,
-                })}
-              >
-                {({ canSubmit, isSubmitting }) => (
-                  <div className="flex justify-end">
-                    <Button type="submit" disabled={!canSubmit || isSubmitting}>
-                      {isSubmitting ? "Updating..." : "Update password"}
-                    </Button>
-                  </div>
-                )}
-              </passwordForm.Subscribe>
-            </form>
+                <passwordForm.Subscribe
+                  selector={(state) => ({
+                    canSubmit: state.canSubmit,
+                    isSubmitting: state.isSubmitting,
+                  })}
+                >
+                  {({ canSubmit, isSubmitting }) => (
+                    <div className="flex justify-end">
+                      <Button type="submit" disabled={!canSubmit || isSubmitting}>
+                        {isSubmitting ? "Updating..." : "Update password"}
+                      </Button>
+                    </div>
+                  )}
+                </passwordForm.Subscribe>
+              </form>
+            ) : null}
           </TabsContent>
 
           <TabsContent value="theme" className="grid gap-4 border border-border p-4">
diff --git a/apps/web/src/features/auth/components/sign-in-form.tsx b/apps/web/src/features/auth/components/sign-in-form.tsx
index d56e810..96ae71f 100644
--- a/apps/web/src/features/auth/components/sign-in-form.tsx
+++ b/apps/web/src/features/auth/components/sign-in-form.tsx
@@ -86,9 +86,7 @@ export default function SignInForm({
               <span className="w-full border-t" />
             </div>
             <div className="relative flex justify-center text-xs uppercase">
-              <span className="bg-background px-2 text-muted-foreground">
-                or sign in with email
-              </span>
+              <span className="px-2 text-muted-foreground">or sign in with email</span>
             </div>
           </div>
 
diff --git a/apps/web/src/features/auth/components/sign-up-form.tsx b/apps/web/src/features/auth/components/sign-up-form.tsx
index 6d28c53..334d2aa 100644
--- a/apps/web/src/features/auth/components/sign-up-form.tsx
+++ b/apps/web/src/features/auth/components/sign-up-form.tsx
@@ -88,9 +88,7 @@ export default function SignUpForm({
               <span className="w-full border-t" />
             </div>
             <div className="relative flex justify-center text-xs uppercase">
-              <span className="bg-background px-2 text-muted-foreground">
-                or sign up with email
-              </span>
+              <span className=" px-2 text-muted-foreground">or sign up with email</span>
             </div>
           </div>
 
diff --git a/apps/web/src/features/clients/components/client-row-actions.tsx b/apps/web/src/features/clients/components/client-row-actions.tsx
index b8b63ef..0504f9a 100644
--- a/apps/web/src/features/clients/components/client-row-actions.tsx
+++ b/apps/web/src/features/clients/components/client-row-actions.tsx
@@ -1,25 +1,6 @@
 import type { Client } from "@open-learn/api/modules/client/client.schema";
 
-import { MoreVerticalIcon, ArchiveIcon, ArchiveRestoreIcon, Trash2Icon } from "lucide-react";
-import { Button } from "@open-learn/ui/components/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@open-learn/ui/components/dropdown-menu";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@open-learn/ui/components/alert-dialog";
+import { RowActions } from "@/components/row-actions";
 
 import { useDeleteClient, useUpdateClient } from "../services/mutations";
 
@@ -31,68 +12,19 @@ export function ClientRowActions({ client }: ClientRowActionsProps) {
   const updateClient = useUpdateClient();
   const deleteClient = useDeleteClient();
 
-  function handleToggleArchive() {
-    updateClient.mutate({ id: client.id, isArchived: !client.isArchived });
-  }
-
-  function handleDelete() {
-    deleteClient.mutate({ id: client.id });
-  }
-
   return (
-    <AlertDialog>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon" className="h-8 w-8">
-            <MoreVerticalIcon className="h-4 w-4" />
-            <span className="sr-only">More options</span>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuItem onClick={handleToggleArchive} disabled={updateClient.isPending}>
-            {client.isArchived ? (
-              <>
-                <ArchiveRestoreIcon className="mr-2 h-4 w-4" />
-                Unarchive
-              </>
-            ) : (
-              <>
-                <ArchiveIcon className="mr-2 h-4 w-4" />
-                Archive
-              </>
-            )}
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <AlertDialogTrigger asChild>
-            <DropdownMenuItem
-              className="text-destructive focus:text-destructive"
-              onSelect={(e) => e.preventDefault()}
-            >
-              <Trash2Icon className="mr-2 h-4 w-4" />
-              Delete
-            </DropdownMenuItem>
-          </AlertDialogTrigger>
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Delete client</AlertDialogTitle>
-          <AlertDialogDescription>
-            Are you sure you want to permanently delete{" "}
-            <span className="font-medium">{client.name}</span>? This action cannot be undone.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction
-            onClick={handleDelete}
-            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-          >
-            Delete
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
+    <RowActions
+      isArchived={client.isArchived}
+      onToggleArchive={() => updateClient.mutate({ id: client.id, isArchived: !client.isArchived })}
+      isArchivePending={updateClient.isPending}
+      onDelete={() => deleteClient.mutate({ id: client.id })}
+      deleteTitle="Delete client"
+      deleteDescription={
+        <>
+          Are you sure you want to permanently delete{" "}
+          <span className="font-medium">{client.name}</span>? This action cannot be undone.
+        </>
+      }
+    />
   );
 }
diff --git a/apps/web/src/features/clients/pages/clients-page.tsx b/apps/web/src/features/clients/pages/clients-page.tsx
index 1b98048..ad7a285 100644
--- a/apps/web/src/features/clients/pages/clients-page.tsx
+++ b/apps/web/src/features/clients/pages/clients-page.tsx
@@ -1,17 +1,25 @@
 import type { Client } from "@open-learn/api/modules/client/client.schema";
 
 import { useState } from "react";
-import { PencilIcon, SearchIcon, ChevronDownIcon } from "lucide-react";
+import { ChevronDownIcon, PencilIcon, SearchIcon } from "lucide-react";
+
+import {
+  AppPage,
+  AppPageHeader,
+  AppPageHeaderMeta,
+  AppSurface,
+  AppSurfaceHeader,
+} from "@/components/app-page-shell";
 import { Button } from "@open-learn/ui/components/button";
 import { Checkbox } from "@open-learn/ui/components/checkbox";
-import { Input } from "@open-learn/ui/components/input";
-import { Skeleton } from "@open-learn/ui/components/skeleton";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@open-learn/ui/components/dropdown-menu";
+import { Input } from "@open-learn/ui/components/input";
+import { Skeleton } from "@open-learn/ui/components/skeleton";
 import {
   Table,
   TableBody,
@@ -21,10 +29,13 @@ import {
   TableRow,
 } from "@open-learn/ui/components/table";
 
-import { useClientsQuery } from "../services/queries";
-import { useCreateClient } from "../services/mutations";
+import { ArchivedBadge } from "@/components/archived-badge";
+import { useTableSelection } from "@/hooks/use-table-selection";
+
 import { ClientInlineEditor } from "../components/client-inline-editor";
 import { ClientRowActions } from "../components/client-row-actions";
+import { useCreateClient } from "../services/mutations";
+import { useClientsQuery } from "../services/queries";
 
 type FilterMode = "active" | "archived" | "all";
 
@@ -39,99 +50,111 @@ export default function ClientsPage() {
   const [search, setSearch] = useState("");
   const [editingId, setEditingId] = useState<number | null>(null);
   const [newName, setNewName] = useState("");
-  const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
 
   const showArchived = filter === "archived" || filter === "all";
   const { data: clients, isLoading } = useClientsQuery(showArchived);
   const createClient = useCreateClient();
 
-  const filtered = (clients ?? []).filter((c) => {
-    const matchesSearch = c.name.toLowerCase().includes(search.toLowerCase());
-    if (filter === "active") return matchesSearch && !c.isArchived;
-    if (filter === "archived") return matchesSearch && c.isArchived;
+  const filtered = (clients ?? []).filter((client) => {
+    const matchesSearch = client.name.toLowerCase().includes(search.toLowerCase());
+
+    if (filter === "active") {
+      return matchesSearch && !client.isArchived;
+    }
+
+    if (filter === "archived") {
+      return matchesSearch && client.isArchived;
+    }
+
     return matchesSearch;
   });
 
+  const { selectedIds, toggleSelect, toggleSelectAll, allSelected, someSelected } =
+    useTableSelection({ items: filtered });
+
   async function handleAdd() {
-    if (!newName.trim()) return;
+    if (!newName.trim()) {
+      return;
+    }
+
     await createClient.mutateAsync({ name: newName.trim(), currency: "USD" });
     setNewName("");
   }
 
-  function toggleSelect(id: number) {
-    setSelectedIds((prev) => {
-      const next = new Set(prev);
-      next.has(id) ? next.delete(id) : next.add(id);
-      return next;
-    });
-  }
+  const activeCount = (clients ?? []).filter((client) => !client.isArchived).length;
 
-  function toggleSelectAll() {
-    if (selectedIds.size === filtered.length) {
-      setSelectedIds(new Set());
-    } else {
-      setSelectedIds(new Set(filtered.map((c) => c.id)));
-    }
-  }
+  return (
+    <AppPage>
+      <AppPageHeader
+        title="Clients"
+        description="Keep client records clean so projects, billing, and reporting inherit the right context."
+      >
+        <AppPageHeaderMeta
+          items={[
+            { label: "Total", value: String(clients?.length ?? 0) },
+            { label: "Active", value: String(activeCount) },
+            { label: "Selected", value: String(selectedIds.size) },
+          ]}
+        />
+      </AppPageHeader>
 
-  const allSelected = filtered.length > 0 && selectedIds.size === filtered.length;
-  const someSelected = selectedIds.size > 0 && selectedIds.size < filtered.length;
+      <AppSurface>
+        <AppSurfaceHeader
+          label="Directory"
+          title="Filter and maintain client records"
+          description="Search fast, change archive visibility, and add a new client from the same workspace."
+        />
 
-  return (
-    <div className="space-y-6">
-      <h1 className="text-2xl font-semibold">Clients</h1>
-
-      {/* Toolbar */}
-      <div className="flex items-center justify-between gap-2">
-        <div className="flex items-center gap-2">
-          {/* Filter dropdown */}
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline" size="sm" className="gap-1">
-                {FILTER_LABELS[filter]}
-                <ChevronDownIcon className="h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start">
-              <DropdownMenuItem onClick={() => setFilter("active")}>Show active</DropdownMenuItem>
-              <DropdownMenuItem onClick={() => setFilter("archived")}>
-                Show archived
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => setFilter("all")}>Show all</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-
-          {/* Search */}
-          <div className="relative">
-            <SearchIcon className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+        <div className="flex flex-col gap-3 border-b border-border/60 px-4 py-4 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex flex-wrap items-center gap-2">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm" className="gap-1">
+                  {FILTER_LABELS[filter]}
+                  <ChevronDownIcon className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem onClick={() => setFilter("active")}>Show active</DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setFilter("archived")}>
+                  Show archived
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setFilter("all")}>Show all</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <div className="relative">
+              <SearchIcon className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                value={search}
+                onChange={(event) => setSearch(event.target.value)}
+                placeholder="Search by name"
+                className="w-56 pl-8"
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-2">
             <Input
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              placeholder="Search by name"
-              className="pl-8 w-56"
+              value={newName}
+              onChange={(event) => setNewName(event.target.value)}
+              placeholder="Add new client"
+              className="w-52"
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  void handleAdd();
+                }
+              }}
             />
+            <Button
+              onClick={() => void handleAdd()}
+              disabled={!newName.trim() || createClient.isPending}
+            >
+              Add client
+            </Button>
           </div>
         </div>
 
-        {/* Add new client */}
-        <div className="flex items-center gap-2">
-          <Input
-            value={newName}
-            onChange={(e) => setNewName(e.target.value)}
-            placeholder="Add new client"
-            className="w-52"
-            onKeyDown={(e) => {
-              if (e.key === "Enter") handleAdd();
-            }}
-          />
-          <Button onClick={handleAdd} disabled={!newName.trim() || createClient.isPending}>
-            Add client
-          </Button>
-        </div>
-      </div>
-
-      {/* Table */}
-      <div className="rounded-md border">
         <Table>
           <TableHeader>
             <TableRow>
@@ -178,8 +201,8 @@ export default function ClientsPage() {
             )}
           </TableBody>
         </Table>
-      </div>
-    </div>
+      </AppSurface>
+    </AppPage>
   );
 }
 
@@ -202,11 +225,7 @@ function ClientTableRow({ client, selected, onToggleSelect, onEdit }: ClientTabl
       </TableCell>
       <TableCell>
         <span className="font-medium">{client.name}</span>
-        {client.isArchived && (
-          <span className="ml-2 rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
-            archived
-          </span>
-        )}
+        {client.isArchived ? <ArchivedBadge className="ml-2" /> : null}
       </TableCell>
       <TableCell className="text-muted-foreground">{client.address ?? ""}</TableCell>
       <TableCell>{client.currency}</TableCell>
@@ -231,8 +250,8 @@ function ClientTableRow({ client, selected, onToggleSelect, onEdit }: ClientTabl
 function ClientTableSkeleton() {
   return (
     <>
-      {[1, 2, 3].map((i) => (
-        <TableRow key={i}>
+      {[1, 2, 3].map((item) => (
+        <TableRow key={item}>
           <TableCell>
             <Skeleton className="size-4" />
           </TableCell>
diff --git a/apps/web/src/features/home/pages/home-page.tsx b/apps/web/src/features/home/pages/home-page.tsx
index 3ab58ae..461ab1d 100644
--- a/apps/web/src/features/home/pages/home-page.tsx
+++ b/apps/web/src/features/home/pages/home-page.tsx
@@ -1,15 +1,15 @@
 import { useState } from "react";
-import { ArrowUpRightIcon, ChevronRightIcon, Clock3Icon, ImageOffIcon } from "lucide-react";
+import { ArrowUpRightIcon, ChevronRightIcon, ImageOffIcon } from "lucide-react";
 import { LazyMotion, domAnimation, m } from "motion/react";
+import { useTheme } from "next-themes";
 
+import { Badge } from "@open-learn/ui/components/badge";
 import { Button } from "@open-learn/ui/components/button";
 import { Link } from "@tanstack/react-router";
 
-import heroAvif from "@/public/example-hero.avif";
-import heroAvif832 from "@/public/example-hero-832.avif";
-import heroWebp from "@/public/example-hero.webp";
-import heroWebp832 from "@/public/example-hero-832.webp";
-import heroPng from "@/public/example-hero.png";
+import heroDark from "@/public/hero-image-dark.png";
+import heroLight from "@/public/hero-image-light.png";
+import logoSvg from "@/public/logo.svg";
 
 const GITHUB_URL = "https://github.com/Berget1411/open-clock";
 
@@ -28,10 +28,12 @@ function HeroImageFallback() {
 
 export default function HomePage() {
   const [heroError, setHeroError] = useState(false);
+  const { resolvedTheme } = useTheme();
+  const heroSrc = resolvedTheme === "light" ? heroLight : heroDark;
 
   return (
     <LazyMotion features={domAnimation}>
-      <div className="min-h-svh bg-background text-foreground">
+      <div className="bg-background text-foreground">
         <m.header
           className="border-b border-border/70"
           initial={{ opacity: 0 }}
@@ -41,16 +43,19 @@ export default function HomePage() {
           <div className="mx-auto flex w-full max-w-5xl items-center justify-between gap-3 px-4 py-4 sm:px-6">
             <Link
               to="/"
-              aria-label="Open Clock home"
+              aria-label="better clock home"
               className="inline-flex min-h-11 min-w-0 items-center gap-3 text-sm font-medium transition-colors hover:text-foreground/80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50"
             >
               <span
-                className="flex size-9 shrink-0 items-center justify-center border border-border bg-muted text-foreground"
+                className="flex size-9 shrink-0 items-center justify-center border border-border bg-muted"
                 aria-hidden="true"
               >
-                <Clock3Icon className="size-4" />
+                <img src={logoSvg} alt="" className="size-9 dark:invert" />
               </span>
-              <span className="min-w-0 truncate">Open Clock</span>
+              <span className="min-w-0 truncate">better clock</span>
+              <Badge variant="secondary" className="shrink-0 text-[10px]">
+                Beta
+              </Badge>
             </Link>
 
             <nav aria-label="Site navigation">
@@ -60,7 +65,7 @@ export default function HomePage() {
                     href={GITHUB_URL}
                     target="_blank"
                     rel="noreferrer noopener"
-                    aria-label="Open Clock on GitHub (opens in new tab)"
+                    aria-label="better clock on GitHub (opens in new tab)"
                   >
                     <span aria-hidden="true">GitHub</span>
                     <ArrowUpRightIcon className="size-4 rtl:rotate-[270deg]" aria-hidden="true" />
@@ -111,7 +116,7 @@ export default function HomePage() {
             </m.div>
 
             <m.div
-              className="ring-1 ring-foreground/10"
+              className="relative ring-1 ring-foreground/10 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-1/3 after:bg-gradient-to-t after:from-background after:to-transparent"
               initial={{ opacity: 0, scale: 0.98 }}
               animate={{ opacity: 1, scale: 1 }}
               transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1], delay: 0.2 }}
@@ -119,28 +124,14 @@ export default function HomePage() {
               {heroError ? (
                 <HeroImageFallback />
               ) : (
-                <picture>
-                  <source
-                    type="image/avif"
-                    srcSet={`${heroAvif832} 832w, ${heroAvif} 1664w`}
-                    sizes="(max-width: 1023px) 100vw, 960px"
-                  />
-                  <source
-                    type="image/webp"
-                    srcSet={`${heroWebp832} 832w, ${heroWebp} 1664w`}
-                    sizes="(max-width: 1023px) 100vw, 960px"
-                  />
-                  <img
-                    src={heroPng}
-                    alt="Open Clock dashboard showing tracked hours, recent activity, and reporting views."
-                    width={1664}
-                    height={1720}
-                    loading="lazy"
-                    decoding="async"
-                    onError={() => setHeroError(true)}
-                    className="block h-auto w-full bg-muted/20"
-                  />
-                </picture>
+                <img
+                  src={heroSrc}
+                  alt="better clock dashboard showing tracked hours, recent activity, and reporting views."
+                  loading="lazy"
+                  decoding="async"
+                  onError={() => setHeroError(true)}
+                  className="block h-auto w-full bg-muted/20"
+                />
               )}
             </m.div>
           </section>
@@ -148,12 +139,12 @@ export default function HomePage() {
 
         <footer className="border-t border-border/70">
           <div className="mx-auto flex w-full max-w-5xl items-center justify-between gap-4 px-4 py-4 text-xs text-muted-foreground sm:px-6">
-            <p>© 2026 Open Clock</p>
+            <p>© 2026 better clock</p>
             <a
               href={GITHUB_URL}
               target="_blank"
               rel="noreferrer noopener"
-              aria-label="Open Clock on GitHub (opens in new tab)"
+              aria-label="better clock on GitHub (opens in new tab)"
               className="inline-flex min-h-11 items-center gap-2 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50"
             >
               <span aria-hidden="true">GitHub</span>
diff --git a/apps/web/src/features/navigation/app-navigation.ts b/apps/web/src/features/navigation/app-navigation.ts
new file mode 100644
index 0000000..f92356e
--- /dev/null
+++ b/apps/web/src/features/navigation/app-navigation.ts
@@ -0,0 +1,196 @@
+import type { LucideIcon } from "lucide-react";
+
+import {
+  BarChartIcon,
+  BotIcon,
+  Building2Icon,
+  CalendarIcon,
+  Clock3Icon,
+  FolderIcon,
+  HomeIcon,
+  ListTodoIcon,
+  TagIcon,
+  UsersIcon,
+} from "lucide-react";
+
+export type AppNavSectionId = "track" | "review" | "manage";
+
+export interface AppRouteMeta {
+  title: string;
+  description?: string;
+  section: AppNavSectionId;
+  legacyPaths?: string[];
+}
+
+export interface AppNavItem extends AppRouteMeta {
+  id: string;
+  to: string;
+  icon: LucideIcon;
+  matchPaths: string[];
+  showInSidebar: boolean;
+}
+
+export interface AppNavSection {
+  id: AppNavSectionId;
+  label: string;
+  items: readonly AppNavItem[];
+}
+
+const APP_NAV_SECTION_LABELS: Record<AppNavSectionId, string> = {
+  track: "Track",
+  review: "Review",
+  manage: "Manage",
+};
+
+const APP_NAV_ITEMS: readonly AppNavItem[] = [
+  {
+    id: "time-tracker",
+    title: "Time Tracker",
+    description: "Capture work as it happens with a timer or quick manual entry.",
+    to: "/app",
+    icon: Clock3Icon,
+    section: "track",
+    legacyPaths: ["/app/tracker"],
+    matchPaths: ["/app", "/app/tracker"],
+    showInSidebar: true,
+  },
+  {
+    id: "calendar",
+    title: "Calendar",
+    description: "Review entries on a schedule and adjust sessions in context.",
+    to: "/app/calendar",
+    icon: CalendarIcon,
+    section: "track",
+    matchPaths: ["/app/calendar"],
+    showInSidebar: true,
+  },
+  {
+    id: "tasks",
+    title: "Tasks",
+    description: "Keep delivery work organized across table and kanban views.",
+    to: "/app/tasks",
+    icon: ListTodoIcon,
+    section: "track",
+    matchPaths: ["/app/tasks"],
+    showInSidebar: true,
+  },
+  {
+    id: "overview",
+    title: "Overview",
+    description: "See recent trends, leading projects, and the shape of your work.",
+    to: "/app/overview",
+    icon: HomeIcon,
+    section: "review",
+    legacyPaths: ["/app/dashboard"],
+    matchPaths: ["/app/overview", "/app/dashboard"],
+    showInSidebar: true,
+  },
+  {
+    id: "reports",
+    title: "Reports",
+    description: "Filter, export, and audit tracked time with confidence.",
+    to: "/app/reports",
+    icon: BarChartIcon,
+    section: "review",
+    matchPaths: ["/app/reports"],
+    showInSidebar: true,
+  },
+  {
+    id: "projects",
+    title: "Projects",
+    description: "Define the work you track, its access, and billing setup.",
+    to: "/app/manage/projects",
+    icon: FolderIcon,
+    section: "manage",
+    legacyPaths: ["/app/projects"],
+    matchPaths: ["/app/manage/projects", "/app/projects"],
+    showInSidebar: true,
+  },
+  {
+    id: "clients",
+    title: "Clients",
+    description: "Maintain the people and organisations that work is billed to.",
+    to: "/app/manage/clients",
+    icon: Building2Icon,
+    section: "manage",
+    legacyPaths: ["/app/clients"],
+    matchPaths: ["/app/manage/clients", "/app/clients"],
+    showInSidebar: true,
+  },
+  {
+    id: "teams",
+    title: "Teams",
+    description: "Manage organisation membership, roles, and invitations.",
+    to: "/app/manage/teams",
+    icon: UsersIcon,
+    section: "manage",
+    legacyPaths: ["/app/teams"],
+    matchPaths: ["/app/manage/teams", "/app/teams"],
+    showInSidebar: true,
+  },
+  {
+    id: "tags",
+    title: "Tags",
+    description: "Keep your tracking taxonomy tidy and easy to scan.",
+    to: "/app/manage/tags",
+    icon: TagIcon,
+    section: "manage",
+    legacyPaths: ["/app/tags"],
+    matchPaths: ["/app/manage/tags", "/app/tags"],
+    showInSidebar: true,
+  },
+  {
+    id: "ai",
+    title: "AI Chat",
+    description: "Experimental assistant tools for the workspace.",
+    to: "/app/ai",
+    icon: BotIcon,
+    section: "review",
+    matchPaths: ["/app/ai"],
+    showInSidebar: false,
+  },
+] as const;
+
+function matchesPathPattern(pathname: string, pattern: string) {
+  if (pattern.endsWith("/*")) {
+    const prefix = pattern.slice(0, -2);
+    return pathname === prefix || pathname.startsWith(`${prefix}/`);
+  }
+
+  return pathname === pattern;
+}
+
+export function getAppNavigation() {
+  return APP_NAV_ITEMS;
+}
+
+export function getAppNavSectionLabel(sectionId: AppNavSectionId) {
+  return APP_NAV_SECTION_LABELS[sectionId];
+}
+
+export function isAppNavItemActive(item: AppNavItem, pathname: string) {
+  return item.matchPaths.some((pattern) => matchesPathPattern(pathname, pattern));
+}
+
+export function getAppRouteMeta(pathname: string): AppRouteMeta | null {
+  const item = APP_NAV_ITEMS.find((entry) => isAppNavItemActive(entry, pathname));
+
+  if (!item) {
+    return null;
+  }
+
+  return {
+    title: item.title,
+    description: item.description,
+    section: item.section,
+    legacyPaths: item.legacyPaths,
+  };
+}
+
+export function getSidebarSections(): AppNavSection[] {
+  return (Object.keys(APP_NAV_SECTION_LABELS) as AppNavSectionId[]).map((sectionId) => ({
+    id: sectionId,
+    label: APP_NAV_SECTION_LABELS[sectionId],
+    items: APP_NAV_ITEMS.filter((item) => item.showInSidebar && item.section === sectionId),
+  }));
+}
diff --git a/apps/web/src/features/navigation/components/app-layout-shell.tsx b/apps/web/src/features/navigation/components/app-layout-shell.tsx
index 94dee11..60bd79e 100644
--- a/apps/web/src/features/navigation/components/app-layout-shell.tsx
+++ b/apps/web/src/features/navigation/components/app-layout-shell.tsx
@@ -1,6 +1,8 @@
 import type { CSSProperties, ReactNode } from "react";
 
 import AppSidebar from "@/features/navigation/components/app-sidebar";
+import { getAppNavSectionLabel, getAppRouteMeta } from "@/features/navigation/app-navigation";
+import { Badge } from "@open-learn/ui/components/badge";
 import { Separator } from "@open-learn/ui/components/separator";
 import {
   SidebarInset,
@@ -13,30 +15,36 @@ import {
 import { Skeleton } from "@open-learn/ui/components/skeleton";
 import { useRouterState } from "@tanstack/react-router";
 
-const titles: Record<string, string> = {
-  "/app": "Dashboard",
-  "/app/ai": "AI Chat",
-  "/app/reports": "Reports",
-  "/app/tags": "Tags",
-  "/app/tasks": "Tasks",
-  "/app/todos": "Todos",
-  "/app/tracker": "Time Tracker",
-};
-
 const pendingListItems = ["one", "two", "three", "four", "five"] as const;
 
 export function AppLayoutShell({ children }: { children: ReactNode }) {
   const pathname = useRouterState({ select: (state) => state.location.pathname });
+  const routeMeta = getAppRouteMeta(pathname);
+  const sectionLabel = routeMeta ? getAppNavSectionLabel(routeMeta.section) : null;
 
   return (
-    <SidebarProvider style={{ "--sidebar-width": "12rem" } as CSSProperties}>
+    <SidebarProvider style={{ "--sidebar-width": "14rem" } as CSSProperties}>
       <AppSidebar variant="inset" />
       <SidebarInset>
         <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
           <SidebarTrigger />
           <Separator orientation="vertical" className="h-4" />
           <div className="min-w-0 flex-1">
-            <p className="text-sm font-medium">{titles[pathname] ?? "open-learn"}</p>
+            <div className="flex items-center gap-2 text-[10px] font-medium uppercase tracking-[0.18em]">
+              <span className="text-foreground">better clock</span>
+              <Badge
+                variant="secondary"
+                className="shrink-0 text-[9px] px-1 h-4 normal-case tracking-normal"
+              >
+                Beta
+              </Badge>
+              {sectionLabel ? (
+                <>
+                  <span className="text-muted-foreground/60">/</span>
+                  <span className="truncate text-muted-foreground">{sectionLabel}</span>
+                </>
+              ) : null}
+            </div>
           </div>
         </header>
         <div className="flex min-h-0 flex-1 flex-col p-4 md:p-6">{children}</div>
diff --git a/apps/web/src/features/navigation/components/nav-main.tsx b/apps/web/src/features/navigation/components/app-sidebar-section.tsx
similarity index 50%
rename from apps/web/src/features/navigation/components/nav-main.tsx
rename to apps/web/src/features/navigation/components/app-sidebar-section.tsx
index bdccd6e..f537b26 100644
--- a/apps/web/src/features/navigation/components/nav-main.tsx
+++ b/apps/web/src/features/navigation/components/app-sidebar-section.tsx
@@ -1,6 +1,4 @@
-import type { LucideIcon } from "lucide-react";
 import { Link, useRouterState } from "@tanstack/react-router";
-import type { RegisteredRouter, ToPathOption } from "@tanstack/react-router";
 import {
   SidebarGroup,
   SidebarGroupContent,
@@ -10,27 +8,30 @@ import {
   SidebarMenuItem,
 } from "@open-learn/ui/components/sidebar";
 
-interface NavMainItem {
-  title: string;
-  to: ToPathOption<RegisteredRouter>;
-  icon: LucideIcon;
-}
+import type { AppNavSection } from "../app-navigation";
+import { isAppNavItemActive } from "../app-navigation";
 
-interface NavMainProps {
-  items: readonly NavMainItem[];
+interface AppSidebarSectionProps {
+  section: AppNavSection;
 }
 
-export default function NavMain({ items }: NavMainProps) {
+export function AppSidebarSection({ section }: AppSidebarSectionProps) {
   const pathname = useRouterState({ select: (state) => state.location.pathname });
 
   return (
     <SidebarGroup>
-      <SidebarGroupLabel>Main</SidebarGroupLabel>
+      <SidebarGroupLabel className="text-[10px] font-medium uppercase tracking-[0.18em] text-sidebar-foreground/55">
+        {section.label}
+      </SidebarGroupLabel>
       <SidebarGroupContent>
         <SidebarMenu>
-          {items.map((item) => (
-            <SidebarMenuItem key={item.title}>
-              <SidebarMenuButton asChild isActive={pathname === item.to} tooltip={item.title}>
+          {section.items.map((item) => (
+            <SidebarMenuItem key={item.id}>
+              <SidebarMenuButton
+                asChild
+                isActive={isAppNavItemActive(item, pathname)}
+                tooltip={item.title}
+              >
                 <Link to={item.to}>
                   <item.icon />
                   <span>{item.title}</span>
diff --git a/apps/web/src/features/navigation/components/app-sidebar.tsx b/apps/web/src/features/navigation/components/app-sidebar.tsx
index 8b2865e..cd14f15 100644
--- a/apps/web/src/features/navigation/components/app-sidebar.tsx
+++ b/apps/web/src/features/navigation/components/app-sidebar.tsx
@@ -1,16 +1,3 @@
-import {
-  BotIcon,
-  FolderIcon,
-  HomeIcon,
-  Clock3Icon,
-  ListTodoIcon,
-  TagIcon,
-  BarChartIcon,
-  CalendarIcon,
-  UsersIcon,
-  Building2Icon,
-  KanbanIcon,
-} from "lucide-react";
 import {
   Sidebar,
   SidebarContent,
@@ -19,78 +6,15 @@ import {
   SidebarMenu,
   SidebarRail,
 } from "@open-learn/ui/components/sidebar";
+
+import { getSidebarSections } from "../app-navigation";
+import { AppSidebarSection } from "./app-sidebar-section";
 import { TeamSwitcher } from "./team-switcher";
-import NavMain from "./nav-main";
 import NavUser from "./nav-user";
-import NavManage from "./nav-manage";
-import { env } from "@open-learn/env/web";
-
-const baseNavMainItems = [
-  {
-    title: "Dashboard",
-    to: "/app",
-    icon: HomeIcon,
-  },
-  {
-    title: "Reports",
-    to: "/app/reports",
-    icon: BarChartIcon,
-  },
-  {
-    title: "Time Tracker",
-    to: "/app/tracker",
-    icon: Clock3Icon,
-  },
-  {
-    title: "Tasks",
-    to: "/app/tasks",
-    icon: ListTodoIcon,
-  },
-  {
-    title: "Calendar",
-    to: "/app/calendar",
-    icon: CalendarIcon,
-  },
-] as const;
-
-const aiNavItem = {
-  title: "AI Chat",
-  to: "/app/ai",
-  icon: BotIcon,
-} as const;
-
-const navMainItems = env.VITE_AI_ENABLED
-  ? ([...baseNavMainItems, aiNavItem] as const)
-  : baseNavMainItems;
-
-const navManageItems = [
-  {
-    title: "Projects",
-    subtitle: "Manage your projects",
-    to: "/app/projects",
-    icon: FolderIcon,
-  },
-  {
-    title: "Teams",
-    subtitle: "Manage your teams",
-    to: "/app/teams",
-    icon: UsersIcon,
-  },
-  {
-    title: "Clients",
-    subtitle: "Manage your clients",
-    to: "/app/clients",
-    icon: Building2Icon,
-  },
-  {
-    title: "Tags",
-    subtitle: "Manage your tags",
-    to: "/app/tags",
-    icon: TagIcon,
-  },
-] as const;
 
 export default function AppSidebar(props: React.ComponentProps<typeof Sidebar>) {
+  const sections = getSidebarSections();
+
   return (
     <Sidebar collapsible="icon" {...props}>
       <SidebarHeader>
@@ -99,8 +23,9 @@ export default function AppSidebar(props: React.ComponentProps<typeof Sidebar>)
         </SidebarMenu>
       </SidebarHeader>
       <SidebarContent>
-        <NavMain items={navMainItems} />
-        <NavManage items={navManageItems} />
+        {sections.map((section) => (
+          <AppSidebarSection key={section.id} section={section} />
+        ))}
       </SidebarContent>
       <SidebarFooter>
         <NavUser />
diff --git a/apps/web/src/features/navigation/components/nav-manage.tsx b/apps/web/src/features/navigation/components/nav-manage.tsx
deleted file mode 100644
index be6bc01..0000000
--- a/apps/web/src/features/navigation/components/nav-manage.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { LucideIcon } from "lucide-react";
-import { Link, useRouterState } from "@tanstack/react-router";
-import type { RegisteredRouter, ToPathOption } from "@tanstack/react-router";
-import {
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from "@open-learn/ui/components/sidebar";
-
-interface NavManageItem {
-  title: string;
-  to: ToPathOption<RegisteredRouter>;
-  icon: LucideIcon;
-}
-
-interface NavManageProps {
-  items: readonly NavManageItem[];
-}
-
-export default function NavManage({ items }: NavManageProps) {
-  const pathname = useRouterState({ select: (state) => state.location.pathname });
-
-  return (
-    <SidebarGroup>
-      <SidebarGroupLabel>Manage</SidebarGroupLabel>
-      <SidebarGroupContent>
-        <SidebarMenu>
-          {items.map((item) => (
-            <SidebarMenuItem key={item.title}>
-              <SidebarMenuButton asChild isActive={pathname === item.to} tooltip={item.title}>
-                <Link to={item.to}>
-                  <item.icon />
-                  <span>{item.title}</span>
-                </Link>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          ))}
-        </SidebarMenu>
-      </SidebarGroupContent>
-    </SidebarGroup>
-  );
-}
diff --git a/apps/web/src/features/navigation/components/settings-dialog.tsx b/apps/web/src/features/navigation/components/settings-dialog.tsx
deleted file mode 100644
index 170fda2..0000000
--- a/apps/web/src/features/navigation/components/settings-dialog.tsx
+++ /dev/null
@@ -1,365 +0,0 @@
-import { Button } from "@open-learn/ui/components/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@open-learn/ui/components/dialog";
-import { Input } from "@open-learn/ui/components/input";
-import { Label } from "@open-learn/ui/components/label";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@open-learn/ui/components/tabs";
-import { useForm } from "@tanstack/react-form";
-import { KeyRoundIcon, PaletteIcon, UserIcon } from "lucide-react";
-import { toast } from "sonner";
-import z from "zod";
-
-import { useTheme } from "@/components/theme-provider";
-import { authClient } from "@/lib/auth-client";
-
-type SettingsDialogProps = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  user: {
-    email: string;
-    image?: string | null;
-    name?: string | null;
-  };
-  refetchSession: () => Promise<unknown>;
-};
-
-const themeOptions = [
-  {
-    description: "Always use the light interface.",
-    label: "Light",
-    value: "light",
-  },
-  {
-    description: "Always use the dark interface.",
-    label: "Dark",
-    value: "dark",
-  },
-  {
-    description: "Match your system preference.",
-    label: "System",
-    value: "system",
-  },
-] as const;
-
-export default function SettingsDialog({
-  open,
-  onOpenChange,
-  refetchSession,
-  user,
-}: SettingsDialogProps) {
-  const { setTheme, theme } = useTheme();
-  const currentTheme = theme ?? "system";
-
-  const profileForm = useForm({
-    defaultValues: {
-      image: user.image ?? "",
-      name: user.name ?? "",
-    },
-    onSubmit: async ({ value }) => {
-      const trimmedName = value.name.trim();
-      const trimmedImage = value.image.trim();
-      const updates: { image: string | null; name: string } = {
-        image: trimmedImage || null,
-        name: trimmedName,
-      };
-
-      const { error } = await authClient.updateUser(updates);
-
-      if (error) {
-        toast.error(error.message ?? error.statusText);
-        return;
-      }
-
-      await refetchSession();
-      toast.success("Profile updated");
-      onOpenChange(false);
-    },
-    validators: {
-      onSubmit: z.object({
-        image: z
-          .string()
-          .trim()
-          .refine((value) => value.length === 0 || URL.canParse(value), {
-            message: "Enter a valid image URL",
-          }),
-        name: z.string().trim().min(2, "Name must be at least 2 characters"),
-      }),
-    },
-  });
-
-  const passwordForm = useForm({
-    defaultValues: {
-      confirmPassword: "",
-      currentPassword: "",
-      newPassword: "",
-    },
-    onSubmit: async ({ value }) => {
-      const { error } = await authClient.changePassword({
-        currentPassword: value.currentPassword,
-        newPassword: value.newPassword,
-      });
-
-      if (error) {
-        toast.error(error.message ?? error.statusText);
-        return;
-      }
-
-      toast.success("Password updated");
-      passwordForm.reset();
-      onOpenChange(false);
-    },
-    validators: {
-      onSubmit: z
-        .object({
-          confirmPassword: z.string().min(8, "Confirm password must be at least 8 characters"),
-          currentPassword: z.string().min(8, "Current password must be at least 8 characters"),
-          newPassword: z.string().min(8, "New password must be at least 8 characters"),
-        })
-        .refine((value) => value.newPassword !== value.currentPassword, {
-          message: "New password must be different",
-          path: ["newPassword"],
-        })
-        .refine((value) => value.newPassword === value.confirmPassword, {
-          message: "Passwords do not match",
-          path: ["confirmPassword"],
-        }),
-    },
-  });
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-[calc(100%-2rem)] sm:max-w-2xl">
-        <DialogHeader>
-          <DialogTitle>Settings</DialogTitle>
-          <DialogDescription>
-            Update your account details and choose how the app should look.
-          </DialogDescription>
-        </DialogHeader>
-
-        <Tabs defaultValue="account" className="gap-4">
-          <TabsList variant="line" className="w-full justify-start gap-2 border-b px-0 pb-1">
-            <TabsTrigger value="account">
-              <UserIcon />
-              Account
-            </TabsTrigger>
-            <TabsTrigger value="theme">
-              <PaletteIcon />
-              Theme
-            </TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="account" className="grid gap-4">
-            <form
-              onSubmit={(event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                profileForm.handleSubmit();
-              }}
-              className="grid gap-4 border border-border p-4"
-            >
-              <div className="flex items-center gap-2 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
-                <UserIcon className="size-3.5" />
-                Profile
-              </div>
-
-              <div className="grid gap-2">
-                <Label htmlFor="settings-name">Name</Label>
-                <profileForm.Field name="name">
-                  {(field) => (
-                    <>
-                      <Input
-                        id="settings-name"
-                        name={field.name}
-                        value={field.state.value}
-                        onBlur={field.handleBlur}
-                        onChange={(event) => field.handleChange(event.target.value)}
-                      />
-                      {field.state.meta.errors.map((error) => (
-                        <p key={error?.message} className="text-xs text-destructive">
-                          {error?.message}
-                        </p>
-                      ))}
-                    </>
-                  )}
-                </profileForm.Field>
-              </div>
-
-              <div className="grid gap-2">
-                <Label htmlFor="settings-email">Email</Label>
-                <Input id="settings-email" value={user.email} disabled readOnly />
-                <p className="text-xs text-muted-foreground">
-                  Email changes are not enabled in this app yet.
-                </p>
-              </div>
-
-              <div className="grid gap-2">
-                <Label htmlFor="settings-image">Avatar URL</Label>
-                <profileForm.Field name="image">
-                  {(field) => (
-                    <>
-                      <Input
-                        id="settings-image"
-                        name={field.name}
-                        placeholder="https://example.com/avatar.png"
-                        value={field.state.value}
-                        onBlur={field.handleBlur}
-                        onChange={(event) => field.handleChange(event.target.value)}
-                      />
-                      {field.state.meta.errors.map((error) => (
-                        <p key={error?.message} className="text-xs text-destructive">
-                          {error?.message}
-                        </p>
-                      ))}
-                    </>
-                  )}
-                </profileForm.Field>
-              </div>
-
-              <profileForm.Subscribe
-                selector={(state) => ({
-                  canSubmit: state.canSubmit,
-                  isSubmitting: state.isSubmitting,
-                })}
-              >
-                {({ canSubmit, isSubmitting }) => (
-                  <div className="flex justify-end">
-                    <Button type="submit" disabled={!canSubmit || isSubmitting}>
-                      {isSubmitting ? "Saving..." : "Save profile"}
-                    </Button>
-                  </div>
-                )}
-              </profileForm.Subscribe>
-            </form>
-
-            <form
-              onSubmit={(event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                passwordForm.handleSubmit();
-              }}
-              className="grid gap-4 border border-border p-4"
-            >
-              <div className="flex items-center gap-2 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
-                <KeyRoundIcon className="size-3.5" />
-                Password
-              </div>
-
-              <div className="grid gap-2">
-                <Label htmlFor="settings-current-password">Current password</Label>
-                <passwordForm.Field name="currentPassword">
-                  {(field) => (
-                    <>
-                      <Input
-                        id="settings-current-password"
-                        name={field.name}
-                        type="password"
-                        value={field.state.value}
-                        onBlur={field.handleBlur}
-                        onChange={(event) => field.handleChange(event.target.value)}
-                      />
-                      {field.state.meta.errors.map((error) => (
-                        <p key={error?.message} className="text-xs text-destructive">
-                          {error?.message}
-                        </p>
-                      ))}
-                    </>
-                  )}
-                </passwordForm.Field>
-              </div>
-
-              <div className="grid gap-2">
-                <Label htmlFor="settings-new-password">New password</Label>
-                <passwordForm.Field name="newPassword">
-                  {(field) => (
-                    <>
-                      <Input
-                        id="settings-new-password"
-                        name={field.name}
-                        type="password"
-                        value={field.state.value}
-                        onBlur={field.handleBlur}
-                        onChange={(event) => field.handleChange(event.target.value)}
-                      />
-                      {field.state.meta.errors.map((error) => (
-                        <p key={error?.message} className="text-xs text-destructive">
-                          {error?.message}
-                        </p>
-                      ))}
-                    </>
-                  )}
-                </passwordForm.Field>
-              </div>
-
-              <div className="grid gap-2">
-                <Label htmlFor="settings-confirm-password">Confirm new password</Label>
-                <passwordForm.Field name="confirmPassword">
-                  {(field) => (
-                    <>
-                      <Input
-                        id="settings-confirm-password"
-                        name={field.name}
-                        type="password"
-                        value={field.state.value}
-                        onBlur={field.handleBlur}
-                        onChange={(event) => field.handleChange(event.target.value)}
-                      />
-                      {field.state.meta.errors.map((error) => (
-                        <p key={error?.message} className="text-xs text-destructive">
-                          {error?.message}
-                        </p>
-                      ))}
-                    </>
-                  )}
-                </passwordForm.Field>
-              </div>
-
-              <passwordForm.Subscribe
-                selector={(state) => ({
-                  canSubmit: state.canSubmit,
-                  isSubmitting: state.isSubmitting,
-                })}
-              >
-                {({ canSubmit, isSubmitting }) => (
-                  <div className="flex justify-end">
-                    <Button type="submit" disabled={!canSubmit || isSubmitting}>
-                      {isSubmitting ? "Updating..." : "Update password"}
-                    </Button>
-                  </div>
-                )}
-              </passwordForm.Subscribe>
-            </form>
-          </TabsContent>
-
-          <TabsContent value="theme" className="grid gap-4 border border-border p-4">
-            <div className="flex items-center gap-2 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
-              <PaletteIcon className="size-3.5" />
-              Appearance
-            </div>
-
-            <div className="grid gap-3 sm:grid-cols-3">
-              {themeOptions.map((option) => (
-                <Button
-                  key={option.value}
-                  type="button"
-                  variant={currentTheme === option.value ? "default" : "outline"}
-                  className="h-auto flex-col items-start justify-start gap-1 px-3 py-3 text-left"
-                  onClick={() => setTheme(option.value)}
-                >
-                  <span>{option.label}</span>
-                  <span className="text-[11px] font-normal text-current/70">
-                    {option.description}
-                  </span>
-                </Button>
-              ))}
-            </div>
-          </TabsContent>
-        </Tabs>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/apps/web/src/features/navigation/components/team-switcher.tsx b/apps/web/src/features/navigation/components/team-switcher.tsx
index 02071b9..beeffb1 100644
--- a/apps/web/src/features/navigation/components/team-switcher.tsx
+++ b/apps/web/src/features/navigation/components/team-switcher.tsx
@@ -1,5 +1,7 @@
 import * as React from "react";
-import { Clock, ChevronsUpDown, Plus } from "lucide-react";
+import { ChevronsUpDown, Plus } from "lucide-react";
+import { Badge } from "@open-learn/ui/components/badge";
+import logoSvg from "@/public/logo.svg";
 import { useQuery } from "@tanstack/react-query";
 import { toast } from "sonner";
 
@@ -108,10 +110,15 @@ export function TeamSwitcher() {
                 className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
               >
                 <div className="flex aspect-square size-8 items-center justify-center border border-white/10 bg-white/5">
-                  <Clock className="size-4" />
+                  <img src={logoSvg} alt="" className="size-6 dark:invert" />
                 </div>
                 <div className="grid flex-1 text-left text-sm leading-tight">
-                  <span className="truncate font-semibold">Open Clock</span>
+                  <span className="flex items-center gap-1.5 truncate font-semibold">
+                    better clock
+                    <Badge variant="secondary" className="shrink-0 text-[9px] px-1 h-4">
+                      Beta
+                    </Badge>
+                  </span>
                   <span className="truncate text-xs">
                     {activeOrg ? `/ ${activeOrg.name}` : "Loading…"}
                   </span>
@@ -168,7 +175,7 @@ export function TeamSwitcher() {
               placeholder="Acme Inc."
               value={newOrgName}
               onChange={(e) => setNewOrgName(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && handleCreateOrg()}
+              onKeyDown={(e) => e.key === "Enter" && void handleCreateOrg()}
             />
           </div>
           <DialogFooter>
diff --git a/apps/web/src/features/organization/components/members-table.tsx b/apps/web/src/features/organization/components/members-table.tsx
index 691e907..4d8e9c8 100644
--- a/apps/web/src/features/organization/components/members-table.tsx
+++ b/apps/web/src/features/organization/components/members-table.tsx
@@ -216,9 +216,9 @@ export function MembersTable({ orgId }: { orgId: string }) {
   }
 
   return (
-    <div className="space-y-4">
+    <>
       {/* Toolbar */}
-      <div className="flex items-center justify-between gap-2">
+      <div className="flex items-center justify-between gap-2 border-b border-border/60 px-4 py-4">
         <div className="flex items-center gap-2">
           <div className="relative">
             <Search className="absolute left-2.5 top-2.5 size-4 text-muted-foreground" />
@@ -248,100 +248,94 @@ export function MembersTable({ orgId }: { orgId: string }) {
       </div>
 
       {/* Table */}
-      <div className="rounded-md border">
-        <Table>
-          <TableHeader>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Email</TableHead>
+            <TableHead>Role</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead className="w-10" />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {filteredRows.length === 0 ? (
             <TableRow>
-              <TableHead>Name</TableHead>
-              <TableHead>Email</TableHead>
-              <TableHead>Role</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead className="w-10" />
+              <TableCell colSpan={5} className="py-8 text-center text-muted-foreground">
+                No members found
+              </TableCell>
             </TableRow>
-          </TableHeader>
-          <TableBody>
-            {filteredRows.length === 0 ? (
-              <TableRow>
-                <TableCell colSpan={5} className="text-center text-muted-foreground py-8">
-                  No members found
+          ) : (
+            filteredRows.map((row) => (
+              <TableRow key={row.kind === "member" ? row.id : `inv-${row.id}`}>
+                <TableCell className="font-medium">
+                  {row.kind === "member" ? row.user.name : "—"}
                 </TableCell>
-              </TableRow>
-            ) : (
-              filteredRows.map((row) => (
-                <TableRow key={row.kind === "member" ? row.id : `inv-${row.id}`}>
-                  <TableCell className="font-medium">
-                    {row.kind === "member" ? row.user.name : "—"}
-                  </TableCell>
-                  <TableCell className="text-muted-foreground">
-                    {row.kind === "member" ? row.user.email : row.email}
-                  </TableCell>
-                  <TableCell>
-                    <Badge variant={row.role === "owner" ? "default" : "secondary"}>
-                      {row.role}
+                <TableCell className="text-muted-foreground">
+                  {row.kind === "member" ? row.user.email : row.email}
+                </TableCell>
+                <TableCell>
+                  <Badge variant={row.role === "owner" ? "default" : "secondary"}>{row.role}</Badge>
+                </TableCell>
+                <TableCell>
+                  {row.kind === "invitation" ? (
+                    <Badge variant="outline">Pending invite</Badge>
+                  ) : (
+                    <Badge variant="outline" className="border-green-200 text-green-600">
+                      Active
                     </Badge>
-                  </TableCell>
-                  <TableCell>
-                    {row.kind === "invitation" ? (
-                      <Badge variant="outline">Pending invite</Badge>
-                    ) : (
-                      <Badge variant="outline" className="text-green-600 border-green-200">
-                        Active
-                      </Badge>
-                    )}
-                  </TableCell>
-                  <TableCell>
-                    {row.role !== "owner" && (
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button variant="ghost" size="icon" className="size-8">
-                            <MoreHorizontal className="size-4" />
-                            <span className="sr-only">Actions</span>
-                          </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end">
-                          {row.kind === "member" && (
-                            <>
-                              {row.role !== "admin" && (
-                                <DropdownMenuItem onClick={() => handleChangeRole(row.id, "admin")}>
-                                  Make admin
-                                </DropdownMenuItem>
-                              )}
-                              {row.role !== "member" && (
-                                <DropdownMenuItem
-                                  onClick={() => handleChangeRole(row.id, "member")}
-                                >
-                                  Make member
-                                </DropdownMenuItem>
-                              )}
-                              <DropdownMenuSeparator />
-                              <DropdownMenuItem
-                                className="text-destructive"
-                                onClick={() => handleRemoveMember(row.id)}
-                              >
-                                Remove
+                  )}
+                </TableCell>
+                <TableCell>
+                  {row.role !== "owner" && (
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon" className="size-8">
+                          <MoreHorizontal className="size-4" />
+                          <span className="sr-only">Actions</span>
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        {row.kind === "member" && (
+                          <>
+                            {row.role !== "admin" && (
+                              <DropdownMenuItem onClick={() => handleChangeRole(row.id, "admin")}>
+                                Make admin
                               </DropdownMenuItem>
-                            </>
-                          )}
-                          {row.kind === "invitation" && (
+                            )}
+                            {row.role !== "member" && (
+                              <DropdownMenuItem onClick={() => handleChangeRole(row.id, "member")}>
+                                Make member
+                              </DropdownMenuItem>
+                            )}
+                            <DropdownMenuSeparator />
                             <DropdownMenuItem
                               className="text-destructive"
-                              onClick={() => handleCancelInvitation(row.id)}
+                              onClick={() => handleRemoveMember(row.id)}
                             >
-                              Cancel invite
+                              Remove
                             </DropdownMenuItem>
-                          )}
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    )}
-                  </TableCell>
-                </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
-      </div>
+                          </>
+                        )}
+                        {row.kind === "invitation" && (
+                          <DropdownMenuItem
+                            className="text-destructive"
+                            onClick={() => handleCancelInvitation(row.id)}
+                          >
+                            Cancel invite
+                          </DropdownMenuItem>
+                        )}
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  )}
+                </TableCell>
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
 
       <InviteModal open={inviteOpen} orgId={orgId} onClose={() => setInviteOpen(false)} />
-    </div>
+    </>
   );
 }
diff --git a/apps/web/src/features/organization/pages/accept-invitation-page.tsx b/apps/web/src/features/organization/pages/accept-invitation-page.tsx
index 5a024df..5e0d9e1 100644
--- a/apps/web/src/features/organization/pages/accept-invitation-page.tsx
+++ b/apps/web/src/features/organization/pages/accept-invitation-page.tsx
@@ -86,7 +86,7 @@ export default function AcceptInvitationPage({ invitationId }: AcceptInvitationP
         <CardHeader className="text-center">
           <CardTitle className="text-2xl font-semibold">Organisation Invitation</CardTitle>
           <CardDescription>
-            You've been invited to join an organisation on Open Clock.
+            You've been invited to join an organisation on better clock.
           </CardDescription>
         </CardHeader>
         <CardContent className="flex flex-col gap-3">
diff --git a/apps/web/src/features/organization/pages/teams-page.tsx b/apps/web/src/features/organization/pages/teams-page.tsx
index 17c587d..33e82ae 100644
--- a/apps/web/src/features/organization/pages/teams-page.tsx
+++ b/apps/web/src/features/organization/pages/teams-page.tsx
@@ -1,8 +1,11 @@
 import { useQuery } from "@tanstack/react-query";
+
+import { AppPage, AppPageHeader, AppSurface } from "@/components/app-page-shell";
 import { authClient } from "@/lib/auth-client";
-import { MembersTable } from "@/features/organization/components/members-table";
 import { Skeleton } from "@open-learn/ui/components/skeleton";
 
+import { MembersTable } from "../components/members-table";
+
 export default function TeamsPage() {
   const sessionQuery = useQuery({
     queryKey: ["session"],
@@ -15,7 +18,7 @@ export default function TeamsPage() {
 
   if (sessionQuery.isPending) {
     return (
-      <div className="p-6 space-y-4">
+      <div className="space-y-4 p-6">
         <Skeleton className="h-8 w-40" />
         <Skeleton className="h-64 w-full" />
       </div>
@@ -31,14 +34,14 @@ export default function TeamsPage() {
   }
 
   return (
-    <div className="p-6 space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold">Teams</h1>
-        <p className="text-sm text-muted-foreground mt-1">
-          Manage the members of your organisation.
-        </p>
-      </div>
-      <MembersTable orgId={activeOrgId} />
-    </div>
+    <AppPage>
+      <AppPageHeader
+        title="Teams"
+        description="Manage members, pending invitations, and role changes for the active organisation."
+      />
+      <AppSurface>
+        <MembersTable orgId={activeOrgId} />
+      </AppSurface>
+    </AppPage>
   );
 }
diff --git a/apps/web/src/features/projects/components/project-row-actions.tsx b/apps/web/src/features/projects/components/project-row-actions.tsx
index 13b06eb..21667fb 100644
--- a/apps/web/src/features/projects/components/project-row-actions.tsx
+++ b/apps/web/src/features/projects/components/project-row-actions.tsx
@@ -1,25 +1,6 @@
 import type { TrackerProjectFull } from "@open-learn/api/modules/time-tracker/time-tracker.schema";
 
-import { MoreVerticalIcon, ArchiveIcon, ArchiveRestoreIcon, Trash2Icon } from "lucide-react";
-import { Button } from "@open-learn/ui/components/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@open-learn/ui/components/dropdown-menu";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@open-learn/ui/components/alert-dialog";
+import { RowActions } from "@/components/row-actions";
 
 import { useDeleteProject, useUpdateProject } from "../services/mutations";
 
@@ -31,69 +12,22 @@ export function ProjectRowActions({ project }: ProjectRowActionsProps) {
   const updateProject = useUpdateProject();
   const deleteProject = useDeleteProject();
 
-  function handleToggleArchive() {
-    updateProject.mutate({ id: project.id, isArchived: !project.isArchived });
-  }
-
-  function handleDelete() {
-    deleteProject.mutate({ id: project.id });
-  }
-
   return (
-    <AlertDialog>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon" className="h-8 w-8">
-            <MoreVerticalIcon className="h-4 w-4" />
-            <span className="sr-only">More options</span>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuItem onClick={handleToggleArchive} disabled={updateProject.isPending}>
-            {project.isArchived ? (
-              <>
-                <ArchiveRestoreIcon className="mr-2 h-4 w-4" />
-                Unarchive
-              </>
-            ) : (
-              <>
-                <ArchiveIcon className="mr-2 h-4 w-4" />
-                Archive
-              </>
-            )}
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <AlertDialogTrigger asChild>
-            <DropdownMenuItem
-              className="text-destructive focus:text-destructive"
-              onSelect={(e) => e.preventDefault()}
-            >
-              <Trash2Icon className="mr-2 h-4 w-4" />
-              Delete
-            </DropdownMenuItem>
-          </AlertDialogTrigger>
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Delete project</AlertDialogTitle>
-          <AlertDialogDescription>
-            Are you sure you want to permanently delete{" "}
-            <span className="font-medium">{project.name}</span>? Time entries linked to this project
-            will have their project cleared.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction
-            onClick={handleDelete}
-            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-          >
-            Delete
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
+    <RowActions
+      isArchived={project.isArchived}
+      onToggleArchive={() =>
+        updateProject.mutate({ id: project.id, isArchived: !project.isArchived })
+      }
+      isArchivePending={updateProject.isPending}
+      onDelete={() => deleteProject.mutate({ id: project.id })}
+      deleteTitle="Delete project"
+      deleteDescription={
+        <>
+          Are you sure you want to permanently delete{" "}
+          <span className="font-medium">{project.name}</span>? Time entries linked to this project
+          will have their project cleared.
+        </>
+      }
+    />
   );
 }
diff --git a/apps/web/src/features/projects/pages/projects-page.tsx b/apps/web/src/features/projects/pages/projects-page.tsx
index 9bc32bb..5235e96 100644
--- a/apps/web/src/features/projects/pages/projects-page.tsx
+++ b/apps/web/src/features/projects/pages/projects-page.tsx
@@ -1,24 +1,28 @@
 import type { TrackerProjectFull } from "@open-learn/api/modules/time-tracker/time-tracker.schema";
 
-import { useState, useMemo } from "react";
+import { useMemo, useState } from "react";
+import { ArrowUpDownIcon, ArrowUpIcon, PencilIcon, SearchIcon } from "lucide-react";
+
 import {
-  SearchIcon,
-  ChevronDownIcon,
-  StarIcon,
-  PencilIcon,
-  ArrowUpIcon,
-  ArrowUpDownIcon,
-} from "lucide-react";
+  AppPage,
+  AppPageHeader,
+  AppPageHeaderMeta,
+  AppSurface,
+  AppSurfaceHeader,
+} from "@/components/app-page-shell";
+import { useClientsQuery } from "@/features/clients/services/queries";
 import { Button } from "@open-learn/ui/components/button";
 import { Checkbox } from "@open-learn/ui/components/checkbox";
 import { Input } from "@open-learn/ui/components/input";
-import { Skeleton } from "@open-learn/ui/components/skeleton";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@open-learn/ui/components/dropdown-menu";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@open-learn/ui/components/select";
+import { ToggleGroup, ToggleGroupItem } from "@open-learn/ui/components/toggle-group";
+import { Skeleton } from "@open-learn/ui/components/skeleton";
 import {
   Table,
   TableBody,
@@ -28,12 +32,15 @@ import {
   TableRow,
 } from "@open-learn/ui/components/table";
 
-import { useClientsQuery } from "@/features/clients/services/queries";
-import { useProjectsQuery } from "../services/queries";
+import { ArchivedBadge } from "@/components/archived-badge";
+import { useTableSelection } from "@/hooks/use-table-selection";
+import { formatCurrencyAmount, formatDurationHM } from "@/utils/format";
+
 import { CreateProjectDialog } from "../components/create-project-dialog";
 import { ProjectColorDot } from "../components/project-color-dot";
 import { ProjectInlineEditor } from "../components/project-inline-editor";
 import { ProjectRowActions } from "../components/project-row-actions";
+import { useProjectsQuery } from "../services/queries";
 
 type StatusFilter = "active" | "archived" | "all";
 type AccessFilter = "all" | "public" | "private" | "team";
@@ -41,15 +48,32 @@ type BillingFilter = "all" | "billable" | "non-billable";
 type SortKey = "name" | "client" | "tracked" | "amount";
 type SortDir = "asc" | "desc";
 
-function formatTrackedHours(seconds: number): string {
-  const h = Math.floor(seconds / 3600);
-  const m = Math.floor((seconds % 3600) / 60);
-  return `${h}h ${String(m).padStart(2, "0")}m`;
+interface SortableHeadProps {
+  label: string;
+  col: SortKey;
+  sortKey: SortKey;
+  sortDir: SortDir;
+  onSort: (col: SortKey) => void;
 }
 
-function formatAmount(amount: number, currency: string | null): string {
-  const c = currency ?? "USD";
-  return `${amount.toFixed(2)} ${c}`;
+function SortableHead({ label, col, sortKey, sortDir, onSort }: SortableHeadProps) {
+  const active = sortKey === col;
+  return (
+    <button
+      type="button"
+      onClick={() => onSort(col)}
+      className="flex items-center gap-1 text-xs font-medium uppercase tracking-wide text-muted-foreground transition-colors hover:text-foreground"
+    >
+      {label}
+      {active ? (
+        <ArrowUpIcon
+          className={`h-3 w-3 transition-transform ${sortDir === "desc" ? "rotate-180" : ""}`}
+        />
+      ) : (
+        <ArrowUpDownIcon className="h-3 w-3 opacity-40" />
+      )}
+    </button>
+  );
 }
 
 export default function ProjectsPage() {
@@ -60,7 +84,6 @@ export default function ProjectsPage() {
   const [clientFilter, setClientFilter] = useState<number | null>(null);
   const [search, setSearch] = useState("");
   const [editingId, setEditingId] = useState<number | null>(null);
-  const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
   const [sortKey, setSortKey] = useState<SortKey>("name");
   const [sortDir, setSortDir] = useState<SortDir>("asc");
 
@@ -70,27 +93,44 @@ export default function ProjectsPage() {
     showArchived,
     clientId: clientFilter,
     access: accessFilter === "all" ? null : accessFilter,
-    hasBilling: billingFilter === "all" ? null : billingFilter === "billable" ? true : false,
+    hasBilling: billingFilter === "all" ? null : billingFilter === "billable",
   });
 
   const { data: clients } = useClientsQuery(false);
 
   const filtered = useMemo(() => {
-    let list = (projects ?? []).filter((p) => {
-      const matchesSearch = p.name.toLowerCase().includes(search.toLowerCase());
-      if (!matchesSearch) return false;
-      if (statusFilter === "active" && p.isArchived) return false;
-      if (statusFilter === "archived" && !p.isArchived) return false;
+    let list = (projects ?? []).filter((project) => {
+      const matchesSearch = project.name.toLowerCase().includes(search.toLowerCase());
+
+      if (!matchesSearch) {
+        return false;
+      }
+
+      if (statusFilter === "active" && project.isArchived) {
+        return false;
+      }
+
+      if (statusFilter === "archived" && !project.isArchived) {
+        return false;
+      }
+
       return true;
     });
 
-    list = [...list].sort((a, b) => {
-      let cmp = 0;
-      if (sortKey === "name") cmp = a.name.localeCompare(b.name);
-      else if (sortKey === "client") cmp = (a.clientName ?? "").localeCompare(b.clientName ?? "");
-      else if (sortKey === "tracked") cmp = a.trackedSeconds - b.trackedSeconds;
-      else if (sortKey === "amount") cmp = a.amount - b.amount;
-      return sortDir === "asc" ? cmp : -cmp;
+    list = [...list].sort((left, right) => {
+      let comparison = 0;
+
+      if (sortKey === "name") {
+        comparison = left.name.localeCompare(right.name);
+      } else if (sortKey === "client") {
+        comparison = (left.clientName ?? "").localeCompare(right.clientName ?? "");
+      } else if (sortKey === "tracked") {
+        comparison = left.trackedSeconds - right.trackedSeconds;
+      } else if (sortKey === "amount") {
+        comparison = left.amount - right.amount;
+      }
+
+      return sortDir === "asc" ? comparison : -comparison;
     });
 
     return list;
@@ -98,158 +138,106 @@ export default function ProjectsPage() {
 
   function toggleSort(key: SortKey) {
     if (sortKey === key) {
-      setSortDir((d) => (d === "asc" ? "desc" : "asc"));
-    } else {
-      setSortKey(key);
-      setSortDir("asc");
+      setSortDir((current) => (current === "asc" ? "desc" : "asc"));
+      return;
     }
-  }
 
-  function toggleSelect(id: number) {
-    setSelectedIds((prev) => {
-      const next = new Set(prev);
-      next.has(id) ? next.delete(id) : next.add(id);
-      return next;
-    });
+    setSortKey(key);
+    setSortDir("asc");
   }
 
-  function toggleSelectAll() {
-    if (selectedIds.size === filtered.length) {
-      setSelectedIds(new Set());
-    } else {
-      setSelectedIds(new Set(filtered.map((p) => p.id)));
-    }
-  }
+  const { selectedIds, toggleSelect, toggleSelectAll, allSelected, someSelected } =
+    useTableSelection({ items: filtered });
 
-  const allSelected = filtered.length > 0 && selectedIds.size === filtered.length;
-  const someSelected = selectedIds.size > 0 && selectedIds.size < filtered.length;
+  const activeProjects = (projects ?? []).filter((project) => !project.isArchived).length;
 
-  function SortableHead({ label, col }: { label: string; col: SortKey }) {
-    const active = sortKey === col;
-    return (
-      <button
-        type="button"
-        onClick={() => toggleSort(col)}
-        className="flex items-center gap-1 text-xs font-medium uppercase tracking-wide text-muted-foreground hover:text-foreground transition-colors"
+  return (
+    <AppPage>
+      <AppPageHeader
+        title="Projects"
+        description="Control what work can be tracked, who can access it, and how it rolls into billing."
+        actions={<Button onClick={() => setDialogOpen(true)}>Create new project</Button>}
       >
-        {label}
-        {active ? (
-          <ArrowUpIcon
-            className={`h-3 w-3 transition-transform ${sortDir === "desc" ? "rotate-180" : ""}`}
-          />
-        ) : (
-          <ArrowUpDownIcon className="h-3 w-3 opacity-40" />
-        )}
-      </button>
-    );
-  }
+        <AppPageHeaderMeta
+          items={[
+            { label: "Total", value: String(projects?.length ?? 0) },
+            { label: "Active", value: String(activeProjects) },
+            { label: "Selected", value: String(selectedIds.size) },
+          ]}
+        />
+      </AppPageHeader>
 
-  return (
-    <div className="space-y-6">
-      {/* Page header */}
-      <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-semibold">Projects</h1>
-        <Button onClick={() => setDialogOpen(true)}>Create new project</Button>
-      </div>
-
-      {/* Filter bar */}
-      <div className="flex flex-wrap items-center gap-2">
-        {/* Status */}
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline" size="sm" className="gap-1">
-              {statusFilter === "active"
-                ? "Active"
-                : statusFilter === "archived"
-                  ? "Archived"
-                  : "All"}
-              <ChevronDownIcon className="h-3.5 w-3.5" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem onClick={() => setStatusFilter("active")}>Active</DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setStatusFilter("archived")}>
-              Archived
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setStatusFilter("all")}>All</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-
-        {/* Client */}
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline" size="sm" className="gap-1">
-              {clientFilter
-                ? ((clients ?? []).find((c) => c.id === clientFilter)?.name ?? "Client")
-                : "Client"}
-              <ChevronDownIcon className="h-3.5 w-3.5" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem onClick={() => setClientFilter(null)}>All clients</DropdownMenuItem>
-            {(clients ?? []).map((c) => (
-              <DropdownMenuItem key={c.id} onClick={() => setClientFilter(c.id)}>
-                {c.name}
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
-
-        {/* Access */}
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline" size="sm" className="gap-1">
-              {accessFilter === "all"
-                ? "Access"
-                : accessFilter.charAt(0).toUpperCase() + accessFilter.slice(1)}
-              <ChevronDownIcon className="h-3.5 w-3.5" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem onClick={() => setAccessFilter("all")}>All</DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setAccessFilter("public")}>Public</DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setAccessFilter("private")}>Private</DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setAccessFilter("team")}>Team</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-
-        {/* Billing */}
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline" size="sm" className="gap-1">
-              {billingFilter === "all"
-                ? "Billing"
-                : billingFilter === "billable"
-                  ? "Billable"
-                  : "Non-billable"}
-              <ChevronDownIcon className="h-3.5 w-3.5" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem onClick={() => setBillingFilter("all")}>All</DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setBillingFilter("billable")}>
-              Billable
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setBillingFilter("non-billable")}>
-              Non-billable
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-
-        {/* Search */}
-        <div className="relative ml-auto">
-          <SearchIcon className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-          <Input
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            placeholder="Find by name"
-            className="pl-8 w-56"
-          />
+      <AppSurface>
+        <AppSurfaceHeader
+          label="Portfolio"
+          title="Filter and organise projects"
+          description="Keep status, access, billing, and search controls together in one clear management surface."
+        />
+
+        <div className="flex flex-wrap items-center gap-3 border-b border-border/60 px-4 py-3">
+          <ToggleGroup
+            type="single"
+            variant="outline"
+            size="sm"
+            value={statusFilter}
+            onValueChange={(v) => v && setStatusFilter(v as StatusFilter)}
+          >
+            <ToggleGroupItem value="active">Active</ToggleGroupItem>
+            <ToggleGroupItem value="archived">Archived</ToggleGroupItem>
+            <ToggleGroupItem value="all">All</ToggleGroupItem>
+          </ToggleGroup>
+
+          <Select
+            value={clientFilter?.toString() ?? "all"}
+            onValueChange={(v) => setClientFilter(v === "all" ? null : Number(v))}
+          >
+            <SelectTrigger size="sm" className="w-36">
+              <SelectValue placeholder="Client" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All clients</SelectItem>
+              {(clients ?? []).map((client) => (
+                <SelectItem key={client.id} value={client.id.toString()}>
+                  {client.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          <Select value={accessFilter} onValueChange={(v) => setAccessFilter(v as AccessFilter)}>
+            <SelectTrigger size="sm" className="w-32">
+              <SelectValue placeholder="Access" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All access</SelectItem>
+              <SelectItem value="public">Public</SelectItem>
+              <SelectItem value="private">Private</SelectItem>
+              <SelectItem value="team">Team</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <Select value={billingFilter} onValueChange={(v) => setBillingFilter(v as BillingFilter)}>
+            <SelectTrigger size="sm" className="w-32">
+              <SelectValue placeholder="Billing" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All billing</SelectItem>
+              <SelectItem value="billable">Billable</SelectItem>
+              <SelectItem value="non-billable">Non-billable</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <div className="relative ml-auto">
+            <SearchIcon className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+              placeholder="Find by name"
+              className="w-52 pl-8"
+            />
+          </div>
         </div>
-      </div>
 
-      {/* Table */}
-      <div className="rounded-md border">
         <Table>
           <TableHeader>
             <TableRow>
@@ -261,16 +249,40 @@ export default function ProjectsPage() {
                 />
               </TableHead>
               <TableHead>
-                <SortableHead label="Name" col="name" />
+                <SortableHead
+                  label="Name"
+                  col="name"
+                  sortKey={sortKey}
+                  sortDir={sortDir}
+                  onSort={toggleSort}
+                />
               </TableHead>
               <TableHead className="w-36">
-                <SortableHead label="Client" col="client" />
+                <SortableHead
+                  label="Client"
+                  col="client"
+                  sortKey={sortKey}
+                  sortDir={sortDir}
+                  onSort={toggleSort}
+                />
               </TableHead>
               <TableHead className="w-28">
-                <SortableHead label="Tracked" col="tracked" />
+                <SortableHead
+                  label="Tracked"
+                  col="tracked"
+                  sortKey={sortKey}
+                  sortDir={sortDir}
+                  onSort={toggleSort}
+                />
               </TableHead>
               <TableHead className="w-32">
-                <SortableHead label="Amount" col="amount" />
+                <SortableHead
+                  label="Amount"
+                  col="amount"
+                  sortKey={sortKey}
+                  sortDir={sortDir}
+                  onSort={toggleSort}
+                />
               </TableHead>
               <TableHead className="w-24">Access</TableHead>
               <TableHead className="w-24" />
@@ -306,10 +318,10 @@ export default function ProjectsPage() {
             )}
           </TableBody>
         </Table>
-      </div>
+      </AppSurface>
 
       <CreateProjectDialog open={dialogOpen} onOpenChange={setDialogOpen} />
-    </div>
+    </AppPage>
   );
 }
 
@@ -321,8 +333,6 @@ interface ProjectTableRowProps {
 }
 
 function ProjectTableRow({ project, selected, onToggleSelect, onEdit }: ProjectTableRowProps) {
-  const [starred, setStarred] = useState(false);
-
   return (
     <TableRow className="group">
       <TableCell>
@@ -336,32 +346,17 @@ function ProjectTableRow({ project, selected, onToggleSelect, onEdit }: ProjectT
         <div className="flex items-center gap-2">
           <ProjectColorDot color={project.color} />
           <span className="font-medium">{project.name}</span>
-          {project.isArchived && (
-            <span className="rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
-              archived
-            </span>
-          )}
+          {project.isArchived ? <ArchivedBadge /> : null}
         </div>
       </TableCell>
       <TableCell className="text-muted-foreground">{project.clientName ?? ""}</TableCell>
-      <TableCell className="tabular-nums">{formatTrackedHours(project.trackedSeconds)}</TableCell>
+      <TableCell className="tabular-nums">{formatDurationHM(project.trackedSeconds)}</TableCell>
       <TableCell className="tabular-nums">
-        {formatAmount(project.amount, project.clientCurrency)}
+        {formatCurrencyAmount(project.amount, project.clientCurrency)}
       </TableCell>
       <TableCell className="capitalize">{project.access}</TableCell>
       <TableCell>
         <div className="flex items-center justify-end gap-1 opacity-0 transition-opacity group-hover:opacity-100">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-8 text-muted-foreground hover:text-foreground"
-            onClick={() => setStarred((s) => !s)}
-            aria-label="Star project"
-          >
-            <StarIcon
-              className={`size-4 transition-colors ${starred ? "fill-yellow-400 text-yellow-400" : ""}`}
-            />
-          </Button>
           <Button
             variant="ghost"
             size="icon"
@@ -381,8 +376,8 @@ function ProjectTableRow({ project, selected, onToggleSelect, onEdit }: ProjectT
 function ProjectTableSkeleton() {
   return (
     <>
-      {[1, 2, 3].map((i) => (
-        <TableRow key={i}>
+      {[1, 2, 3].map((item) => (
+        <TableRow key={item}>
           <TableCell>
             <Skeleton className="size-4" />
           </TableCell>
diff --git a/apps/web/src/features/tags/components/tags-table.tsx b/apps/web/src/features/tags/components/tags-table.tsx
index 5a0680e..e5131c1 100644
--- a/apps/web/src/features/tags/components/tags-table.tsx
+++ b/apps/web/src/features/tags/components/tags-table.tsx
@@ -1,6 +1,8 @@
 import * as React from "react";
 import { MoreHorizontal, Pencil, Plus, Search } from "lucide-react";
 
+import { useTableSelection } from "@/hooks/use-table-selection";
+
 import { Button } from "@open-learn/ui/components/button";
 import { Checkbox } from "@open-learn/ui/components/checkbox";
 import {
@@ -148,7 +150,6 @@ export function TagsTable() {
 
   const [search, setSearch] = React.useState("");
   const [newTagName, setNewTagName] = React.useState("");
-  const [selectedIds, setSelectedIds] = React.useState<Set<number>>(new Set());
 
   const tags: Tag[] = tagsQuery.data ?? [];
 
@@ -156,43 +157,8 @@ export function TagsTable() {
     ? tags.filter((t) => t.name.toLowerCase().includes(search.toLowerCase()))
     : tags;
 
-  function toggleSelect(id: number) {
-    setSelectedIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      return next;
-    });
-  }
-
-  function toggleSelectAll() {
-    setSelectedIds((prev) => {
-      const next = new Set(prev);
-      const areAllFilteredSelected =
-        filtered.length > 0 && filtered.every((tag) => prev.has(tag.id));
-
-      if (areAllFilteredSelected) {
-        for (const tag of filtered) {
-          next.delete(tag.id);
-        }
-      } else {
-        for (const tag of filtered) {
-          next.add(tag.id);
-        }
-      }
-      return next;
-    });
-  }
-
-  const selectedFilteredCount = filtered.reduce(
-    (count, tag) => (selectedIds.has(tag.id) ? count + 1 : count),
-    0,
-  );
-  const allSelected = filtered.length > 0 && selectedFilteredCount === filtered.length;
-  const someSelected = selectedFilteredCount > 0 && selectedFilteredCount < filtered.length;
+  const { selectedIds, toggleSelect, toggleSelectAll, allSelected, someSelected } =
+    useTableSelection({ items: filtered });
 
   function handleAdd() {
     const name = newTagName.trim();
@@ -213,9 +179,9 @@ export function TagsTable() {
   }
 
   return (
-    <div className="space-y-4">
+    <>
       {/* Toolbar */}
-      <div className="flex items-center justify-between gap-2">
+      <div className="flex items-center justify-between gap-2 border-b border-border/60 px-4 py-4">
         <div className="flex items-center gap-2">
           <div className="relative">
             <Search className="absolute left-2.5 top-2.5 size-4 text-muted-foreground" />
@@ -248,57 +214,55 @@ export function TagsTable() {
       </div>
 
       {/* Table */}
-      <div className="rounded-md border">
-        <Table>
-          <TableHeader>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-10">
+              <Checkbox
+                checked={allSelected ? true : someSelected ? "indeterminate" : false}
+                onCheckedChange={toggleSelectAll}
+                aria-label="Select all"
+              />
+            </TableHead>
+            <TableHead>{TAGS_COPY.columnName}</TableHead>
+            <TableHead className="w-24" />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {tagsQuery.isPending ? (
+            <>
+              {[1, 2, 3].map((i) => (
+                <TableRow key={i}>
+                  <TableCell>
+                    <Skeleton className="size-4" />
+                  </TableCell>
+                  <TableCell>
+                    <Skeleton className="h-4 w-40" />
+                  </TableCell>
+                  <TableCell />
+                </TableRow>
+              ))}
+            </>
+          ) : filtered.length === 0 ? (
             <TableRow>
-              <TableHead className="w-10">
-                <Checkbox
-                  checked={allSelected ? true : someSelected ? "indeterminate" : false}
-                  onCheckedChange={toggleSelectAll}
-                  aria-label="Select all"
-                />
-              </TableHead>
-              <TableHead>{TAGS_COPY.columnName}</TableHead>
-              <TableHead className="w-24" />
+              <TableCell colSpan={3} className="py-8 text-center text-muted-foreground">
+                {TAGS_COPY.emptyState}
+              </TableCell>
             </TableRow>
-          </TableHeader>
-          <TableBody>
-            {tagsQuery.isPending ? (
-              <>
-                {[1, 2, 3].map((i) => (
-                  <TableRow key={i}>
-                    <TableCell>
-                      <Skeleton className="size-4" />
-                    </TableCell>
-                    <TableCell>
-                      <Skeleton className="h-4 w-40" />
-                    </TableCell>
-                    <TableCell />
-                  </TableRow>
-                ))}
-              </>
-            ) : filtered.length === 0 ? (
-              <TableRow>
-                <TableCell colSpan={3} className="py-8 text-center text-muted-foreground">
-                  {TAGS_COPY.emptyState}
-                </TableCell>
-              </TableRow>
-            ) : (
-              filtered.map((tag) => (
-                <TagRow
-                  key={tag.id}
-                  tag={tag}
-                  selected={selectedIds.has(tag.id)}
-                  onToggleSelect={() => toggleSelect(tag.id)}
-                  onSave={handleSave}
-                  onDelete={handleDelete}
-                />
-              ))
-            )}
-          </TableBody>
-        </Table>
-      </div>
-    </div>
+          ) : (
+            filtered.map((tag) => (
+              <TagRow
+                key={tag.id}
+                tag={tag}
+                selected={selectedIds.has(tag.id)}
+                onToggleSelect={() => toggleSelect(tag.id)}
+                onSave={handleSave}
+                onDelete={handleDelete}
+              />
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </>
   );
 }
diff --git a/apps/web/src/features/tags/pages/tags-page.tsx b/apps/web/src/features/tags/pages/tags-page.tsx
index 59e70a8..eee68a3 100644
--- a/apps/web/src/features/tags/pages/tags-page.tsx
+++ b/apps/web/src/features/tags/pages/tags-page.tsx
@@ -1,8 +1,11 @@
 import { useQuery } from "@tanstack/react-query";
+
+import { AppPage, AppPageHeader, AppSurface } from "@/components/app-page-shell";
 import { authClient } from "@/lib/auth-client";
 import { Skeleton } from "@open-learn/ui/components/skeleton";
-import { TagsTable } from "@/features/tags/components/tags-table";
-import { TAGS_COPY } from "@/features/tags/constants";
+
+import { TagsTable } from "../components/tags-table";
+import { TAGS_COPY } from "../constants";
 
 export default function TagsPage() {
   const sessionQuery = useQuery({
@@ -13,7 +16,7 @@ export default function TagsPage() {
 
   if (sessionQuery.isPending) {
     return (
-      <div className="p-6 space-y-4">
+      <div className="space-y-4 p-6">
         <Skeleton className="h-8 w-24" />
         <Skeleton className="h-64 w-full" />
       </div>
@@ -28,9 +31,14 @@ export default function TagsPage() {
   }
 
   return (
-    <div className="space-y-6">
-      <h1 className="text-2xl font-semibold">{TAGS_COPY.pageTitle}</h1>
-      <TagsTable />
-    </div>
+    <AppPage>
+      <AppPageHeader
+        title={TAGS_COPY.pageTitle}
+        description="Maintain a clear tagging system so filters, reports, and time entry stay predictable."
+      />
+      <AppSurface>
+        <TagsTable />
+      </AppSurface>
+    </AppPage>
   );
 }
diff --git a/apps/web/src/features/tasks/pages/tasks-page.tsx b/apps/web/src/features/tasks/pages/tasks-page.tsx
index 9378705..a8f7c55 100644
--- a/apps/web/src/features/tasks/pages/tasks-page.tsx
+++ b/apps/web/src/features/tasks/pages/tasks-page.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 
+import { AppPage, AppPageHeader, AppPageHeaderMeta } from "@/components/app-page-shell";
 import { useProjectsQuery } from "@/features/projects/services/queries";
 import { Badge } from "@open-learn/ui/components/badge";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@open-learn/ui/components/tabs";
@@ -15,44 +16,51 @@ export function TasksPage() {
   const projectsQuery = useProjectsQuery({ showArchived: false });
 
   return (
-    <div className="flex w-full flex-col gap-6">
-      <div className="flex flex-col gap-3">
-        <div className="flex flex-col gap-1">
-          <h1 className="text-2xl font-semibold tracking-tight">{TASK_COPY.pageTitle}</h1>
-          <p className="text-sm text-muted-foreground">{TASK_COPY.pageDescription}</p>
-        </div>
+    <Tabs value={view} onValueChange={setView}>
+      <AppPage>
+        <AppPageHeader
+          title={TASK_COPY.pageTitle}
+          description="Switch between a dense planning table and a flow-oriented board without losing the same task context."
+          actions={
+            <TabsList variant="line">
+              <TabsTrigger value="table">Table</TabsTrigger>
+              <TabsTrigger value="kanban">
+                Kanban
+                <Badge
+                  variant="outline"
+                  className="rounded-none px-1.5 py-0 text-[10px] uppercase tracking-[0.18em]"
+                >
+                  New
+                </Badge>
+              </TabsTrigger>
+            </TabsList>
+          }
+        >
+          <AppPageHeaderMeta
+            items={[
+              { label: "Tasks", value: String(tasksQuery.data?.length ?? 0) },
+              { label: "Projects", value: String(projectsQuery.data?.length ?? 0) },
+              { label: "View", value: view === "table" ? "Table" : "Kanban" },
+            ]}
+          />
+        </AppPageHeader>
 
-        <Tabs value={view} onValueChange={setView} className="gap-3">
-          <TabsList variant="line">
-            <TabsTrigger value="table">Table</TabsTrigger>
-            <TabsTrigger value="kanban">
-              Kanban
-              <Badge
-                variant="outline"
-                className="rounded-none px-1.5 py-0 text-[10px] uppercase tracking-[0.18em]"
-              >
-                New
-              </Badge>
-            </TabsTrigger>
-          </TabsList>
+        <TabsContent value="table" className="mt-0">
+          <TasksTable
+            tasks={tasksQuery.data ?? []}
+            projects={projectsQuery.data ?? []}
+            isLoading={tasksQuery.isLoading}
+          />
+        </TabsContent>
 
-          <TabsContent value="table">
-            <TasksTable
-              tasks={tasksQuery.data ?? []}
-              projects={projectsQuery.data ?? []}
-              isLoading={tasksQuery.isLoading}
-            />
-          </TabsContent>
-
-          <TabsContent value="kanban">
-            <TasksKanban
-              tasks={tasksQuery.data ?? []}
-              projects={projectsQuery.data ?? []}
-              isLoading={tasksQuery.isLoading}
-            />
-          </TabsContent>
-        </Tabs>
-      </div>
-    </div>
+        <TabsContent value="kanban" className="mt-0">
+          <TasksKanban
+            tasks={tasksQuery.data ?? []}
+            projects={projectsQuery.data ?? []}
+            isLoading={tasksQuery.isLoading}
+          />
+        </TabsContent>
+      </AppPage>
+    </Tabs>
   );
 }
diff --git a/apps/web/src/features/time-tracker/components/activity-inline-editor.tsx b/apps/web/src/features/time-tracker/components/activity-inline-editor.tsx
index 7fe0b92..adc5698 100644
--- a/apps/web/src/features/time-tracker/components/activity-inline-editor.tsx
+++ b/apps/web/src/features/time-tracker/components/activity-inline-editor.tsx
@@ -23,7 +23,6 @@ import {
   getEditableEntryValues,
 } from "../utils/date-time";
 import { ActivityReferenceInput } from "./activity-reference-input";
-import { CompactBillableToggle } from "./compact-billable-toggle";
 import { CompactDatePicker } from "./compact-date-picker";
 import { CompactProjectPicker } from "./compact-project-picker";
 import { CompactTagPicker } from "./compact-tag-picker";
@@ -37,7 +36,6 @@ const activityEntrySchema = z
     projectId: z.number().nullable(),
     taskId: z.number().nullable(),
     tagIds: z.array(z.number()),
-    isBillable: z.boolean(),
   })
   .superRefine((value, ctx) => {
     const startAt = combineDateAndTime(value.date, value.startTime);
@@ -91,7 +89,7 @@ export function ActivityInlineEditor({
         projectId: value.projectId,
         taskId: value.taskId,
         tagIds: value.tagIds,
-        isBillable: value.isBillable,
+        isBillable: false,
         startAt: startAt.toISOString(),
         endAt: endAt.toISOString(),
       });
@@ -183,15 +181,6 @@ export function ActivityInlineEditor({
                         )}
                       </form.Field>
 
-                      <form.Field name="isBillable">
-                        {(billableField) => (
-                          <CompactBillableToggle
-                            checked={billableField.state.value}
-                            onCheckedChange={billableField.handleChange}
-                          />
-                        )}
-                      </form.Field>
-
                       <div className="flex flex-wrap gap-2 md:flex-nowrap">
                         <form.Field name="startTime">
                           {(field) => (
diff --git a/apps/web/src/features/time-tracker/components/activity-reference-input.tsx b/apps/web/src/features/time-tracker/components/activity-reference-input.tsx
index 78609e4..19e1ea5 100644
--- a/apps/web/src/features/time-tracker/components/activity-reference-input.tsx
+++ b/apps/web/src/features/time-tracker/components/activity-reference-input.tsx
@@ -1,7 +1,6 @@
 import type { TaskListItem } from "@open-learn/api/modules/task/task.schema";
 
-import { Button } from "@open-learn/ui/components/button";
-import { ButtonGroup } from "@open-learn/ui/components/button-group";
+import { PencilLineIcon, CheckSquareIcon } from "lucide-react";
 import { Input } from "@open-learn/ui/components/input";
 
 import { CompactTaskPicker } from "./compact-task-picker";
@@ -32,32 +31,30 @@ export function ActivityReferenceInput({
   onTaskChange,
   tasks,
 }: ActivityReferenceInputProps) {
+  const toggle = () => {
+    if (mode === "description") {
+      onModeChange("task");
+      description.onChange("");
+    } else {
+      onModeChange("description");
+      onTaskChange(null);
+    }
+  };
+
   return (
-    <div className="flex min-w-0 flex-1 flex-col gap-2 md:flex-row md:items-center">
-      <ButtonGroup className="shrink-0">
-        <Button
-          type="button"
-          variant={mode === "description" ? "secondary" : "outline"}
-          className="h-10 px-3"
-          onClick={() => {
-            onModeChange("description");
-            onTaskChange(null);
-          }}
-        >
-          Write
-        </Button>
-        <Button
-          type="button"
-          variant={mode === "task" ? "secondary" : "outline"}
-          className="h-10 px-3"
-          onClick={() => {
-            onModeChange("task");
-            description.onChange("");
-          }}
-        >
-          Task
-        </Button>
-      </ButtonGroup>
+    <div className="flex min-w-0 flex-1 items-center gap-1.5">
+      <button
+        type="button"
+        onClick={toggle}
+        title={mode === "description" ? "Switch to task" : "Switch to write"}
+        className="shrink-0 rounded p-1 text-muted-foreground/50 transition-colors hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+      >
+        {mode === "description" ? (
+          <PencilLineIcon className="size-3.5" />
+        ) : (
+          <CheckSquareIcon className="size-3.5" />
+        )}
+      </button>
 
       <div className="min-w-0 flex-1">
         {mode === "task" ? (
diff --git a/apps/web/src/features/time-tracker/components/activity-row.tsx b/apps/web/src/features/time-tracker/components/activity-row.tsx
index a8b5a8f..9090d3e 100644
--- a/apps/web/src/features/time-tracker/components/activity-row.tsx
+++ b/apps/web/src/features/time-tracker/components/activity-row.tsx
@@ -19,7 +19,6 @@ import {
   isNextDay,
 } from "../utils/date-time";
 import { ActivityInlineEditor } from "./activity-inline-editor";
-import { BillableBadge } from "./billable-badge";
 
 interface ActivityRowProps {
   entry: TrackerEntry;
@@ -90,7 +89,6 @@ export function ActivityRow({
             </div>
           </div>
           <div className="flex flex-wrap gap-2 md:flex-nowrap">
-            <BillableBadge isBillable={entry.isBillable} />
             {entry.task ? <Badge variant="outline">{entry.task.displayKey}</Badge> : null}
             {entry.project ? <Badge variant="outline">{entry.project.name}</Badge> : null}
             {entry.tags.map((tag) => (
diff --git a/apps/web/src/features/time-tracker/components/billable-badge.tsx b/apps/web/src/features/time-tracker/components/billable-badge.tsx
deleted file mode 100644
index 4a74ac8..0000000
--- a/apps/web/src/features/time-tracker/components/billable-badge.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Badge } from "@open-learn/ui/components/badge";
-import { cn } from "@open-learn/ui/lib/utils";
-
-export function BillableBadge({
-  isBillable,
-  className,
-}: {
-  isBillable: boolean;
-  className?: string;
-}) {
-  return (
-    <Badge
-      variant="outline"
-      className={cn(
-        "rounded-none px-2",
-        isBillable
-          ? "border-sky-600/30 bg-sky-500/10 text-sky-700 dark:text-sky-300"
-          : "border-border bg-muted/50 text-muted-foreground",
-        className,
-      )}
-    >
-      {isBillable ? "Billable" : "Non-billable"}
-    </Badge>
-  );
-}
diff --git a/apps/web/src/features/time-tracker/components/calendar-active-timer-card.tsx b/apps/web/src/features/time-tracker/components/calendar-active-timer-card.tsx
index 6f22dd7..41ac737 100644
--- a/apps/web/src/features/time-tracker/components/calendar-active-timer-card.tsx
+++ b/apps/web/src/features/time-tracker/components/calendar-active-timer-card.tsx
@@ -50,7 +50,7 @@ export function CalendarActiveTimerCard({ activeEntry, now, range }: CalendarAct
       </CardContent>
       <CardFooter className="justify-between gap-2">
         <Button asChild variant="outline" className="h-8 px-3">
-          <Link to="/app/tracker">Open tracker</Link>
+          <Link to="/app">Open tracker</Link>
         </Button>
         <Button
           type="button"
diff --git a/apps/web/src/features/time-tracker/components/calendar-entry-sheet.tsx b/apps/web/src/features/time-tracker/components/calendar-entry-sheet.tsx
index c31f1f6..043b06b 100644
--- a/apps/web/src/features/time-tracker/components/calendar-entry-sheet.tsx
+++ b/apps/web/src/features/time-tracker/components/calendar-entry-sheet.tsx
@@ -32,7 +32,6 @@ import { useCreateManualEntry, useDeleteEntry, useUpdateEntry } from "../service
 import { getCompatibleTaskId } from "../utils/task-reference";
 import { getDefaultSlotEnd } from "../utils/calendar";
 import { ActivityReferenceInput } from "./activity-reference-input";
-import { CompactBillableToggle } from "./compact-billable-toggle";
 import { CompactProjectPicker } from "./compact-project-picker";
 import { CompactTagPicker } from "./compact-tag-picker";
 import {
@@ -69,7 +68,6 @@ const calendarEntrySchema = z
     projectId: z.number().nullable(),
     taskId: z.number().nullable(),
     tagIds: z.array(z.number()),
-    isBillable: z.boolean(),
   })
   .superRefine((value, ctx) => {
     const entryRange = getCalendarEntryDateRange(value.date, value.startTime, value.endTime);
@@ -114,7 +112,6 @@ function getInitialValues(
     projectId: null as number | null,
     taskId: null as number | null,
     tagIds: [] as number[],
-    isBillable: false,
   };
 }
 
@@ -151,7 +148,7 @@ export function CalendarEntrySheet({
         projectId: value.projectId,
         taskId: value.taskId,
         tagIds: value.tagIds,
-        isBillable: value.isBillable,
+        isBillable: false,
         startAt: entryRange.startAt.toISOString(),
         endAt: entryRange.endAt.toISOString(),
       };
@@ -359,23 +356,6 @@ export function CalendarEntrySheet({
                       </FieldContent>
                     </Field>
                   </div>
-
-                  <Field>
-                    <FieldLabel className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
-                      Billing
-                    </FieldLabel>
-                    <FieldContent>
-                      <form.Field name="isBillable">
-                        {(billableField) => (
-                          <CompactBillableToggle
-                            checked={billableField.state.value}
-                            onCheckedChange={billableField.handleChange}
-                            className="h-10"
-                          />
-                        )}
-                      </form.Field>
-                    </FieldContent>
-                  </Field>
                 </>
               )}
             </form.Subscribe>
diff --git a/apps/web/src/features/time-tracker/components/calendar-toolbar.tsx b/apps/web/src/features/time-tracker/components/calendar-toolbar.tsx
index 3efd5aa..92f24c1 100644
--- a/apps/web/src/features/time-tracker/components/calendar-toolbar.tsx
+++ b/apps/web/src/features/time-tracker/components/calendar-toolbar.tsx
@@ -1,5 +1,4 @@
 import type { TrackerProject } from "@open-learn/api/modules/time-tracker/time-tracker.schema";
-import type { CalendarBillableFilter } from "../constants/calendar";
 import type { CalendarViewKey } from "../utils/calendar";
 
 import { Badge } from "@open-learn/ui/components/badge";
@@ -14,21 +13,15 @@ import {
 } from "@open-learn/ui/components/select";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 
-import {
-  CALENDAR_BILLABLE_FILTER_OPTIONS,
-  CALENDAR_COPY,
-  CALENDAR_VIEW_OPTIONS,
-} from "../constants/calendar";
+import { CALENDAR_COPY, CALENDAR_VIEW_OPTIONS } from "../constants/calendar";
 
 interface CalendarToolbarProps {
   title: string;
   view: CalendarViewKey;
   projectFilter: string;
-  billableFilter: CalendarBillableFilter;
   projects: TrackerProject[];
   onViewChange: (view: CalendarViewKey) => void;
   onProjectFilterChange: (value: string) => void;
-  onBillableFilterChange: (value: CalendarBillableFilter) => void;
   onToday: () => void;
   onPrevious: () => void;
   onNext: () => void;
@@ -38,11 +31,9 @@ export function CalendarToolbar({
   title,
   view,
   projectFilter,
-  billableFilter,
   projects,
   onViewChange,
   onProjectFilterChange,
-  onBillableFilterChange,
   onToday,
   onPrevious,
   onNext,
@@ -103,22 +94,6 @@ export function CalendarToolbar({
             ))}
           </SelectContent>
         </Select>
-
-        <Select
-          value={billableFilter}
-          onValueChange={(value) => onBillableFilterChange(value as CalendarBillableFilter)}
-        >
-          <SelectTrigger className="h-8 min-w-36">
-            <SelectValue placeholder="All time" />
-          </SelectTrigger>
-          <SelectContent align="end">
-            {CALENDAR_BILLABLE_FILTER_OPTIONS.map((option) => (
-              <SelectItem key={option.value} value={option.value}>
-                {option.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
       </div>
     </div>
   );
diff --git a/apps/web/src/features/time-tracker/components/charts.tsx b/apps/web/src/features/time-tracker/components/charts.tsx
new file mode 100644
index 0000000..109cb71
--- /dev/null
+++ b/apps/web/src/features/time-tracker/components/charts.tsx
@@ -0,0 +1,224 @@
+import { Bar, BarChart, CartesianGrid, Cell, Pie, PieChart, XAxis, YAxis } from "recharts";
+
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@open-learn/ui/components/chart";
+
+import { formatMetricDuration, formatProjectShare } from "../utils/dashboard";
+
+// ─── Shared config & types ────────────────────────────────────────────────────
+
+const dailyChartConfig = {
+  totalHours: {
+    label: "Tracked hours",
+    color: "hsl(174 84% 32%)",
+  },
+} satisfies ChartConfig;
+
+const projectChartConfig = {
+  hours: {
+    label: "Hours",
+    color: "hsl(174 84% 32%)",
+  },
+} satisfies ChartConfig;
+
+export interface DailyEntry {
+  label: string;
+  totalHours: number;
+}
+
+export interface PieChartItem {
+  name: string;
+  seconds: number;
+  hours?: number;
+  percentage: number;
+  fill: string;
+}
+
+// ─── Shared sub-components ────────────────────────────────────────────────────
+
+function ShareBar({ percentage, color }: { percentage: number; color: string }) {
+  return (
+    <div className="h-3 w-full bg-muted">
+      <div className="h-full" style={{ width: `${percentage}%`, backgroundColor: color }} />
+    </div>
+  );
+}
+
+// ─── TrackerBarChart ──────────────────────────────────────────────────────────
+
+interface TrackerBarChartProps {
+  daily: DailyEntry[];
+  /** Container height in px. Default: 300 */
+  height?: number;
+  /** Gap between bars. Default: 10 */
+  barGap?: number;
+  /** Maximum bar width in px. Default: 28 */
+  maxBarSize?: number;
+  /** Minimum tick gap on X axis. Default: 18 */
+  minTickGap?: number;
+  /** Y axis width in px. Default: 42 */
+  yAxisWidth?: number;
+}
+
+export function TrackerBarChart({
+  daily,
+  height = 300,
+  barGap = 10,
+  maxBarSize = 28,
+  minTickGap = 18,
+  yAxisWidth = 42,
+}: TrackerBarChartProps) {
+  return (
+    <ChartContainer config={dailyChartConfig} className="w-full" style={{ height }}>
+      <BarChart data={daily} barGap={barGap}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="label"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={10}
+          minTickGap={minTickGap}
+        />
+        <YAxis
+          tickLine={false}
+          axisLine={false}
+          tickMargin={10}
+          width={yAxisWidth}
+          tickFormatter={(value) => `${value}h`}
+        />
+        <ChartTooltip content={<ChartTooltipContent indicator="dot" />} />
+        <Bar
+          dataKey="totalHours"
+          fill="var(--color-totalHours)"
+          maxBarSize={maxBarSize}
+          radius={[0, 0, 0, 0]}
+        />
+      </BarChart>
+    </ChartContainer>
+  );
+}
+
+// ─── DashboardPieChart ────────────────────────────────────────────────────────
+
+export function DashboardPieChart({
+  breakdownItems,
+  totalSeconds,
+}: {
+  breakdownItems: PieChartItem[];
+  totalSeconds: number;
+}) {
+  return (
+    <div className="grid gap-5 px-3 py-4 md:px-4 lg:grid-cols-[260px_minmax(0,1fr)] lg:items-center">
+      <div className="relative mx-auto flex w-full max-w-[220px] items-center justify-center">
+        <ChartContainer config={projectChartConfig} className="aspect-square h-[220px] w-full">
+          <PieChart>
+            <ChartTooltip content={<ChartTooltipContent indicator="dot" />} />
+            <Pie
+              data={breakdownItems}
+              dataKey="hours"
+              nameKey="name"
+              innerRadius={54}
+              outerRadius={88}
+              paddingAngle={2}
+              strokeWidth={0}
+            >
+              {breakdownItems.map((item) => (
+                <Cell key={item.name} fill={item.fill} />
+              ))}
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+        <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
+          <span className="text-xl font-semibold">{formatMetricDuration(totalSeconds)}</span>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        {breakdownItems.map((item) => (
+          <div
+            key={item.name}
+            className="grid gap-2 sm:grid-cols-[minmax(0,220px)_auto_minmax(120px,1fr)_auto] sm:items-center"
+          >
+            <div className="truncate text-sm font-medium">{item.name}</div>
+            <div className="text-sm text-muted-foreground">
+              {formatMetricDuration(item.seconds)}
+            </div>
+            <ShareBar percentage={item.percentage} color={item.fill} />
+            <div className="text-right text-sm text-muted-foreground">
+              {formatProjectShare(item.percentage)}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ─── ReportsPieChart ──────────────────────────────────────────────────────────
+
+const reportsPieConfig = {
+  percentage: {
+    label: "Project share",
+    color: "hsl(174 84% 32%)",
+  },
+} satisfies ChartConfig;
+
+export function ReportsPieChart({
+  projects,
+  totalSeconds,
+}: {
+  projects: PieChartItem[];
+  totalSeconds: number;
+}) {
+  return (
+    <div className="grid gap-3 p-3">
+      <div className="relative mx-auto flex w-full max-w-[210px] items-center justify-center">
+        <ChartContainer config={reportsPieConfig} className="aspect-square h-[210px] w-full">
+          <PieChart>
+            <ChartTooltip content={<ChartTooltipContent indicator="dot" />} />
+            <Pie
+              data={projects}
+              dataKey="seconds"
+              nameKey="name"
+              innerRadius={54}
+              outerRadius={84}
+              paddingAngle={2}
+              strokeWidth={0}
+            >
+              {projects.map((project) => (
+                <Cell key={project.name} fill={project.fill} />
+              ))}
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+        <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
+          <span className="text-lg font-semibold">{formatMetricDuration(totalSeconds)}</span>
+          <span className="text-[11px] text-muted-foreground">total tracked</span>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        {projects.map((project) => (
+          <div
+            key={project.name}
+            className="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2 text-xs"
+          >
+            <div className="flex min-w-0 items-center gap-2">
+              <span
+                className="size-2.5 shrink-0 rounded-full"
+                style={{ backgroundColor: project.fill }}
+              />
+              <span className="truncate font-medium">{project.name}</span>
+            </div>
+            <span className="text-muted-foreground">{formatMetricDuration(project.seconds)}</span>
+            <span className="text-muted-foreground">{project.percentage.toFixed(1)}%</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/features/time-tracker/components/compact-billable-toggle.tsx b/apps/web/src/features/time-tracker/components/compact-billable-toggle.tsx
deleted file mode 100644
index 3352a4d..0000000
--- a/apps/web/src/features/time-tracker/components/compact-billable-toggle.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Switch } from "@open-learn/ui/components/switch";
-import { cn } from "@open-learn/ui/lib/utils";
-
-import { BillableBadge } from "./billable-badge";
-
-export function CompactBillableToggle({
-  checked,
-  onCheckedChange,
-  className,
-}: {
-  checked: boolean;
-  onCheckedChange: (checked: boolean) => void;
-  className?: string;
-}) {
-  return (
-    <div
-      className={cn(
-        "flex h-10 shrink-0 items-center gap-2 border bg-background px-3 text-sm",
-        className,
-      )}
-    >
-      <Switch
-        size="sm"
-        checked={checked}
-        onCheckedChange={onCheckedChange}
-        aria-label="Toggle billable status"
-      />
-      <BillableBadge isBillable={checked} className="h-auto" />
-    </div>
-  );
-}
diff --git a/apps/web/src/features/time-tracker/components/dashboard-charts.tsx b/apps/web/src/features/time-tracker/components/dashboard-charts.tsx
deleted file mode 100644
index 322cb04..0000000
--- a/apps/web/src/features/time-tracker/components/dashboard-charts.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import { Bar, BarChart, CartesianGrid, Cell, Pie, PieChart, XAxis, YAxis } from "recharts";
-
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@open-learn/ui/components/chart";
-
-import { formatMetricDuration, formatProjectShare } from "../utils/dashboard";
-
-const dailyChartConfig = {
-  totalHours: {
-    label: "Tracked hours",
-    color: "hsl(174 84% 32%)",
-  },
-  billableHours: {
-    label: "Billable hours",
-    color: "hsl(200 78% 46%)",
-  },
-} satisfies ChartConfig;
-
-const projectChartConfig = {
-  hours: {
-    label: "Hours",
-    color: "hsl(174 84% 32%)",
-  },
-} satisfies ChartConfig;
-
-interface DailyEntry {
-  label: string;
-  totalHours: number;
-  billableHours: number;
-}
-
-interface BreakdownItem {
-  name: string;
-  seconds: number;
-  hours: number;
-  percentage: number;
-  fill: string;
-}
-
-function ShareBar({ percentage, color }: { percentage: number; color: string }) {
-  return (
-    <div className="h-3 w-full bg-muted">
-      <div className="h-full" style={{ width: `${percentage}%`, backgroundColor: color }} />
-    </div>
-  );
-}
-
-export function DashboardBarChart({ daily }: { daily: DailyEntry[] }) {
-  return (
-    <ChartContainer config={dailyChartConfig} className="h-[300px] w-full">
-      <BarChart data={daily} barGap={10}>
-        <CartesianGrid vertical={false} />
-        <XAxis dataKey="label" tickLine={false} axisLine={false} tickMargin={10} minTickGap={18} />
-        <YAxis
-          tickLine={false}
-          axisLine={false}
-          tickMargin={10}
-          width={42}
-          tickFormatter={(value) => `${value}h`}
-        />
-        <ChartTooltip content={<ChartTooltipContent indicator="dot" />} />
-        <Bar
-          dataKey="totalHours"
-          fill="var(--color-totalHours)"
-          maxBarSize={28}
-          radius={[0, 0, 0, 0]}
-        />
-        <Bar
-          dataKey="billableHours"
-          fill="var(--color-billableHours)"
-          maxBarSize={28}
-          radius={[0, 0, 0, 0]}
-        />
-      </BarChart>
-    </ChartContainer>
-  );
-}
-
-export function DashboardPieChart({
-  breakdownItems,
-  totalSeconds,
-}: {
-  breakdownItems: BreakdownItem[];
-  totalSeconds: number;
-}) {
-  return (
-    <div className="grid gap-5 px-3 py-4 md:px-4 lg:grid-cols-[260px_minmax(0,1fr)] lg:items-center">
-      <div className="relative mx-auto flex w-full max-w-[220px] items-center justify-center">
-        <ChartContainer config={projectChartConfig} className="aspect-square h-[220px] w-full">
-          <PieChart>
-            <ChartTooltip content={<ChartTooltipContent indicator="dot" />} />
-            <Pie
-              data={breakdownItems}
-              dataKey="hours"
-              nameKey="name"
-              innerRadius={54}
-              outerRadius={88}
-              paddingAngle={2}
-              strokeWidth={0}
-            >
-              {breakdownItems.map((item) => (
-                <Cell key={item.name} fill={item.fill} />
-              ))}
-            </Pie>
-          </PieChart>
-        </ChartContainer>
-        <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
-          <span className="text-xl font-semibold">{formatMetricDuration(totalSeconds)}</span>
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        {breakdownItems.map((item) => (
-          <div
-            key={item.name}
-            className="grid gap-2 sm:grid-cols-[minmax(0,220px)_auto_minmax(120px,1fr)_auto] sm:items-center"
-          >
-            <div className="truncate text-sm font-medium">{item.name}</div>
-            <div className="text-sm text-muted-foreground">
-              {formatMetricDuration(item.seconds)}
-            </div>
-            <ShareBar percentage={item.percentage} color={item.fill} />
-            <div className="text-right text-sm text-muted-foreground">
-              {formatProjectShare(item.percentage)}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/src/features/time-tracker/components/entry-metadata-fields.tsx b/apps/web/src/features/time-tracker/components/entry-metadata-fields.tsx
index bffa3a7..51d723c 100644
--- a/apps/web/src/features/time-tracker/components/entry-metadata-fields.tsx
+++ b/apps/web/src/features/time-tracker/components/entry-metadata-fields.tsx
@@ -6,7 +6,6 @@ import type { TrackerOverviewRange } from "../utils/date-time";
 
 import { Field, FieldError, FieldGroup, FieldLabel } from "@open-learn/ui/components/field";
 import { Input } from "@open-learn/ui/components/input";
-import { Switch } from "@open-learn/ui/components/switch";
 
 import { ProjectPicker } from "./project-picker";
 import { TagPicker } from "./tag-picker";
@@ -25,8 +24,6 @@ interface EntryMetadataFieldsProps {
   tagIds: number[];
   onTagIdsChange: (value: number[]) => void;
   tags: TrackerTag[];
-  isBillable: boolean;
-  onBillableChange: (value: boolean) => void;
   range: TrackerOverviewRange;
 }
 
@@ -38,8 +35,6 @@ export function EntryMetadataFields({
   tagIds,
   onTagIdsChange,
   tags,
-  isBillable,
-  onBillableChange,
   range,
 }: EntryMetadataFieldsProps) {
   return (
@@ -65,11 +60,6 @@ export function EntryMetadataFields({
       />
 
       <TagPicker value={tagIds} onChange={onTagIdsChange} tags={tags} range={range} />
-
-      <Field orientation="horizontal">
-        <FieldLabel htmlFor="tracker-billable">Billable</FieldLabel>
-        <Switch id="tracker-billable" checked={isBillable} onCheckedChange={onBillableChange} />
-      </Field>
     </FieldGroup>
   );
 }
diff --git a/apps/web/src/features/time-tracker/components/manual-entry-form.tsx b/apps/web/src/features/time-tracker/components/manual-entry-form.tsx
index 63df8db..1d0e594 100644
--- a/apps/web/src/features/time-tracker/components/manual-entry-form.tsx
+++ b/apps/web/src/features/time-tracker/components/manual-entry-form.tsx
@@ -21,7 +21,6 @@ import {
   getDefaultManualValues,
 } from "../utils/date-time";
 import { ActivityReferenceInput } from "./activity-reference-input";
-import { CompactBillableToggle } from "./compact-billable-toggle";
 import { CompactDatePicker } from "./compact-date-picker";
 import { CompactProjectPicker } from "./compact-project-picker";
 import { CompactTagPicker } from "./compact-tag-picker";
@@ -35,7 +34,6 @@ const manualEntrySchema = z
     projectId: z.number().nullable(),
     taskId: z.number().nullable(),
     tagIds: z.array(z.number()),
-    isBillable: z.boolean(),
   })
   .superRefine((value, ctx) => {
     const startAt = combineDateAndTime(value.date, value.startTime);
@@ -76,7 +74,7 @@ export function ManualEntryForm({ projects, tasks, tags, range }: ManualEntryFor
         projectId: value.projectId,
         taskId: value.taskId,
         tagIds: value.tagIds,
-        isBillable: value.isBillable,
+        isBillable: false,
         startAt: startAt.toISOString(),
         endAt: endAt.toISOString(),
       });
@@ -165,15 +163,6 @@ export function ManualEntryForm({ projects, tasks, tags, range }: ManualEntryFor
                         )}
                       </form.Field>
 
-                      <form.Field name="isBillable">
-                        {(billableField) => (
-                          <CompactBillableToggle
-                            checked={billableField.state.value}
-                            onCheckedChange={billableField.handleChange}
-                          />
-                        )}
-                      </form.Field>
-
                       <div className="flex flex-wrap gap-2 md:flex-nowrap">
                         <form.Field name="startTime">
                           {(field) => {
diff --git a/apps/web/src/features/time-tracker/components/reports-charts.tsx b/apps/web/src/features/time-tracker/components/reports-charts.tsx
deleted file mode 100644
index 3bffc01..0000000
--- a/apps/web/src/features/time-tracker/components/reports-charts.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { Bar, BarChart, CartesianGrid, Cell, Pie, PieChart, XAxis, YAxis } from "recharts";
-
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@open-learn/ui/components/chart";
-
-import { formatMetricDuration } from "../utils/dashboard";
-
-const dailyChartConfig = {
-  totalHours: {
-    label: "Tracked hours",
-    color: "hsl(174 84% 32%)",
-  },
-  billableHours: {
-    label: "Billable hours",
-    color: "hsl(200 78% 46%)",
-  },
-} satisfies ChartConfig;
-
-const projectChartConfig = {
-  percentage: {
-    label: "Project share",
-    color: "hsl(174 84% 32%)",
-  },
-} satisfies ChartConfig;
-
-interface DailyEntry {
-  label: string;
-  totalHours: number;
-  billableHours: number;
-}
-
-interface ProjectEntry {
-  name: string;
-  seconds: number;
-  percentage: number;
-  fill: string;
-}
-
-export function ReportsBarChart({ daily }: { daily: DailyEntry[] }) {
-  return (
-    <ChartContainer config={dailyChartConfig} className="h-[280px] w-full">
-      <BarChart data={daily} barGap={8}>
-        <CartesianGrid vertical={false} />
-        <XAxis dataKey="label" tickLine={false} axisLine={false} tickMargin={10} minTickGap={16} />
-        <YAxis
-          tickLine={false}
-          axisLine={false}
-          tickMargin={10}
-          width={40}
-          tickFormatter={(value) => `${value}h`}
-        />
-        <ChartTooltip content={<ChartTooltipContent indicator="dot" />} />
-        <Bar dataKey="totalHours" fill="var(--color-totalHours)" maxBarSize={24} />
-        <Bar dataKey="billableHours" fill="var(--color-billableHours)" maxBarSize={24} />
-      </BarChart>
-    </ChartContainer>
-  );
-}
-
-export function ReportsPieChart({
-  projects,
-  totalSeconds,
-}: {
-  projects: ProjectEntry[];
-  totalSeconds: number;
-}) {
-  return (
-    <div className="grid gap-3 p-3">
-      <div className="relative mx-auto flex w-full max-w-[210px] items-center justify-center">
-        <ChartContainer config={projectChartConfig} className="aspect-square h-[210px] w-full">
-          <PieChart>
-            <ChartTooltip content={<ChartTooltipContent indicator="dot" />} />
-            <Pie
-              data={projects}
-              dataKey="seconds"
-              nameKey="name"
-              innerRadius={54}
-              outerRadius={84}
-              paddingAngle={2}
-              strokeWidth={0}
-            >
-              {projects.map((project) => (
-                <Cell key={project.name} fill={project.fill} />
-              ))}
-            </Pie>
-          </PieChart>
-        </ChartContainer>
-        <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
-          <span className="text-lg font-semibold">{formatMetricDuration(totalSeconds)}</span>
-          <span className="text-[11px] text-muted-foreground">total tracked</span>
-        </div>
-      </div>
-
-      <div className="space-y-2">
-        {projects.map((project) => (
-          <div
-            key={project.name}
-            className="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2 text-xs"
-          >
-            <div className="flex min-w-0 items-center gap-2">
-              <span
-                className="size-2.5 shrink-0 rounded-full"
-                style={{ backgroundColor: project.fill }}
-              />
-              <span className="truncate font-medium">{project.name}</span>
-            </div>
-            <span className="text-muted-foreground">{formatMetricDuration(project.seconds)}</span>
-            <span className="text-muted-foreground">{project.percentage.toFixed(1)}%</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/src/features/time-tracker/components/timer-entry-form.tsx b/apps/web/src/features/time-tracker/components/timer-entry-form.tsx
index 13bf808..d1fabc4 100644
--- a/apps/web/src/features/time-tracker/components/timer-entry-form.tsx
+++ b/apps/web/src/features/time-tracker/components/timer-entry-form.tsx
@@ -8,18 +8,14 @@ import type { TrackerOverviewRange } from "../utils/date-time";
 
 import { useForm } from "@tanstack/react-form";
 import { useEffect, useMemo, useState } from "react";
-import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { z } from "zod";
 import { Button } from "@open-learn/ui/components/button";
-import { Collapsible, CollapsibleContent } from "@open-learn/ui/components/collapsible";
 import { FieldError } from "@open-learn/ui/components/field";
 
 import { useStartTimer, useStopTimer, useUpdateActiveTimer } from "../services/mutations";
 import { formatDuration, getElapsedSeconds, getTimerFormValues } from "../utils/date-time";
 import { getCompatibleTaskId } from "../utils/task-reference";
 import { ActivityReferenceInput } from "./activity-reference-input";
-import { BillableBadge } from "./billable-badge";
-import { CompactBillableToggle } from "./compact-billable-toggle";
 import { CompactProjectPicker } from "./compact-project-picker";
 import { CompactTagPicker } from "./compact-tag-picker";
 
@@ -28,7 +24,6 @@ const timerFormSchema = z.object({
   projectId: z.number().nullable(),
   taskId: z.number().nullable(),
   tagIds: z.array(z.number()),
-  isBillable: z.boolean(),
 });
 
 interface TimerEntryFormProps {
@@ -41,7 +36,6 @@ interface TimerEntryFormProps {
 
 export function TimerEntryForm({ activeEntry, projects, tasks, tags, range }: TimerEntryFormProps) {
   const [now, setNow] = useState(() => new Date());
-  const [detailsOpen, setDetailsOpen] = useState(false);
   const [activityMode, setActivityMode] = useState<"description" | "task">(
     activeEntry?.task ? "task" : "description",
   );
@@ -59,7 +53,7 @@ export function TimerEntryForm({ activeEntry, projects, tasks, tags, range }: Ti
           projectId: value.projectId,
           taskId: value.taskId,
           tagIds: value.tagIds,
-          isBillable: value.isBillable,
+          isBillable: false,
         });
         await stopTimer.mutateAsync({ entryId: activeEntry.id });
         return;
@@ -70,11 +64,10 @@ export function TimerEntryForm({ activeEntry, projects, tasks, tags, range }: Ti
         projectId: value.projectId,
         taskId: value.taskId,
         tagIds: value.tagIds,
-        isBillable: value.isBillable,
+        isBillable: false,
       });
       form.reset(getTimerFormValues(null));
       setActivityMode("description");
-      setDetailsOpen(false);
     },
   });
 
@@ -102,134 +95,107 @@ export function TimerEntryForm({ activeEntry, projects, tasks, tags, range }: Ti
   }, [activeEntry, now]);
 
   return (
-    <Collapsible open={detailsOpen} onOpenChange={setDetailsOpen}>
-      <form
-        onSubmit={(event) => {
-          event.preventDefault();
-          event.stopPropagation();
-          form.handleSubmit();
-        }}
-        className="flex flex-col gap-2"
-      >
-        <form.Field name="description">
-          {(descriptionField) => {
-            const isInvalid =
-              descriptionField.state.meta.isTouched && !descriptionField.state.meta.isValid;
-
-            return (
-              <>
-                <div className="flex flex-col gap-2 rounded-none border bg-card p-2 md:flex-row md:items-center md:gap-2">
-                  <form.Subscribe selector={(state) => state.values.projectId}>
-                    {(projectId) => (
-                      <form.Field name="taskId">
-                        {(taskField) => (
-                          <ActivityReferenceInput
-                            mode={activityMode}
-                            onModeChange={setActivityMode}
-                            description={{
-                              id: "tracker-description",
-                              value: descriptionField.state.value,
-                              onBlur: descriptionField.handleBlur,
-                              onChange: descriptionField.handleChange,
-                              isInvalid,
-                              placeholder: "What are you working on? (optional)",
-                            }}
-                            taskId={taskField.state.value}
-                            projectId={projectId}
-                            onTaskChange={taskField.handleChange}
-                            tasks={tasks}
-                          />
-                        )}
-                      </form.Field>
-                    )}
-                  </form.Subscribe>
-
-                  {activeEntry ? <BillableBadge isBillable={activeEntry.isBillable} /> : null}
-
-                  <div className="flex min-w-32 items-center justify-center px-3 text-lg font-semibold tabular-nums text-foreground">
-                    {elapsedLabel}
-                  </div>
-
-                  <form.Subscribe selector={(state) => ({ isSubmitting: state.isSubmitting })}>
-                    {({ isSubmitting }) => (
-                      <Button
-                        type="submit"
-                        disabled={
-                          isSubmitting ||
-                          startTimer.isPending ||
-                          updateActiveTimer.isPending ||
-                          stopTimer.isPending
-                        }
-                        className="min-w-24"
-                      >
-                        {activeEntry ? "Stop" : "Start"}
-                      </Button>
-                    )}
-                  </form.Subscribe>
-
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => setDetailsOpen((open) => !open)}
-                    aria-label={detailsOpen ? "Hide timer details" : "Edit timer details"}
-                  >
-                    {detailsOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
-                  </Button>
-                </div>
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        form.handleSubmit();
+      }}
+      className="flex flex-col gap-2"
+    >
+      <form.Field name="description">
+        {(descriptionField) => {
+          const isInvalid =
+            descriptionField.state.meta.isTouched && !descriptionField.state.meta.isValid;
+
+          return (
+            <>
+              <div className="flex flex-col gap-2 rounded-none border bg-card p-2 md:flex-row md:items-center md:gap-2">
+                <form.Subscribe selector={(state) => state.values.projectId}>
+                  {(projectId) => (
+                    <form.Field name="taskId">
+                      {(taskField) => (
+                        <ActivityReferenceInput
+                          mode={activityMode}
+                          onModeChange={setActivityMode}
+                          description={{
+                            id: "tracker-description",
+                            value: descriptionField.state.value,
+                            onBlur: descriptionField.handleBlur,
+                            onChange: descriptionField.handleChange,
+                            isInvalid,
+                            placeholder: "What are you working on? (optional)",
+                          }}
+                          taskId={taskField.state.value}
+                          projectId={projectId}
+                          onTaskChange={taskField.handleChange}
+                          tasks={tasks}
+                        />
+                      )}
+                    </form.Field>
+                  )}
+                </form.Subscribe>
+
+                <form.Field name="projectId">
+                  {(projectField) => (
+                    <form.Field name="taskId">
+                      {(taskField) => (
+                        <CompactProjectPicker
+                          value={projectField.state.value}
+                          onChange={(projectId) => {
+                            projectField.handleChange(projectId);
+                            taskField.handleChange(
+                              getCompatibleTaskId(tasks, taskField.state.value, projectId),
+                            );
+                          }}
+                          projects={projects}
+                          range={range}
+                        />
+                      )}
+                    </form.Field>
+                  )}
+                </form.Field>
 
-                <div className="px-2">
-                  <FieldError errors={descriptionField.state.meta.errors} />
-                </div>
-              </>
-            );
-          }}
-        </form.Field>
-
-        <CollapsibleContent className="grid gap-2 rounded-none border bg-card p-3">
-          <div className="flex flex-wrap items-center gap-2">
-            <form.Field name="projectId">
-              {(projectField) => (
-                <form.Field name="taskId">
-                  {(taskField) => (
-                    <CompactProjectPicker
-                      value={projectField.state.value}
-                      onChange={(projectId) => {
-                        projectField.handleChange(projectId);
-                        taskField.handleChange(
-                          getCompatibleTaskId(tasks, taskField.state.value, projectId),
-                        );
-                      }}
-                      projects={projects}
+                <form.Field name="tagIds">
+                  {(tagField) => (
+                    <CompactTagPicker
+                      value={tagField.state.value}
+                      onChange={tagField.handleChange}
+                      tags={tags}
                       range={range}
                     />
                   )}
                 </form.Field>
-              )}
-            </form.Field>
-
-            <form.Field name="tagIds">
-              {(tagField) => (
-                <CompactTagPicker
-                  value={tagField.state.value}
-                  onChange={tagField.handleChange}
-                  tags={tags}
-                  range={range}
-                />
-              )}
-            </form.Field>
-
-            <form.Field name="isBillable">
-              {(billableField) => (
-                <CompactBillableToggle
-                  checked={billableField.state.value}
-                  onCheckedChange={billableField.handleChange}
-                />
-              )}
-            </form.Field>
-          </div>
-        </CollapsibleContent>
-      </form>
-    </Collapsible>
+
+                <div className="flex min-w-32 items-center justify-center px-3 text-lg font-semibold tabular-nums text-foreground">
+                  {elapsedLabel}
+                </div>
+
+                <form.Subscribe selector={(state) => ({ isSubmitting: state.isSubmitting })}>
+                  {({ isSubmitting }) => (
+                    <Button
+                      type="submit"
+                      disabled={
+                        isSubmitting ||
+                        startTimer.isPending ||
+                        updateActiveTimer.isPending ||
+                        stopTimer.isPending
+                      }
+                      className="min-w-24"
+                    >
+                      {activeEntry ? "Stop" : "Start"}
+                    </Button>
+                  )}
+                </form.Subscribe>
+              </div>
+
+              <div className="px-2">
+                <FieldError errors={descriptionField.state.meta.errors} />
+              </div>
+            </>
+          );
+        }}
+      </form.Field>
+    </form>
   );
 }
diff --git a/apps/web/src/features/time-tracker/constants/calendar.ts b/apps/web/src/features/time-tracker/constants/calendar.ts
index f04849c..a57ad1e 100644
--- a/apps/web/src/features/time-tracker/constants/calendar.ts
+++ b/apps/web/src/features/time-tracker/constants/calendar.ts
@@ -1,7 +1,5 @@
 import type { CalendarViewKey } from "../utils/calendar";
 
-export type CalendarBillableFilter = "all" | "billable" | "non-billable";
-
 export const CALENDAR_COPY = {
   pageTitle: "Calendar",
   pageDescription: "Browse and manage tracked time in a calendar view.",
@@ -17,12 +15,3 @@ export const CALENDAR_VIEW_OPTIONS: Array<{ label: string; value: CalendarViewKe
   { label: "Day", value: "day" },
   { label: "Month", value: "month" },
 ];
-
-export const CALENDAR_BILLABLE_FILTER_OPTIONS: Array<{
-  label: string;
-  value: CalendarBillableFilter;
-}> = [
-  { label: "All time", value: "all" },
-  { label: "Billable", value: "billable" },
-  { label: "Non-billable", value: "non-billable" },
-];
diff --git a/apps/web/src/features/time-tracker/constants/index.ts b/apps/web/src/features/time-tracker/constants/index.ts
index d33f9ff..8d02454 100644
--- a/apps/web/src/features/time-tracker/constants/index.ts
+++ b/apps/web/src/features/time-tracker/constants/index.ts
@@ -1,6 +1,6 @@
 export const TRACKER_COPY = {
   pageTitle: "Track your time",
-  pageDescription: "Capture billable and non-billable work with a timer or manual entry.",
+  pageDescription: "Capture your work with a timer or manual entry.",
   timerTab: "Timer",
   manualTab: "Manual",
   activeTimerTitle: "Active timer",
diff --git a/apps/web/src/features/time-tracker/pages/calendar-page.tsx b/apps/web/src/features/time-tracker/pages/calendar-page.tsx
index 60aac07..91e7163 100644
--- a/apps/web/src/features/time-tracker/pages/calendar-page.tsx
+++ b/apps/web/src/features/time-tracker/pages/calendar-page.tsx
@@ -1,9 +1,12 @@
 import type { TrackerEntry } from "@open-learn/api/modules/time-tracker/time-tracker.schema";
 import type { SlotInfo } from "react-big-calendar";
-import type { CalendarBillableFilter } from "../constants/calendar";
 import type { CalendarEntryEvent, CalendarSheetMode, CalendarViewKey } from "../utils/calendar";
 
 import { useEffect, useMemo, useState } from "react";
+import { CalendarClockIcon } from "lucide-react";
+
+import { AppPage, AppPageHeader, AppPageHeaderMeta } from "@/components/app-page-shell";
+import { useTasksQuery } from "@/features/tasks/services/queries";
 import { Button } from "@open-learn/ui/components/button";
 import {
   Empty,
@@ -14,16 +17,14 @@ import {
   EmptyTitle,
 } from "@open-learn/ui/components/empty";
 import { Skeleton } from "@open-learn/ui/components/skeleton";
-import { CalendarClockIcon } from "lucide-react";
 
-import { useTasksQuery } from "@/features/tasks/services/queries";
 import { CALENDAR_COPY } from "../constants/calendar";
 import { CalendarActiveTimerCard } from "../components/calendar-active-timer-card";
 import { CalendarEntrySheet } from "../components/calendar-entry-sheet";
 import { CalendarToolbar } from "../components/calendar-toolbar";
 import { TrackerCalendar } from "../components/tracker-calendar";
-import { useTrackerOverviewQuery } from "../services/queries";
 import { useUpdateEntry } from "../services/mutations";
+import { useTrackerOverviewQuery } from "../services/queries";
 import {
   getCalendarRange,
   getCalendarViewTitle,
@@ -42,7 +43,6 @@ export default function CalendarPage() {
   const [view, setView] = useState<CalendarViewKey>("week");
   const [focusedDate, setFocusedDate] = useState(() => new Date());
   const [projectFilter, setProjectFilter] = useState<string>("all");
-  const [billableFilter, setBillableFilter] = useState<CalendarBillableFilter>("all");
   const [sheetState, setSheetState] = useState<CalendarSheetState | null>(null);
   const [now, setNow] = useState(() => new Date());
 
@@ -65,18 +65,9 @@ export default function CalendarPage() {
     const entries = trackerOverview.data?.entries ?? [];
 
     return entries.filter((entry) => {
-      const matchesProject =
-        projectFilter === "all" ? true : String(entry.project?.id ?? "") === projectFilter;
-      const matchesBillable =
-        billableFilter === "all"
-          ? true
-          : billableFilter === "billable"
-            ? entry.isBillable
-            : !entry.isBillable;
-
-      return matchesProject && matchesBillable;
+      return projectFilter === "all" ? true : String(entry.project?.id ?? "") === projectFilter;
     });
-  }, [billableFilter, projectFilter, trackerOverview.data?.entries]);
+  }, [projectFilter, trackerOverview.data?.entries]);
 
   const visibleEvents = useMemo(
     () =>
@@ -85,16 +76,12 @@ export default function CalendarPage() {
         activeEntry:
           trackerOverview.data?.activeEntry &&
           (projectFilter === "all" ||
-            String(trackerOverview.data.activeEntry.project?.id ?? "") === projectFilter) &&
-          (billableFilter === "all" ||
-            (billableFilter === "billable"
-              ? trackerOverview.data.activeEntry.isBillable
-              : !trackerOverview.data.activeEntry.isBillable))
+            String(trackerOverview.data.activeEntry.project?.id ?? "") === projectFilter)
             ? trackerOverview.data.activeEntry
             : null,
         now,
       }),
-    [billableFilter, filteredEntries, now, projectFilter, trackerOverview.data?.activeEntry],
+    [filteredEntries, now, projectFilter, trackerOverview.data?.activeEntry],
   );
 
   const title = useMemo(() => getCalendarViewTitle(view, focusedDate), [focusedDate, view]);
@@ -181,21 +168,35 @@ export default function CalendarPage() {
   const isLoading = (trackerOverview.isLoading && !trackerOverview.data) || tasksQuery.isLoading;
 
   return (
-    <div className="flex w-full flex-col gap-6">
-      <div className="flex flex-col gap-1">
-        <h1 className="text-2xl font-semibold">{CALENDAR_COPY.pageTitle}</h1>
-        <p className="text-sm text-muted-foreground">{CALENDAR_COPY.pageDescription}</p>
-      </div>
+    <AppPage>
+      <AppPageHeader
+        title={CALENDAR_COPY.pageTitle}
+        description="Review your schedule visually, move finished work in context, and create entries directly from the calendar."
+      >
+        <AppPageHeaderMeta
+          items={[
+            { label: "View", value: view },
+            { label: "Range", value: title },
+            {
+              label: "Project",
+              value:
+                projectFilter === "all"
+                  ? "All"
+                  : (trackerOverview.data?.projects.find(
+                      (project) => String(project.id) === projectFilter,
+                    )?.name ?? "Filtered"),
+            },
+          ]}
+        />
+      </AppPageHeader>
 
       <CalendarToolbar
         title={title}
         view={view}
         projectFilter={projectFilter}
-        billableFilter={billableFilter}
         projects={trackerOverview.data?.projects ?? []}
         onViewChange={setView}
         onProjectFilterChange={setProjectFilter}
-        onBillableFilterChange={setBillableFilter}
         onToday={() => setFocusedDate(new Date())}
         onPrevious={() => setFocusedDate((current) => shiftCalendarDate(view, current, -1))}
         onNext={() => setFocusedDate((current) => shiftCalendarDate(view, current, 1))}
@@ -271,6 +272,6 @@ export default function CalendarPage() {
           }
         }}
       />
-    </div>
+    </AppPage>
   );
 }
diff --git a/apps/web/src/features/time-tracker/pages/reports-page.tsx b/apps/web/src/features/time-tracker/pages/reports-page.tsx
index 9b3abc5..e933757 100644
--- a/apps/web/src/features/time-tracker/pages/reports-page.tsx
+++ b/apps/web/src/features/time-tracker/pages/reports-page.tsx
@@ -13,6 +13,13 @@ import {
 } from "lucide-react";
 import { toast } from "sonner";
 
+import {
+  AppPage,
+  AppPageHeader,
+  AppPageHeaderMeta,
+  AppSurface,
+  AppSurfaceHeader,
+} from "@/components/app-page-shell";
 import { Badge } from "@open-learn/ui/components/badge";
 import { Button } from "@open-learn/ui/components/button";
 import {
@@ -63,18 +70,12 @@ import {
 } from "../utils/reports";
 
 const ReportsBarChart = lazy(() =>
-  import("../components/reports-charts").then((m) => ({ default: m.ReportsBarChart })),
+  import("../components/charts").then((module) => ({ default: module.TrackerBarChart })),
 );
 const ReportsPieChart = lazy(() =>
-  import("../components/reports-charts").then((m) => ({ default: m.ReportsPieChart })),
+  import("../components/charts").then((module) => ({ default: module.ReportsPieChart })),
 );
 
-const billableOptions = [
-  { value: "all", label: "Billability" },
-  { value: "billable", label: "Billable only" },
-  { value: "non-billable", label: "Non-billable" },
-] as const;
-
 const initialRange = getReportPresetRange("last-month");
 
 function addDays(date: Date, days: number) {
@@ -83,16 +84,11 @@ function addDays(date: Date, days: number) {
   return result;
 }
 
-// ─── Reducer ──────────────────────────────────────────────────────────────────
-
-type BillableFilter = (typeof billableOptions)[number]["value"];
-
 interface FiltersState {
   preset: ReportPresetKey;
   fromInput: string;
   toInput: string;
   projectFilter: string;
-  billableFilter: BillableFilter;
   searchValue: string;
 }
 
@@ -101,7 +97,6 @@ type FiltersAction =
   | { type: "SET_CUSTOM_FROM"; fromInput: string }
   | { type: "SET_CUSTOM_TO"; toInput: string }
   | { type: "SET_PROJECT_FILTER"; projectFilter: string }
-  | { type: "SET_BILLABLE_FILTER"; billableFilter: BillableFilter }
   | { type: "SET_SEARCH"; searchValue: string }
   | { type: "RESET_FILTERS" }
   | { type: "SHIFT_RANGE"; fromInput: string; toInput: string };
@@ -121,12 +116,10 @@ function filtersReducer(state: FiltersState, action: FiltersAction): FiltersStat
       return { ...state, preset: "custom", toInput: action.toInput };
     case "SET_PROJECT_FILTER":
       return { ...state, projectFilter: action.projectFilter };
-    case "SET_BILLABLE_FILTER":
-      return { ...state, billableFilter: action.billableFilter };
     case "SET_SEARCH":
       return { ...state, searchValue: action.searchValue };
     case "RESET_FILTERS":
-      return { ...state, projectFilter: "all", billableFilter: "all", searchValue: "" };
+      return { ...state, projectFilter: "all", searchValue: "" };
     case "SHIFT_RANGE":
       return { ...state, preset: "custom", fromInput: action.fromInput, toInput: action.toInput };
     default:
@@ -139,15 +132,12 @@ const initialFiltersState: FiltersState = {
   fromInput: initialRange.fromInput,
   toInput: initialRange.toInput,
   projectFilter: "all",
-  billableFilter: "all",
   searchValue: "",
 };
 
-// ─── Page ─────────────────────────────────────────────────────────────────────
-
 export default function ReportsPage() {
   const [filters, dispatch] = useReducer(filtersReducer, initialFiltersState);
-  const { preset, fromInput, toInput, projectFilter, billableFilter, searchValue } = filters;
+  const { preset, fromInput, toInput, projectFilter, searchValue } = filters;
 
   const resolvedRange = useMemo(() => resolveReportRange(fromInput, toInput), [fromInput, toInput]);
   const rangeLabel = useMemo(
@@ -164,14 +154,6 @@ export default function ReportsPage() {
         return false;
       }
 
-      if (billableFilter === "billable" && !entry.isBillable) {
-        return false;
-      }
-
-      if (billableFilter === "non-billable" && entry.isBillable) {
-        return false;
-      }
-
       if (!query) {
         return true;
       }
@@ -182,7 +164,7 @@ export default function ReportsPage() {
 
       return haystack.includes(query);
     });
-  }, [billableFilter, projectFilter, searchValue, trackerOverview.data?.entries]);
+  }, [projectFilter, searchValue, trackerOverview.data?.entries]);
 
   const metrics = useMemo(
     () =>
@@ -277,92 +259,97 @@ export default function ReportsPage() {
   }
 
   return (
-    <div className="flex w-full min-w-0 flex-col gap-3 overflow-x-hidden text-[13px]">
-      <section className="flex flex-col gap-2 xl:flex-row xl:items-center xl:justify-between">
-        <div className="flex flex-wrap items-center gap-1.5">
-          <Button variant="outline" size="sm" className="h-9 px-3 uppercase">
-            Time report
-          </Button>
-          <Badge variant="outline" className="h-9 rounded-none px-3 text-[11px] uppercase">
-            Summary
-          </Badge>
-          <Badge
-            variant="outline"
-            className="h-9 rounded-none px-3 text-[11px] text-muted-foreground"
-          >
-            Detailed
-          </Badge>
-          <Badge
-            variant="outline"
-            className="h-9 rounded-none px-3 text-[11px] text-muted-foreground"
-          >
-            Weekly
-          </Badge>
-          <Badge
-            variant="outline"
-            className="h-9 rounded-none px-3 text-[11px] text-muted-foreground"
-          >
-            Shared
-          </Badge>
-        </div>
+    <AppPage className="gap-4 overflow-x-hidden text-[13px]">
+      <AppPageHeader
+        title="Reports"
+        description="Refine the time log, review project mix, and export clean reporting data."
+        actions={
+          <>
+            <div className="flex min-w-0 flex-wrap items-center sm:flex-nowrap">
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-9 rounded-none border-r-0 px-3"
+                onClick={() => shiftRange(-1)}
+                aria-label="Previous period"
+              >
+                <ChevronLeftIcon className="size-4" />
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-9 max-w-full rounded-none px-3 font-normal"
+              >
+                <CalendarRangeIcon className="size-4" />
+                {rangeLabel}
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-9 rounded-none border-l-0 px-3"
+                onClick={() => shiftRange(1)}
+                aria-label="Next period"
+              >
+                <ChevronRightIcon className="size-4" />
+              </Button>
+            </div>
 
-        <div className="flex flex-wrap items-center gap-1.5 xl:justify-end">
-          <div className="flex min-w-0 flex-wrap items-center sm:flex-nowrap">
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-9 rounded-none border-r-0 px-3"
-              onClick={() => shiftRange(-1)}
-              aria-label="Previous period"
-            >
-              <ChevronLeftIcon className="size-4" />
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-9 max-w-full rounded-none px-3 font-normal"
-            >
-              <CalendarRangeIcon className="size-4" />
-              {rangeLabel}
-            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm" className="h-9 rounded-none px-3">
+                  <DownloadIcon className="size-4" />
+                  Export
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="rounded-none">
+                <DropdownMenuItem onClick={() => handleExport("csv")}>
+                  <FileTextIcon className="size-4" />
+                  Export CSV
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => handleExport("excel")}>
+                  <FileSpreadsheetIcon className="size-4" />
+                  Export Excel
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => handleExport("json")}>
+                  <FileJson2Icon className="size-4" />
+                  Export JSON
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </>
+        }
+      >
+        <AppPageHeaderMeta
+          items={[
+            {
+              label: "Preset",
+              value:
+                REPORT_PRESET_OPTIONS.find((option) => option.key === preset)?.label ?? "Custom",
+            },
+            { label: "Sessions", value: String(metrics.totalSessions) },
+            { label: "Projects", value: String(metrics.projectCount) },
+          ]}
+        />
+      </AppPageHeader>
+
+      <AppSurface className="overflow-hidden border-border/70 bg-muted/10">
+        <AppSurfaceHeader
+          label="Filters"
+          title="Refine the report"
+          description="Keep the chart, detailed table, and export output aligned from one focused control row."
+          actions={
             <Button
               variant="outline"
               size="sm"
-              className="h-9 rounded-none border-l-0 px-3"
-              onClick={() => shiftRange(1)}
-              aria-label="Next period"
+              className="h-9 rounded-none px-3"
+              onClick={resetFilters}
             >
-              <ChevronRightIcon className="size-4" />
+              Reset filters
             </Button>
-          </div>
-
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline" size="sm" className="h-9 rounded-none px-3">
-                <DownloadIcon className="size-4" />
-                Export
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="rounded-none">
-              <DropdownMenuItem onClick={() => handleExport("csv")}>
-                <FileTextIcon className="size-4" />
-                Export CSV
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => handleExport("excel")}>
-                <FileSpreadsheetIcon className="size-4" />
-                Export Excel
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => handleExport("json")}>
-                <FileJson2Icon className="size-4" />
-                Export JSON
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </section>
+          }
+        />
 
-      <Card className="overflow-hidden border-border/70 bg-muted/10 py-0">
-        <CardContent className="flex flex-wrap gap-2 p-3">
+        <div className="flex flex-wrap gap-2 p-3">
           <div className="min-w-0 flex-1 basis-[180px] sm:basis-[160px]">
             <CompactSelect
               value={preset}
@@ -412,22 +399,6 @@ export default function ReportsPage() {
             </CompactSelect>
           </div>
 
-          <div className="min-w-0 flex-1 basis-[180px] sm:basis-[160px]">
-            <CompactSelect
-              value={billableFilter}
-              onValueChange={(value) =>
-                dispatch({ type: "SET_BILLABLE_FILTER", billableFilter: value as BillableFilter })
-              }
-              ariaLabel="Filter by billability"
-            >
-              {billableOptions.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </CompactSelect>
-          </div>
-
           <div className="min-w-0 flex-[2_1_220px] basis-[220px]">
             <Input
               value={searchValue}
@@ -438,27 +409,13 @@ export default function ReportsPage() {
               className="h-9 rounded-none bg-background text-xs"
             />
           </div>
-
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-9 rounded-none px-3"
-            onClick={resetFilters}
-          >
-            Reset filters
-          </Button>
-        </CardContent>
-      </Card>
+        </div>
+      </AppSurface>
 
       <Card className="overflow-hidden border-border/70 py-0">
         <div className="flex flex-col gap-3 border-b border-border/70 bg-muted/20 px-3 py-2 lg:flex-row lg:items-center lg:justify-between">
           <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs">
             <InlineMetric label="Total" value={formatMetricDuration(metrics.totalSeconds)} />
-            <InlineMetric label="Billable" value={formatMetricDuration(metrics.billableSeconds)} />
-            <InlineMetric
-              label="Non-billable"
-              value={formatMetricDuration(metrics.nonBillableSeconds)}
-            />
             <InlineMetric label="Sessions" value={String(metrics.totalSessions)} />
             <InlineMetric label="Projects" value={String(metrics.projectCount)} />
           </div>
@@ -498,7 +455,14 @@ export default function ReportsPage() {
             <>
               <div className="border-b border-border/70 px-3 py-3">
                 <Suspense fallback={<Skeleton className="h-[280px] w-full" />}>
-                  <ReportsBarChart daily={metrics.daily} />
+                  <ReportsBarChart
+                    daily={metrics.daily}
+                    height={280}
+                    barGap={8}
+                    maxBarSize={24}
+                    minTickGap={16}
+                    yAxisWidth={40}
+                  />
                 </Suspense>
               </div>
 
@@ -526,7 +490,6 @@ export default function ReportsPage() {
                           <TableHead>Date</TableHead>
                           <TableHead>Duration</TableHead>
                           <TableHead>Project</TableHead>
-                          <TableHead>Billable</TableHead>
                         </TableRow>
                       </TableHeader>
                       <TableBody>
@@ -544,18 +507,6 @@ export default function ReportsPage() {
                             <TableCell className="text-muted-foreground">{row.dateLabel}</TableCell>
                             <TableCell className="font-medium">{row.duration}</TableCell>
                             <TableCell>{row.projectName}</TableCell>
-                            <TableCell>
-                              <span
-                                className={cn(
-                                  "inline-flex items-center rounded-none border px-2 py-1 text-[11px]",
-                                  row.billableLabel === "Billable"
-                                    ? "border-emerald-600/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
-                                    : "border-border bg-muted/50 text-muted-foreground",
-                                )}
-                              >
-                                {row.billableLabel}
-                              </span>
-                            </TableCell>
                           </TableRow>
                         ))}
                       </TableBody>
@@ -591,7 +542,7 @@ export default function ReportsPage() {
           )}
         </CardContent>
       </Card>
-    </div>
+    </AppPage>
   );
 }
 
diff --git a/apps/web/src/features/time-tracker/pages/time-tracker-page.tsx b/apps/web/src/features/time-tracker/pages/time-tracker-page.tsx
index 56997fb..bce1cb4 100644
--- a/apps/web/src/features/time-tracker/pages/time-tracker-page.tsx
+++ b/apps/web/src/features/time-tracker/pages/time-tracker-page.tsx
@@ -1,13 +1,26 @@
 import { useMemo, useState } from "react";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@open-learn/ui/components/tabs";
 
+import {
+  AppPage,
+  AppPageHeader,
+  AppPageHeaderMeta,
+  AppSurface,
+  AppSurfaceHeader,
+} from "@/components/app-page-shell";
 import { useTasksQuery } from "@/features/tasks/services/queries";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@open-learn/ui/components/tabs";
+
 import { ActivityHistoryList } from "../components/activity-history-list";
 import { ManualEntryForm } from "../components/manual-entry-form";
 import { TimerEntryForm } from "../components/timer-entry-form";
 import { TRACKER_COPY } from "../constants";
 import { useTrackerOverviewQuery } from "../services/queries";
-import { getTrackerOverviewRange } from "../utils/date-time";
+import {
+  formatDuration,
+  getElapsedSeconds,
+  getEntryDurationSeconds,
+  getTrackerOverviewRange,
+} from "../utils/date-time";
 
 export default function TimeTrackerPage() {
   const [mode, setMode] = useState("timer");
@@ -16,51 +29,100 @@ export default function TimeTrackerPage() {
   const trackerOverview = useTrackerOverviewQuery(range);
   const tasksQuery = useTasksQuery();
 
-  return (
-    <div className="flex w-full flex-col gap-6">
-      <div className="flex flex-col gap-1">
-        <h1 className="text-2xl font-semibold">{TRACKER_COPY.pageTitle}</h1>
-        <p className="text-sm text-muted-foreground">{TRACKER_COPY.pageDescription}</p>
-      </div>
+  const entries = trackerOverview.data?.entries ?? [];
+  const activeEntry = trackerOverview.data?.activeEntry ?? null;
+  const projects = trackerOverview.data?.projects ?? [];
+  const tags = trackerOverview.data?.tags ?? [];
+
+  const todayTotal = useMemo(() => {
+    const todayKey = new Date().toDateString();
+    const completedToday = entries.reduce((total, entry) => {
+      return new Date(entry.startAt).toDateString() === todayKey
+        ? total + getEntryDurationSeconds(entry)
+        : total;
+    }, 0);
 
-      <Tabs value={mode} onValueChange={setMode} className="flex flex-col gap-3">
-        <div className="flex justify-start">
-          <TabsList variant="line">
-            <TabsTrigger value="timer">{TRACKER_COPY.timerTab}</TabsTrigger>
-            <TabsTrigger value="manual">{TRACKER_COPY.manualTab}</TabsTrigger>
-          </TabsList>
-        </div>
+    if (!activeEntry || new Date(activeEntry.startAt).toDateString() !== todayKey) {
+      return completedToday;
+    }
 
-        <TabsContent value="timer">
-          <TimerEntryForm
-            activeEntry={trackerOverview.data?.activeEntry ?? null}
-            projects={trackerOverview.data?.projects ?? []}
-            tasks={tasksQuery.data ?? []}
-            tags={trackerOverview.data?.tags ?? []}
-            range={range}
+    return completedToday + getElapsedSeconds(activeEntry.startAt, new Date());
+  }, [activeEntry, entries]);
+
+  return (
+    <Tabs value={mode} onValueChange={setMode}>
+      <AppPage>
+        <AppPageHeader
+          title={TRACKER_COPY.pageTitle}
+          description="Start a timer quickly, add manual entries when needed, and keep recent activity easy to understand."
+          actions={
+            <TabsList variant="line">
+              <TabsTrigger value="timer">{TRACKER_COPY.timerTab}</TabsTrigger>
+              <TabsTrigger value="manual">{TRACKER_COPY.manualTab}</TabsTrigger>
+            </TabsList>
+          }
+        >
+          <AppPageHeaderMeta
+            items={[
+              { label: "State", value: activeEntry ? "Running" : "Ready" },
+              { label: "Today", value: formatDuration(todayTotal) },
+              { label: "Sessions", value: String(entries.length) },
+            ]}
           />
-        </TabsContent>
+        </AppPageHeader>
 
-        <TabsContent value="manual">
-          <ManualEntryForm
-            projects={trackerOverview.data?.projects ?? []}
-            tasks={tasksQuery.data ?? []}
-            tags={trackerOverview.data?.tags ?? []}
-            range={range}
+        <AppSurface>
+          <AppSurfaceHeader
+            label="Capture"
+            title={mode === "timer" ? "Track work live" : "Add time after the fact"}
+            description={
+              mode === "timer"
+                ? "Keep the current task in focus and expand details only when you need them."
+                : "Use manual mode when the work is already done and the exact time is known."
+            }
           />
-        </TabsContent>
-      </Tabs>
+          <div className="p-4">
+            <TabsContent value="timer" className="mt-0">
+              <TimerEntryForm
+                activeEntry={activeEntry}
+                projects={projects}
+                tasks={tasksQuery.data ?? []}
+                tags={tags}
+                range={range}
+              />
+            </TabsContent>
 
-      <ActivityHistoryList
-        entries={trackerOverview.data?.entries ?? []}
-        projects={trackerOverview.data?.projects ?? []}
-        tasks={tasksQuery.data ?? []}
-        tags={trackerOverview.data?.tags ?? []}
-        range={range}
-        expandedEntryId={expandedEntryId}
-        onExpandedEntryChange={setExpandedEntryId}
-        isLoading={trackerOverview.isLoading || tasksQuery.isLoading}
-      />
-    </div>
+            <TabsContent value="manual" className="mt-0">
+              <ManualEntryForm
+                projects={projects}
+                tasks={tasksQuery.data ?? []}
+                tags={tags}
+                range={range}
+              />
+            </TabsContent>
+          </div>
+        </AppSurface>
+
+        <AppSurface>
+          <AppSurfaceHeader
+            label="History"
+            title="Recent activity"
+            description="Entries stay grouped by week and day so edits remain scannable."
+          />
+          <div className="p-4">
+            <ActivityHistoryList
+              entries={entries}
+              projects={projects}
+              tasks={tasksQuery.data ?? []}
+              tags={tags}
+              range={range}
+              expandedEntryId={expandedEntryId}
+              onExpandedEntryChange={setExpandedEntryId}
+              isLoading={trackerOverview.isLoading || tasksQuery.isLoading}
+            />
+          </div>
+        </AppSurface>
+      </AppPage>
+    </Tabs>
   );
 }
diff --git a/apps/web/src/features/time-tracker/pages/tracker-dashboard-page.tsx b/apps/web/src/features/time-tracker/pages/tracker-dashboard-page.tsx
index d919d03..66bf290 100644
--- a/apps/web/src/features/time-tracker/pages/tracker-dashboard-page.tsx
+++ b/apps/web/src/features/time-tracker/pages/tracker-dashboard-page.tsx
@@ -1,6 +1,7 @@
 import { lazy, Suspense, useMemo, useState, type ReactNode } from "react";
 import { ActivityIcon, CalendarRangeIcon } from "lucide-react";
 
+import { AppPage, AppPageHeader, AppPageHeaderMeta } from "@/components/app-page-shell";
 import { Badge } from "@open-learn/ui/components/badge";
 import {
   Card,
@@ -32,17 +33,18 @@ import {
 import { getEntryDescriptionLabel, getElapsedSeconds } from "../utils/date-time";
 
 const DashboardBarChart = lazy(() =>
-  import("../components/dashboard-charts").then((m) => ({ default: m.DashboardBarChart })),
+  import("../components/charts").then((module) => ({
+    default: module.TrackerBarChart,
+  })),
 );
 const DashboardPieChart = lazy(() =>
-  import("../components/dashboard-charts").then((m) => ({ default: m.DashboardPieChart })),
+  import("../components/charts").then((module) => ({
+    default: module.DashboardPieChart,
+  })),
 );
 
-type BreakdownMode = "project" | "billability";
-
 export default function TrackerDashboardPage() {
   const [rangeKey, setRangeKey] = useState<DashboardRangeKey>("30d");
-  const [breakdownMode, setBreakdownMode] = useState<BreakdownMode>("project");
   const range = useMemo(() => getDashboardRange(rangeKey), [rangeKey]);
   const trackerOverview = useTrackerOverviewQuery(range);
   const metrics = useMemo(
@@ -54,33 +56,10 @@ export default function TrackerDashboardPage() {
       }),
     [rangeKey, trackerOverview.data?.entries, trackerOverview.data?.tags],
   );
-  const breakdownItems = useMemo(() => {
-    if (breakdownMode === "billability") {
-      return [
-        {
-          name: "Billable",
-          seconds: metrics.billableSeconds,
-          hours: metrics.billableSeconds / 3600,
-          percentage: metrics.billableShare,
-          fill: "hsl(200 78% 46%)",
-        },
-        {
-          name: "Non-billable",
-          seconds: metrics.nonBillableSeconds,
-          hours: metrics.nonBillableSeconds / 3600,
-          percentage: metrics.nonBillableShare,
-          fill: "hsl(210 16% 82%)",
-        },
-      ].filter((item) => item.seconds > 0);
-    }
 
-    return metrics.projects;
-  }, [breakdownMode, metrics]);
-  const breakdownTitle = breakdownMode === "project" ? "Project split" : "Billable split";
-  const breakdownDescription =
-    breakdownMode === "project"
-      ? "Distribution of tracked time across projects"
-      : "Distribution of tracked time across billable and non-billable work";
+  const breakdownItems = metrics.projects;
+  const breakdownTitle = "Project split";
+  const breakdownDescription = "Distribution of tracked time across projects";
 
   const rangeLabel =
     DASHBOARD_RANGE_OPTIONS.find((option) => option.key === rangeKey)?.label ?? "Last 30 days";
@@ -89,47 +68,38 @@ export default function TrackerDashboardPage() {
   const hasEntries = metrics.totalSeconds > 0;
 
   return (
-    <div className="flex w-full flex-col gap-4">
-      <section className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
-        <div className="min-w-0">
-          <h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
-          <p className="mt-1 text-sm text-muted-foreground">
-            {activeEntry
-              ? `Running now: ${getEntryDescriptionLabel(activeEntry.description)} - ${formatMetricDuration(activeTimerSeconds)}`
-              : "Overview of tracked time across your recent work."}
-          </p>
-        </div>
-        <div className="flex flex-wrap gap-2">
-          <FilterSelect
-            ariaLabel="Select breakdown type"
-            value={breakdownMode}
-            onValueChange={(value) => setBreakdownMode(value as BreakdownMode)}
-            placeholder="Project"
-            options={[
-              { value: "project", label: "Project" },
-              { value: "billability", label: "Billability" },
-            ]}
-          />
-          <FilterSelect
-            ariaLabel="Owner filter"
-            value="me"
-            onValueChange={() => undefined}
-            placeholder="Owner"
-            options={[{ value: "me", label: "Only me" }]}
-          />
-          <FilterSelect
-            ariaLabel="Select date range"
-            value={rangeKey}
-            onValueChange={(value) => setRangeKey(value as DashboardRangeKey)}
-            placeholder="Range"
-            options={DASHBOARD_RANGE_OPTIONS.map((option) => ({
-              value: option.key,
-              label: option.label,
-            }))}
-            icon={<CalendarRangeIcon className="size-3.5 text-muted-foreground" />}
-          />
-        </div>
-      </section>
+    <AppPage className="gap-4">
+      <AppPageHeader
+        title="Overview"
+        description={
+          activeEntry
+            ? `Running now: ${getEntryDescriptionLabel(activeEntry.description)} - ${formatMetricDuration(activeTimerSeconds)}`
+            : "Review recent trends, standout projects, and the shape of tracked work."
+        }
+        actions={
+          <>
+            <FilterSelect
+              ariaLabel="Select date range"
+              value={rangeKey}
+              onValueChange={(value) => setRangeKey(value as DashboardRangeKey)}
+              placeholder="Range"
+              options={DASHBOARD_RANGE_OPTIONS.map((option) => ({
+                value: option.key,
+                label: option.label,
+              }))}
+              icon={<CalendarRangeIcon className="size-3.5 text-muted-foreground" />}
+            />
+          </>
+        }
+      >
+        <AppPageHeaderMeta
+          items={[
+            { label: "Range", value: rangeLabel },
+            { label: "Tracked", value: formatMetricDuration(metrics.totalSeconds) },
+            { label: "Sessions", value: String(metrics.totalSessions) },
+          ]}
+        />
+      </AppPageHeader>
 
       <section className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_340px]">
         <Card className="py-0">
@@ -161,7 +131,7 @@ export default function TrackerDashboardPage() {
                   <Skeleton className="h-[220px] w-[220px] justify-self-center" />
                   <div className="space-y-3">
                     {Array.from({ length: 3 }, (_, index) => (
-                      <Skeleton key={`skeleton-row-${index}`} className="h-12 w-full" />
+                      <Skeleton key={`overview-skeleton-${index}`} className="h-12 w-full" />
                     ))}
                   </div>
                 </div>
@@ -186,8 +156,11 @@ export default function TrackerDashboardPage() {
                     <div className="grid gap-5 px-3 py-4 md:px-4 lg:grid-cols-[260px_minmax(0,1fr)] lg:items-center">
                       <Skeleton className="h-[220px] w-[220px] justify-self-center" />
                       <div className="space-y-3">
-                        {Array.from({ length: 3 }, (_, i) => (
-                          <Skeleton key={`skeleton-pie-fallback-${i}`} className="h-12 w-full" />
+                        {Array.from({ length: 3 }, (_, index) => (
+                          <Skeleton
+                            key={`overview-pie-skeleton-${index}`}
+                            className="h-12 w-full"
+                          />
                         ))}
                       </div>
                     </div>
@@ -202,7 +175,7 @@ export default function TrackerDashboardPage() {
             ) : (
               <EmptyState
                 title="No tracked time in this range"
-                description="Log a few sessions from the tracker to populate the dashboard."
+                description="Log a few sessions from the tracker to populate the overview."
               />
             )}
           </CardContent>
@@ -222,7 +195,7 @@ export default function TrackerDashboardPage() {
             {trackerOverview.isLoading ? (
               <div className="space-y-2 p-3">
                 {Array.from({ length: 8 }, (_, index) => (
-                  <Skeleton key={`skeleton-activity-${index}`} className="h-14 w-full" />
+                  <Skeleton key={`activity-skeleton-${index}`} className="h-14 w-full" />
                 ))}
               </div>
             ) : metrics.activities.length ? (
@@ -249,14 +222,14 @@ export default function TrackerDashboardPage() {
             ) : (
               <EmptyState
                 title="No activities ranked yet"
-                description="Once you have tracked entries, your top activities will appear here."
+                description="Once you have tracked entries, the most-used activities will appear here."
                 className="m-3 min-h-[240px]"
               />
             )}
           </CardContent>
         </Card>
       </section>
-    </div>
+    </AppPage>
   );
 }
 
@@ -307,7 +280,7 @@ function SummaryCell({
     <div
       className={cn(
         "space-y-1 px-4 py-5",
-        bordered && "border-t border-border/70 md:border-t-0 md:border-l",
+        bordered && "border-t border-border/70 md:border-l md:border-t-0",
       )}
     >
       <p className="text-xs text-muted-foreground">{label}</p>
diff --git a/apps/web/src/features/time-tracker/styles/react-big-calendar.css b/apps/web/src/features/time-tracker/styles/react-big-calendar.css
index ae6afe0..9d99a7c 100644
--- a/apps/web/src/features/time-tracker/styles/react-big-calendar.css
+++ b/apps/web/src/features/time-tracker/styles/react-big-calendar.css
@@ -1,5 +1,4 @@
 .open-clock-calendar {
-  --calendar-billable: var(--color-billable);
   --calendar-tracked: var(--color-tracked);
   --calendar-active: color-mix(in srgb, var(--foreground) 12%, transparent);
   --calendar-grid: color-mix(in srgb, var(--border) 90%, transparent);
@@ -95,8 +94,8 @@
 }
 
 .open-clock-calendar .rbc-current-time-indicator {
-  border-top: 1px solid var(--calendar-billable);
-  background: var(--calendar-billable);
+  border-top: 1px solid var(--calendar-tracked);
+  background: var(--calendar-tracked);
   height: 1px;
 }
 
@@ -116,11 +115,6 @@
   box-shadow: inset 0 0 0 1px var(--ring);
 }
 
-.open-clock-calendar .rbc-event.calendar-entry-event--billable {
-  background: color-mix(in srgb, var(--calendar-billable) 10%, var(--background));
-  border-color: color-mix(in srgb, var(--calendar-billable) 35%, transparent);
-}
-
 .open-clock-calendar .rbc-event.calendar-entry-event--tracked {
   background: color-mix(in srgb, var(--calendar-tracked) 10%, var(--background));
   border-color: color-mix(in srgb, var(--calendar-tracked) 35%, transparent);
diff --git a/apps/web/src/features/time-tracker/utils/calendar.ts b/apps/web/src/features/time-tracker/utils/calendar.ts
index 7a56e9c..61dab21 100644
--- a/apps/web/src/features/time-tracker/utils/calendar.ts
+++ b/apps/web/src/features/time-tracker/utils/calendar.ts
@@ -31,7 +31,6 @@ export interface CalendarEntryEventResource {
   taskTitle: string | null;
   taskDisplayKey: string | null;
   tagNames: string[];
-  isBillable: boolean;
   isActive: boolean;
   durationSeconds: number;
   canEdit: boolean;
@@ -102,7 +101,6 @@ function toCalendarEvent(entry: TrackerEntry, options?: { isActive?: boolean; no
       taskTitle: entry.task?.title ?? null,
       taskDisplayKey: entry.task?.displayKey ?? null,
       tagNames: entry.tags.map((tag) => tag.name),
-      isBillable: entry.isBillable,
       isActive,
       durationSeconds: isActive
         ? getElapsedSeconds(entry.startAt, now)
@@ -198,9 +196,7 @@ export function getCalendarEventClassName(event: CalendarEntryEvent) {
     return "calendar-entry-event calendar-entry-event--active";
   }
 
-  return event.resource.isBillable
-    ? "calendar-entry-event calendar-entry-event--billable"
-    : "calendar-entry-event calendar-entry-event--tracked";
+  return "calendar-entry-event calendar-entry-event--tracked";
 }
 
 export function formatCalendarEventDuration(totalSeconds: number) {
diff --git a/apps/web/src/features/time-tracker/utils/dashboard.ts b/apps/web/src/features/time-tracker/utils/dashboard.ts
index 8564903..f819c2d 100644
--- a/apps/web/src/features/time-tracker/utils/dashboard.ts
+++ b/apps/web/src/features/time-tracker/utils/dashboard.ts
@@ -54,7 +54,6 @@ export interface DashboardDailyDatum {
   dateKey: string;
   label: string;
   totalHours: number;
-  billableHours: number;
 }
 
 export interface DashboardProjectDatum {
@@ -75,10 +74,6 @@ export interface DashboardActivityDatum {
 
 export interface TrackerDashboardMetrics {
   totalSeconds: number;
-  billableSeconds: number;
-  nonBillableSeconds: number;
-  billableShare: number;
-  nonBillableShare: number;
   averageDaySeconds: number;
   trackedDays: number;
   topProjectName: string;
@@ -190,7 +185,6 @@ export function buildTrackerDashboardMetrics({
       dateKey,
       label: formatAxisLabel(day),
       totalHours: 0,
-      billableHours: 0,
     });
   }
 
@@ -202,7 +196,6 @@ export function buildTrackerDashboardMetrics({
   >();
 
   let totalSeconds = 0;
-  let billableSeconds = 0;
   let totalSessions = 0;
 
   for (const entry of entries) {
@@ -215,10 +208,6 @@ export function buildTrackerDashboardMetrics({
     totalSessions += 1;
     totalSeconds += durationSeconds;
 
-    if (entry.isBillable) {
-      billableSeconds += durationSeconds;
-    }
-
     const startDate = new Date(entry.startAt);
     const dateKey = toDateKey(startDate);
     const day = dailyMap.get(dateKey);
@@ -226,10 +215,6 @@ export function buildTrackerDashboardMetrics({
 
     if (day) {
       day.totalHours += durationHours;
-
-      if (entry.isBillable) {
-        day.billableHours += durationHours;
-      }
     }
 
     const projectName = entry.project?.name ?? "Without project";
@@ -300,11 +285,6 @@ export function buildTrackerDashboardMetrics({
 
   return {
     totalSeconds,
-    billableSeconds,
-    nonBillableSeconds: totalSeconds - billableSeconds,
-    billableShare: totalSeconds > 0 ? (billableSeconds / totalSeconds) * 100 : 0,
-    nonBillableShare:
-      totalSeconds > 0 ? ((totalSeconds - billableSeconds) / totalSeconds) * 100 : 0,
     averageDaySeconds,
     trackedDays,
     topProjectName,
diff --git a/apps/web/src/features/time-tracker/utils/date-time.ts b/apps/web/src/features/time-tracker/utils/date-time.ts
index e0a739d..705b3bd 100644
--- a/apps/web/src/features/time-tracker/utils/date-time.ts
+++ b/apps/web/src/features/time-tracker/utils/date-time.ts
@@ -77,7 +77,6 @@ export function getDefaultManualValues() {
     projectId: null as number | null,
     taskId: null as number | null,
     tagIds: [] as number[],
-    isBillable: false,
   };
 }
 
@@ -87,7 +86,6 @@ export function getTimerFormValues(entry?: TrackerEntry | null) {
     projectId: entry?.project?.id ?? null,
     taskId: entry?.task?.id ?? null,
     tagIds: entry?.tags.map((tag) => tag.id) ?? [],
-    isBillable: entry?.isBillable ?? false,
   };
 }
 
@@ -103,7 +101,6 @@ export function getEditableEntryValues(entry: TrackerEntry) {
     projectId: entry.project?.id ?? null,
     taskId: entry.task?.id ?? null,
     tagIds: entry.tags.map((tag) => tag.id),
-    isBillable: entry.isBillable,
   };
 }
 
diff --git a/apps/web/src/features/time-tracker/utils/reports.ts b/apps/web/src/features/time-tracker/utils/reports.ts
index 3286faa..01e6794 100644
--- a/apps/web/src/features/time-tracker/utils/reports.ts
+++ b/apps/web/src/features/time-tracker/utils/reports.ts
@@ -33,7 +33,6 @@ export interface ReportDailyDatum {
   dateKey: string;
   label: string;
   totalHours: number;
-  billableHours: number;
 }
 
 export interface ReportProjectDatum {
@@ -52,14 +51,11 @@ export interface ReportTableRow {
   hours: string;
   projectName: string;
   tagsLabel: string;
-  billableLabel: string;
   description: string;
 }
 
 export interface TrackerReportMetrics {
   totalSeconds: number;
-  billableSeconds: number;
-  nonBillableSeconds: number;
   totalSessions: number;
   activeDays: number;
   projectCount: number;
@@ -267,7 +263,6 @@ export function buildTrackerReportMetrics({
       dateKey,
       label: formatAxisLabel(day),
       totalHours: 0,
-      billableHours: 0,
     });
   }
 
@@ -286,13 +281,11 @@ export function buildTrackerReportMetrics({
         hours: formatDecimalHours(durationSeconds),
         projectName: entry.project?.name ?? "Without project",
         tagsLabel: entry.tags.length ? entry.tags.map((tag) => tag.name).join(", ") : "-",
-        billableLabel: entry.isBillable ? "Billable" : "Non-billable",
         description: getEntryDescriptionLabel(entry.description),
       } satisfies ReportTableRow;
     });
 
   let totalSeconds = 0;
-  let billableSeconds = 0;
 
   for (const entry of entries) {
     const durationSeconds = getEntryDurationSeconds(entry);
@@ -303,19 +296,12 @@ export function buildTrackerReportMetrics({
 
     totalSeconds += durationSeconds;
 
-    if (entry.isBillable) {
-      billableSeconds += durationSeconds;
-    }
-
     const startDate = new Date(entry.startAt);
     const dateKey = toDateKey(startDate);
     const day = dailyMap.get(dateKey);
 
     if (day) {
       day.totalHours += formatHours(durationSeconds);
-      if (entry.isBillable) {
-        day.billableHours += formatHours(durationSeconds);
-      }
     }
 
     const projectName = entry.project?.name ?? "Without project";
@@ -345,8 +331,6 @@ export function buildTrackerReportMetrics({
 
   return {
     totalSeconds,
-    billableSeconds,
-    nonBillableSeconds: totalSeconds - billableSeconds,
     totalSessions: rows.length,
     activeDays: [...dailyMap.values()].filter((day) => day.totalHours > 0).length,
     projectCount: projectTotals.size,
@@ -376,8 +360,6 @@ export function exportTrackerReport({
   const summary = {
     range: rangeLabel,
     totalTracked: formatDuration(metrics.totalSeconds),
-    billable: formatDuration(metrics.billableSeconds),
-    nonBillable: formatDuration(metrics.nonBillableSeconds),
     sessions: metrics.totalSessions,
     activeDays: metrics.activeDays,
     projects: metrics.projectCount,
@@ -396,13 +378,11 @@ export function exportTrackerReport({
     const lines = [
       ["Range", summary.range],
       ["Total tracked", summary.totalTracked],
-      ["Billable", summary.billable],
-      ["Non-billable", summary.nonBillable],
       ["Sessions", String(summary.sessions)],
       ["Active days", String(summary.activeDays)],
       ["Projects", String(summary.projects)],
       [],
-      ["Date", "Start", "End", "Duration", "Hours", "Project", "Tags", "Billable", "Description"],
+      ["Date", "Start", "End", "Duration", "Hours", "Project", "Tags", "Description"],
       ...metrics.rows.map((row) => [
         row.dateLabel,
         row.startTime,
@@ -411,7 +391,6 @@ export function exportTrackerReport({
         row.hours,
         row.projectName,
         row.tagsLabel,
-        row.billableLabel,
         row.description,
       ]),
     ];
@@ -435,7 +414,6 @@ export function exportTrackerReport({
           <td>${escapeHtml(row.hours)}</td>
           <td>${escapeHtml(row.projectName)}</td>
           <td>${escapeHtml(row.tagsLabel)}</td>
-          <td>${escapeHtml(row.billableLabel)}</td>
           <td>${escapeHtml(row.description)}</td>
         </tr>`,
     )
@@ -458,8 +436,6 @@ export function exportTrackerReport({
           <tr><th colspan="2">Time report summary</th></tr>
           <tr><td>Range</td><td>${escapeHtml(summary.range)}</td></tr>
           <tr><td>Total tracked</td><td>${escapeHtml(summary.totalTracked)}</td></tr>
-          <tr><td>Billable</td><td>${escapeHtml(summary.billable)}</td></tr>
-          <tr><td>Non-billable</td><td>${escapeHtml(summary.nonBillable)}</td></tr>
           <tr><td>Sessions</td><td>${summary.sessions}</td></tr>
           <tr><td>Active days</td><td>${summary.activeDays}</td></tr>
           <tr><td>Projects</td><td>${summary.projects}</td></tr>
@@ -475,7 +451,6 @@ export function exportTrackerReport({
               <th>Hours</th>
               <th>Project</th>
               <th>Tags</th>
-              <th>Billable</th>
               <th>Description</th>
             </tr>
           </thead>
diff --git a/apps/web/src/hooks/use-table-selection.ts b/apps/web/src/hooks/use-table-selection.ts
new file mode 100644
index 0000000..2fa0ba7
--- /dev/null
+++ b/apps/web/src/hooks/use-table-selection.ts
@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react";
+
+interface UseTableSelectionOptions<T extends { id: number }> {
+  items: T[];
+}
+
+interface UseTableSelectionReturn {
+  selectedIds: Set<number>;
+  toggleSelect: (id: number) => void;
+  toggleSelectAll: () => void;
+  allSelected: boolean;
+  someSelected: boolean;
+}
+
+export function useTableSelection<T extends { id: number }>({
+  items,
+}: UseTableSelectionOptions<T>): UseTableSelectionReturn {
+  const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
+
+  useEffect(() => {
+    const visibleIds = new Set(items.map((item) => item.id));
+    setSelectedIds((prev) => {
+      const next = new Set([...prev].filter((id) => visibleIds.has(id)));
+      return next.size === prev.size ? prev : next;
+    });
+  }, [items]);
+
+  function toggleSelect(id: number) {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  }
+
+  function toggleSelectAll() {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      const areAllSelected = items.length > 0 && items.every((item) => prev.has(item.id));
+      if (areAllSelected) {
+        for (const item of items) {
+          next.delete(item.id);
+        }
+      } else {
+        for (const item of items) {
+          next.add(item.id);
+        }
+      }
+      return next;
+    });
+  }
+
+  const allSelected = items.length > 0 && items.every((item) => selectedIds.has(item.id));
+  const someSelected = items.some((item) => selectedIds.has(item.id)) && !allSelected;
+
+  return { selectedIds, toggleSelect, toggleSelectAll, allSelected, someSelected };
+}
diff --git a/apps/web/src/public/hero-image-dark.png b/apps/web/src/public/hero-image-dark.png
new file mode 100644
index 0000000..ec3c1f1
Binary files /dev/null and b/apps/web/src/public/hero-image-dark.png differ
diff --git a/apps/web/src/public/hero-image-light.png b/apps/web/src/public/hero-image-light.png
new file mode 100644
index 0000000..527fc8f
Binary files /dev/null and b/apps/web/src/public/hero-image-light.png differ
diff --git a/apps/web/src/public/logo.svg b/apps/web/src/public/logo.svg
new file mode 100644
index 0000000..d2d4782
--- /dev/null
+++ b/apps/web/src/public/logo.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="474" height="512">
+<path d="M0 0 C0.71495132 -0.00287018 1.42990265 -0.00574036 2.16651917 -0.00869751 C3.67522984 -0.01073443 5.18396714 -0.00523051 6.69262695 0.00732422 C8.99295627 0.02336116 11.29152254 0.00747686 13.59179688 -0.01171875 C15.06120177 -0.00973579 16.53060558 -0.00589101 18 0 C18.68348007 -0.00607269 19.36696014 -0.01214539 20.07115173 -0.0184021 C24.39446807 0.04474833 27.17365879 0.67885116 30.56640625 3.3984375 C33.13911685 6.84879357 32.83510923 10.46016699 32.875 14.6484375 C32.90015143 16.07552507 32.92554957 17.50260831 32.95117188 18.9296875 C32.979937 21.16795814 33.00397083 23.4061539 33.02270508 25.64453125 C33.04437907 27.81288278 33.08380556 29.98038176 33.125 32.1484375 C33.13845459 33.44265625 33.15190918 34.736875 33.16577148 36.0703125 C33.59439346 39.63093086 33.79763292 41.11903859 36.56640625 43.3984375 C39.87087994 43.9964778 39.87087994 43.9964778 43.68359375 43.90234375 C44.37776398 43.91176498 45.0719342 43.92118622 45.78713989 43.93089294 C48.00552848 43.95956061 50.22284739 43.96262151 52.44140625 43.9609375 C54.65266832 43.96455146 56.86314921 43.97417011 59.07424927 44.00169373 C61.08566779 44.02615295 63.0973198 44.028415 65.10888672 44.02954102 C69.69241962 44.51857634 72.08128391 45.96530358 75.35180664 49.12133789 C77.05186988 52.30857204 77.01510281 55.30535728 77 58.83203125 C77.00524185 59.54698257 77.0104837 60.2619339 77.0158844 60.99855042 C77.02229341 62.50723983 77.02098206 64.01597929 77.01245117 65.5246582 C77.0039456 67.82529288 77.03270495 70.12343889 77.06445312 72.42382812 C77.06606553 73.89322843 77.06548685 75.3626331 77.0625 76.83203125 C77.07373398 77.51551132 77.08496796 78.19899139 77.09654236 78.90318298 C77.02762836 83.65906297 75.9172531 86.05462286 72.56640625 89.3984375 C69.64469785 90.8592917 66.9898992 90.60149777 63.73046875 90.6796875 C63.05470795 90.69809692 62.37894714 90.71650635 61.68270874 90.73547363 C59.51903023 90.79425585 57.3552718 90.84703128 55.19140625 90.8984375 C52.35010026 90.96626877 49.50903438 91.04000826 46.66796875 91.1171875 C45.40291504 91.14748047 44.13786133 91.17777344 42.83447266 91.20898438 C39.08755847 91.3519466 39.08755847 91.3519466 35.56640625 92.3984375 C31.92267688 97.16988446 33.19453998 104.41318803 33.19580078 110.15234375 C33.19142003 112.39139451 33.1550566 114.62848424 33.1171875 116.8671875 C33.11132011 118.29426412 33.1073502 119.72135006 33.10546875 121.1484375 C33.09314209 123.08976562 33.09314209 123.08976562 33.08056641 125.0703125 C33.31148892 128.43209601 33.31148892 128.43209601 35.29418945 130.8112793 C37.88558139 132.62138341 39.25021904 132.93997688 42.3828125 133.04296875 C43.30731201 133.08059326 44.23181152 133.11821777 45.18432617 133.15698242 C46.1560376 133.1747876 47.12774902 133.19259277 48.12890625 133.2109375 C49.11802002 133.24098877 50.10713379 133.27104004 51.1262207 133.30200195 C62.87028978 134.08049676 62.87028978 134.08049676 73.56640625 130.3984375 C74.7462751 126.85883096 74.69306987 124.01591844 74.70703125 120.28125 C74.72535817 118.85545276 74.74492838 117.42967106 74.765625 116.00390625 C74.7945843 113.76324165 74.81640622 111.52357876 74.81689453 109.28271484 C74.82023808 107.11466292 74.85482801 104.94890238 74.89453125 102.78125 C74.90387695 101.48590332 74.91322266 100.19055664 74.92285156 98.85595703 C75.72111874 94.56723938 77.23007726 93.1122794 80.56640625 90.3984375 C85.03977906 88.16175109 91.13848655 89.1712109 96.11450195 89.15820312 C98.3599177 89.14851939 100.60440937 89.11750793 102.84960938 89.0859375 C104.28254666 89.07940498 105.71549048 89.07415548 107.1484375 89.0703125 C108.45014893 89.0609668 109.75186035 89.05162109 111.09301758 89.04199219 C114.82216596 89.42468402 116.65677254 90.07020467 119.56640625 92.3984375 C123.2235411 97.28128881 121.89899804 104.57308611 121.88208008 110.41479492 C121.87893099 112.6930372 121.90235392 114.96996601 121.92773438 117.24804688 C121.93000882 118.71093588 121.93071019 120.17382834 121.9296875 121.63671875 C121.93889725 122.30987625 121.94810699 122.98303375 121.95759583 123.67658997 C121.86868591 132.91538625 117.63721295 138.01591987 111.56640625 144.3984375 C110.9825415 145.01570709 110.39867676 145.63297668 109.79711914 146.26895142 C107.99636051 148.14723958 106.17665397 150.00467956 104.34765625 151.85546875 C103.68608521 152.52511154 103.02451416 153.19475433 102.34289551 153.88468933 C100.95612937 155.2851673 99.56788869 156.6841866 98.17822266 158.08178711 C96.76586231 159.50574024 95.35799934 160.93416772 93.95458984 162.36694336 C91.90786754 164.4563554 89.84819307 166.5321783 87.78515625 168.60546875 C87.16515747 169.24297562 86.54515869 169.88048248 85.90637207 170.53730774 C76.27665231 180.11987868 65.03172832 179.59686994 52.19140625 179.6484375 C50.91523438 179.6690625 49.6390625 179.6896875 48.32421875 179.7109375 C39.64280593 179.74681111 32.02424486 179.34606936 25.00390625 173.8359375 C24.19953125 173.0315625 23.39515625 172.2271875 22.56640625 171.3984375 C22.56640625 170.7384375 22.56640625 170.0784375 22.56640625 169.3984375 C21.24640625 168.7384375 19.92640625 168.0784375 18.56640625 167.3984375 C18.56640625 166.7384375 18.56640625 166.0784375 18.56640625 165.3984375 C17.90640625 165.3984375 17.24640625 165.3984375 16.56640625 165.3984375 C16.56640625 164.7384375 16.56640625 164.0784375 16.56640625 163.3984375 C15.73109375 163.058125 15.73109375 163.058125 14.87890625 162.7109375 C11.90481037 161.02293714 9.8463176 158.93167233 7.56640625 156.3984375 C7.56640625 155.7384375 7.56640625 155.0784375 7.56640625 154.3984375 C7.02886719 154.18316406 6.49132812 153.96789062 5.9375 153.74609375 C-1.83654812 149.32756558 -10.60599249 139.95300781 -13.43359375 131.3984375 C-14.43451115 124.98510039 -14.58759945 118.71153399 -14.59472656 112.22827148 C-14.59969147 111.13619385 -14.60465637 110.04411621 -14.60977173 108.91894531 C-14.62430785 105.32746743 -14.63117905 101.73603364 -14.63671875 98.14453125 C-14.64247476 95.63924662 -14.64823244 93.13396199 -14.6539917 90.62867737 C-14.6631388 86.05448302 -14.66945068 81.48030122 -14.67248845 76.90609878 C-14.67697477 70.19017055 -14.69456416 63.47444526 -14.72348905 56.75857872 C-14.74774951 50.9215909 -14.75543438 45.08467062 -14.757164 39.2476368 C-14.7601884 36.77213495 -14.76820973 34.29663391 -14.78134918 31.82116508 C-14.79841623 28.36035626 -14.79652817 24.9000429 -14.79003906 21.43920898 C-14.79925385 20.42031082 -14.80846863 19.40141266 -14.81796265 18.35163879 C-14.7797593 11.84263102 -14.24783771 6.52253941 -9.71069336 1.48583984 C-6.50412144 -0.04542115 -3.48096962 -0.03083695 0 0 Z " fill="#2C292A" transform="translate(183.43359375,147.6015625)"/>
+</svg>
diff --git a/apps/web/src/routeTree.gen.ts b/apps/web/src/routeTree.gen.ts
index 693ac27..3d3e00e 100644
--- a/apps/web/src/routeTree.gen.ts
+++ b/apps/web/src/routeTree.gen.ts
@@ -8,339 +8,512 @@
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
-import { Route as rootRouteImport } from './routes/__root'
-import { Route as SuccessRouteImport } from './routes/success'
-import { Route as LoginRouteImport } from './routes/login'
-import { Route as IndexRouteImport } from './routes/index'
-import { Route as AppAppRouteImport } from './routes/app._app'
-import { Route as AcceptInvitationInvitationIdRouteImport } from './routes/accept-invitation.$invitationId'
-import { Route as AppAppIndexRouteImport } from './routes/app._app.index'
-import { Route as AppAppTrackerRouteImport } from './routes/app._app.tracker'
-import { Route as AppAppTeamsRouteImport } from './routes/app._app.teams'
-import { Route as AppAppTasksRouteImport } from './routes/app._app.tasks'
-import { Route as AppAppTagsRouteImport } from './routes/app._app.tags'
-import { Route as AppAppReportsRouteImport } from './routes/app._app.reports'
-import { Route as AppAppProjectsRouteImport } from './routes/app._app.projects'
-import { Route as AppAppClientsRouteImport } from './routes/app._app.clients'
-import { Route as AppAppCalendarRouteImport } from './routes/app._app.calendar'
-import { Route as AppAppAiRouteImport } from './routes/app._app.ai'
+import { Route as rootRouteImport } from "./routes/__root";
+import { Route as SuccessRouteImport } from "./routes/success";
+import { Route as LoginRouteImport } from "./routes/login";
+import { Route as IndexRouteImport } from "./routes/index";
+import { Route as AppAppRouteImport } from "./routes/app._app";
+import { Route as AcceptInvitationInvitationIdRouteImport } from "./routes/accept-invitation.$invitationId";
+import { Route as AppAppIndexRouteImport } from "./routes/app._app.index";
+import { Route as AppAppTrackerRouteImport } from "./routes/app._app.tracker";
+import { Route as AppAppTeamsRouteImport } from "./routes/app._app.teams";
+import { Route as AppAppTasksRouteImport } from "./routes/app._app.tasks";
+import { Route as AppAppTagsRouteImport } from "./routes/app._app.tags";
+import { Route as AppAppReportsRouteImport } from "./routes/app._app.reports";
+import { Route as AppAppProjectsRouteImport } from "./routes/app._app.projects";
+import { Route as AppAppOverviewRouteImport } from "./routes/app._app.overview";
+import { Route as AppAppManageRouteImport } from "./routes/app._app.manage";
+import { Route as AppAppDashboardRouteImport } from "./routes/app._app.dashboard";
+import { Route as AppAppClientsRouteImport } from "./routes/app._app.clients";
+import { Route as AppAppCalendarRouteImport } from "./routes/app._app.calendar";
+import { Route as AppAppAiRouteImport } from "./routes/app._app.ai";
+import { Route as AppAppManageIndexRouteImport } from "./routes/app._app.manage.index";
+import { Route as AppAppManageTeamsRouteImport } from "./routes/app._app.manage.teams";
+import { Route as AppAppManageTagsRouteImport } from "./routes/app._app.manage.tags";
+import { Route as AppAppManageProjectsRouteImport } from "./routes/app._app.manage.projects";
+import { Route as AppAppManageClientsRouteImport } from "./routes/app._app.manage.clients";
 
 const SuccessRoute = SuccessRouteImport.update({
-  id: '/success',
-  path: '/success',
+  id: "/success",
+  path: "/success",
   getParentRoute: () => rootRouteImport,
-} as any)
+} as any);
 const LoginRoute = LoginRouteImport.update({
-  id: '/login',
-  path: '/login',
+  id: "/login",
+  path: "/login",
   getParentRoute: () => rootRouteImport,
-} as any)
+} as any);
 const IndexRoute = IndexRouteImport.update({
-  id: '/',
-  path: '/',
+  id: "/",
+  path: "/",
   getParentRoute: () => rootRouteImport,
-} as any)
+} as any);
 const AppAppRoute = AppAppRouteImport.update({
-  id: '/app/_app',
-  path: '/app',
+  id: "/app/_app",
+  path: "/app",
   getParentRoute: () => rootRouteImport,
-} as any)
-const AcceptInvitationInvitationIdRoute =
-  AcceptInvitationInvitationIdRouteImport.update({
-    id: '/accept-invitation/$invitationId',
-    path: '/accept-invitation/$invitationId',
-    getParentRoute: () => rootRouteImport,
-  } as any)
+} as any);
+const AcceptInvitationInvitationIdRoute = AcceptInvitationInvitationIdRouteImport.update({
+  id: "/accept-invitation/$invitationId",
+  path: "/accept-invitation/$invitationId",
+  getParentRoute: () => rootRouteImport,
+} as any);
 const AppAppIndexRoute = AppAppIndexRouteImport.update({
-  id: '/',
-  path: '/',
+  id: "/",
+  path: "/",
   getParentRoute: () => AppAppRoute,
-} as any)
+} as any);
 const AppAppTrackerRoute = AppAppTrackerRouteImport.update({
-  id: '/tracker',
-  path: '/tracker',
+  id: "/tracker",
+  path: "/tracker",
   getParentRoute: () => AppAppRoute,
-} as any)
+} as any);
 const AppAppTeamsRoute = AppAppTeamsRouteImport.update({
-  id: '/teams',
-  path: '/teams',
+  id: "/teams",
+  path: "/teams",
   getParentRoute: () => AppAppRoute,
-} as any)
+} as any);
 const AppAppTasksRoute = AppAppTasksRouteImport.update({
-  id: '/tasks',
-  path: '/tasks',
+  id: "/tasks",
+  path: "/tasks",
   getParentRoute: () => AppAppRoute,
-} as any)
+} as any);
 const AppAppTagsRoute = AppAppTagsRouteImport.update({
-  id: '/tags',
-  path: '/tags',
+  id: "/tags",
+  path: "/tags",
   getParentRoute: () => AppAppRoute,
-} as any)
+} as any);
 const AppAppReportsRoute = AppAppReportsRouteImport.update({
-  id: '/reports',
-  path: '/reports',
+  id: "/reports",
+  path: "/reports",
   getParentRoute: () => AppAppRoute,
-} as any)
+} as any);
 const AppAppProjectsRoute = AppAppProjectsRouteImport.update({
-  id: '/projects',
-  path: '/projects',
+  id: "/projects",
+  path: "/projects",
+  getParentRoute: () => AppAppRoute,
+} as any);
+const AppAppOverviewRoute = AppAppOverviewRouteImport.update({
+  id: "/overview",
+  path: "/overview",
+  getParentRoute: () => AppAppRoute,
+} as any);
+const AppAppManageRoute = AppAppManageRouteImport.update({
+  id: "/manage",
+  path: "/manage",
   getParentRoute: () => AppAppRoute,
-} as any)
+} as any);
+const AppAppDashboardRoute = AppAppDashboardRouteImport.update({
+  id: "/dashboard",
+  path: "/dashboard",
+  getParentRoute: () => AppAppRoute,
+} as any);
 const AppAppClientsRoute = AppAppClientsRouteImport.update({
-  id: '/clients',
-  path: '/clients',
+  id: "/clients",
+  path: "/clients",
   getParentRoute: () => AppAppRoute,
-} as any)
+} as any);
 const AppAppCalendarRoute = AppAppCalendarRouteImport.update({
-  id: '/calendar',
-  path: '/calendar',
+  id: "/calendar",
+  path: "/calendar",
   getParentRoute: () => AppAppRoute,
-} as any)
+} as any);
 const AppAppAiRoute = AppAppAiRouteImport.update({
-  id: '/ai',
-  path: '/ai',
+  id: "/ai",
+  path: "/ai",
   getParentRoute: () => AppAppRoute,
-} as any)
+} as any);
+const AppAppManageIndexRoute = AppAppManageIndexRouteImport.update({
+  id: "/",
+  path: "/",
+  getParentRoute: () => AppAppManageRoute,
+} as any);
+const AppAppManageTeamsRoute = AppAppManageTeamsRouteImport.update({
+  id: "/teams",
+  path: "/teams",
+  getParentRoute: () => AppAppManageRoute,
+} as any);
+const AppAppManageTagsRoute = AppAppManageTagsRouteImport.update({
+  id: "/tags",
+  path: "/tags",
+  getParentRoute: () => AppAppManageRoute,
+} as any);
+const AppAppManageProjectsRoute = AppAppManageProjectsRouteImport.update({
+  id: "/projects",
+  path: "/projects",
+  getParentRoute: () => AppAppManageRoute,
+} as any);
+const AppAppManageClientsRoute = AppAppManageClientsRouteImport.update({
+  id: "/clients",
+  path: "/clients",
+  getParentRoute: () => AppAppManageRoute,
+} as any);
 
 export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute
-  '/login': typeof LoginRoute
-  '/success': typeof SuccessRoute
-  '/accept-invitation/$invitationId': typeof AcceptInvitationInvitationIdRoute
-  '/app': typeof AppAppRouteWithChildren
-  '/app/ai': typeof AppAppAiRoute
-  '/app/calendar': typeof AppAppCalendarRoute
-  '/app/clients': typeof AppAppClientsRoute
-  '/app/projects': typeof AppAppProjectsRoute
-  '/app/reports': typeof AppAppReportsRoute
-  '/app/tags': typeof AppAppTagsRoute
-  '/app/tasks': typeof AppAppTasksRoute
-  '/app/teams': typeof AppAppTeamsRoute
-  '/app/tracker': typeof AppAppTrackerRoute
-  '/app/': typeof AppAppIndexRoute
+  "/": typeof IndexRoute;
+  "/login": typeof LoginRoute;
+  "/success": typeof SuccessRoute;
+  "/accept-invitation/$invitationId": typeof AcceptInvitationInvitationIdRoute;
+  "/app": typeof AppAppRouteWithChildren;
+  "/app/ai": typeof AppAppAiRoute;
+  "/app/calendar": typeof AppAppCalendarRoute;
+  "/app/clients": typeof AppAppClientsRoute;
+  "/app/dashboard": typeof AppAppDashboardRoute;
+  "/app/manage": typeof AppAppManageRouteWithChildren;
+  "/app/overview": typeof AppAppOverviewRoute;
+  "/app/projects": typeof AppAppProjectsRoute;
+  "/app/reports": typeof AppAppReportsRoute;
+  "/app/tags": typeof AppAppTagsRoute;
+  "/app/tasks": typeof AppAppTasksRoute;
+  "/app/teams": typeof AppAppTeamsRoute;
+  "/app/tracker": typeof AppAppTrackerRoute;
+  "/app/": typeof AppAppIndexRoute;
+  "/app/manage/clients": typeof AppAppManageClientsRoute;
+  "/app/manage/projects": typeof AppAppManageProjectsRoute;
+  "/app/manage/tags": typeof AppAppManageTagsRoute;
+  "/app/manage/teams": typeof AppAppManageTeamsRoute;
+  "/app/manage/": typeof AppAppManageIndexRoute;
 }
 export interface FileRoutesByTo {
-  '/': typeof IndexRoute
-  '/login': typeof LoginRoute
-  '/success': typeof SuccessRoute
-  '/accept-invitation/$invitationId': typeof AcceptInvitationInvitationIdRoute
-  '/app/ai': typeof AppAppAiRoute
-  '/app/calendar': typeof AppAppCalendarRoute
-  '/app/clients': typeof AppAppClientsRoute
-  '/app/projects': typeof AppAppProjectsRoute
-  '/app/reports': typeof AppAppReportsRoute
-  '/app/tags': typeof AppAppTagsRoute
-  '/app/tasks': typeof AppAppTasksRoute
-  '/app/teams': typeof AppAppTeamsRoute
-  '/app/tracker': typeof AppAppTrackerRoute
-  '/app': typeof AppAppIndexRoute
+  "/": typeof IndexRoute;
+  "/login": typeof LoginRoute;
+  "/success": typeof SuccessRoute;
+  "/accept-invitation/$invitationId": typeof AcceptInvitationInvitationIdRoute;
+  "/app/ai": typeof AppAppAiRoute;
+  "/app/calendar": typeof AppAppCalendarRoute;
+  "/app/clients": typeof AppAppClientsRoute;
+  "/app/dashboard": typeof AppAppDashboardRoute;
+  "/app/overview": typeof AppAppOverviewRoute;
+  "/app/projects": typeof AppAppProjectsRoute;
+  "/app/reports": typeof AppAppReportsRoute;
+  "/app/tags": typeof AppAppTagsRoute;
+  "/app/tasks": typeof AppAppTasksRoute;
+  "/app/teams": typeof AppAppTeamsRoute;
+  "/app/tracker": typeof AppAppTrackerRoute;
+  "/app": typeof AppAppIndexRoute;
+  "/app/manage/clients": typeof AppAppManageClientsRoute;
+  "/app/manage/projects": typeof AppAppManageProjectsRoute;
+  "/app/manage/tags": typeof AppAppManageTagsRoute;
+  "/app/manage/teams": typeof AppAppManageTeamsRoute;
+  "/app/manage": typeof AppAppManageIndexRoute;
 }
 export interface FileRoutesById {
-  __root__: typeof rootRouteImport
-  '/': typeof IndexRoute
-  '/login': typeof LoginRoute
-  '/success': typeof SuccessRoute
-  '/accept-invitation/$invitationId': typeof AcceptInvitationInvitationIdRoute
-  '/app/_app': typeof AppAppRouteWithChildren
-  '/app/_app/ai': typeof AppAppAiRoute
-  '/app/_app/calendar': typeof AppAppCalendarRoute
-  '/app/_app/clients': typeof AppAppClientsRoute
-  '/app/_app/projects': typeof AppAppProjectsRoute
-  '/app/_app/reports': typeof AppAppReportsRoute
-  '/app/_app/tags': typeof AppAppTagsRoute
-  '/app/_app/tasks': typeof AppAppTasksRoute
-  '/app/_app/teams': typeof AppAppTeamsRoute
-  '/app/_app/tracker': typeof AppAppTrackerRoute
-  '/app/_app/': typeof AppAppIndexRoute
+  __root__: typeof rootRouteImport;
+  "/": typeof IndexRoute;
+  "/login": typeof LoginRoute;
+  "/success": typeof SuccessRoute;
+  "/accept-invitation/$invitationId": typeof AcceptInvitationInvitationIdRoute;
+  "/app/_app": typeof AppAppRouteWithChildren;
+  "/app/_app/ai": typeof AppAppAiRoute;
+  "/app/_app/calendar": typeof AppAppCalendarRoute;
+  "/app/_app/clients": typeof AppAppClientsRoute;
+  "/app/_app/dashboard": typeof AppAppDashboardRoute;
+  "/app/_app/manage": typeof AppAppManageRouteWithChildren;
+  "/app/_app/overview": typeof AppAppOverviewRoute;
+  "/app/_app/projects": typeof AppAppProjectsRoute;
+  "/app/_app/reports": typeof AppAppReportsRoute;
+  "/app/_app/tags": typeof AppAppTagsRoute;
+  "/app/_app/tasks": typeof AppAppTasksRoute;
+  "/app/_app/teams": typeof AppAppTeamsRoute;
+  "/app/_app/tracker": typeof AppAppTrackerRoute;
+  "/app/_app/": typeof AppAppIndexRoute;
+  "/app/_app/manage/clients": typeof AppAppManageClientsRoute;
+  "/app/_app/manage/projects": typeof AppAppManageProjectsRoute;
+  "/app/_app/manage/tags": typeof AppAppManageTagsRoute;
+  "/app/_app/manage/teams": typeof AppAppManageTeamsRoute;
+  "/app/_app/manage/": typeof AppAppManageIndexRoute;
 }
 export interface FileRouteTypes {
-  fileRoutesByFullPath: FileRoutesByFullPath
+  fileRoutesByFullPath: FileRoutesByFullPath;
   fullPaths:
-    | '/'
-    | '/login'
-    | '/success'
-    | '/accept-invitation/$invitationId'
-    | '/app'
-    | '/app/ai'
-    | '/app/calendar'
-    | '/app/clients'
-    | '/app/projects'
-    | '/app/reports'
-    | '/app/tags'
-    | '/app/tasks'
-    | '/app/teams'
-    | '/app/tracker'
-    | '/app/'
-  fileRoutesByTo: FileRoutesByTo
+    | "/"
+    | "/login"
+    | "/success"
+    | "/accept-invitation/$invitationId"
+    | "/app"
+    | "/app/ai"
+    | "/app/calendar"
+    | "/app/clients"
+    | "/app/dashboard"
+    | "/app/manage"
+    | "/app/overview"
+    | "/app/projects"
+    | "/app/reports"
+    | "/app/tags"
+    | "/app/tasks"
+    | "/app/teams"
+    | "/app/tracker"
+    | "/app/"
+    | "/app/manage/clients"
+    | "/app/manage/projects"
+    | "/app/manage/tags"
+    | "/app/manage/teams"
+    | "/app/manage/";
+  fileRoutesByTo: FileRoutesByTo;
   to:
-    | '/'
-    | '/login'
-    | '/success'
-    | '/accept-invitation/$invitationId'
-    | '/app/ai'
-    | '/app/calendar'
-    | '/app/clients'
-    | '/app/projects'
-    | '/app/reports'
-    | '/app/tags'
-    | '/app/tasks'
-    | '/app/teams'
-    | '/app/tracker'
-    | '/app'
+    | "/"
+    | "/login"
+    | "/success"
+    | "/accept-invitation/$invitationId"
+    | "/app/ai"
+    | "/app/calendar"
+    | "/app/clients"
+    | "/app/dashboard"
+    | "/app/overview"
+    | "/app/projects"
+    | "/app/reports"
+    | "/app/tags"
+    | "/app/tasks"
+    | "/app/teams"
+    | "/app/tracker"
+    | "/app"
+    | "/app/manage/clients"
+    | "/app/manage/projects"
+    | "/app/manage/tags"
+    | "/app/manage/teams"
+    | "/app/manage";
   id:
-    | '__root__'
-    | '/'
-    | '/login'
-    | '/success'
-    | '/accept-invitation/$invitationId'
-    | '/app/_app'
-    | '/app/_app/ai'
-    | '/app/_app/calendar'
-    | '/app/_app/clients'
-    | '/app/_app/projects'
-    | '/app/_app/reports'
-    | '/app/_app/tags'
-    | '/app/_app/tasks'
-    | '/app/_app/teams'
-    | '/app/_app/tracker'
-    | '/app/_app/'
-  fileRoutesById: FileRoutesById
+    | "__root__"
+    | "/"
+    | "/login"
+    | "/success"
+    | "/accept-invitation/$invitationId"
+    | "/app/_app"
+    | "/app/_app/ai"
+    | "/app/_app/calendar"
+    | "/app/_app/clients"
+    | "/app/_app/dashboard"
+    | "/app/_app/manage"
+    | "/app/_app/overview"
+    | "/app/_app/projects"
+    | "/app/_app/reports"
+    | "/app/_app/tags"
+    | "/app/_app/tasks"
+    | "/app/_app/teams"
+    | "/app/_app/tracker"
+    | "/app/_app/"
+    | "/app/_app/manage/clients"
+    | "/app/_app/manage/projects"
+    | "/app/_app/manage/tags"
+    | "/app/_app/manage/teams"
+    | "/app/_app/manage/";
+  fileRoutesById: FileRoutesById;
 }
 export interface RootRouteChildren {
-  IndexRoute: typeof IndexRoute
-  LoginRoute: typeof LoginRoute
-  SuccessRoute: typeof SuccessRoute
-  AcceptInvitationInvitationIdRoute: typeof AcceptInvitationInvitationIdRoute
-  AppAppRoute: typeof AppAppRouteWithChildren
+  IndexRoute: typeof IndexRoute;
+  LoginRoute: typeof LoginRoute;
+  SuccessRoute: typeof SuccessRoute;
+  AcceptInvitationInvitationIdRoute: typeof AcceptInvitationInvitationIdRoute;
+  AppAppRoute: typeof AppAppRouteWithChildren;
 }
 
-declare module '@tanstack/react-router' {
+declare module "@tanstack/react-router" {
   interface FileRoutesByPath {
-    '/success': {
-      id: '/success'
-      path: '/success'
-      fullPath: '/success'
-      preLoaderRoute: typeof SuccessRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/login': {
-      id: '/login'
-      path: '/login'
-      fullPath: '/login'
-      preLoaderRoute: typeof LoginRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/': {
-      id: '/'
-      path: '/'
-      fullPath: '/'
-      preLoaderRoute: typeof IndexRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/app/_app': {
-      id: '/app/_app'
-      path: '/app'
-      fullPath: '/app'
-      preLoaderRoute: typeof AppAppRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/accept-invitation/$invitationId': {
-      id: '/accept-invitation/$invitationId'
-      path: '/accept-invitation/$invitationId'
-      fullPath: '/accept-invitation/$invitationId'
-      preLoaderRoute: typeof AcceptInvitationInvitationIdRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/app/_app/': {
-      id: '/app/_app/'
-      path: '/'
-      fullPath: '/app/'
-      preLoaderRoute: typeof AppAppIndexRouteImport
-      parentRoute: typeof AppAppRoute
-    }
-    '/app/_app/tracker': {
-      id: '/app/_app/tracker'
-      path: '/tracker'
-      fullPath: '/app/tracker'
-      preLoaderRoute: typeof AppAppTrackerRouteImport
-      parentRoute: typeof AppAppRoute
-    }
-    '/app/_app/teams': {
-      id: '/app/_app/teams'
-      path: '/teams'
-      fullPath: '/app/teams'
-      preLoaderRoute: typeof AppAppTeamsRouteImport
-      parentRoute: typeof AppAppRoute
-    }
-    '/app/_app/tasks': {
-      id: '/app/_app/tasks'
-      path: '/tasks'
-      fullPath: '/app/tasks'
-      preLoaderRoute: typeof AppAppTasksRouteImport
-      parentRoute: typeof AppAppRoute
-    }
-    '/app/_app/tags': {
-      id: '/app/_app/tags'
-      path: '/tags'
-      fullPath: '/app/tags'
-      preLoaderRoute: typeof AppAppTagsRouteImport
-      parentRoute: typeof AppAppRoute
-    }
-    '/app/_app/reports': {
-      id: '/app/_app/reports'
-      path: '/reports'
-      fullPath: '/app/reports'
-      preLoaderRoute: typeof AppAppReportsRouteImport
-      parentRoute: typeof AppAppRoute
-    }
-    '/app/_app/projects': {
-      id: '/app/_app/projects'
-      path: '/projects'
-      fullPath: '/app/projects'
-      preLoaderRoute: typeof AppAppProjectsRouteImport
-      parentRoute: typeof AppAppRoute
-    }
-    '/app/_app/clients': {
-      id: '/app/_app/clients'
-      path: '/clients'
-      fullPath: '/app/clients'
-      preLoaderRoute: typeof AppAppClientsRouteImport
-      parentRoute: typeof AppAppRoute
-    }
-    '/app/_app/calendar': {
-      id: '/app/_app/calendar'
-      path: '/calendar'
-      fullPath: '/app/calendar'
-      preLoaderRoute: typeof AppAppCalendarRouteImport
-      parentRoute: typeof AppAppRoute
-    }
-    '/app/_app/ai': {
-      id: '/app/_app/ai'
-      path: '/ai'
-      fullPath: '/app/ai'
-      preLoaderRoute: typeof AppAppAiRouteImport
-      parentRoute: typeof AppAppRoute
-    }
+    "/success": {
+      id: "/success";
+      path: "/success";
+      fullPath: "/success";
+      preLoaderRoute: typeof SuccessRouteImport;
+      parentRoute: typeof rootRouteImport;
+    };
+    "/login": {
+      id: "/login";
+      path: "/login";
+      fullPath: "/login";
+      preLoaderRoute: typeof LoginRouteImport;
+      parentRoute: typeof rootRouteImport;
+    };
+    "/": {
+      id: "/";
+      path: "/";
+      fullPath: "/";
+      preLoaderRoute: typeof IndexRouteImport;
+      parentRoute: typeof rootRouteImport;
+    };
+    "/app/_app": {
+      id: "/app/_app";
+      path: "/app";
+      fullPath: "/app";
+      preLoaderRoute: typeof AppAppRouteImport;
+      parentRoute: typeof rootRouteImport;
+    };
+    "/accept-invitation/$invitationId": {
+      id: "/accept-invitation/$invitationId";
+      path: "/accept-invitation/$invitationId";
+      fullPath: "/accept-invitation/$invitationId";
+      preLoaderRoute: typeof AcceptInvitationInvitationIdRouteImport;
+      parentRoute: typeof rootRouteImport;
+    };
+    "/app/_app/": {
+      id: "/app/_app/";
+      path: "/";
+      fullPath: "/app/";
+      preLoaderRoute: typeof AppAppIndexRouteImport;
+      parentRoute: typeof AppAppRoute;
+    };
+    "/app/_app/tracker": {
+      id: "/app/_app/tracker";
+      path: "/tracker";
+      fullPath: "/app/tracker";
+      preLoaderRoute: typeof AppAppTrackerRouteImport;
+      parentRoute: typeof AppAppRoute;
+    };
+    "/app/_app/teams": {
+      id: "/app/_app/teams";
+      path: "/teams";
+      fullPath: "/app/teams";
+      preLoaderRoute: typeof AppAppTeamsRouteImport;
+      parentRoute: typeof AppAppRoute;
+    };
+    "/app/_app/tasks": {
+      id: "/app/_app/tasks";
+      path: "/tasks";
+      fullPath: "/app/tasks";
+      preLoaderRoute: typeof AppAppTasksRouteImport;
+      parentRoute: typeof AppAppRoute;
+    };
+    "/app/_app/tags": {
+      id: "/app/_app/tags";
+      path: "/tags";
+      fullPath: "/app/tags";
+      preLoaderRoute: typeof AppAppTagsRouteImport;
+      parentRoute: typeof AppAppRoute;
+    };
+    "/app/_app/reports": {
+      id: "/app/_app/reports";
+      path: "/reports";
+      fullPath: "/app/reports";
+      preLoaderRoute: typeof AppAppReportsRouteImport;
+      parentRoute: typeof AppAppRoute;
+    };
+    "/app/_app/projects": {
+      id: "/app/_app/projects";
+      path: "/projects";
+      fullPath: "/app/projects";
+      preLoaderRoute: typeof AppAppProjectsRouteImport;
+      parentRoute: typeof AppAppRoute;
+    };
+    "/app/_app/overview": {
+      id: "/app/_app/overview";
+      path: "/overview";
+      fullPath: "/app/overview";
+      preLoaderRoute: typeof AppAppOverviewRouteImport;
+      parentRoute: typeof AppAppRoute;
+    };
+    "/app/_app/manage": {
+      id: "/app/_app/manage";
+      path: "/manage";
+      fullPath: "/app/manage";
+      preLoaderRoute: typeof AppAppManageRouteImport;
+      parentRoute: typeof AppAppRoute;
+    };
+    "/app/_app/dashboard": {
+      id: "/app/_app/dashboard";
+      path: "/dashboard";
+      fullPath: "/app/dashboard";
+      preLoaderRoute: typeof AppAppDashboardRouteImport;
+      parentRoute: typeof AppAppRoute;
+    };
+    "/app/_app/clients": {
+      id: "/app/_app/clients";
+      path: "/clients";
+      fullPath: "/app/clients";
+      preLoaderRoute: typeof AppAppClientsRouteImport;
+      parentRoute: typeof AppAppRoute;
+    };
+    "/app/_app/calendar": {
+      id: "/app/_app/calendar";
+      path: "/calendar";
+      fullPath: "/app/calendar";
+      preLoaderRoute: typeof AppAppCalendarRouteImport;
+      parentRoute: typeof AppAppRoute;
+    };
+    "/app/_app/ai": {
+      id: "/app/_app/ai";
+      path: "/ai";
+      fullPath: "/app/ai";
+      preLoaderRoute: typeof AppAppAiRouteImport;
+      parentRoute: typeof AppAppRoute;
+    };
+    "/app/_app/manage/": {
+      id: "/app/_app/manage/";
+      path: "/";
+      fullPath: "/app/manage/";
+      preLoaderRoute: typeof AppAppManageIndexRouteImport;
+      parentRoute: typeof AppAppManageRoute;
+    };
+    "/app/_app/manage/teams": {
+      id: "/app/_app/manage/teams";
+      path: "/teams";
+      fullPath: "/app/manage/teams";
+      preLoaderRoute: typeof AppAppManageTeamsRouteImport;
+      parentRoute: typeof AppAppManageRoute;
+    };
+    "/app/_app/manage/tags": {
+      id: "/app/_app/manage/tags";
+      path: "/tags";
+      fullPath: "/app/manage/tags";
+      preLoaderRoute: typeof AppAppManageTagsRouteImport;
+      parentRoute: typeof AppAppManageRoute;
+    };
+    "/app/_app/manage/projects": {
+      id: "/app/_app/manage/projects";
+      path: "/projects";
+      fullPath: "/app/manage/projects";
+      preLoaderRoute: typeof AppAppManageProjectsRouteImport;
+      parentRoute: typeof AppAppManageRoute;
+    };
+    "/app/_app/manage/clients": {
+      id: "/app/_app/manage/clients";
+      path: "/clients";
+      fullPath: "/app/manage/clients";
+      preLoaderRoute: typeof AppAppManageClientsRouteImport;
+      parentRoute: typeof AppAppManageRoute;
+    };
   }
 }
 
+interface AppAppManageRouteChildren {
+  AppAppManageClientsRoute: typeof AppAppManageClientsRoute;
+  AppAppManageProjectsRoute: typeof AppAppManageProjectsRoute;
+  AppAppManageTagsRoute: typeof AppAppManageTagsRoute;
+  AppAppManageTeamsRoute: typeof AppAppManageTeamsRoute;
+  AppAppManageIndexRoute: typeof AppAppManageIndexRoute;
+}
+
+const AppAppManageRouteChildren: AppAppManageRouteChildren = {
+  AppAppManageClientsRoute: AppAppManageClientsRoute,
+  AppAppManageProjectsRoute: AppAppManageProjectsRoute,
+  AppAppManageTagsRoute: AppAppManageTagsRoute,
+  AppAppManageTeamsRoute: AppAppManageTeamsRoute,
+  AppAppManageIndexRoute: AppAppManageIndexRoute,
+};
+
+const AppAppManageRouteWithChildren = AppAppManageRoute._addFileChildren(AppAppManageRouteChildren);
+
 interface AppAppRouteChildren {
-  AppAppAiRoute: typeof AppAppAiRoute
-  AppAppCalendarRoute: typeof AppAppCalendarRoute
-  AppAppClientsRoute: typeof AppAppClientsRoute
-  AppAppProjectsRoute: typeof AppAppProjectsRoute
-  AppAppReportsRoute: typeof AppAppReportsRoute
-  AppAppTagsRoute: typeof AppAppTagsRoute
-  AppAppTasksRoute: typeof AppAppTasksRoute
-  AppAppTeamsRoute: typeof AppAppTeamsRoute
-  AppAppTrackerRoute: typeof AppAppTrackerRoute
-  AppAppIndexRoute: typeof AppAppIndexRoute
+  AppAppAiRoute: typeof AppAppAiRoute;
+  AppAppCalendarRoute: typeof AppAppCalendarRoute;
+  AppAppClientsRoute: typeof AppAppClientsRoute;
+  AppAppDashboardRoute: typeof AppAppDashboardRoute;
+  AppAppManageRoute: typeof AppAppManageRouteWithChildren;
+  AppAppOverviewRoute: typeof AppAppOverviewRoute;
+  AppAppProjectsRoute: typeof AppAppProjectsRoute;
+  AppAppReportsRoute: typeof AppAppReportsRoute;
+  AppAppTagsRoute: typeof AppAppTagsRoute;
+  AppAppTasksRoute: typeof AppAppTasksRoute;
+  AppAppTeamsRoute: typeof AppAppTeamsRoute;
+  AppAppTrackerRoute: typeof AppAppTrackerRoute;
+  AppAppIndexRoute: typeof AppAppIndexRoute;
 }
 
 const AppAppRouteChildren: AppAppRouteChildren = {
   AppAppAiRoute: AppAppAiRoute,
   AppAppCalendarRoute: AppAppCalendarRoute,
   AppAppClientsRoute: AppAppClientsRoute,
+  AppAppDashboardRoute: AppAppDashboardRoute,
+  AppAppManageRoute: AppAppManageRouteWithChildren,
+  AppAppOverviewRoute: AppAppOverviewRoute,
   AppAppProjectsRoute: AppAppProjectsRoute,
   AppAppReportsRoute: AppAppReportsRoute,
   AppAppTagsRoute: AppAppTagsRoute,
@@ -348,10 +521,9 @@ const AppAppRouteChildren: AppAppRouteChildren = {
   AppAppTeamsRoute: AppAppTeamsRoute,
   AppAppTrackerRoute: AppAppTrackerRoute,
   AppAppIndexRoute: AppAppIndexRoute,
-}
+};
 
-const AppAppRouteWithChildren =
-  AppAppRoute._addFileChildren(AppAppRouteChildren)
+const AppAppRouteWithChildren = AppAppRoute._addFileChildren(AppAppRouteChildren);
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
@@ -359,7 +531,7 @@ const rootRouteChildren: RootRouteChildren = {
   SuccessRoute: SuccessRoute,
   AcceptInvitationInvitationIdRoute: AcceptInvitationInvitationIdRoute,
   AppAppRoute: AppAppRouteWithChildren,
-}
+};
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
-  ._addFileTypes<FileRouteTypes>()
+  ._addFileTypes<FileRouteTypes>();
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
index 6e97b33..dd67e3f 100644
--- a/apps/web/src/routes/__root.tsx
+++ b/apps/web/src/routes/__root.tsx
@@ -19,11 +19,11 @@ export const Route = createRootRouteWithContext<RouterAppContext>()({
   head: () => ({
     meta: [
       {
-        title: "Open Clock",
+        title: "better clock",
       },
       {
         name: "description",
-        content: "Open Clock is a web application",
+        content: "better clock is a web application",
       },
     ],
     links: [
diff --git a/apps/web/src/routes/app._app.clients.tsx b/apps/web/src/routes/app._app.clients.tsx
index f1fe351..725c9ce 100644
--- a/apps/web/src/routes/app._app.clients.tsx
+++ b/apps/web/src/routes/app._app.clients.tsx
@@ -1,6 +1,7 @@
-import { createFileRoute } from "@tanstack/react-router";
-import ClientsPage from "@/features/clients/pages/clients-page";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/app/_app/clients")({
-  component: ClientsPage,
+  beforeLoad: () => {
+    redirect({ to: "/app/manage/clients", throw: true });
+  },
 });
diff --git a/apps/web/src/routes/app._app.dashboard.tsx b/apps/web/src/routes/app._app.dashboard.tsx
new file mode 100644
index 0000000..30d99ef
--- /dev/null
+++ b/apps/web/src/routes/app._app.dashboard.tsx
@@ -0,0 +1,7 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/app/_app/dashboard")({
+  beforeLoad: () => {
+    redirect({ to: "/app/overview", throw: true });
+  },
+});
diff --git a/apps/web/src/routes/app._app.index.tsx b/apps/web/src/routes/app._app.index.tsx
index e7effc1..77dfebf 100644
--- a/apps/web/src/routes/app._app.index.tsx
+++ b/apps/web/src/routes/app._app.index.tsx
@@ -1,7 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
 
-import TrackerDashboardPage from "@/features/time-tracker/pages/tracker-dashboard-page";
+import TimeTrackerPage from "@/features/time-tracker/pages/time-tracker-page";
 
 export const Route = createFileRoute("/app/_app/")({
-  component: TrackerDashboardPage,
+  component: TimeTrackerPage,
 });
diff --git a/apps/web/src/routes/app._app.manage.clients.tsx b/apps/web/src/routes/app._app.manage.clients.tsx
new file mode 100644
index 0000000..c67c9ff
--- /dev/null
+++ b/apps/web/src/routes/app._app.manage.clients.tsx
@@ -0,0 +1,7 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import ClientsPage from "@/features/clients/pages/clients-page";
+
+export const Route = createFileRoute("/app/_app/manage/clients")({
+  component: ClientsPage,
+});
diff --git a/apps/web/src/routes/app._app.manage.index.tsx b/apps/web/src/routes/app._app.manage.index.tsx
new file mode 100644
index 0000000..ae359c8
--- /dev/null
+++ b/apps/web/src/routes/app._app.manage.index.tsx
@@ -0,0 +1,7 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/app/_app/manage/")({
+  beforeLoad: () => {
+    redirect({ to: "/app/manage/projects", throw: true });
+  },
+});
diff --git a/apps/web/src/routes/app._app.manage.projects.tsx b/apps/web/src/routes/app._app.manage.projects.tsx
new file mode 100644
index 0000000..72ee226
--- /dev/null
+++ b/apps/web/src/routes/app._app.manage.projects.tsx
@@ -0,0 +1,7 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import ProjectsPage from "@/features/projects/pages/projects-page";
+
+export const Route = createFileRoute("/app/_app/manage/projects")({
+  component: ProjectsPage,
+});
diff --git a/apps/web/src/routes/app._app.manage.tags.tsx b/apps/web/src/routes/app._app.manage.tags.tsx
new file mode 100644
index 0000000..89d5525
--- /dev/null
+++ b/apps/web/src/routes/app._app.manage.tags.tsx
@@ -0,0 +1,7 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import TagsPage from "@/features/tags/pages/tags-page";
+
+export const Route = createFileRoute("/app/_app/manage/tags")({
+  component: TagsPage,
+});
diff --git a/apps/web/src/routes/app._app.manage.teams.tsx b/apps/web/src/routes/app._app.manage.teams.tsx
new file mode 100644
index 0000000..041e62f
--- /dev/null
+++ b/apps/web/src/routes/app._app.manage.teams.tsx
@@ -0,0 +1,7 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import TeamsPage from "@/features/organization/pages/teams-page";
+
+export const Route = createFileRoute("/app/_app/manage/teams")({
+  component: TeamsPage,
+});
diff --git a/apps/web/src/routes/app._app.manage.tsx b/apps/web/src/routes/app._app.manage.tsx
new file mode 100644
index 0000000..130ea51
--- /dev/null
+++ b/apps/web/src/routes/app._app.manage.tsx
@@ -0,0 +1,9 @@
+import { Outlet, createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/app/_app/manage")({
+  component: ManageRoute,
+});
+
+function ManageRoute() {
+  return <Outlet />;
+}
diff --git a/apps/web/src/routes/app._app.overview.tsx b/apps/web/src/routes/app._app.overview.tsx
new file mode 100644
index 0000000..13dc654
--- /dev/null
+++ b/apps/web/src/routes/app._app.overview.tsx
@@ -0,0 +1,7 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import TrackerDashboardPage from "@/features/time-tracker/pages/tracker-dashboard-page";
+
+export const Route = createFileRoute("/app/_app/overview")({
+  component: TrackerDashboardPage,
+});
diff --git a/apps/web/src/routes/app._app.projects.tsx b/apps/web/src/routes/app._app.projects.tsx
index 6c07dff..c406230 100644
--- a/apps/web/src/routes/app._app.projects.tsx
+++ b/apps/web/src/routes/app._app.projects.tsx
@@ -1,6 +1,7 @@
-import { createFileRoute } from "@tanstack/react-router";
-import ProjectsPage from "@/features/projects/pages/projects-page";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/app/_app/projects")({
-  component: ProjectsPage,
+  beforeLoad: () => {
+    redirect({ to: "/app/manage/projects", throw: true });
+  },
 });
diff --git a/apps/web/src/routes/app._app.tags.tsx b/apps/web/src/routes/app._app.tags.tsx
index 62e7053..2355e06 100644
--- a/apps/web/src/routes/app._app.tags.tsx
+++ b/apps/web/src/routes/app._app.tags.tsx
@@ -1,6 +1,7 @@
-import { createFileRoute } from "@tanstack/react-router";
-import TagsPage from "@/features/tags/pages/tags-page";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/app/_app/tags")({
-  component: TagsPage,
+  beforeLoad: () => {
+    redirect({ to: "/app/manage/tags", throw: true });
+  },
 });
diff --git a/apps/web/src/routes/app._app.teams.tsx b/apps/web/src/routes/app._app.teams.tsx
index 09bfd93..d5841a3 100644
--- a/apps/web/src/routes/app._app.teams.tsx
+++ b/apps/web/src/routes/app._app.teams.tsx
@@ -1,6 +1,7 @@
-import { createFileRoute } from "@tanstack/react-router";
-import TeamsPage from "@/features/organization/pages/teams-page";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/app/_app/teams")({
-  component: TeamsPage,
+  beforeLoad: () => {
+    redirect({ to: "/app/manage/teams", throw: true });
+  },
 });
diff --git a/apps/web/src/routes/app._app.tracker.tsx b/apps/web/src/routes/app._app.tracker.tsx
index ea56f70..d9b6a7d 100644
--- a/apps/web/src/routes/app._app.tracker.tsx
+++ b/apps/web/src/routes/app._app.tracker.tsx
@@ -1,7 +1,7 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-import TimeTrackerPage from "@/features/time-tracker/pages/time-tracker-page";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/app/_app/tracker")({
-  component: TimeTrackerPage,
+  beforeLoad: () => {
+    redirect({ to: "/app", throw: true });
+  },
 });
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index e4d77ab..ff66f18 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -7,12 +7,11 @@ export const Route = createFileRoute("/")({
   head: () => ({
     meta: [
       {
-        title: "Open Clock | Home",
+        title: "better clock | Home",
       },
       {
         name: "description",
-        content:
-          "Track time with clear project context, honest billable reporting, and a calm workspace.",
+        content: "Track time with clear project context and a calm workspace.",
       },
     ],
   }),
diff --git a/apps/web/src/utils/format.ts b/apps/web/src/utils/format.ts
new file mode 100644
index 0000000..9992e79
--- /dev/null
+++ b/apps/web/src/utils/format.ts
@@ -0,0 +1,17 @@
+/**
+ * Formats a duration in seconds as "Xh YYm" for use in table cells.
+ * Example: 5400 → "1h 30m"
+ */
+export function formatDurationHM(totalSeconds: number): string {
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  return `${hours}h ${String(minutes).padStart(2, "0")}m`;
+}
+
+/**
+ * Formats a monetary amount with its currency code.
+ * Example: (1234.5, "USD") → "1234.50 USD"
+ */
+export function formatCurrencyAmount(amount: number, currency: string | null): string {
+  return `${amount.toFixed(2)} ${currency ?? "USD"}`;
+}
diff --git a/packages/auth/src/lib/email.ts b/packages/auth/src/lib/email.ts
index 4476668..3fdf619 100644
--- a/packages/auth/src/lib/email.ts
+++ b/packages/auth/src/lib/email.ts
@@ -35,16 +35,16 @@ export async function sendInvitationEmail({
   const safeOrgName = escapeHtml(orgName);
 
   await transporter.sendMail({
-    from: `"Open Clock" <${env.GMAIL_USER}>`,
+    from: `"better clock" <${env.GMAIL_USER}>`,
     to,
-    subject: `You've been invited to join ${orgName} on Open Clock`,
+    subject: `You've been invited to join ${orgName} on better clock`,
     html: `
       <div style="font-family: sans-serif; max-width: 520px; margin: 0 auto; color: #1a1a1a;">
-        <h2 style="font-size: 20px; margin-bottom: 8px;">You're invited to Open Clock</h2>
+        <h2 style="font-size: 20px; margin-bottom: 8px;">You're invited to better clock</h2>
         <p style="margin-bottom: 16px; color: #555;">
           <strong>${safeInviterName}</strong> has invited you to join <strong>${safeOrgName}</strong>.
         </p>
-        <a href="${inviteLink}"
+        <a href="${escapeHtml(inviteLink)}"
            style="display: inline-block; padding: 10px 20px; background: #18a0a0; color: #fff;
                   text-decoration: none; font-weight: 600; border-radius: 4px;">
           Accept Invitation
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index 80b7a1a..a19f04b 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -41,7 +41,6 @@
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
   --tracked: oklch(0.606 0.106 183.474);
-  --billable: oklch(0.633 0.134 237.982);
 }
 
 .dark {
@@ -105,7 +104,6 @@
   --color-secondary: var(--secondary);
   --color-primary-foreground: var(--primary-foreground);
   --color-primary: var(--primary);
-  --color-billable: var(--billable);
   --color-tracked: var(--tracked);
   --color-popover-foreground: var(--popover-foreground);
   --color-popover: var(--popover);