Index: frontend/src/pages/LandingPage/components/Benefits.jsx
===================================================================
--- frontend/src/pages/LandingPage/components/Benefits.jsx	(revision ff01f66118570f9849d473fe7df4fe26b5e3a361)
+++ 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 ff01f66118570f9849d473fe7df4fe26b5e3a361)
+++ 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 ff01f66118570f9849d473fe7df4fe26b5e3a361)
+++ 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 ff01f66118570f9849d473fe7df4fe26b5e3a361)
+++ 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 ff01f66118570f9849d473fe7df4fe26b5e3a361)
+++ 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 ff01f66118570f9849d473fe7df4fe26b5e3a361)
+++ 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 ff01f66118570f9849d473fe7df4fe26b5e3a361)
+++ 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 ff01f66118570f9849d473fe7df4fe26b5e3a361)
+++ 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",
-  },
-};