Index: frontend/src/App.jsx
===================================================================
--- frontend/src/App.jsx	(revision a8381b18babc398c094b70c3ca5dc6cb0483c327)
+++ frontend/src/App.jsx	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
@@ -1,3 +1,4 @@
 import { Navigate, Route, Routes } from "react-router-dom";
+import { clearAuthSession, getAuthToken, isTokenExpired } from "./utils/authSession";
 
 import LandingPage from "./pages/LandingPage/LandingPage.jsx";
@@ -23,5 +24,9 @@
 
 function RequireAuth({ children }) {
-  const token = localStorage.getItem("authToken");
+  const token = getAuthToken();
+  if (token && isTokenExpired(token)) {
+    clearAuthSession();
+    return <Navigate to="/login" replace />;
+  }
   if (!token) return <Navigate to="/login" replace />;
   return children;
Index: frontend/src/api/axios.js
===================================================================
--- frontend/src/api/axios.js	(revision a8381b18babc398c094b70c3ca5dc6cb0483c327)
+++ frontend/src/api/axios.js	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
@@ -1,3 +1,4 @@
 import axios from "axios";
+import { getAuthToken, isTokenExpired, logoutAndRedirect } from "../utils/authSession";
 
 const api = axios.create({
@@ -6,6 +7,10 @@
 
 api.interceptors.request.use((config) => {
-  const token = localStorage.getItem("authToken");
+  const token = getAuthToken();
   if (token) {
+    if (isTokenExpired(token)) {
+      logoutAndRedirect("/dashboard");
+      return Promise.reject(new Error("Authentication session expired"));
+    }
     config.headers = config.headers ?? {};
     config.headers.Authorization = `Bearer ${token}`;
@@ -14,3 +19,14 @@
 });
 
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    const status = error?.response?.status;
+    if (status === 401 || status === 403) {
+      logoutAndRedirect("/dashboard");
+    }
+    return Promise.reject(error);
+  },
+);
+
 export default api;
Index: frontend/src/pages/Dashboard/DashboardLayout.jsx
===================================================================
--- frontend/src/pages/Dashboard/DashboardLayout.jsx	(revision a8381b18babc398c094b70c3ca5dc6cb0483c327)
+++ frontend/src/pages/Dashboard/DashboardLayout.jsx	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
@@ -6,4 +6,5 @@
 import DashboardSidebar from "./components/DashboardSidebar.jsx";
 import DashboardTopbar from "./components/DashboardTopbar.jsx";
+import { clearAuthSession } from "../../utils/authSession";
 
 const DashboardLayout = () => {
@@ -22,6 +23,5 @@
 
   const onLogout = () => {
-    localStorage.removeItem("authToken");
-    localStorage.removeItem("authUser");
+    clearAuthSession();
     navigate("/", { replace: true });
   };
Index: frontend/src/pages/Dashboard/pages/Investing/InvestingTracking.jsx
===================================================================
--- frontend/src/pages/Dashboard/pages/Investing/InvestingTracking.jsx	(revision a8381b18babc398c094b70c3ca5dc6cb0483c327)
+++ frontend/src/pages/Dashboard/pages/Investing/InvestingTracking.jsx	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
@@ -214,5 +214,5 @@
         onAddAsset={() => navigate("/dashboard/investing/assets/new")}
       />
-      <InvestingProgressCard assets={graphAssets} />
+       <InvestingProgressCard assets={graphAssets} quotesBySymbol={quotesBySymbol} />
 
       {quotesError ? (
Index: frontend/src/pages/Dashboard/pages/Investing/components/InvestingProgressCard.jsx
===================================================================
--- frontend/src/pages/Dashboard/pages/Investing/components/InvestingProgressCard.jsx	(revision a8381b18babc398c094b70c3ca5dc6cb0483c327)
+++ frontend/src/pages/Dashboard/pages/Investing/components/InvestingProgressCard.jsx	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
@@ -3,25 +3,139 @@
 import TimeRangeToggle from "../../../../../components/graphs/TimeRangeToggle.jsx";
 import PercentChangeAreaChart from "../../../../../components/graphs/PercentChangeAreaChart.jsx";
-import { percentChangeSeries, sumByTimeBucket } from "../../../../../utils/timeSeries.js";
-
-export default function InvestingProgressCard({ assets }) {
+import { formatBucketLabel } from "../../../../../utils/timeSeries.js";
+
+function bucketKey(date, granularity) {
+  const d = new Date(date);
+  if (Number.isNaN(d.getTime())) return null;
+
+  function startOfDay(d) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+  }
+
+  function startOfISOWeek(d) {
+    const date = startOfDay(d);
+    const day = date.getDay();
+    const diff = (day === 0 ? -6 : 1) - day;
+    date.setDate(date.getDate() + diff);
+    return startOfDay(date);
+  }
+
+  function startOfMonth(d) {
+    return new Date(d.getFullYear(), d.getMonth(), 1);
+  }
+
+  function startOfYear(d) {
+    return new Date(d.getFullYear(), 0, 1);
+  }
+
+  let s;
+  switch (granularity) {
+    case "daily":
+      s = startOfDay(d);
+      break;
+    case "weekly":
+      s = startOfISOWeek(d);
+      break;
+    case "monthly":
+      s = startOfMonth(d);
+      break;
+    case "yearly":
+      s = startOfYear(d);
+      break;
+    default:
+      s = startOfDay(d);
+  }
+  return s.getTime();
+}
+
+export default function InvestingProgressCard({ assets, quotesBySymbol = {} }) {
   const [range, setRange] = useState("weekly");
 
   const points = useMemo(() => {
-    // Option B: "net invested momentum".
-    // Since we only have assets (with buy date/price/quantity) and no transaction history,
-    // we treat each asset as a one-time investment at buyDate.
-    const buckets = sumByTimeBucket(
-      assets,
-      range,
-      (a) => a.buyDate,
-      (a) => (Number(a?.quantity) || 0) * (Number(a?.buyPrice) || 0),
-    );
-    return percentChangeSeries(buckets);
-  }, [assets, range]);
+    // Calculate portfolio percentage gain/loss over time using current prices
+    // Display cumulative portfolio value and percentage change between time buckets
+
+    if (!assets || assets.length === 0) {
+      return [];
+    }
+
+    // Group assets by buy date bucket
+    const buckets = new Map();
+    for (const asset of assets) {
+      if (asset?.buyDate) {
+        const ts = bucketKey(asset.buyDate, range);
+        if (ts !== null) {
+          if (!buckets.has(ts)) {
+            buckets.set(ts, []);
+          }
+          buckets.get(ts).push(asset);
+        }
+      }
+    }
+
+    // Sort buckets chronologically
+    const sortedBuckets = Array.from(buckets.entries()).sort((a, b) => a[0] - b[0]);
+
+    // Calculate cumulative portfolio value at each bucket
+    const points = [];
+    let cumulativeAssets = [];
+
+    for (const [ts, assetsInBucket] of sortedBuckets) {
+      cumulativeAssets = [...cumulativeAssets, ...assetsInBucket];
+
+      let totalInvested = 0;
+      let totalCurrentValue = 0;
+
+      for (const asset of cumulativeAssets) {
+        const qty = Number(asset?.quantity) || 0;
+        const buyPrice = Number(asset?.buyPrice) || 0;
+        const ticker = String(asset?.tickerSymbol || "").toUpperCase();
+        const currentPrice = quotesBySymbol[ticker] || buyPrice;
+
+        totalInvested += qty * buyPrice;
+        totalCurrentValue += qty * currentPrice;
+      }
+
+      if (totalInvested > 0) {
+        points.push({
+          ts,
+          invested: totalInvested,
+          current: totalCurrentValue,
+        });
+      }
+    }
+
+    // Calculate percentage gain from invested to current value
+    const result = [];
+    for (const p of points) {
+      const percentageGain = ((p.current - p.invested) / p.invested) * 100;
+      result.push({
+        ts: p.ts,
+        value: percentageGain,
+        base: p.current,
+        invested: p.invested,
+      });
+    }
+
+    return result;
+  }, [assets, range, quotesBySymbol]);
 
   const latest = points?.length ? points[points.length - 1] : null;
   const latestPct = latest ? Number(latest.value ?? 0) : 0;
-  const latestBase = latest ? Number(latest.base ?? 0) : 0;
+  const latestCurrentValue = latest ? Number(latest.base ?? 0) : 0;
+  const latestInvested = latest ? Number(latest.invested ?? 0) : 0;
+
+  const totalCurrentPortfolioValue = assets.reduce((sum, asset) => {
+    const qty = Number(asset?.quantity) || 0;
+    const ticker = String(asset?.tickerSymbol || "").toUpperCase();
+    const currentPrice = quotesBySymbol[ticker] || Number(asset?.buyPrice) || 0;
+    return sum + qty * currentPrice;
+  }, 0);
+
+  const totalInvestedAmount = assets.reduce((sum, asset) => {
+    const qty = Number(asset?.quantity) || 0;
+    const buyPrice = Number(asset?.buyPrice) || 0;
+    return sum + qty * buyPrice;
+  }, 0);
 
   return (
@@ -29,10 +143,19 @@
       <div className="card-body">
         <div className="flex items-center justify-between gap-4">
-          <h2 className="card-title">Progress</h2>
+          <h2 className="card-title">Portfolio Value</h2>
           <div className="flex items-center gap-3">
-            <span className="badge badge-ghost">
-              {latestPct >= 0 ? "+" : ""}
-              {latestPct.toFixed(1)}% (last)
-            </span>
+            <div className="flex flex-col items-end gap-1">
+              <span className="text-sm font-semibold">
+                ${totalCurrentPortfolioValue.toFixed(2)}
+              </span>
+              <span
+                className={`text-xs font-bold ${
+                  latestPct >= 0 ? "text-success" : "text-error"
+                }`}
+              >
+                {latestPct >= 0 ? "+" : ""}
+                {latestPct.toFixed(2)}%
+              </span>
+            </div>
             <TimeRangeToggle value={range} onChange={setRange} />
           </div>
@@ -40,7 +163,7 @@
 
         <div className="mt-4 w-full overflow-hidden rounded-xl border border-base-300 bg-base-100 p-2">
-          {points.length < 2 ? (
+          {points.length < 1 ? (
             <div className="flex h-65 items-center justify-center text-sm opacity-70">
-              Add at least 2 investments to see % change.
+              Add investments to see portfolio growth.
             </div>
           ) : (
@@ -49,11 +172,30 @@
               granularity={range}
               height={260}
-              positiveColor="#14b8a6"
+              positiveColor="#10b981"
             />
           )}
         </div>
 
-        <div className="mt-2 text-xs opacity-70">
-          Showing percentage change in invested amount per {range} bucket. Latest bucket invested: {Math.round(latestBase)}.
+        <div className="mt-3 grid grid-cols-3 gap-2 text-xs">
+          <div className="rounded bg-base-300 p-2">
+            <div className="opacity-70">Invested</div>
+            <div className="font-semibold">${totalInvestedAmount.toFixed(2)}</div>
+          </div>
+          <div className="rounded bg-base-300 p-2">
+            <div className="opacity-70">Current Value</div>
+            <div className="font-semibold">${totalCurrentPortfolioValue.toFixed(2)}</div>
+          </div>
+          <div className="rounded bg-base-300 p-2">
+            <div className="opacity-70">Gain/Loss</div>
+            <div
+              className={`font-semibold ${
+                totalCurrentPortfolioValue >= totalInvestedAmount
+                  ? "text-success"
+                  : "text-error"
+              }`}
+            >
+              ${(totalCurrentPortfolioValue - totalInvestedAmount).toFixed(2)}
+            </div>
+          </div>
         </div>
       </div>
Index: frontend/src/pages/LandingPage/components/Benefits.jsx
===================================================================
--- frontend/src/pages/LandingPage/components/Benefits.jsx	(revision a8381b18babc398c094b70c3ca5dc6cb0483c327)
+++ frontend/src/pages/LandingPage/components/Benefits.jsx	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
@@ -43,10 +43,10 @@
   return (
     <section id="benefits" className="px-[5%] py-16 md:py-24 lg:py-28">
-      <div className="container">
+      <div className="mx-auto w-full max-w-6xl">
         <div className="text-center mb-16 md:mb-20">
           <p className="font-semibold text-sm md:text-base mb-3 md:mb-4">
             Why Trekr
           </p>
-          <h2 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6">
+          <h2 className="font-bold mb-6 text-3xl sm:text-4xl md:text-5xl lg:text-6xl leading-tight">
             Designed for serious progress
           </h2>
Index: frontend/src/pages/LandingPage/components/Faq.defaults.js
===================================================================
--- frontend/src/pages/LandingPage/components/Faq.defaults.js	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
+++ frontend/src/pages/LandingPage/components/Faq.defaults.js	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
@@ -0,0 +1,40 @@
+export const FaqDefaults = {
+  heading: "Frequently asked questions",
+  description:
+    "Quick answers on how Trekr helps you track self-improvement across multiple areas — in one place.",
+  questions: [
+    {
+      title: "What can I track in Trekr?",
+      answer:
+        "Workouts (type and duration), weight & nutrition (goal, calories), finances & budgeting (income and expenses), investing (portfolio and returns), and discipline (daily tasks you can check off).",
+    },
+    {
+      title: "Do I need multiple apps to do all this?",
+      answer:
+        "No — Trekr is designed to unify the most important self-improvement categories so you can get a clear overview without switching between tools.",
+    },
+    {
+      title: "How do goals and progress tracking work?",
+      answer:
+        "You set a goal (for example: target weight or monthly budget), then log daily/weekly data. Trekr helps you see where you are vs. the goal and how you're trending over time.",
+    },
+    {
+      title: "Where is my data stored?",
+      answer:
+        "Your entries are stored in a database and linked to your user profile so you can track progress consistently over time.",
+    },
+    {
+      title: "Is Trekr a mobile app?",
+      answer:
+        "Right now Trekr is a web app. The goal is a fast, simple experience on both mobile and desktop in the browser.",
+    },
+  ],
+  footerHeading: "Still have questions?",
+  footerDescription: "Send us a message and we’ll help you get started.",
+  button: {
+    title: "Contact",
+    variant: "secondary",
+  },
+};
+
+
Index: frontend/src/pages/LandingPage/components/Faq.jsx
===================================================================
--- frontend/src/pages/LandingPage/components/Faq.jsx	(revision a8381b18babc398c094b70c3ca5dc6cb0483c327)
+++ frontend/src/pages/LandingPage/components/Faq.jsx	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
@@ -6,4 +6,6 @@
   AccordionTrigger,
 } from "@relume_io/relume-ui";
+
+import { FaqDefaults } from "./Faq.defaults";
 
 export const Faq = (props) => {
@@ -16,5 +18,5 @@
     button,
   } = {
-    ...Faq1Defaults,
+    ...FaqDefaults,
     ...props,
   };
@@ -24,10 +26,12 @@
       className="px-[5%] py-16 md:py-24 lg:py-28 flex items-center justify-center"
     >
-      <div className="container max-w-lg">
+      <div className="mx-auto w-full max-w-2xl">
         <div className="rb-12 mb-12 text-center md:mb-18 lg:mb-20">
-          <h2 className="rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">
+          <h2 className="rb-5 mb-5 font-bold text-4xl sm:text-5xl md:mb-6 md:text-6xl lg:text-7xl leading-tight">
             {heading}
           </h2>
-          <p className="md:text-md">{description}</p>
+          <p className="text-sm sm:text-base md:text-lg opacity-80">
+            {description}
+          </p>
         </div>
         <Accordion type="multiple">
@@ -47,5 +51,7 @@
             {footerHeading}
           </h4>
-          <p className="md:text-md">{footerDescription}</p>
+          <p className="text-sm sm:text-base md:text-lg opacity-80">
+            {footerDescription}
+          </p>
           <div className="mt-6 md:mt-8">
             <Button {...button}>{button.title}</Button>
@@ -56,41 +62,2 @@
   );
 };
-
-export const Faq1Defaults = {
-  heading: "Frequently asked questions",
-  description:
-    "Quick answers on how Trekr helps you track self-improvement across multiple areas — in one place.",
-  questions: [
-    {
-      title: "What can I track in Trekr?",
-      answer:
-        "Workouts (type and duration), weight & nutrition (goal, calories), finances & budgeting (income and expenses), investing (portfolio and returns), and discipline (daily tasks you can check off).",
-    },
-    {
-      title: "Do I need multiple apps to do all this?",
-      answer:
-        "No — Trekr is designed to unify the most important self-improvement categories so you can get a clear overview without switching between tools.",
-    },
-    {
-      title: "How do goals and progress tracking work?",
-      answer:
-        "You set a goal (for example: target weight or monthly budget), then log daily/weekly data. Trekr helps you see where you are vs. the goal and how you're trending over time.",
-    },
-    {
-      title: "Where is my data stored?",
-      answer:
-        "Your entries are stored in a database and linked to your user profile so you can track progress consistently over time.",
-    },
-    {
-      title: "Is Trekr a mobile app?",
-      answer:
-        "Right now Trekr is a web app. The goal is a fast, simple experience on both mobile and desktop in the browser.",
-    },
-  ],
-  footerHeading: "Still have questions?",
-  footerDescription: "Send us a message and we’ll help you get started.",
-  button: {
-    title: "Contact",
-    variant: "secondary",
-  },
-};
Index: frontend/src/pages/LandingPage/components/Features.jsx
===================================================================
--- frontend/src/pages/LandingPage/components/Features.jsx	(revision a8381b18babc398c094b70c3ca5dc6cb0483c327)
+++ frontend/src/pages/LandingPage/components/Features.jsx	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
@@ -46,10 +46,10 @@
       className="px-[5%] py-16 md:py-24 lg:py-28 bg-base-200"
     >
-      <div className="container">
+      <div className="mx-auto w-full max-w-6xl">
         <div className="text-center mb-16 md:mb-20">
           <p className="font-semibold text-sm md:text-base mb-3 md:mb-4">
             What you can track
           </p>
-          <h2 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6">
+          <h2 className="font-bold mb-6 text-3xl sm:text-4xl md:text-5xl lg:text-6xl leading-tight">
             Everything in one dashboard
           </h2>
Index: frontend/src/pages/LandingPage/components/Footer.jsx
===================================================================
--- frontend/src/pages/LandingPage/components/Footer.jsx	(revision a8381b18babc398c094b70c3ca5dc6cb0483c327)
+++ frontend/src/pages/LandingPage/components/Footer.jsx	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
@@ -4,5 +4,5 @@
 const Footer = () => {
   return (
-    <footer className="footer sm:footer-horizontal bg-neutral text-neutral-content p-10">
+    <footer className="footer sm:footer-horizontal bg-neutral text-neutral-content p-8 sm:p-10">
       <aside>
         <img src={logo} alt="Trekr" className="h-10 w-auto" />
Index: frontend/src/pages/LandingPage/components/Hero.jsx
===================================================================
--- frontend/src/pages/LandingPage/components/Hero.jsx	(revision a8381b18babc398c094b70c3ca5dc6cb0483c327)
+++ frontend/src/pages/LandingPage/components/Hero.jsx	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
@@ -19,5 +19,5 @@
   return (
     <div
-      className="hero min-h-screen"
+      className="hero min-h-[calc(100vh-4rem)] bg-cover bg-center"
       style={{
         backgroundImage:
@@ -26,10 +26,10 @@
     >
       <div className="hero-overlay"></div>
-      <div className="hero-content text-neutral-content text-center">
-        <div className="max-w-md">
-          <h1 className="mb-5 text-5xl font-bold">
+      <div className="hero-content text-neutral-content text-center px-4 py-16 sm:py-24">
+        <div className="w-full max-w-2xl">
+          <h1 className="mb-5 font-bold text-3xl sm:text-4xl md:text-5xl lg:text-6xl leading-tight">
             Trekr — track progress, every day
           </h1>
-          <p className="mb-5">
+          <p className="mb-6 text-sm sm:text-base md:text-lg opacity-90">
             One self-improvement hub: workouts, weight & nutrition, finances &
             budgeting, investing, and daily discipline tasks. Set goals, log
@@ -37,5 +37,5 @@
           </p>
           <Link
-            className="btn btn-primary !text-white"
+            className="btn btn-primary !text-white btn-sm sm:btn-md md:btn-lg"
             to={isAuthed ? "/dashboard" : "/register"}
           >
Index: frontend/src/pages/LandingPage/components/HowItWorks.defaults.js
===================================================================
--- frontend/src/pages/LandingPage/components/HowItWorks.defaults.js	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
+++ frontend/src/pages/LandingPage/components/HowItWorks.defaults.js	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
@@ -0,0 +1,22 @@
+import { RxChevronRight } from "react-icons/rx";
+
+export const HowItWorksDefaults = {
+  tagline: "How it works",
+  heading: "Log it. Track it. Improve it.",
+  description:
+    "Log what matters to your goals — workouts, weight/calories, budgets, investments, and daily tasks. Trekr gives you a clear view of trends over time so you can stay consistent and keep moving forward.",
+  buttons: [
+    { title: "Start free", variant: "secondary" },
+    {
+      title: "See a quick overview",
+      variant: "link",
+      size: "link",
+      iconRight: <RxChevronRight />,
+    },
+  ],
+  image: {
+    src: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1600&q=80",
+    alt: "Progress and goals overview on a laptop",
+  },
+};
+
Index: frontend/src/pages/LandingPage/components/HowItWorks.defaults.jsx
===================================================================
--- frontend/src/pages/LandingPage/components/HowItWorks.defaults.jsx	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
+++ frontend/src/pages/LandingPage/components/HowItWorks.defaults.jsx	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
@@ -0,0 +1,23 @@
+import { RxChevronRight } from "react-icons/rx";
+
+export const HowItWorksDefaults = {
+  tagline: "How it works",
+  heading: "Log it. Track it. Improve it.",
+  description:
+    "Log what matters to your goals — workouts, weight/calories, budgets, investments, and daily tasks. Trekr gives you a clear view of trends over time so you can stay consistent and keep moving forward.",
+  buttons: [
+    { title: "Start free", variant: "secondary" },
+    {
+      title: "See a quick overview",
+      variant: "link",
+      size: "link",
+      iconRight: <RxChevronRight />,
+    },
+  ],
+  image: {
+    src: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1600&q=80",
+    alt: "Progress and goals overview on a laptop",
+  },
+};
+
+
Index: frontend/src/pages/LandingPage/components/HowItWorks.jsx
===================================================================
--- frontend/src/pages/LandingPage/components/HowItWorks.jsx	(revision a8381b18babc398c094b70c3ca5dc6cb0483c327)
+++ frontend/src/pages/LandingPage/components/HowItWorks.jsx	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
@@ -1,4 +1,4 @@
 import { Button } from "@relume_io/relume-ui";
-import { RxChevronRight } from "react-icons/rx";
+import { HowItWorksDefaults } from "./HowItWorks.defaults.jsx";
 
 export const HowItWorks = (props) => {
@@ -9,12 +9,14 @@
   return (
     <section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
-      <div className="container">
+      <div className="mx-auto w-full max-w-6xl">
         <div className="grid grid-cols-1 gap-y-12 md:grid-cols-2 md:items-center md:gap-x-12 lg:gap-x-20">
-          <div>
+          <div className="text-center md:text-left">
             <p className="mb-3 font-semibold md:mb-4">{tagline}</p>
-            <h1 className="rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">
+            <h1 className="rb-5 mb-5 font-bold text-4xl sm:text-5xl md:mb-6 md:text-6xl lg:text-7xl leading-tight">
               {heading}
             </h1>
-            <p className="md:text-md">{description}</p>
+            <p className="text-sm sm:text-base md:text-lg opacity-80">
+              {description}
+            </p>
             <div className="mt-6 flex flex-wrap items-center gap-4 md:mt-8">
               {buttons.map((button, index) => (
@@ -28,5 +30,5 @@
             <img
               src={image.src}
-              className="w-full object-cover"
+              className="w-full rounded-2xl object-cover"
               alt={image.alt}
             />
@@ -38,21 +40,3 @@
 };
 
-export const HowItWorksDefaults = {
-  tagline: "How it works",
-  heading: "Log it. Track it. Improve it.",
-  description:
-    "Log what matters to your goals — workouts, weight/calories, budgets, investments, and daily tasks. Trekr gives you a clear view of trends over time so you can stay consistent and keep moving forward.",
-  buttons: [
-    { title: "Start free", variant: "secondary" },
-    {
-      title: "See a quick overview",
-      variant: "link",
-      size: "link",
-      iconRight: <RxChevronRight />,
-    },
-  ],
-  image: {
-    src: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1600&q=80",
-    alt: "Progress and goals overview on a laptop",
-  },
-};
+
Index: frontend/src/pages/LandingPage/components/NavbarLanding.jsx
===================================================================
--- frontend/src/pages/LandingPage/components/NavbarLanding.jsx	(revision a8381b18babc398c094b70c3ca5dc6cb0483c327)
+++ frontend/src/pages/LandingPage/components/NavbarLanding.jsx	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
@@ -27,6 +27,6 @@
 
   return (
-    <div className="navbar bg-primary text-primary-content shadow-sm">
-      <div className="navbar-start">
+    <div className="navbar bg-primary text-primary-content shadow-sm px-4 sm:px-6">
+      <div className="navbar-start flex-1 min-w-0">
         <Link
           className="btn btn-ghost text-primary-content"
@@ -37,9 +37,9 @@
         </Link>
       </div>
-      <div className="navbar-end">
+      <div className="navbar-end flex-none">
         {isAuthed ? (
-          <div className="flex items-center gap-2 mr-6">
+          <div className="flex flex-wrap items-center justify-end gap-2 sm:gap-3">
             <Link
-              className="btn btn-outline border-primary-content text-primary-content"
+              className="btn btn-sm sm:btn-md btn-outline border-primary-content text-primary-content"
               to="/dashboard"
             >
@@ -47,5 +47,5 @@
             </Link>
             <button
-              className="btn btn-outline border-primary-content text-primary-content"
+              className="btn btn-sm sm:btn-md btn-outline border-primary-content text-primary-content"
               onClick={onLogout}
             >
@@ -55,5 +55,5 @@
         ) : (
           <Link
-            className="btn btn-tertiary text-blue-200! px-8 mr-6"
+            className="btn btn-sm sm:btn-md btn-tertiary text-blue-200! px-6 sm:px-8"
             to="/login"
           >
Index: frontend/src/pages/LandingPage/components/Who.defaults.jsx
===================================================================
--- frontend/src/pages/LandingPage/components/Who.defaults.jsx	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
+++ frontend/src/pages/LandingPage/components/Who.defaults.jsx	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
@@ -0,0 +1,25 @@
+import { RxChevronRight } from "react-icons/rx";
+
+const WhoDefaults = {
+  tagline: "Who it's for",
+  heading: "Anyone working on themselves",
+  description:
+    "Whether you're training regularly, trying to manage weight and nutrition, organizing your budget, tracking investments, or building discipline — Trekr brings your key habits and metrics together in one place.",
+  buttons: [
+    { title: "Create an account", variant: "secondary" },
+    {
+      title: "Learn more",
+      variant: "link",
+      size: "link",
+      iconRight: <RxChevronRight />,
+    },
+  ],
+  image: {
+    src: "https://images.unsplash.com/photo-1554284126-aa88f22d8b74?auto=format&fit=crop&w=1600&q=80",
+    alt: "Planning habits and routine",
+  },
+};
+
+export { WhoDefaults };
+
+
Index: frontend/src/pages/LandingPage/components/Who.jsx
===================================================================
--- frontend/src/pages/LandingPage/components/Who.jsx	(revision a8381b18babc398c094b70c3ca5dc6cb0483c327)
+++ frontend/src/pages/LandingPage/components/Who.jsx	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
@@ -1,4 +1,4 @@
 import { Button } from "@relume_io/relume-ui";
-import { RxChevronRight } from "react-icons/rx";
+import { WhoDefaults } from "./Who.defaults.jsx";
 
 export const Who = (props) => {
@@ -9,19 +9,21 @@
   return (
     <section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
-      <div className="container">
+      <div className="mx-auto w-full max-w-6xl">
         <div className="grid grid-cols-1 gap-y-12 md:grid-cols-2 md:items-center md:gap-x-12 lg:gap-x-20">
           <div className="order-2 md:order-1">
             <img
               src={image.src}
-              className="w-full object-cover"
+              className="w-full rounded-2xl object-cover"
               alt={image.alt}
             />
           </div>
-          <div className="order-1 lg:order-2">
+          <div className="order-1 lg:order-2 text-center md:text-left">
             <p className="mb-3 font-semibold md:mb-4">{tagline}</p>
-            <h2 className="rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">
+            <h2 className="rb-5 mb-5 font-bold text-4xl sm:text-5xl md:mb-6 md:text-6xl lg:text-7xl leading-tight">
               {heading}
             </h2>
-            <p className="md:text-md">{description}</p>
+            <p className="text-sm sm:text-base md:text-lg opacity-80">
+              {description}
+            </p>
             <div className="mt-6 flex flex-wrap gap-4 md:mt-8">
               {buttons.map((button, index) => (
@@ -38,21 +40,2 @@
 };
 
-export const WhoDefaults = {
-  tagline: "Who it's for",
-  heading: "Anyone working on themselves",
-  description:
-    "Whether you're training regularly, trying to manage weight and nutrition, organizing your budget, tracking investments, or building discipline — Trekr brings your key habits and metrics together in one place.",
-  buttons: [
-    { title: "Create an account", variant: "secondary" },
-    {
-      title: "Learn more",
-      variant: "link",
-      size: "link",
-      iconRight: <RxChevronRight />,
-    },
-  ],
-  image: {
-    src: "https://images.unsplash.com/photo-1554284126-aa88f22d8b74?auto=format&fit=crop&w=1600&q=80",
-    alt: "Planning habits and routine",
-  },
-};
Index: frontend/src/utils/authSession.js
===================================================================
--- frontend/src/utils/authSession.js	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
+++ frontend/src/utils/authSession.js	(revision 42da64dc0d28f9380336816f6fb82c7572d0021d)
@@ -0,0 +1,37 @@
+export const AUTH_TOKEN_KEY = "authToken";
+export const AUTH_USER_KEY = "authUser";
+
+function decodeJwtPayload(token) {
+  try {
+    const parts = token.split(".");
+    if (parts.length < 2) return null;
+    const base64 = parts[1].replace(/-/g, "+").replace(/_/g, "/");
+    const normalized = base64.padEnd(Math.ceil(base64.length / 4) * 4, "=");
+    const json = atob(normalized);
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+}
+
+export function isTokenExpired(token) {
+  if (!token) return true;
+  const payload = decodeJwtPayload(token);
+  if (!payload || typeof payload.exp !== "number") return true;
+  return payload.exp * 1000 <= Date.now();
+}
+
+export function getAuthToken() {
+  return localStorage.getItem(AUTH_TOKEN_KEY);
+}
+
+export function clearAuthSession() {
+  localStorage.removeItem(AUTH_TOKEN_KEY);
+  localStorage.removeItem(AUTH_USER_KEY);
+}
+
+export function logoutAndRedirect(path = "/dashboard") {
+  clearAuthSession();
+  window.location.assign(path);
+}
+