diff --git a/src/app/layouts/ProtectedLayout.tsx b/src/app/layouts/ProtectedLayout.tsx
index aeb4f42..14a1cbf 100644
--- a/src/app/layouts/ProtectedLayout.tsx
+++ b/src/app/layouts/ProtectedLayout.tsx
@@ -32,7 +32,7 @@ function ProtectedLayout() {
   useVaultTimeout()
 
   return (
-    <div className="text-foreground bg-background flex h-screen">
+    <div className="text-foreground bg-background flex h-[calc(100vh-var(--banner-height))]">
       {/* Desktop sidebar */}
       <aside
         className="bg-sidebar text-sidebar-foreground border-sidebar-border hidden flex-shrink-0 flex-col border-r md:flex"
diff --git a/src/app/layouts/PublicLayout.tsx b/src/app/layouts/PublicLayout.tsx
index ee8a056..157d6ca 100644
--- a/src/app/layouts/PublicLayout.tsx
+++ b/src/app/layouts/PublicLayout.tsx
@@ -1,14 +1,12 @@
 import { Outlet } from '@tanstack/react-router'
-import { LanguageSwitcher } from '@/shared/ui/nav/LanguageSwitcher'
+import { PublicHeader } from '@/shared/ui/nav/PublicHeader'
 
 function PublicLayout() {
   return (
     <div className="bg-background text-foreground relative min-h-screen overflow-hidden">
       <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--color-primary)_0,_transparent_70%)] opacity-[0.08]" />
       <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,_var(--color-primary)_0,_transparent_50%)] opacity-[0.03]" />
-      <div className="fixed top-4 right-4 z-50">
-        <LanguageSwitcher />
-      </div>
+      <PublicHeader />
       <main className="container mx-auto flex min-h-screen items-center justify-center p-4">
         <Outlet />
       </main>
diff --git a/src/app/router.test.tsx b/src/app/router.test.tsx
index e9c965b..f75c627 100644
--- a/src/app/router.test.tsx
+++ b/src/app/router.test.tsx
@@ -34,10 +34,11 @@ function renderWithRouter(authOverrides: Partial<AuthContext> = {}, initialPath
 }
 
 describe('Router redirects', () => {
-  it('redirects / to /login when not authenticated', async () => {
+  it('does not redirect / to /login when not authenticated', async () => {
     const { router } = renderWithRouter({}, '/')
     await waitFor(() => {
-      expect(router.state.location.pathname).toBe('/login')
+      expect(router.state.location.pathname).not.toBe('/login')
+      expect(router.state.location.pathname).toBe('/')
     })
   })
 
diff --git a/src/app/routes/__root.tsx b/src/app/routes/__root.tsx
index 02c330d..e10d6ac 100644
--- a/src/app/routes/__root.tsx
+++ b/src/app/routes/__root.tsx
@@ -3,6 +3,7 @@ import { ThemeProvider } from '@/shared/lib/theme-provider'
 import { Toaster } from '@/shared/ui/sonner'
 import { PageSkeleton } from '@/app/Pending'
 import { RootErrorBoundary } from '@/app/ErrorBoundary'
+import { PreAlphaBanner } from '@/shared/ui/PreAlphaBanner'
 import type { AuthContext } from '@/shared/auth/auth-context'
 
 interface RouterContext {
@@ -18,6 +19,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 function RootLayout() {
   return (
     <ThemeProvider defaultTheme="dark">
+      <PreAlphaBanner />
       <Outlet />
       <Toaster />
     </ThemeProvider>
diff --git a/src/app/routes/index.tsx b/src/app/routes/index.tsx
index c4b718e..5301eb1 100644
--- a/src/app/routes/index.tsx
+++ b/src/app/routes/index.tsx
@@ -1,12 +1,15 @@
 import { createFileRoute, redirect } from '@tanstack/react-router'
+import { lazy } from 'react'
+
+const LandingPage = lazy(() => import('@/features/landing/ui/LandingPage'))
 
 const Route = createFileRoute('/')({
   beforeLoad: ({ context }) => {
     if (context.auth.isAuthenticated) {
       throw redirect({ to: '/dashboard' })
     }
-    throw redirect({ to: '/login' })
   },
+  component: LandingPage,
 })
 
 export { Route }
diff --git a/src/app/styles/globals.css b/src/app/styles/globals.css
index 08cc101..2ce068c 100644
--- a/src/app/styles/globals.css
+++ b/src/app/styles/globals.css
@@ -51,43 +51,46 @@
 }
 
 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(0.995 0.005 285);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(0.995 0.005 285);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.4 0.17 285);
+  color-scheme: light;
+  --banner-height: 32px;
+  --background: oklch(0.98 0.004 285);
+  --foreground: oklch(0.18 0.015 285);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.18 0.015 285);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.18 0.015 285);
+  --primary: oklch(0.42 0.14 285);
   --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0.006 285);
-  --secondary-foreground: oklch(0.3 0.12 285);
-  --muted: oklch(0.96 0.008 285);
-  --muted-foreground: oklch(0.5 0.08 285);
-  --accent: oklch(0.96 0.012 300);
-  --accent-foreground: oklch(0.3 0.12 285);
+  --secondary: oklch(0.94 0.012 285);
+  --secondary-foreground: oklch(0.28 0.1 285);
+  --muted: oklch(0.93 0.008 285);
+  --muted-foreground: oklch(0.46 0.05 285);
+  --accent: oklch(0.93 0.014 300);
+  --accent-foreground: oklch(0.28 0.1 285);
   --destructive: oklch(0.577 0.245 20);
-  --success: oklch(0.55 0.17 155);
-  --warning: oklch(0.82 0.16 80);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.55 0.15 285);
-  --chart-1: oklch(0.55 0.17 285);
-  --chart-2: oklch(0.55 0.14 300);
-  --chart-3: oklch(0.6 0.14 190);
-  --chart-4: oklch(0.6 0.14 150);
-  --chart-5: oklch(0.65 0.15 70);
+  --success: oklch(0.52 0.17 155);
+  --warning: oklch(0.72 0.16 80);
+  --border: oklch(0.88 0.012 285);
+  --input: oklch(0.84 0.016 285);
+  --ring: oklch(0.5 0.12 285);
+  --chart-1: oklch(0.5 0.15 285);
+  --chart-2: oklch(0.52 0.13 300);
+  --chart-3: oklch(0.55 0.14 190);
+  --chart-4: oklch(0.55 0.14 150);
+  --chart-5: oklch(0.6 0.15 70);
   --radius: 0.625rem;
-  --sidebar: oklch(0.995 0.006 285);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.4 0.17 285);
+  --sidebar: oklch(0.955 0.01 285);
+  --sidebar-foreground: oklch(0.18 0.015 285);
+  --sidebar-primary: oklch(0.42 0.14 285);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.96 0.012 300);
-  --sidebar-accent-foreground: oklch(0.3 0.12 285);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.55 0.15 285);
+  --sidebar-accent: oklch(0.93 0.014 300);
+  --sidebar-accent-foreground: oklch(0.28 0.1 285);
+  --sidebar-border: oklch(0.88 0.012 285);
+  --sidebar-ring: oklch(0.5 0.12 285);
 }
 
 .dark {
+  color-scheme: dark;
   --background: oklch(0.18 0.01 285);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0.02 285);
@@ -132,7 +135,7 @@
   }
   html {
     @apply font-sans;
-    color-scheme: dark;
+    scrollbar-gutter: stable;
   }
   button,
   a,
diff --git a/src/features/landing/ui/CtaButtons.tsx b/src/features/landing/ui/CtaButtons.tsx
new file mode 100644
index 0000000..8a2ec52
--- /dev/null
+++ b/src/features/landing/ui/CtaButtons.tsx
@@ -0,0 +1,22 @@
+import { Link } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+
+import { buttonVariants } from '@/shared/ui/button'
+import { cn } from '@/shared/lib/utils'
+
+function CtaButtons() {
+  const { t } = useTranslation('landing')
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
+      <Link to="/register" className={cn(buttonVariants({ size: 'lg' }), 'h-12 px-8 text-base')}>
+        {t('hero.cta')}
+      </Link>
+      <Link to="/login" className={cn(buttonVariants({ variant: 'outline', size: 'lg' }), 'h-12 px-8 text-base')}>
+        {t('hero.login')}
+      </Link>
+    </div>
+  )
+}
+
+export { CtaButtons }
diff --git a/src/features/landing/ui/FeaturesGrid.tsx b/src/features/landing/ui/FeaturesGrid.tsx
new file mode 100644
index 0000000..cb71d89
--- /dev/null
+++ b/src/features/landing/ui/FeaturesGrid.tsx
@@ -0,0 +1,53 @@
+import { ShieldCheck, KeyRound, Fingerprint, Lock } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import type { LucideIcon } from 'lucide-react'
+
+interface FeatureItem {
+  icon: LucideIcon
+  titleKey: string
+  descriptionKey: string
+}
+
+const FEATURES: FeatureItem[] = [
+  { icon: ShieldCheck, titleKey: 'features.zeroKnowledge.title', descriptionKey: 'features.zeroKnowledge.description' },
+  { icon: KeyRound, titleKey: 'features.splitKey.title', descriptionKey: 'features.splitKey.description' },
+  { icon: Fingerprint, titleKey: 'features.recovery.title', descriptionKey: 'features.recovery.description' },
+  { icon: Lock, titleKey: 'features.openDesign.title', descriptionKey: 'features.openDesign.description' },
+]
+
+function FeaturesGrid() {
+  const { t } = useTranslation('landing')
+
+  return (
+    <section className="px-6 py-24 sm:py-32">
+      <div className="mx-auto max-w-6xl">
+        <h2 className="text-foreground mb-16 text-center text-3xl font-bold tracking-tight sm:text-4xl">
+          {t('features.heading')}
+        </h2>
+
+        <div className="grid gap-8 sm:grid-cols-2 lg:gap-12">
+          {FEATURES.map((feature) => (
+            <FeatureCard key={feature.titleKey} feature={feature} />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function FeatureCard({ feature }: { feature: FeatureItem }) {
+  const Icon = feature.icon
+  const { t } = useTranslation('landing')
+
+  return (
+    <div className="bg-card/50 border-border/50 group hover:border-primary/20 hover:shadow-primary/5 rounded-xl border p-8 backdrop-blur-sm transition-all duration-300 hover:shadow-lg">
+      <div className="bg-primary/10 text-primary mb-5 inline-flex rounded-lg p-3">
+        <Icon className="size-6" />
+      </div>
+      <h3 className="text-foreground mb-3 text-lg font-semibold">{t(feature.titleKey)}</h3>
+      <p className="text-muted-foreground leading-relaxed">{t(feature.descriptionKey)}</p>
+    </div>
+  )
+}
+
+export { FeaturesGrid }
diff --git a/src/features/landing/ui/HeroSection.tsx b/src/features/landing/ui/HeroSection.tsx
new file mode 100644
index 0000000..cf2a28d
--- /dev/null
+++ b/src/features/landing/ui/HeroSection.tsx
@@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next'
+
+import { CipherNoteIcon } from '@/shared/ui/brand/CipherNoteIcon'
+import { CtaButtons } from '@/features/landing/ui/CtaButtons'
+
+function HeroSection() {
+  const { t } = useTranslation('landing')
+
+  return (
+    <section className="relative flex min-h-screen flex-col items-center justify-center px-6 py-32 text-center">
+      <div className="animate-fade-in-up relative z-10 mx-auto max-w-4xl">
+        <div className="mb-8 flex items-center justify-center gap-3">
+          <CipherNoteIcon className="size-14" />
+          <span className="text-foreground text-3xl font-bold tracking-tight">Cipher Note</span>
+        </div>
+
+        <h1 className="text-foreground mb-6 text-4xl leading-[1.15] font-bold tracking-tight sm:text-5xl md:text-6xl">
+          {t('hero.title')}
+        </h1>
+
+        <p className="text-muted-foreground mx-auto mb-12 max-w-2xl text-lg leading-relaxed sm:text-xl">
+          {t('hero.subtitle')}
+        </p>
+
+        <CtaButtons />
+      </div>
+    </section>
+  )
+}
+
+export { HeroSection }
diff --git a/src/features/landing/ui/HowItWorks.tsx b/src/features/landing/ui/HowItWorks.tsx
new file mode 100644
index 0000000..ccacc50
--- /dev/null
+++ b/src/features/landing/ui/HowItWorks.tsx
@@ -0,0 +1,66 @@
+import { UserPlus, PenLine, ShieldCheck } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import type { LucideIcon } from 'lucide-react'
+
+interface Step {
+  icon: LucideIcon
+  titleKey: string
+  descriptionKey: string
+}
+
+const STEPS: Step[] = [
+  { icon: UserPlus, titleKey: 'howItWorks.step1.title', descriptionKey: 'howItWorks.step1.description' },
+  { icon: PenLine, titleKey: 'howItWorks.step2.title', descriptionKey: 'howItWorks.step2.description' },
+  { icon: ShieldCheck, titleKey: 'howItWorks.step3.title', descriptionKey: 'howItWorks.step3.description' },
+]
+
+function HowItWorks() {
+  const { t } = useTranslation('landing')
+
+  return (
+    <section className="px-6 py-24 sm:py-32">
+      <div className="mx-auto max-w-5xl">
+        <h2 className="text-foreground mb-16 text-center text-3xl font-bold tracking-tight sm:text-4xl">
+          {t('howItWorks.heading')}
+        </h2>
+
+        <div className="grid gap-12 md:grid-cols-3 md:gap-8">
+          {STEPS.map((step, index) => (
+            <StepCard key={step.titleKey} step={step} index={index} last={index === STEPS.length - 1} t={t} />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+interface StepCardProps {
+  step: Step
+  index: number
+  last: boolean
+  t: (key: string) => string
+}
+
+function StepCard({ step, index, last, t }: StepCardProps) {
+  const Icon = step.icon
+
+  return (
+    <div className="flex flex-col items-center text-center">
+      <span className="text-muted-foreground/30 mb-2 font-mono text-5xl leading-none font-bold select-none">
+        {index + 1}
+      </span>
+      <div className="relative mb-8 flex w-full items-center justify-center">
+        {!last && (
+          <div className="from-border via-primary/40 to-border absolute left-1/2 hidden h-px w-full bg-gradient-to-r md:block" />
+        )}
+        <div className="bg-primary text-primary-foreground shadow-primary/20 relative z-10 flex size-14 items-center justify-center rounded-full shadow-lg">
+          <Icon className="size-6" />
+        </div>
+      </div>
+      <h3 className="text-foreground mb-3 text-lg font-semibold">{t(step.titleKey)}</h3>
+      <p className="text-muted-foreground leading-relaxed">{t(step.descriptionKey)}</p>
+    </div>
+  )
+}
+
+export { HowItWorks }
diff --git a/src/features/landing/ui/LandingPage.tsx b/src/features/landing/ui/LandingPage.tsx
new file mode 100644
index 0000000..50d8c1d
--- /dev/null
+++ b/src/features/landing/ui/LandingPage.tsx
@@ -0,0 +1,33 @@
+import { useTranslation } from 'react-i18next'
+
+import { HeroSection } from '@/features/landing/ui/HeroSection'
+import { FeaturesGrid } from '@/features/landing/ui/FeaturesGrid'
+import { HowItWorks } from '@/features/landing/ui/HowItWorks'
+import { SecurityBanner } from '@/features/landing/ui/SecurityBanner'
+import { PublicHeader } from '@/shared/ui/nav/PublicHeader'
+
+function LandingPage() {
+  const { t } = useTranslation('landing')
+
+  return (
+    <div className="bg-background text-foreground relative min-h-screen">
+      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--color-primary)_0,_transparent_70%)] opacity-[0.06]" />
+      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_right,_var(--color-primary)_0,_transparent_50%)] opacity-[0.03]" />
+
+      <PublicHeader />
+
+      <main className="relative">
+        <HeroSection />
+        <FeaturesGrid />
+        <HowItWorks />
+        <SecurityBanner />
+      </main>
+
+      <footer className="border-border/50 relative border-t px-6 py-8 text-center">
+        <p className="text-muted-foreground text-sm">{t('footer.tagline')}</p>
+      </footer>
+    </div>
+  )
+}
+
+export default LandingPage
diff --git a/src/features/landing/ui/SecurityBanner.tsx b/src/features/landing/ui/SecurityBanner.tsx
new file mode 100644
index 0000000..7807c42
--- /dev/null
+++ b/src/features/landing/ui/SecurityBanner.tsx
@@ -0,0 +1,21 @@
+import { useTranslation } from 'react-i18next'
+
+import { CtaButtons } from '@/features/landing/ui/CtaButtons'
+
+function SecurityBanner() {
+  const { t } = useTranslation('landing')
+
+  return (
+    <section className="relative overflow-hidden px-6 py-24 sm:py-32">
+      <div className="bg-card/60 border-border/50 mx-auto max-w-4xl rounded-2xl border p-12 text-center backdrop-blur-sm sm:p-16">
+        <p className="text-muted-foreground mx-auto mb-10 max-w-xl text-lg leading-relaxed font-medium sm:text-xl">
+          {t('security.statement')}
+        </p>
+
+        <CtaButtons />
+      </div>
+    </section>
+  )
+}
+
+export { SecurityBanner }
diff --git a/src/features/settings/ui/PreferencesSection.test.tsx b/src/features/settings/ui/PreferencesSection.test.tsx
index b544fbe..2948369 100644
--- a/src/features/settings/ui/PreferencesSection.test.tsx
+++ b/src/features/settings/ui/PreferencesSection.test.tsx
@@ -17,7 +17,7 @@ describe('PreferencesSection', () => {
 
   it('renders language switcher buttons', () => {
     render(<PreferencesSection />)
-    expect(screen.getByRole('button', { name: 'English' })).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: 'Czech' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'English' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Čeština' })).toBeInTheDocument()
   })
 })
diff --git a/src/features/settings/ui/PreferencesSection.tsx b/src/features/settings/ui/PreferencesSection.tsx
index 0c9b99d..cf5d82f 100644
--- a/src/features/settings/ui/PreferencesSection.tsx
+++ b/src/features/settings/ui/PreferencesSection.tsx
@@ -2,6 +2,7 @@ import { useTranslation } from 'react-i18next'
 
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/shared/ui/card'
 import { LanguageSwitcher } from '@/shared/ui/nav/LanguageSwitcher'
+import { ThemeSwitcher } from '@/shared/ui/nav/ThemeSwitcher'
 
 function PreferencesSection() {
   const { t } = useTranslation('settings')
@@ -12,11 +13,15 @@ function PreferencesSection() {
         <CardTitle>{t('preferences.title')}</CardTitle>
         <CardDescription>{t('preferences.description')}</CardDescription>
       </CardHeader>
-      <CardContent>
+      <CardContent className="space-y-3">
         <div className="flex items-center justify-between">
           <span className="text-sm">{t('preferences.language')}</span>
           <LanguageSwitcher variant="full" />
         </div>
+        <div className="flex items-center justify-between">
+          <span className="text-sm">{t('preferences.theme')}</span>
+          <ThemeSwitcher variant="full" />
+        </div>
       </CardContent>
     </Card>
   )
diff --git a/src/shared/i18n/config.ts b/src/shared/i18n/config.ts
index 0ea1fa0..3529c1f 100644
--- a/src/shared/i18n/config.ts
+++ b/src/shared/i18n/config.ts
@@ -10,7 +10,7 @@ void i18n
   .init({
     fallbackLng: 'en',
     supportedLngs: ['en', 'cs'],
-    ns: ['common', 'auth', 'fields', 'settings', 'crypto'],
+    ns: ['common', 'auth', 'fields', 'settings', 'crypto', 'landing'],
     defaultNS: 'common',
     interpolation: {
       escapeValue: false,
diff --git a/src/shared/i18n/locales/cs/common.json b/src/shared/i18n/locales/cs/common.json
index 311e8cb..969b88a 100644
--- a/src/shared/i18n/locales/cs/common.json
+++ b/src/shared/i18n/locales/cs/common.json
@@ -16,6 +16,10 @@
     "loading": "Načítání...",
     "error": "Něco se pokazilo"
   },
+  "preAlpha": {
+    "ariaLabel": "Upozornění na předběžnou verzi",
+    "message": "Cipher Note je předběžná alfa verze. Očekávejte zásadní změny a občasné resety dat."
+  },
   "nav": {
     "dashboard": "Nástěnka",
     "settings": "Nastavení",
@@ -25,6 +29,11 @@
     "recover": "Obnovit účet",
     "menu": "Menu",
     "closeMenu": "Zavřít menu",
-    "mainNav": "Hlavní navigace"
+    "mainNav": "Hlavní navigace",
+    "backToHome": "Zpět na domovskou stránku",
+    "languageSelection": "Výběr jazyka",
+    "switchLanguage": "Přepnout jazyk",
+    "themeSelection": "Výběr motivu",
+    "switchTheme": "Přepnout motiv"
   }
 }
diff --git a/src/shared/i18n/locales/cs/landing.json b/src/shared/i18n/locales/cs/landing.json
new file mode 100644
index 0000000..f998aba
--- /dev/null
+++ b/src/shared/i18n/locales/cs/landing.json
@@ -0,0 +1,48 @@
+{
+  "hero": {
+    "title": "Vaše poznámky. Vaše klíče.",
+    "subtitle": "End-to-end šifrované poznámky, které ani naše servery nedokážou přečíst. Postaveno na zero-knowledge kryptografii.",
+    "cta": "Vytvořit účet zdarma",
+    "login": "Přihlásit se"
+  },
+  "features": {
+    "heading": "Bezpečnost bez kompromisu",
+    "zeroKnowledge": {
+      "title": "Zero-Knowledge šifrování",
+      "description": "Vaše heslo nikdy neopustí zařízení. Šifrovací klíče odvozujeme lokálně - server vidí pouze šifrovaný text."
+    },
+    "splitKey": {
+      "title": "Rozdělená derivace klíčů",
+      "description": "Jedno heslo, dva nezávislé klíče: jeden pro autentizaci, druhý pro šifrování. Ani narušení serveru nic neodhalí."
+    },
+    "recovery": {
+      "title": "Záloha obnovovací frází",
+      "description": "BIP-39 mnemonická fráze vám umožní obnovit data, pokud zapomenete heslo. Zapište si ji a uložte na bezpečné místo."
+    },
+    "openDesign": {
+      "title": "Transparentní architektura",
+      "description": "Postaveno na AES-256-GCM, Argon2id a HKDF. Žádné proprietární algoritmy. Každé kryptografické rozhodnutí je ověřitelné."
+    }
+  },
+  "howItWorks": {
+    "heading": "Jak to funguje",
+    "step1": {
+      "title": "Vytvořte si účet",
+      "description": "Zvolte uživatelské jméno a heslo. Vaše heslo se nikdy neodesílá na server - k autentizaci se používá pouze odvozený hash."
+    },
+    "step2": {
+      "title": "Zapište své poznámky",
+      "description": "Přidejte poznámky, webové stránky a e-maily do šifrovaného trezoru. Rozhraní je jednoduché a přehledné."
+    },
+    "step3": {
+      "title": "Okamžitě zašifrováno",
+      "description": "Každé pole je zašifrováno jedinečným klíčem před opuštěním prohlížeče. Server ukládá pouze šifrovaný text."
+    }
+  },
+  "security": {
+    "statement": "Postaveno na AES-256-GCM, Argon2id a HKDF. Žádné sledování. Žádné reklamy. Žádné kompromisy."
+  },
+  "footer": {
+    "tagline": "Soukromí není vymoženost - je to základ."
+  }
+}
diff --git a/src/shared/i18n/locales/cs/settings.json b/src/shared/i18n/locales/cs/settings.json
index 8309468..d7246a7 100644
--- a/src/shared/i18n/locales/cs/settings.json
+++ b/src/shared/i18n/locales/cs/settings.json
@@ -11,6 +11,7 @@
     "title": "Předvolby",
     "description": "Jazyk a předvolby zobrazení.",
     "language": "Jazyk",
+    "theme": "Motiv",
     "languageName": {
       "en": "Angličtina",
       "cs": "Čeština"
diff --git a/src/shared/i18n/locales/en/common.json b/src/shared/i18n/locales/en/common.json
index 5af01ca..8b6effd 100644
--- a/src/shared/i18n/locales/en/common.json
+++ b/src/shared/i18n/locales/en/common.json
@@ -16,6 +16,10 @@
     "loading": "Loading...",
     "error": "Something went wrong"
   },
+  "preAlpha": {
+    "ariaLabel": "Pre-alpha software notice",
+    "message": "Cipher Note is in pre-alpha version. Expect breaking changes and periodic data resets."
+  },
   "nav": {
     "dashboard": "Dashboard",
     "settings": "Settings",
@@ -25,6 +29,11 @@
     "recover": "Recover account",
     "menu": "Menu",
     "closeMenu": "Close menu",
-    "mainNav": "Main navigation"
+    "mainNav": "Main navigation",
+    "backToHome": "Back to home",
+    "languageSelection": "Language selection",
+    "switchLanguage": "Switch language",
+    "themeSelection": "Theme selection",
+    "switchTheme": "Switch theme"
   }
 }
diff --git a/src/shared/i18n/locales/en/landing.json b/src/shared/i18n/locales/en/landing.json
new file mode 100644
index 0000000..97c5eb6
--- /dev/null
+++ b/src/shared/i18n/locales/en/landing.json
@@ -0,0 +1,48 @@
+{
+  "hero": {
+    "title": "Your notes. Your keys.",
+    "subtitle": "End-to-end encrypted notes that not even our servers can read. Built on zero-knowledge cryptography.",
+    "cta": "Create a free account",
+    "login": "Sign in"
+  },
+  "features": {
+    "heading": "Security without compromise",
+    "zeroKnowledge": {
+      "title": "Zero-Knowledge Encryption",
+      "description": "Your password never leaves your device. We derive encryption keys locally - the server only sees ciphertext."
+    },
+    "splitKey": {
+      "title": "Split Key Derivation",
+      "description": "One password, two independent keys: one for authentication, one for encryption. Even a server breach reveals nothing."
+    },
+    "recovery": {
+      "title": "Recovery Phrase Backup",
+      "description": "A BIP-39 mnemonic phrase lets you recover your data if you forget your password. Write it down, keep it safe."
+    },
+    "openDesign": {
+      "title": "Transparent Architecture",
+      "description": "Built on AES-256-GCM, Argon2id, and HKDF. No proprietary algorithms. Every cryptographic choice is auditable."
+    }
+  },
+  "howItWorks": {
+    "heading": "How it works",
+    "step1": {
+      "title": "Create your account",
+      "description": "Pick a username and password. Your password is never sent to the server - only a derived hash is used for authentication."
+    },
+    "step2": {
+      "title": "Write your notes",
+      "description": "Add notes, websites, and emails to your encrypted vault. The interface is simple and focused."
+    },
+    "step3": {
+      "title": "Encrypted instantly",
+      "description": "Every field is encrypted with a unique key before leaving your browser. The server stores only ciphertext."
+    }
+  },
+  "security": {
+    "statement": "Built on AES-256-GCM, Argon2id, and HKDF. No tracking. No ads. No compromise."
+  },
+  "footer": {
+    "tagline": "Privacy is not a feature - it's the foundation."
+  }
+}
diff --git a/src/shared/i18n/locales/en/settings.json b/src/shared/i18n/locales/en/settings.json
index d2245b5..149f052 100644
--- a/src/shared/i18n/locales/en/settings.json
+++ b/src/shared/i18n/locales/en/settings.json
@@ -11,6 +11,7 @@
     "title": "Preferences",
     "description": "Language and display preferences.",
     "language": "Language",
+    "theme": "Theme",
     "languageName": {
       "en": "English",
       "cs": "Czech"
diff --git a/src/shared/ui/PreAlphaBanner.tsx b/src/shared/ui/PreAlphaBanner.tsx
new file mode 100644
index 0000000..8f8a3b7
--- /dev/null
+++ b/src/shared/ui/PreAlphaBanner.tsx
@@ -0,0 +1,21 @@
+import { useTranslation } from 'react-i18next'
+import { TriangleAlert } from 'lucide-react'
+
+function PreAlphaBanner() {
+  const { t } = useTranslation('common')
+
+  return (
+    <div className="flex justify-center bg-amber-50/95 dark:bg-neutral-900/95">
+      <div
+        role="banner"
+        aria-label={t('preAlpha.ariaLabel')}
+        className="flex items-center gap-2 px-4 py-1.5 text-sm text-amber-900 backdrop-blur-sm dark:text-amber-200"
+      >
+        <TriangleAlert className="size-4 shrink-0" aria-hidden="true" />
+        <span>{t('preAlpha.message')}</span>
+      </div>
+    </div>
+  )
+}
+
+export { PreAlphaBanner }
diff --git a/src/shared/ui/SegmentedControl.tsx b/src/shared/ui/SegmentedControl.tsx
new file mode 100644
index 0000000..304d59a
--- /dev/null
+++ b/src/shared/ui/SegmentedControl.tsx
@@ -0,0 +1,42 @@
+import { cn } from '@/shared/lib/utils'
+
+interface SegmentedControlItem {
+  value: string
+  label: string
+  icon?: React.ReactNode
+}
+
+interface SegmentedControlProps {
+  items: SegmentedControlItem[]
+  value: string
+  onChange: (value: string) => void
+  ariaLabel?: string
+}
+
+function SegmentedControl({ items, value, onChange, ariaLabel }: SegmentedControlProps) {
+  return (
+    <div className="bg-muted inline-flex rounded-lg p-1" role="tablist" aria-label={ariaLabel}>
+      {items.map((item) => (
+        <button
+          key={item.value}
+          type="button"
+          onClick={() => onChange(item.value)}
+          className={cn(
+            'flex cursor-pointer items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-all',
+            value === item.value
+              ? 'bg-background text-foreground shadow-sm'
+              : 'text-muted-foreground hover:text-foreground',
+          )}
+          role="tab"
+          aria-pressed={value === item.value}
+        >
+          {item.icon}
+          <span className="hidden sm:inline">{item.label}</span>
+        </button>
+      ))}
+    </div>
+  )
+}
+
+export { SegmentedControl }
+export type { SegmentedControlItem }
diff --git a/src/shared/ui/nav/LanguageSwitcher.test.tsx b/src/shared/ui/nav/LanguageSwitcher.test.tsx
index 098af66..48c47ac 100644
--- a/src/shared/ui/nav/LanguageSwitcher.test.tsx
+++ b/src/shared/ui/nav/LanguageSwitcher.test.tsx
@@ -12,39 +12,39 @@ describe('LanguageSwitcher', () => {
 
   it('renders compact variant with language code', () => {
     render(<LanguageSwitcher variant="compact" />)
-    expect(screen.getByRole('button', { name: 'EN' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Switch language' })).toHaveTextContent('EN')
   })
 
   it('renders full variant with language names', () => {
     render(<LanguageSwitcher variant="full" />)
-    expect(screen.getByRole('button', { name: 'English' })).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: 'Czech' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'English' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Čeština' })).toBeInTheDocument()
   })
 
   it('defaults to compact variant', () => {
     render(<LanguageSwitcher />)
-    expect(screen.getByRole('button', { name: 'EN' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Switch language' })).toHaveTextContent('EN')
   })
 
   it('switches language when clicked in compact variant', async () => {
     const user = userEvent.setup()
     render(<LanguageSwitcher variant="compact" />)
-    await user.click(screen.getByRole('button', { name: 'EN' }))
+    await user.click(screen.getByRole('button', { name: 'Switch language' }))
     expect(i18next.language.startsWith('cs')).toBe(true)
   })
 
   it('switches language when clicked in full variant', async () => {
     const user = userEvent.setup()
     render(<LanguageSwitcher variant="full" />)
-    await user.click(screen.getByRole('button', { name: 'Czech' }))
+    await user.click(screen.getByRole('tab', { name: 'Čeština' }))
     expect(i18next.language.startsWith('cs')).toBe(true)
   })
 
-  it('marks active language with aria-current in full variant', () => {
+  it('marks active language with aria-pressed in full variant', () => {
     render(<LanguageSwitcher variant="full" />)
-    const enButton = screen.getByRole('button', { name: 'English' })
-    const csButton = screen.getByRole('button', { name: 'Czech' })
-    expect(enButton).toHaveAttribute('aria-current')
-    expect(csButton).not.toHaveAttribute('aria-current')
+    const enButton = screen.getByRole('tab', { name: 'English' })
+    const csButton = screen.getByRole('tab', { name: 'Čeština' })
+    expect(enButton).toHaveAttribute('aria-pressed', 'true')
+    expect(csButton).toHaveAttribute('aria-pressed', 'false')
   })
 })
diff --git a/src/shared/ui/nav/LanguageSwitcher.tsx b/src/shared/ui/nav/LanguageSwitcher.tsx
index ec8e928..f6dd3e4 100644
--- a/src/shared/ui/nav/LanguageSwitcher.tsx
+++ b/src/shared/ui/nav/LanguageSwitcher.tsx
@@ -1,47 +1,51 @@
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/shared/ui/button'
+import { SegmentedControl } from '@/shared/ui/SegmentedControl'
 
 const LANGUAGES = [
   { code: 'en', label: 'EN', name: 'English' },
   { code: 'cs', label: 'CS', name: 'Čeština' },
 ] as const
 
+const LANGUAGE_ITEMS = LANGUAGES.map((lang) => ({
+  value: lang.code,
+  label: lang.name,
+}))
+
+const LANGUAGE_CODES = LANGUAGES.map((lang) => lang.code) as string[]
+
 interface LanguageSwitcherProps {
   variant?: 'compact' | 'full'
 }
 
 function LanguageSwitcher({ variant = 'compact' }: LanguageSwitcherProps) {
-  const { t, i18n } = useTranslation('settings')
+  const { i18n, t } = useTranslation('common')
 
   const currentCode = i18n.language?.split('-')[0] ?? 'en'
 
   if (variant === 'full') {
     return (
-      <div className="flex gap-1">
-        {LANGUAGES.map((lang) => (
-          <Button
-            key={lang.code}
-            variant={currentCode === lang.code ? 'default' : 'outline'}
-            aria-current={currentCode === lang.code ? 'true' : undefined}
-            size="sm"
-            onClick={() => void i18n.changeLanguage(lang.code)}
-          >
-            {t(`preferences.languageName.${lang.code}`, lang.name)}
-          </Button>
-        ))}
-      </div>
+      <SegmentedControl
+        items={LANGUAGE_ITEMS}
+        value={currentCode}
+        onChange={(code) => void i18n.changeLanguage(code)}
+        aria-label={t('nav.languageSelection')}
+      />
     )
   }
 
-  const currentLang = LANGUAGES.find((lang) => lang.code === currentCode) ?? LANGUAGES[0]
-  const nextLang = LANGUAGES.find((lang) => lang.code !== currentLang.code) ?? LANGUAGES[0]
+  const currentIndex = LANGUAGE_CODES.indexOf(currentCode)
+  const nextIndex = (currentIndex + 1) % LANGUAGE_CODES.length
+  const nextCode = LANGUAGE_CODES[nextIndex]
 
   function toggleLanguage() {
-    void i18n.changeLanguage(nextLang.code)
+    void i18n.changeLanguage(nextCode)
   }
 
+  const currentLang = LANGUAGES.find((lang) => lang.code === currentCode) ?? LANGUAGES[0]
+
   return (
-    <Button variant="ghost" size="sm" onClick={toggleLanguage}>
+    <Button variant="ghost" size="sm" onClick={toggleLanguage} aria-label={t('nav.switchLanguage')}>
       {currentLang.label}
     </Button>
   )
diff --git a/src/shared/ui/nav/PublicHeader.tsx b/src/shared/ui/nav/PublicHeader.tsx
new file mode 100644
index 0000000..82315ac
--- /dev/null
+++ b/src/shared/ui/nav/PublicHeader.tsx
@@ -0,0 +1,27 @@
+import { Link } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+
+import { CipherNoteIcon } from '@/shared/ui/brand/CipherNoteIcon'
+import { LanguageSwitcher } from '@/shared/ui/nav/LanguageSwitcher'
+import { ThemeSwitcher } from '@/shared/ui/nav/ThemeSwitcher'
+
+function PublicHeader() {
+  const { t } = useTranslation('common')
+
+  return (
+    <header className="fixed right-0 left-0 z-50 border-b border-transparent backdrop-blur-md">
+      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
+        <Link to="/" className="flex items-center gap-2" aria-label={t('nav.backToHome')}>
+          <CipherNoteIcon className="size-7" />
+          <span className="text-foreground text-lg font-semibold">Cipher Note</span>
+        </Link>
+        <div className="flex items-center gap-2">
+          <LanguageSwitcher />
+          <ThemeSwitcher />
+        </div>
+      </div>
+    </header>
+  )
+}
+
+export { PublicHeader }
diff --git a/src/shared/ui/nav/ThemeSwitcher.tsx b/src/shared/ui/nav/ThemeSwitcher.tsx
new file mode 100644
index 0000000..847c2ae
--- /dev/null
+++ b/src/shared/ui/nav/ThemeSwitcher.tsx
@@ -0,0 +1,68 @@
+import { Moon, Sun, Monitor } from 'lucide-react'
+
+import { useTheme } from '@/shared/lib/theme-provider'
+
+import { SegmentedControl } from '@/shared/ui/SegmentedControl'
+import { useTranslation } from 'react-i18next'
+
+type Theme = 'dark' | 'light' | 'system'
+
+const THEME_CYCLE: Theme[] = ['dark', 'light', 'system']
+
+const THEME_ICONS: Record<Theme, React.ReactNode> = {
+  dark: <Moon className="size-4" />,
+  light: <Sun className="size-4" />,
+  system: <Monitor className="size-4" />,
+}
+
+const THEME_LABELS: Record<Theme, string> = {
+  dark: 'Dark',
+  light: 'Light',
+  system: 'System',
+}
+
+const THEME_ITEMS = THEME_CYCLE.map((theme) => ({
+  value: theme,
+  label: THEME_LABELS[theme],
+  icon: THEME_ICONS[theme],
+}))
+
+interface ThemeSwitcherProps {
+  variant?: 'compact' | 'full'
+}
+
+function ThemeSwitcher({ variant = 'compact' }: ThemeSwitcherProps) {
+  const { theme, setTheme } = useTheme()
+  const { t } = useTranslation('common')
+
+  if (variant === 'full') {
+    return (
+      <SegmentedControl
+        items={THEME_ITEMS}
+        value={theme}
+        onChange={(v) => setTheme(v as Theme)}
+        aria-label={t('nav.themeSelection')}
+      />
+    )
+  }
+
+  const cycleTheme = () => {
+    const currentIndex = THEME_CYCLE.indexOf(theme)
+    const nextIndex = (currentIndex + 1) % THEME_CYCLE.length
+    setTheme(THEME_CYCLE[nextIndex])
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={cycleTheme}
+      className="hover:bg-muted inline-flex cursor-pointer items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors"
+      aria-label={t('nav.switchTheme')}
+    >
+      {THEME_ICONS[theme]}
+      <span className="hidden sm:inline">{THEME_LABELS[theme]}</span>
+    </button>
+  )
+}
+
+export { ThemeSwitcher }