diff --git a/app/(dashboard)/bookkeeping/year-end/arsredovisning/page.tsx b/app/(dashboard)/bookkeeping/year-end/arsredovisning/page.tsx
index 0e8aeacc..0020c2b2 100644
--- a/app/(dashboard)/bookkeeping/year-end/arsredovisning/page.tsx
+++ b/app/(dashboard)/bookkeeping/year-end/arsredovisning/page.tsx
@@ -4,7 +4,6 @@ import { useCallback, useEffect, useState } from 'react'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useTranslations } from 'next-intl'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Skeleton } from '@/components/ui/skeleton'
@@ -12,12 +11,19 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
 import { Checkbox } from '@/components/ui/checkbox'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { PageHeader } from '@/components/ui/page-header'
 import { ArrowLeft, FileDown, Plus, ExternalLink, Loader2, Save, CheckCircle2, Trash2 } from 'lucide-react'
 import { useToast } from '@/components/ui/use-toast'
 import { formatCurrency } from '@/lib/utils'
-import { FiscalYearSelector } from '@/components/common/FiscalYearSelector'
+import { FyPicker } from '@/components/common/FyPicker'
 import { DigitalInlamning, INLAMNING_COMING_SOON } from '@/components/bokslut/DigitalInlamning'
 import { AnnualReportStudio } from '@/components/bokslut/AnnualReportStudio'
 import type { ArsredovisningData } from '@/lib/bokslut/arsredovisning/types'
@@ -452,10 +458,9 @@ export default function ArsredovisningPage() {
           title="Årsredovisning"
           description="Förhandsgranska och ladda ner årsredovisningen för valt räkenskapsår."
         />
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">Välj räkenskapsår</CardTitle>
-            <p className="text-sm text-muted-foreground">
+        <div className="max-w-xl px-1">
+            <h3 className="font-sans text-sm font-medium">Välj räkenskapsår</h3>
+            <p className="mt-1 text-sm text-muted-foreground">
               Välj det räkenskapsår du vill se årsredovisningen för. Du kan
               förhandsgranska och ladda ner PDF-utkastet utan att stänga året: det
               fullständiga bokslutet görs sedan via{' '}
@@ -464,19 +469,17 @@ export default function ArsredovisningPage() {
               </Link>
               .
             </p>
-          </CardHeader>
-          <CardContent>
-            <FiscalYearSelector
+          <div className="mt-4">
+            <FyPicker
               value={null}
               onChange={(id) => {
                 if (id) router.replace(`/bookkeeping/year-end/arsredovisning?period=${id}`)
               }}
               includeAllOption={false}
               hideFuturePeriods
-              label={null}
             />
-          </CardContent>
-        </Card>
+          </div>
+        </div>
       </div>
     )
   }
@@ -485,12 +488,10 @@ export default function ArsredovisningPage() {
     return (
       <div className="space-y-8">
         <PageHeader title="Årsredovisning" />
-        <Card>
-          <CardContent className="p-6 space-y-3">
-            <Skeleton className="h-6 w-1/3" />
-            <Skeleton className="h-32 w-full" />
-          </CardContent>
-        </Card>
+        <div className="space-y-3">
+          <Skeleton className="h-6 w-1/3" />
+          <Skeleton className="h-32 w-full" />
+        </div>
       </div>
     )
   }
@@ -499,11 +500,7 @@ export default function ArsredovisningPage() {
     return (
       <div className="space-y-8">
         <PageHeader title="Årsredovisning" />
-        <Card>
-          <CardContent className="p-6 text-destructive">
-            {error ?? 'Kunde inte hämta data'}
-          </CardContent>
-        </Card>
+        <p className="py-4 text-sm text-destructive">{error ?? 'Kunde inte hämta data'}</p>
       </div>
     )
   }
@@ -531,16 +528,14 @@ export default function ArsredovisningPage() {
       />
 
       {data.accounting_framework === 'k3' && (
-        <Card>
-          <CardContent className="p-4 text-sm">
-            <p className="font-medium">Årsredovisning enligt K3 (BFNAR 2012:1)</p>
-            <p className="text-muted-foreground mt-1">
-              Dokumentet innehåller kassaflödesanalys, förändring av eget kapital och
-              utökade noter (uppskjuten skatt, redovisningsprinciper, materiella
-              anläggningstillgångar): krav som följer K3 men inte K2.
-            </p>
-          </CardContent>
-        </Card>
+        <div className="px-1 text-sm">
+          <p className="font-medium">Årsredovisning enligt K3 (BFNAR 2012:1)</p>
+          <p className="mt-1 text-xs leading-5 text-muted-foreground">
+            Dokumentet innehåller kassaflödesanalys, förändring av eget kapital och
+            utökade noter (uppskjuten skatt, redovisningsprinciper, materiella
+            anläggningstillgångar): krav som följer K3 men inte K2.
+          </p>
+        </div>
       )}
 
       <AnnualReportStudio
@@ -553,15 +548,16 @@ export default function ArsredovisningPage() {
         onVersionsChanged={handleVersionsChanged}
       />
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Förvaltningsberättelse: narrativ</CardTitle>
-          <p className="text-sm text-muted-foreground">
+      <section>
+        <div className="mb-1 flex items-center gap-2 px-1">
+          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">Förvaltningsberättelse: narrativ</h3>
+          <div className="h-px flex-1 bg-border/60" />
+        </div>
+          <p className="px-1 text-xs leading-5 text-muted-foreground">
             Texten nedan visas i PDF:en. Klicka på <strong>Spara texten</strong> nedan
             för att behålla ändringarna mellan sessioner.
           </p>
-        </CardHeader>
-        <CardContent className="space-y-4">
+        <div className="space-y-4 px-1 pt-4">
           <div className="space-y-2">
             <Label htmlFor="ar-description">Verksamhetsbeskrivning</Label>
             <Textarea
@@ -597,7 +593,7 @@ export default function ArsredovisningPage() {
               value={proposedDividend}
               onChange={(event) => setProposedDividend(event.target.value)}
               placeholder="0"
-              className="min-h-11 max-w-[220px] tabular-nums"
+              className="max-w-[220px] tabular-nums"
             />
             <p className="text-xs text-muted-foreground">
               Beloppet används i resultatdispositionen i samma version av PDF och iXBRL.
@@ -619,23 +615,22 @@ export default function ArsredovisningPage() {
           </div>
           <div className="space-y-2">
             <Label htmlFor="ar-agm-outcome">Årsstämmans beslut om resultatdisposition</Label>
-            <select
-              id="ar-agm-outcome"
-              className="min-h-11 w-full max-w-xl rounded-md border border-border bg-background px-3 text-sm"
+            <Select
               value={agmDispositionOutcome}
-              onChange={(event) =>
+              onValueChange={(next) =>
                 setAgmDispositionOutcome(
-                  event.target.value as
-                    | ''
-                    | 'proposal_approved'
-                    | 'alternative_decision',
+                  next as 'proposal_approved' | 'alternative_decision',
                 )
               }
             >
-              <option value="">Välj efter genomförd årsstämma</option>
-              <option value="proposal_approved">Styrelsens förslag godkändes</option>
-              <option value="alternative_decision">Årsstämman fattade ett annat beslut</option>
-            </select>
+              <SelectTrigger id="ar-agm-outcome" className="max-w-xl">
+                <SelectValue placeholder="Välj efter genomförd årsstämma" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="proposal_approved">Styrelsens förslag godkändes</SelectItem>
+                <SelectItem value="alternative_decision">Årsstämman fattade ett annat beslut</SelectItem>
+              </SelectContent>
+            </Select>
           </div>
           {agmDispositionOutcome === 'alternative_decision' && (
             <div className="space-y-2">
@@ -651,7 +646,7 @@ export default function ArsredovisningPage() {
 
           <div className="pt-4 border-t border-border space-y-4">
             <div>
-              <h3 className="text-sm font-medium uppercase tracking-wider text-muted-foreground">
+              <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">
                 Lagstadgade upplysningar
               </h3>
               <p className="text-xs text-muted-foreground mt-1">
@@ -675,7 +670,7 @@ export default function ArsredovisningPage() {
               <p className="text-xs text-muted-foreground">
                 ÅRL 5:13 §. Lämna tomt om inga skulder förfaller senare än fem år.
               </p>
-              <label className="flex min-h-11 cursor-pointer items-center gap-3 text-sm">
+              <label className="flex cursor-pointer items-center gap-3 text-sm">
                 <Checkbox
                   id="ar-ltd-confirmed"
                   checked={longTermDebtConfirmed}
@@ -694,7 +689,7 @@ export default function ArsredovisningPage() {
                 placeholder="t.ex. Företagsinteckning 500 000 kr som säkerhet för bankkredit."
               />
               <p className="text-xs text-muted-foreground">ÅRL 5:14 §.</p>
-              <label className="flex min-h-11 cursor-pointer items-center gap-3 text-sm">
+              <label className="flex cursor-pointer items-center gap-3 text-sm">
                 <Checkbox
                   id="ar-securities-confirmed"
                   checked={securitiesPledgedConfirmed}
@@ -713,7 +708,7 @@ export default function ArsredovisningPage() {
                 placeholder="t.ex. Borgensåtagande för dotterbolags krediter 200 000 kr."
               />
               <p className="text-xs text-muted-foreground">ÅRL 5:15 §.</p>
-              <label className="flex min-h-11 cursor-pointer items-center gap-3 text-sm">
+              <label className="flex cursor-pointer items-center gap-3 text-sm">
                 <Checkbox
                   id="ar-contingent-confirmed"
                   checked={contingentLiabilitiesConfirmed}
@@ -757,7 +752,7 @@ export default function ArsredovisningPage() {
                 />
               </div>
             </div>
-            <label className="flex min-h-11 cursor-pointer items-center gap-3 text-sm">
+            <label className="flex cursor-pointer items-center gap-3 text-sm">
               <Checkbox
                 id="ar-parent-confirmed"
                 checked={parentCompanyConfirmed}
@@ -794,14 +789,15 @@ export default function ArsredovisningPage() {
               )}
             </Button>
           </div>
-        </CardContent>
-      </Card>
+        </div>
+      </section>
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Flerårsöversikt</CardTitle>
-        </CardHeader>
-        <CardContent>
+      <section>
+        <div className="mb-1 flex items-center gap-2 px-1">
+          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">Flerårsöversikt</h3>
+          <div className="h-px flex-1 bg-border/60" />
+        </div>
+        <div className="px-1 pt-2">
           <Table>
             <TableHeader>
               <TableRow>
@@ -830,64 +826,67 @@ export default function ArsredovisningPage() {
               ))}
             </TableBody>
           </Table>
-        </CardContent>
-      </Card>
+        </div>
+      </section>
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Underskrifter</CardTitle>
-          <p className="text-sm text-muted-foreground">
+      <section>
+        <div className="mb-1 flex items-center gap-2 px-1">
+          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">Underskrifter</h3>
+          <div className="h-px flex-1 bg-border/60" />
+        </div>
+          <p className="px-1 text-xs leading-5 text-muted-foreground">
             Lägg till varje styrelseledamot och eventuell VD. Lås först en version i
             arbetsflödet ovan. När originalet eller en extern e-signatur är klar registrerar
             du datum och bevisreferens mot exakt den version som skrevs under.
           </p>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="grid gap-4 rounded-md border border-border bg-muted/20 p-4 md:grid-cols-2">
+        <div className="space-y-4 px-1 pt-4">
+          <div className="grid gap-4 md:grid-cols-2">
             <div className="space-y-2">
               <Label htmlFor="signature-version">Låst version</Label>
-              <select
-                id="signature-version"
-                className="min-h-11 w-full rounded-md border border-border bg-background px-3 text-sm"
+              <Select
                 value={selectedSignatureVersionId}
-                onChange={(event) => setSelectedSignatureVersionId(event.target.value)}
+                onValueChange={setSelectedSignatureVersionId}
               >
-                <option value="">Välj version</option>
-                {versions
-                  .filter((version) => version.status === 'ready_for_signature')
-                  .map((version) => (
-                    <option key={version.id} value={version.id}>
-                      Version {version.version_number}: {version.content_hash.slice(0, 12)}
-                    </option>
-                  ))}
-              </select>
+                <SelectTrigger id="signature-version">
+                  <SelectValue placeholder="Välj version" />
+                </SelectTrigger>
+                <SelectContent>
+                  {versions
+                    .filter((version) => version.status === 'ready_for_signature')
+                    .map((version) => (
+                      <SelectItem key={version.id} value={version.id}>
+                        Version {version.version_number}: {version.content_hash.slice(0, 12)}
+                      </SelectItem>
+                    ))}
+                </SelectContent>
+              </Select>
             </div>
             <div className="space-y-2">
               <Label htmlFor="signature-method">Underskriftsmetod</Label>
-              <select
-                id="signature-method"
-                className="min-h-11 w-full rounded-md border border-border bg-background px-3 text-sm"
+              <Select
                 value={signingMethod}
-                onChange={(event) =>
+                onValueChange={(next) =>
                   setSigningMethod(
-                    event.target.value as
-                      | 'paper_original'
-                      | 'advanced_e_signature'
-                      | 'bankid',
+                    next as 'paper_original' | 'advanced_e_signature' | 'bankid',
                   )
                 }
               >
-                <option value="paper_original">Undertecknat original på papper</option>
-                <option value="advanced_e_signature">Avancerad e-signatur</option>
-                <option value="bankid">BankID via extern signeringstjänst</option>
-              </select>
+                <SelectTrigger id="signature-method">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="paper_original">Undertecknat original på papper</SelectItem>
+                  <SelectItem value="advanced_e_signature">Avancerad e-signatur</SelectItem>
+                  <SelectItem value="bankid">BankID via extern signeringstjänst</SelectItem>
+                </SelectContent>
+              </Select>
             </div>
             <div className="space-y-2">
               <Label htmlFor="signature-date">Underskriftsdatum</Label>
               <Input
                 id="signature-date"
                 type="date"
-                className="min-h-11"
+               
                 value={signatureDate}
                 onChange={(event) => setSignatureDate(event.target.value)}
               />
@@ -896,7 +895,7 @@ export default function ArsredovisningPage() {
               <Label htmlFor="signature-evidence">Bevisreferens</Label>
               <Input
                 id="signature-evidence"
-                className="min-h-11"
+               
                 value={signatureEvidence}
                 onChange={(event) => setSignatureEvidence(event.target.value)}
                 placeholder="archive:AR-2026-001"
@@ -935,7 +934,7 @@ export default function ArsredovisningPage() {
                       <Button
                         size="icon"
                         variant="ghost"
-                        className="min-h-11 min-w-11"
+                        className="min-w-11"
                         aria-label={tStudio('remove_signer')}
                         onClick={() => void handleRemoveSigner(sig.id)}
                       >
@@ -945,7 +944,7 @@ export default function ArsredovisningPage() {
                     <Button
                       size="sm"
                       variant="outline"
-                      className="min-h-11"
+                     
                       onClick={() => void handleMarkSigned(sig.id)}
                       disabled={
                         !selectedSignatureVersionId ||
@@ -965,17 +964,17 @@ export default function ArsredovisningPage() {
               <Label htmlFor="signer-role" className="text-xs">
                 Roll
               </Label>
-              <select
-                id="signer-role"
-                className="min-h-11 rounded-md border border-border bg-background px-3 text-sm"
-                value={signerRole}
-                onChange={(e) => setSignerRole(e.target.value)}
-              >
-                <option>Styrelseledamot</option>
-                <option>Styrelseordförande</option>
-                <option>VD</option>
-                <option>Verkställande direktör</option>
-              </select>
+              <Select value={signerRole} onValueChange={setSignerRole}>
+                <SelectTrigger id="signer-role" className="sm:w-56">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Styrelseledamot">Styrelseledamot</SelectItem>
+                  <SelectItem value="Styrelseordförande">Styrelseordförande</SelectItem>
+                  <SelectItem value="VD">VD</SelectItem>
+                  <SelectItem value="Verkställande direktör">Verkställande direktör</SelectItem>
+                </SelectContent>
+              </Select>
             </div>
             <div className="space-y-1 flex-1 min-w-[200px]">
               <Label htmlFor="signer-name" className="text-xs">
@@ -986,21 +985,22 @@ export default function ArsredovisningPage() {
                 value={signerName}
                 onChange={(e) => setSignerName(e.target.value)}
                 placeholder="t.ex. Anna Andersson"
-                className="min-h-11"
+               
               />
             </div>
-            <Button className="min-h-11 w-full sm:w-auto" onClick={handleAddSigner} disabled={!signerName.trim()}>
+            <Button className="w-full sm:w-auto" onClick={handleAddSigner} disabled={!signerName.trim()}>
               <Plus className="mr-1 h-4 w-4" /> Lägg till
             </Button>
           </div>
-        </CardContent>
-      </Card>
+        </div>
+      </section>
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">PDF för pappersinlämning</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4 text-sm">
+      <section>
+        <div className="mb-1 flex items-center gap-2 px-1">
+          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">PDF för pappersinlämning</h3>
+          <div className="h-px flex-1 bg-border/60" />
+        </div>
+        <div className="space-y-4 px-1 pt-2 text-sm">
           <p className="text-muted-foreground">
             Ladda ner PDF-utkastet och granska det. För pappersinlämning ska
             årsredovisningens original skrivas under av samtliga styrelseledamöter och
@@ -1008,7 +1008,7 @@ export default function ArsredovisningPage() {
             till Bolagsverket. PDF-filen kan inte laddas upp som digital årsredovisning.
           </p>
           <div className="flex flex-wrap gap-3">
-            <Button className="min-h-11" asChild>
+            <Button asChild>
               <Link href={pdfUrl} target="_blank" rel="noopener noreferrer">
                 <FileDown className="mr-2 h-4 w-4" /> Ladda ner PDF (utkast)
               </Link>
@@ -1024,7 +1024,7 @@ export default function ArsredovisningPage() {
                   : undefined
               }
             >
-              <Button className="min-h-11" variant="outline" asChild>
+              <Button variant="outline" asChild>
                 <Link
                   href="https://bolagsverket.se/foretag/aktiebolag/arsredovisningforaktiebolag.759.html"
                   target="_blank"
@@ -1045,24 +1045,24 @@ export default function ArsredovisningPage() {
             }
           >
           {data.warnings.length > 0 && (
-            <div className="rounded-md border border-border bg-muted/30 p-3 text-xs space-y-1">
+            <div className="space-y-1 border-t border-border/60 pt-3 text-xs">
               <p className="font-medium">Innan inlämning till Bolagsverket:</p>
-              <ul className="list-disc pl-5 space-y-1">
+              <ul className="list-disc space-y-1 pl-5 text-muted-foreground">
                 {data.warnings.map((w, i) => (
                   <li key={i}>{w}</li>
                 ))}
               </ul>
             </div>
           )}
-          <div className="rounded-md border border-border bg-muted/30 p-3 text-xs">
-            <strong>Digital inlämning är frivillig.</strong> Den görs som iXBRL genom en
+          <p className="text-xs text-muted-foreground">
+            <strong className="text-foreground">Digital inlämning är frivillig.</strong> Den görs som iXBRL genom en
             ansluten programvara. Accounteds direktinlämning förblir stängd tills avtal,
             certifikat och Bolagsverkets acceptanstest är klara. PDF-flödet ovan är den
             separata vägen för pappersinlämning.
+          </p>
           </div>
-          </div>
-        </CardContent>
-      </Card>
+        </div>
+      </section>
 
       {data.accounting_framework === 'k2' && periodId && (
         <DigitalInlamning periodId={periodId} />
diff --git a/app/(dashboard)/bookkeeping/year-end/page.tsx b/app/(dashboard)/bookkeeping/year-end/page.tsx
index 5df96122..bb94eb62 100644
--- a/app/(dashboard)/bookkeeping/year-end/page.tsx
+++ b/app/(dashboard)/bookkeeping/year-end/page.tsx
@@ -1,21 +1,12 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import Link from 'next/link'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { Card, CardContent } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Progress } from '@/components/ui/progress'
 import { EmptyState } from '@/components/ui/empty-state'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
+import { ContextPicker } from '@/components/common/ContextPicker'
 import { Skeleton } from '@/components/ui/skeleton'
-import { ArrowLeft, CalendarPlus, Lock } from 'lucide-react'
+import { CalendarPlus, Check, Lock } from 'lucide-react'
 import AgentSparkleButton from '@/components/agent/AgentSparkleButton'
 import { cn } from '@/lib/utils'
 import { useToast } from '@/components/ui/use-toast'
@@ -215,7 +206,6 @@ export default function YearEndPage() {
   }, [selectedPeriodId, report?.period.name, toast])
 
   const currentStepIndex = STEP_ORDER.indexOf(step)
-  const progressValue = ((currentStepIndex + 1) / STEP_ORDER.length) * 100
 
   const showWizard = useMemo(
     () => selectedPeriodId !== null && (periods?.length ?? 0) > 0,
@@ -226,19 +216,34 @@ export default function YearEndPage() {
     <div className="space-y-8">
       <div className="flex items-center justify-between gap-3 flex-wrap">
         <h1 className="font-display text-2xl leading-8 tracking-tight">Årsbokslut</h1>
-        <div className="flex gap-2">
+        <div className="flex items-center gap-2">
           <AgentSparkleButton
             intentId="bokslut.step"
             intentArgs={{ step_id: null }}
             contextRef="bokslut:overview"
             size="default"
           />
-          <Button variant="outline" asChild>
-            <Link href="/bookkeeping">
-              <ArrowLeft className="mr-2 h-4 w-4" />
-              Bokföring
-            </Link>
-          </Button>
+          {showWizard && periods && periods.length > 0 && step !== 'result' && (
+            <ContextPicker
+              items={periods.map((p) => ({
+                id: p.id,
+                label: p.name,
+                annotation: `${p.period_start} till ${p.period_end}`,
+              }))}
+              value={selectedPeriodId}
+              onChange={(value) => {
+                setSelectedPeriodId(value)
+                setStep('preflight')
+                setPreview(null)
+                setResult(null)
+                setExecuteError(null)
+              }}
+              triggerLabel={
+                periods.find((p) => p.id === selectedPeriodId)?.name ?? 'Välj period'
+              }
+              ariaLabel="Period"
+            />
+          )}
         </div>
       </div>
 
@@ -275,66 +280,68 @@ export default function YearEndPage() {
         )
       )}
 
-      {showWizard && periods && periods.length > 0 && step !== 'result' && (
-        <Card>
-          <CardContent className="p-4 flex items-center gap-4">
-            <label className="text-sm font-medium shrink-0">Period</label>
-            <Select
-              value={selectedPeriodId ?? undefined}
-              onValueChange={(value) => {
-                setSelectedPeriodId(value)
-                setStep('preflight')
-                setPreview(null)
-                setResult(null)
-                setExecuteError(null)
-              }}
-            >
-              <SelectTrigger className="w-full max-w-sm">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {periods.map((p) => (
-                  <SelectItem key={p.id} value={p.id}>
-                    {p.name} ({p.period_start} till {p.period_end})
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </CardContent>
-        </Card>
-      )}
-
+      {/* Stegen (concept scene 34): dots walk check -> filled -> number.
+          Steps behind the current one are clickable for going back; forward
+          navigation stays with each step's own continue action. */}
       {showWizard && step !== 'result' && (
-        <Card>
-          <CardContent className="p-4 space-y-2">
-            <div className="flex justify-between text-sm">
-              <span className="sm:hidden text-primary font-medium">
-                Steg {currentStepIndex + 1}/{STEP_ORDER.length}: {STEP_LABELS[step]}
-              </span>
-              {STEP_ORDER.map((s, i) => (
+        <div
+          className="mx-auto flex w-full max-w-4xl items-center gap-3 overflow-x-auto px-1"
+          role="tablist"
+          aria-label="Bokslutets steg"
+        >
+          {STEP_ORDER.map((s, i) => (
+            <React.Fragment key={s}>
+              {i > 0 && <span className="h-px min-w-4 flex-1 bg-border" aria-hidden="true" />}
+              <button
+                type="button"
+                role="tab"
+                aria-selected={s === step}
+                disabled={i >= currentStepIndex}
+                onClick={() => {
+                  if (i < currentStepIndex) setStep(s)
+                }}
+                className={cn(
+                  'group flex shrink-0 items-center gap-2 text-left',
+                  i >= currentStepIndex && 'cursor-default',
+                )}
+              >
                 <span
-                  key={s}
                   className={cn(
-                    'hidden sm:inline',
-                    i <= currentStepIndex ? 'text-primary font-medium' : 'text-muted-foreground',
+                    'flex h-7 w-7 shrink-0 items-center justify-center rounded-full border text-xs tabular-nums transition-colors duration-150',
+                    i < currentStepIndex
+                      ? 'border-success/40 text-success'
+                      : s === step
+                        ? 'border-foreground bg-foreground text-background'
+                        : 'border-border text-muted-foreground',
+                  )}
+                >
+                  {i < currentStepIndex ? <Check className="h-3.5 w-3.5" aria-hidden="true" /> : i + 1}
+                </span>
+                <span
+                  className={cn(
+                    'text-[12.5px] transition-colors duration-150',
+                    s === step
+                      ? 'font-medium'
+                      : i < currentStepIndex
+                        ? 'text-muted-foreground group-hover:text-foreground'
+                        : 'text-muted-foreground',
                   )}
                 >
                   {STEP_LABELS[s]}
                 </span>
-              ))}
-            </div>
-            <Progress value={progressValue} className="h-2" />
-          </CardContent>
-        </Card>
+              </button>
+            </React.Fragment>
+          ))}
+        </div>
       )}
 
       {showWizard && step === 'preflight' && (
-        <PreflightStep
+        <div className="mx-auto w-full max-w-3xl"><PreflightStep
           report={report}
           isLoading={reportLoading}
           error={reportError}
           onContinue={() => setStep('accruals')}
-        />
+        /></div>
       )}
 
       {showWizard && step === 'accruals' && selectedPeriodId && (
@@ -354,27 +361,29 @@ export default function YearEndPage() {
       )}
 
       {showWizard && step === 'preview' && (
-        <PreviewStep
+        <div className="mx-auto w-full max-w-3xl"><PreviewStep
           preview={preview}
           isLoading={previewLoading}
           error={previewError}
           onBack={() => setStep('dispositions')}
           onContinue={() => setStep('execute')}
-        />
+        /></div>
       )}
 
       {showWizard && step === 'execute' && report && (
-        <ExecuteStep
+        <div className="mx-auto w-full max-w-3xl"><ExecuteStep
           periodName={report.period.name}
           isRunning={executing}
           error={executeError}
           bolagsskattMissing={preview?.bolagsskattMissing ?? false}
           onBack={() => setStep('preview')}
           onExecute={executeYearEnd}
-        />
+        /></div>
       )}
 
-      {step === 'result' && result && <ResultStep result={result} />}
+      {step === 'result' && result && (
+        <div className="mx-auto w-full max-w-3xl"><ResultStep result={result} /></div>
+      )}
     </div>
   )
 }
diff --git a/app/(dashboard)/reports/kassaflodesanalys/KassaflodesanalysClient.tsx b/app/(dashboard)/reports/kassaflodesanalys/KassaflodesanalysClient.tsx
index f246992e..f0d64514 100644
--- a/app/(dashboard)/reports/kassaflodesanalys/KassaflodesanalysClient.tsx
+++ b/app/(dashboard)/reports/kassaflodesanalys/KassaflodesanalysClient.tsx
@@ -3,7 +3,7 @@
 import Link from 'next/link'
 import { useEffect, useState, useCallback } from 'react'
 import { PageHeader } from '@/components/ui/page-header'
-import { FiscalYearSelector } from '@/components/common/FiscalYearSelector'
+import { FyPicker } from '@/components/common/FyPicker'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Skeleton } from '@/components/ui/skeleton'
@@ -105,7 +105,7 @@ export function KassaflodesanalysClient() {
       <PageHeader title="Kassaflödesanalys" />
 
       <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
-        <FiscalYearSelector
+        <FyPicker
           value={selectedPeriod}
           onChange={(id) => setSelectedPeriod(id)}
           includeAllOption={false}
diff --git a/components/bokslut/AnnualReportStudio.tsx b/components/bokslut/AnnualReportStudio.tsx
index 163ce190..f5201c23 100644
--- a/components/bokslut/AnnualReportStudio.tsx
+++ b/components/bokslut/AnnualReportStudio.tsx
@@ -5,9 +5,15 @@ import { useTranslations } from 'next-intl'
 import { AlertCircle, CheckCircle2, FileClock, Loader2, LockKeyhole, Save } from 'lucide-react'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import { useToast } from '@/components/ui/use-toast'
 import { getErrorMessage as getUserErrorMessage } from '@/lib/errors/get-error-message'
 import type {
@@ -60,18 +66,18 @@ function BooleanQuestion({
   return (
     <div className="space-y-2">
       <Label htmlFor={id}>{label}</Label>
-      <select
-        id={id}
-        className="min-h-11 w-full rounded-md border border-border bg-background px-3 text-sm"
+      <Select
         value={value === null ? '' : value ? 'yes' : 'no'}
-        onChange={(event) =>
-          onChange(event.target.value === '' ? null : event.target.value === 'yes')
-        }
+        onValueChange={(next) => onChange(next === 'yes')}
       >
-        <option value="">{t('choose')}</option>
-        <option value="no">{t('no')}</option>
-        <option value="yes">{t('yes')}</option>
-      </select>
+        <SelectTrigger id={id}>
+          <SelectValue placeholder={t('choose')} />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="no">{t('no')}</SelectItem>
+          <SelectItem value="yes">{t('yes')}</SelectItem>
+        </SelectContent>
+      </Select>
     </div>
   )
 }
@@ -289,60 +295,57 @@ export function AnnualReportStudio({
 
   if (loading || !profile || !compliance) {
     return (
-      <Card>
-        <CardContent className="flex min-h-24 items-center justify-center p-6 text-sm text-muted-foreground">
-          <Loader2 className="mr-2 h-4 w-4 animate-spin" /> {t('loading')}
-        </CardContent>
-      </Card>
+      <div className="flex min-h-24 items-center justify-center px-1 py-6 text-sm text-muted-foreground">
+        <Loader2 className="mr-2 h-4 w-4 animate-spin" /> {t('loading')}
+      </div>
     )
   }
 
   return (
-    <div className="space-y-6">
-      <Card>
-        <CardHeader className="space-y-3">
-          <div className="flex flex-wrap items-start justify-between gap-3">
-            <div>
-              <CardTitle className="text-lg">{t('title')}</CardTitle>
-              <p className="mt-1 text-sm text-muted-foreground">{t('description')}</p>
+    <div className="space-y-8">
+      <div className="space-y-3 px-1">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div>
+            <h3 className="font-sans text-sm font-medium">{t('title')}</h3>
+            <p className="mt-1 text-sm text-muted-foreground">{t('description')}</p>
+          </div>
+          {blockingIssues.length === 0 ? (
+            <span className="text-xs text-muted-foreground">{t('no_blockers')}</span>
+          ) : (
+            <Badge variant="warning">{t('blocker_count', { count: blockingIssues.length })}</Badge>
+          )}
+        </div>
+        <div className="grid gap-2 sm:grid-cols-4">
+          {[
+            [
+              t('step_scope'),
+              compliance.eligibility.issues.every((issue) => issue.severity !== 'error'),
+            ],
+            [t('step_content'), Boolean(profile.narrative_confirmed_at)],
+            [t('step_signatures'), versions.some((version) => version.status === 'signed')],
+            [t('step_filing'), versions.some((version) => ['filed', 'registered'].includes(version.status))],
+          ].map(([label, complete], index) => (
+            <div key={String(label)} className="flex items-center gap-2 border-b border-border/60 px-1 py-2 text-sm">
+              {complete ? (
+                <CheckCircle2 className="h-4 w-4 shrink-0 text-success" />
+              ) : (
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-border text-xs">
+                  {index + 1}
+                </span>
+              )}
+              <span>{label}</span>
             </div>
-            <Badge variant={blockingIssues.length === 0 ? 'success' : 'warning'}>
-              {blockingIssues.length === 0
-                ? t('no_blockers')
-                : t('blocker_count', { count: blockingIssues.length })}
-            </Badge>
-          </div>
-          <div className="grid gap-2 sm:grid-cols-4">
-            {[
-              [
-                t('step_scope'),
-                compliance.eligibility.issues.every((issue) => issue.severity !== 'error'),
-              ],
-              [t('step_content'), Boolean(profile.narrative_confirmed_at)],
-              [t('step_signatures'), versions.some((version) => version.status === 'signed')],
-              [t('step_filing'), versions.some((version) => ['filed', 'registered'].includes(version.status))],
-            ].map(([label, complete], index) => (
-              <div key={String(label)} className="flex min-h-11 items-center gap-2 border-b border-border px-1 py-2 text-sm">
-                {complete ? (
-                  <CheckCircle2 className="h-4 w-4 shrink-0 text-success" />
-                ) : (
-                  <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-border text-xs">
-                    {index + 1}
-                  </span>
-                )}
-                <span>{label}</span>
-              </div>
-            ))}
-          </div>
-        </CardHeader>
-      </Card>
+          ))}
+        </div>
+      </div>
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">{t('scope_title')}</CardTitle>
-          <p className="text-sm text-muted-foreground">{t('scope_description')}</p>
-        </CardHeader>
-        <CardContent className="space-y-6">
+      <section>
+        <div className="mb-1 flex items-center gap-2 px-1">
+          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('scope_title')}</h3>
+          <div className="h-px flex-1 bg-border/60" />
+        </div>
+        <p className="px-1 text-sm text-muted-foreground">{t('scope_description')}</p>
+        <div className="space-y-6 px-1 pt-4">
           <div className="grid gap-4 md:grid-cols-2">
             <BooleanQuestion
               id="ar-public"
@@ -376,20 +379,23 @@ export function AnnualReportStudio({
             />
             <div className="space-y-2">
               <Label htmlFor="ar-reporting-currency">{t('reporting_currency')}</Label>
-              <select
-                id="ar-reporting-currency"
-                className="min-h-11 w-full rounded-md border border-border bg-background px-3 text-sm"
+              <Select
                 value={profile.reporting_currency}
-                onChange={(event) =>
+                onValueChange={(next) =>
                   updateProfile(
                     'reporting_currency',
-                    event.target.value as AnnualReportProfile['reporting_currency'],
+                    next as AnnualReportProfile['reporting_currency'],
                   )
                 }
               >
-                <option value="SEK">SEK</option>
-                <option value="EUR">EUR</option>
-              </select>
+                <SelectTrigger id="ar-reporting-currency">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="SEK">SEK</SelectItem>
+                  <SelectItem value="EUR">EUR</SelectItem>
+                </SelectContent>
+              </Select>
             </div>
             {profile.auditor_report_required && (
               <BooleanQuestion
@@ -405,21 +411,23 @@ export function AnnualReportStudio({
             <div className="grid gap-4 border-t border-border pt-4 md:grid-cols-2">
               <div className="space-y-2">
                 <Label htmlFor="ar-group-size">{t('group_size')}</Label>
-                <select
-                  id="ar-group-size"
-                  className="min-h-11 w-full rounded-md border border-border bg-background px-3 text-sm"
+                <Select
                   value={profile.parent_group_size ?? ''}
-                  onChange={(event) =>
+                  onValueChange={(next) =>
                     updateProfile(
                       'parent_group_size',
-                      (event.target.value || null) as AnnualReportProfile['parent_group_size'],
+                      next as AnnualReportProfile['parent_group_size'],
                     )
                   }
                 >
-                  <option value="">{t('choose')}</option>
-                  <option value="small">{t('group_small')}</option>
-                  <option value="large">{t('group_large')}</option>
-                </select>
+                  <SelectTrigger id="ar-group-size">
+                    <SelectValue placeholder={t('choose')} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="small">{t('group_small')}</SelectItem>
+                    <SelectItem value="large">{t('group_large')}</SelectItem>
+                  </SelectContent>
+                </Select>
               </div>
               <BooleanQuestion
                 id="ar-consolidated"
@@ -446,7 +454,7 @@ export function AnnualReportStudio({
                     type="number"
                     min={0}
                     max={100}
-                    className="min-h-11"
+                   
                     value={profile.building_revenue_share_pct ?? ''}
                     onChange={(event) =>
                       updateProfile(
@@ -478,19 +486,20 @@ export function AnnualReportStudio({
           )}
 
           <div className="flex justify-end">
-            <Button className="min-h-11" onClick={() => void saveProfile()} disabled={saving}>
+            <Button onClick={() => void saveProfile()} disabled={saving}>
               {saving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Save className="mr-2 h-4 w-4" />}
               {t('save_scope')}
             </Button>
           </div>
-        </CardContent>
-      </Card>
+        </div>
+      </section>
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">{t('checks_title')}</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
+      <section>
+        <div className="mb-1 flex items-center gap-2 px-1">
+          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('checks_title')}</h3>
+          <div className="h-px flex-1 bg-border/60" />
+        </div>
+        <div className="space-y-4 px-1 pt-2">
           {blockingIssues.length === 0 ? (
             <div className="flex items-center gap-2 text-sm text-success">
               <CheckCircle2 className="h-4 w-4" /> {t('no_blockers')}
@@ -509,8 +518,8 @@ export function AnnualReportStudio({
             </ul>
           )}
           {digitalOnlyIssues.length > 0 && (
-            <div className="space-y-2 rounded-md border border-warning/40 bg-warning/5 p-3">
-              <p className="text-sm font-medium">{t('digital_checks_title')}</p>
+            <div className="space-y-2">
+              <p className="text-[12.5px] font-medium leading-5 text-attn">{t('digital_checks_title')}</p>
               <ul className="space-y-2">
                 {digitalOnlyIssues.map((issue) => (
                   <li key={issue.code} className="text-sm text-muted-foreground">
@@ -520,10 +529,10 @@ export function AnnualReportStudio({
               </ul>
             </div>
           )}
-          <div className="flex flex-wrap justify-end gap-3 border-t border-border pt-4">
+          <div className="flex flex-wrap justify-end gap-3 border-t border-border/60 pt-4">
             <Button
               variant="outline"
-              className="min-h-11"
+             
               onClick={() => void confirmSignerRoster()}
               disabled={saving || Boolean(profile.signer_roster_confirmed_at)}
             >
@@ -534,30 +543,31 @@ export function AnnualReportStudio({
             </Button>
             <Button
               variant="outline"
-              className="min-h-11"
+             
               onClick={() => void confirmNarrative()}
               disabled={saving || hasUnsavedNarrative || Boolean(profile.narrative_confirmed_at)}
             >
               <CheckCircle2 className="mr-2 h-4 w-4" />
               {profile.narrative_confirmed_at ? t('content_confirmed') : t('confirm_content')}
             </Button>
-            <Button variant="outline" className="min-h-11" onClick={() => void createVersion('snapshot')} disabled={creatingVersion !== null}>
+            <Button variant="outline" onClick={() => void createVersion('snapshot')} disabled={creatingVersion !== null}>
               {creatingVersion === 'snapshot' ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <FileClock className="mr-2 h-4 w-4" />}
               {t('create_snapshot')}
             </Button>
-            <Button className="min-h-11" onClick={() => void createVersion('finalize')} disabled={creatingVersion !== null || blockingIssues.length > 0 || hasUnsavedNarrative}>
+            <Button onClick={() => void createVersion('finalize')} disabled={creatingVersion !== null || blockingIssues.length > 0 || hasUnsavedNarrative}>
               {creatingVersion === 'finalize' ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <LockKeyhole className="mr-2 h-4 w-4" />}
               {t('lock_version')}
             </Button>
           </div>
-        </CardContent>
-      </Card>
+        </div>
+      </section>
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">{t('versions_title')}</CardTitle>
-        </CardHeader>
-        <CardContent>
+      <section>
+        <div className="mb-1 flex items-center gap-2 px-1">
+          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('versions_title')}</h3>
+          <div className="h-px flex-1 bg-border/60" />
+        </div>
+        <div className="px-1 pt-2">
           {versions.length === 0 ? (
             <p className="text-sm text-muted-foreground">{t('versions_empty')}</p>
           ) : (
@@ -572,7 +582,7 @@ export function AnnualReportStudio({
                     <Badge variant={version.status === 'registered' ? 'success' : version.status === 'draft' ? 'outline' : 'secondary'}>
                       {t(`status_${version.status}`)}
                     </Badge>
-                    <Button className="min-h-11" variant="outline" size="sm" asChild>
+                    <Button variant="outline" size="sm" asChild>
                       <a href={`/api/bookkeeping/fiscal-periods/${periodId}/arsredovisning/pdf?version=${version.id}`} target="_blank" rel="noopener noreferrer">
                         {t('open_pdf')}
                       </a>
@@ -582,8 +592,8 @@ export function AnnualReportStudio({
               ))}
             </div>
           )}
-        </CardContent>
-      </Card>
+        </div>
+      </section>
     </div>
   )
 }
diff --git a/components/bokslut/DigitalInlamning.tsx b/components/bokslut/DigitalInlamning.tsx
index 0014fe02..a403519a 100644
--- a/components/bokslut/DigitalInlamning.tsx
+++ b/components/bokslut/DigitalInlamning.tsx
@@ -18,11 +18,17 @@
 
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslations } from 'next-intl'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import { useToast } from '@/components/ui/use-toast'
 import { formatDate } from '@/lib/utils'
 import {
@@ -421,25 +427,26 @@ export function DigitalInlamning({ periodId }: { periodId: string }) {
         }
       >
       {/* Steg: Granska & validera */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Digital inlämning: granska &amp; validera (iXBRL)</CardTitle>
-          <p className="text-sm text-muted-foreground">
-            Bolagsverket tar emot årsredovisningen som iXBRL (XHTML). Dokumentet nedan är
-            exakt det som lämnas in: granska det som den slutliga presentationen.
-          </p>
-        </CardHeader>
-        <CardContent className="space-y-4 text-sm">
+      <section>
+        <div className="mb-1 flex items-center gap-2 px-1">
+          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">Digital inlämning: granska &amp; validera (iXBRL)</h3>
+          <div className="h-px flex-1 bg-border/60" />
+        </div>
+        <p className="px-1 text-sm text-muted-foreground">
+          Bolagsverket tar emot årsredovisningen som iXBRL (XHTML). Dokumentet nedan är
+          exakt det som lämnas in: granska det som den slutliga presentationen.
+        </p>
+        <div className="space-y-4 px-1 pt-4 text-sm">
           <div className="flex flex-wrap gap-3">
-            <Button className="min-h-11" variant="outline" onClick={() => setShowPreview((value) => !value)}>
+            <Button variant="outline" onClick={() => setShowPreview((value) => !value)}>
               {showPreview ? 'Dölj förhandsgranskning' : 'Förhandsgranska iXBRL'}
             </Button>
-            <Button className="min-h-11" variant="outline" asChild>
+            <Button variant="outline" asChild>
               <a href={downloadUrl}>
                 <FileDown className="mr-2 h-4 w-4" /> Ladda ner tekniskt iXBRL-underlag
               </a>
             </Button>
-            <Button className="min-h-11" onClick={() => void handleValidate()} disabled={validating}>
+            <Button onClick={() => void handleValidate()} disabled={validating}>
               {validating ? (
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
               ) : (
@@ -486,20 +493,21 @@ export function DigitalInlamning({ periodId }: { periodId: string }) {
               )}
             </div>
           )}
-        </CardContent>
-      </Card>
+        </div>
+      </section>
 
       {/* Steg: Skicka in */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Skicka in till Bolagsverket</CardTitle>
-          <p className="text-sm text-muted-foreground">
-            Årsredovisningen laddas upp till företagets eget utrymme hos Bolagsverket.
-            Undertecknaren får ett e-postmeddelande och signerar fastställelseintyget med
-            e-legitimation hos Bolagsverket: först då är årsredovisningen inlämnad.
-          </p>
-        </CardHeader>
-        <CardContent className="space-y-4 text-sm">
+      <section>
+        <div className="mb-1 flex items-center gap-2 px-1">
+          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">Skicka in till Bolagsverket</h3>
+          <div className="h-px flex-1 bg-border/60" />
+        </div>
+        <p className="px-1 text-sm text-muted-foreground">
+          Årsredovisningen laddas upp till företagets eget utrymme hos Bolagsverket.
+          Undertecknaren får ett e-postmeddelande och signerar fastställelseintyget med
+          e-legitimation hos Bolagsverket: först då är årsredovisningen inlämnad.
+        </p>
+        <div className="space-y-4 px-1 pt-4 text-sm">
           {extensionActive === null && (
             <p className="text-muted-foreground">
               <Loader2 className="inline h-4 w-4 animate-spin mr-2" />
@@ -515,7 +523,7 @@ export function DigitalInlamning({ periodId }: { periodId: string }) {
                 pappersinlämning per post, eller aktivera integrationen efter avtal,
                 organisationscertifikat och godkänt acceptanstest.
               </p>
-              <Button className="min-h-11" variant="outline" asChild>
+              <Button variant="outline" asChild>
                 <a
                   href="https://bolagsverket.se/foretag/aktiebolag/arsredovisningforaktiebolag.759.html"
                   target="_blank"
@@ -544,12 +552,9 @@ export function DigitalInlamning({ periodId }: { periodId: string }) {
 
               <div className="space-y-1.5">
                 <Label htmlFor="di-version">Undertecknad årsredovisningsversion</Label>
-                <select
-                  id="di-version"
-                  className="min-h-11 w-full rounded-md border border-border bg-background px-3 text-sm"
+                <Select
                   value={selectedVersionId}
-                  onChange={(event) => {
-                    const versionId = event.target.value
+                  onValueChange={(versionId) => {
                     setSelectedVersionId(versionId)
                     const signer = versions.find((version) => version.id === versionId)
                       ?.certificate_signer
@@ -560,18 +565,22 @@ export function DigitalInlamning({ periodId }: { periodId: string }) {
                     }
                   }}
                 >
-                  <option value="">Välj undertecknad version</option>
-                  {versions
-                    .filter(
-                      (version) =>
-                        version.status === 'signed' && version.digital_filing_eligible,
-                    )
-                    .map((version) => (
-                      <option key={version.id} value={version.id}>
-                        Version {version.version_number}: skapad {formatDate(version.created_at)}
-                      </option>
-                    ))}
-                </select>
+                  <SelectTrigger id="di-version">
+                    <SelectValue placeholder="Välj undertecknad version" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {versions
+                      .filter(
+                        (version) =>
+                          version.status === 'signed' && version.digital_filing_eligible,
+                      )
+                      .map((version) => (
+                        <SelectItem key={version.id} value={version.id}>
+                          Version {version.version_number}: skapad {formatDate(version.created_at)}
+                        </SelectItem>
+                      ))}
+                  </SelectContent>
+                </Select>
                 {versions.every(
                   (version) =>
                     version.status !== 'signed' || !version.digital_filing_eligible,
@@ -593,7 +602,7 @@ export function DigitalInlamning({ periodId }: { periodId: string }) {
                   <Label htmlFor="di-avsandare-pnr">Ditt personnummer (avsändare)</Label>
                   <Input
                     id="di-avsandare-pnr"
-                    className="min-h-11"
+                   
                     inputMode="numeric"
                     placeholder="ÅÅÅÅMMDDNNNN eller ÅÅMMDD-NNNN"
                     value={avsandarePnr}
@@ -604,7 +613,7 @@ export function DigitalInlamning({ periodId }: { periodId: string }) {
                   <Label htmlFor="di-pnr">Undertecknarens personnummer</Label>
                   <Input
                     id="di-pnr"
-                    className="min-h-11"
+                   
                     inputMode="numeric"
                     placeholder="ÅÅÅÅMMDDNNNN eller ÅÅMMDD-NNNN"
                     value={pnr}
@@ -615,7 +624,7 @@ export function DigitalInlamning({ periodId }: { periodId: string }) {
                   <Label htmlFor="di-fornamn">Undertecknarens förnamn</Label>
                   <Input
                     id="di-fornamn"
-                    className="min-h-11"
+                   
                     value={fornamn}
                     onChange={(event) => setFornamn(event.target.value)}
                     readOnly={Boolean(selectedVersionId)}
@@ -625,7 +634,7 @@ export function DigitalInlamning({ periodId }: { periodId: string }) {
                   <Label htmlFor="di-efternamn">Undertecknarens efternamn</Label>
                   <Input
                     id="di-efternamn"
-                    className="min-h-11"
+                   
                     value={efternamn}
                     onChange={(event) => setEfternamn(event.target.value)}
                     readOnly={Boolean(selectedVersionId)}
@@ -633,23 +642,26 @@ export function DigitalInlamning({ periodId }: { periodId: string }) {
                 </div>
                 <div className="space-y-1.5">
                   <Label htmlFor="di-roll">Roll</Label>
-                  <select
-                    id="di-roll"
-                    className="min-h-11 w-full rounded-md border border-border bg-background px-3 text-sm"
+                  <Select
                     value={roll}
-                    onChange={(event) => setRoll(event.target.value)}
+                    onValueChange={setRoll}
                     disabled={Boolean(selectedVersionId)}
                   >
-                    <option>Styrelseledamot</option>
-                    <option>Styrelseordförande</option>
-                    <option>Verkställande direktör</option>
-                  </select>
+                    <SelectTrigger id="di-roll">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Styrelseledamot">Styrelseledamot</SelectItem>
+                      <SelectItem value="Styrelseordförande">Styrelseordförande</SelectItem>
+                      <SelectItem value="Verkställande direktör">Verkställande direktör</SelectItem>
+                    </SelectContent>
+                  </Select>
                 </div>
                 <div className="space-y-1.5">
                   <Label htmlFor="di-epost">Undertecknarens e-post</Label>
                   <Input
                     id="di-epost"
-                    className="min-h-11"
+                   
                     type="email"
                     placeholder="namn@foretag.se"
                     value={epost}
@@ -663,7 +675,7 @@ export function DigitalInlamning({ periodId }: { periodId: string }) {
               </p>
 
               {registryInformation && (
-                <div className="rounded-md border border-border bg-muted/20 p-4 text-xs">
+                <div className="border-t border-border/60 pt-3 text-xs">
                   <p className="font-medium">Grunduppgifter från Bolagsverket</p>
                   <p className="mt-1 text-muted-foreground">
                     {registryInformation.namn}
@@ -689,12 +701,12 @@ export function DigitalInlamning({ periodId }: { periodId: string }) {
               )}
 
               {avtal && (
-                <div className="rounded-lg border border-border p-4 space-y-3">
+                <div className="space-y-3 border-y border-border/60 py-4">
                   <p className="font-medium">Villkor för eget utrymme hos Bolagsverket</p>
                   <p className="text-muted-foreground whitespace-pre-wrap text-xs max-h-48 overflow-y-auto">
                     {avtal.text}
                   </p>
-                  <label className="flex min-h-11 cursor-pointer items-start gap-3 text-sm">
+                  <label className="flex cursor-pointer items-start gap-3 text-sm">
                     <input
                       type="checkbox"
                       className="mt-0.5"
@@ -737,7 +749,7 @@ export function DigitalInlamning({ periodId }: { periodId: string }) {
 
               <div className="flex flex-wrap gap-3">
                 <Button
-                  className="min-h-11"
+                 
                   onClick={() => void handleSubmit()}
                   disabled={
                     submitting ||
@@ -755,7 +767,7 @@ export function DigitalInlamning({ periodId }: { periodId: string }) {
                 </Button>
                 {utfall && utfall.length > 0 && !utfallHasErrors && (
                   <Button
-                    className="min-h-11"
+                   
                     variant="outline"
                     onClick={() => void handleSubmit({ ignoreWarnings: true })}
                     disabled={submitting}
@@ -766,16 +778,16 @@ export function DigitalInlamning({ periodId }: { periodId: string }) {
               </div>
 
               {kvittens && (
-                <div className="rounded-lg border border-border p-4 space-y-2">
+                <div className="space-y-2 border-t border-border/60 pt-4">
                   <div className="flex items-center gap-2">
-                    <ShieldCheck className="h-4 w-4" />
+                    <ShieldCheck className="h-4 w-4 text-success" />
                     <p className="font-medium">Uppladdad till eget utrymme</p>
                   </div>
                   <p className="text-muted-foreground text-xs">
                     Undertecknaren har fått e-post från Bolagsverket och signerar
                     fastställelseintyget där. Ärendet startar först efter signering.
                   </p>
-                  <Button className="min-h-11" variant="outline" size="sm" asChild>
+                  <Button variant="outline" size="sm" asChild>
                     <a href={kvittens.url} target="_blank" rel="noopener noreferrer">
                       <ExternalLink className="mr-2 h-4 w-4" /> Signera hos Bolagsverket
                     </a>
@@ -784,22 +796,22 @@ export function DigitalInlamning({ periodId }: { periodId: string }) {
               )}
             </>
           )}
-        </CardContent>
-      </Card>
+        </div>
+      </section>
 
       {/* Steg: Status */}
       {extensionActive === true && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">Inlämningsstatus</CardTitle>
-            <p className="text-sm text-muted-foreground">
-              Status uppdateras automatiskt via händelseaviseringar från Bolagsverket.
-            </p>
-          </CardHeader>
-          <CardContent className="space-y-4 text-sm">
+        <section>
+          <div className="mb-1 flex items-center gap-2 px-1">
+            <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">Inlämningsstatus</h3>
+            <div className="h-px flex-1 bg-border/60" />
+          </div>
+          <p className="px-1 text-sm text-muted-foreground">
+            Status uppdateras automatiskt via händelseaviseringar från Bolagsverket.
+          </p>
+          <div className="space-y-4 px-1 pt-4 text-sm">
             <div className="flex justify-end">
               <Button
-                className="min-h-11"
                 variant="outline"
                 size="sm"
                 disabled={pollingEvents}
@@ -859,7 +871,7 @@ export function DigitalInlamning({ periodId }: { periodId: string }) {
                     )}
                   </div>
                   {submission.bolagsverket_url && submission.status === 'uploaded' && (
-                    <Button className="min-h-11" variant="outline" size="sm" asChild>
+                    <Button variant="outline" size="sm" asChild>
                       <a href={submission.bolagsverket_url} target="_blank" rel="noopener noreferrer">
                         <ExternalLink className="mr-1 h-3.5 w-3.5" /> Signera
                       </a>
@@ -868,8 +880,8 @@ export function DigitalInlamning({ periodId }: { periodId: string }) {
                 </div>
               )
             })}
-          </CardContent>
-        </Card>
+          </div>
+        </section>
       )}
       </div>
       {INLAMNING_COMING_SOON && (
diff --git a/components/bookkeeping/year-end/AccrualsStep.tsx b/components/bookkeeping/year-end/AccrualsStep.tsx
index bffc1ee9..dab018d1 100644
--- a/components/bookkeeping/year-end/AccrualsStep.tsx
+++ b/components/bookkeeping/year-end/AccrualsStep.tsx
@@ -273,8 +273,8 @@ export function AccrualsStep({ periodId, onBack, onContinue }: AccrualsStepProps
       )}
 
       <div className="flex justify-between">
-        <Button variant="outline" onClick={onBack} disabled={posting}>
-          Tillbaka
+        <Button variant="outline" size="sm" onClick={onBack} disabled={posting}>
+          ← Tillbaka
         </Button>
         <Button onClick={handleCommit} disabled={posting}>
           {posting ? (
diff --git a/components/bookkeeping/year-end/DispositionsStep.tsx b/components/bookkeeping/year-end/DispositionsStep.tsx
index 1a3071d8..a051c568 100644
--- a/components/bookkeeping/year-end/DispositionsStep.tsx
+++ b/components/bookkeeping/year-end/DispositionsStep.tsx
@@ -216,9 +216,11 @@ export function DispositionsStep({ periodId, onBack, onContinue }: DispositionsS
           fiscalYear={fiscalYear}
         />
         <div className="flex justify-between">
-          <Button variant="outline" onClick={onBack}>Tillbaka</Button>
-          <Button onClick={onContinue}>
-            Fortsätt <ArrowRight className="ml-1 h-4 w-4" />
+          <Button variant="outline" size="sm" onClick={onBack}>
+            ← Tillbaka
+          </Button>
+          <Button variant="outline" size="sm" onClick={onContinue}>
+            Nästa: Förhandsgranska →
           </Button>
         </div>
       </div>
@@ -322,8 +324,8 @@ export function DispositionsStep({ periodId, onBack, onContinue }: DispositionsS
       )}
 
       <div className="flex justify-between">
-        <Button variant="outline" onClick={onBack} disabled={posting}>
-          Tillbaka
+        <Button variant="outline" size="sm" onClick={onBack} disabled={posting}>
+          ← Tillbaka
         </Button>
         <Button onClick={handleCommit} disabled={posting || hasCorrectionRequired}>
           {posting ? (
diff --git a/components/bookkeeping/year-end/ExecuteStep.tsx b/components/bookkeeping/year-end/ExecuteStep.tsx
index 91305a84..3f4f6d7f 100644
--- a/components/bookkeeping/year-end/ExecuteStep.tsx
+++ b/components/bookkeeping/year-end/ExecuteStep.tsx
@@ -1,10 +1,9 @@
 'use client'
 
 import { useState } from 'react'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { DestructiveConfirmDialog } from '@/components/ui/destructive-confirm-dialog'
-import { Lock, Loader2, AlertTriangle } from 'lucide-react'
+import { Lock, Loader2 } from 'lucide-react'
 
 interface ExecuteStepProps {
   periodName: string
@@ -27,14 +26,15 @@ export function ExecuteStep({ periodName, isRunning, error, bolagsskattMissing,
 
   return (
     <div className="space-y-6">
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base flex items-center gap-2">
-            <Lock className="h-4 w-4" />
+      <section>
+        <div className="mb-3 flex items-center gap-2 px-1">
+          <Lock className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />
+          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">
             Klar att verkställa
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
+          </h3>
+          <div className="h-px flex-1 bg-border/60" />
+        </div>
+        <div className="space-y-4 px-1">
           <p className="text-sm">
             När du verkställer bokslutet för <strong>{periodName}</strong> kommer följande att hända
             i en transaktion:
@@ -51,27 +51,20 @@ export function ExecuteStep({ periodName, isRunning, error, bolagsskattMissing,
             stornering eller bokar i den nya perioden.
           </p>
           {bolagsskattMissing && (
-            <div className="rounded-md border border-border p-3 text-sm flex items-start gap-2">
-              <AlertTriangle className="h-4 w-4 text-warning-foreground mt-0.5 shrink-0" />
-              <p>
-                Ingen bolagsskatt är bokförd trots att året visar vinst. Om det inte är avsiktligt
-                (t.ex. underskottsavdrag, periodiseringsfond eller överavskrivningar som nollar det
-                skattemässiga resultatet), gå tillbaka och boka skatten i dispositionssteget innan
-                du verkställer.
-              </p>
-            </div>
+            <p className="text-[12.5px] leading-5 text-attn">
+              Ingen bolagsskatt är bokförd trots att året visar vinst. Om det inte är avsiktligt
+              (t.ex. underskottsavdrag, periodiseringsfond eller överavskrivningar som nollar det
+              skattemässiga resultatet), gå tillbaka och boka skatten i dispositionssteget innan
+              du verkställer.
+            </p>
           )}
-          {error && (
-            <div className="rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
-              {error}
-            </div>
-          )}
-        </CardContent>
-      </Card>
+          {error && <p className="text-sm text-destructive">{error}</p>}
+        </div>
+      </section>
 
       <div className="flex justify-between">
-        <Button variant="outline" onClick={onBack} disabled={isRunning}>
-          Tillbaka
+        <Button variant="outline" size="sm" onClick={onBack} disabled={isRunning}>
+          ← Tillbaka
         </Button>
         <Button
           variant="destructive"
diff --git a/components/bookkeeping/year-end/PreflightStep.tsx b/components/bookkeeping/year-end/PreflightStep.tsx
index 83830a82..d8233ba0 100644
--- a/components/bookkeeping/year-end/PreflightStep.tsx
+++ b/components/bookkeeping/year-end/PreflightStep.tsx
@@ -1,10 +1,10 @@
 'use client'
 
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Skeleton } from '@/components/ui/skeleton'
-import { CheckCircle2, AlertTriangle, XCircle, Info } from 'lucide-react'
+import { QUIET_LINK_CLASS } from '@/components/ui/dry-table'
+import { AlertTriangle, Info, XCircle } from 'lucide-react'
 import Link from 'next/link'
 import type { BokslutReadinessReport } from '@/lib/bokslut/readiness-aggregator'
 
@@ -15,28 +15,33 @@ interface PreflightStepProps {
   onContinue: () => void
 }
 
+/** Sans eyebrow section head with a trailing hairline (house idiom). */
+function SectionHead({ icon, children }: { icon?: React.ReactNode; children: React.ReactNode }) {
+  return (
+    <div className="mb-1 flex items-center gap-2 px-1">
+      {icon}
+      <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">
+        {children}
+      </h3>
+      <div className="h-px flex-1 bg-border/60" />
+    </div>
+  )
+}
+
 export function PreflightStep({ report, isLoading, error, onContinue }: PreflightStepProps) {
   if (isLoading) {
     return (
-      <Card>
-        <CardContent className="p-6 space-y-3">
-          <Skeleton className="h-6 w-1/3" />
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-3/4" />
-          <Skeleton className="h-4 w-2/3" />
-        </CardContent>
-      </Card>
+      <div className="space-y-3">
+        <Skeleton className="h-6 w-1/3" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-3/4" />
+        <Skeleton className="h-4 w-2/3" />
+      </div>
     )
   }
 
   if (error) {
-    return (
-      <Card>
-        <CardContent className="p-6">
-          <p className="text-destructive">{error}</p>
-        </CardContent>
-      </Card>
-    )
+    return <p className="py-4 text-sm text-destructive">{error}</p>
   }
 
   if (!report) {
@@ -44,95 +49,71 @@ export function PreflightStep({ report, isLoading, error, onContinue }: Prefligh
   }
 
   return (
-    <div className="space-y-6">
-      <Card>
-        <CardHeader>
-          <div className="flex items-center justify-between gap-4">
-            <div>
-              <CardTitle className="text-base">{report.period.name}</CardTitle>
-              <p className="text-sm text-muted-foreground tabular-nums">
-                {report.period.period_start}: {report.period.period_end}
-              </p>
-            </div>
-            {report.ready ? (
-              <Badge variant="success" className="gap-1">
-                <CheckCircle2 className="h-3.5 w-3.5" /> Redo för bokslut
-              </Badge>
-            ) : (
-              <Badge variant="destructive" className="gap-1">
-                <XCircle className="h-3.5 w-3.5" /> Inte redo
-              </Badge>
-            )}
-          </div>
-        </CardHeader>
-      </Card>
+    <div className="space-y-8">
+      {/* Period line: muted text for the normal state, chip only when the
+          period deviates (design.md: chips mark exceptions). */}
+      <div className="flex flex-wrap items-baseline justify-between gap-3 px-1">
+        <div className="flex items-baseline gap-3">
+          <h2 className="font-sans text-sm font-medium">{report.period.name}</h2>
+          <span className="text-xs tabular-nums text-muted-foreground">
+            {report.period.period_start} till {report.period.period_end}
+          </span>
+        </div>
+        {report.ready ? (
+          <span className="text-xs text-muted-foreground">Redo för bokslut</span>
+        ) : (
+          <Badge variant="destructive" className="font-normal">Inte redo</Badge>
+        )}
+      </div>
 
       {report.blockers.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base flex items-center gap-2">
-              <XCircle className="h-4 w-4 text-destructive" />
-              Måste åtgärdas innan bokslut
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            {report.blockers.map((blocker, i) => (
-              <BlockerRow key={i} blocker={blocker} report={report} />
-            ))}
-          </CardContent>
-        </Card>
+        <section>
+          <SectionHead icon={<XCircle className="h-3.5 w-3.5 text-destructive" aria-hidden="true" />}>
+            Måste åtgärdas innan bokslut
+          </SectionHead>
+          {report.blockers.map((blocker, i) => (
+            <BlockerRow key={i} blocker={blocker} report={report} />
+          ))}
+        </section>
       )}
 
       {report.warnings.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base flex items-center gap-2">
-              <AlertTriangle className="h-4 w-4 text-warning-foreground" />
-              Varningar
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            {report.warnings.map((warning, i) => (
-              <p key={i} className="text-sm">
-                {warning}
-              </p>
-            ))}
-          </CardContent>
-        </Card>
+        <section>
+          <SectionHead icon={<AlertTriangle className="h-3.5 w-3.5 text-attn" aria-hidden="true" />}>
+            Varningar
+          </SectionHead>
+          {report.warnings.map((warning, i) => (
+            <p key={i} className="border-b border-border/60 px-1 py-3 text-[13px] leading-5 last:border-b-0">
+              {warning}
+            </p>
+          ))}
+        </section>
       )}
 
       {report.reminders.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base flex items-center gap-2">
-              <Info className="h-4 w-4 text-muted-foreground" />
-              Påminnelser
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            {report.reminders.map((reminder) => (
-              <div key={reminder.code} className="flex items-start gap-3 text-sm">
-                <span className="mt-1 h-1.5 w-1.5 rounded-full bg-muted-foreground shrink-0" />
-                <div className="flex-1">
-                  <p>{reminder.message}</p>
-                  {reminder.href && (
-                    <Link
-                      href={reminder.href}
-                      className="text-xs text-primary hover:underline"
-                    >
-                      Öppna
-                    </Link>
-                  )}
-                </div>
-              </div>
-            ))}
-          </CardContent>
-        </Card>
+        <section>
+          <SectionHead icon={<Info className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />}>
+            Påminnelser
+          </SectionHead>
+          {report.reminders.map((reminder) => (
+            <div
+              key={reminder.code}
+              className="flex items-baseline justify-between gap-3 border-b border-border/60 px-1 py-3 text-[13px] leading-5 text-muted-foreground last:border-b-0"
+            >
+              <p className="flex-1">{reminder.message}</p>
+              {reminder.href && (
+                <Link href={reminder.href} className={QUIET_LINK_CLASS}>
+                  Öppna
+                </Link>
+              )}
+            </div>
+          ))}
+        </section>
       )}
 
       <div className="flex justify-end">
-        <Button onClick={onContinue} disabled={!report.ready}>
-          Fortsätt
+        <Button variant="outline" size="sm" onClick={onContinue} disabled={!report.ready}>
+          Nästa: Periodiseringar →
         </Button>
       </div>
     </div>
@@ -162,10 +143,10 @@ function BlockerRow({ blocker, report }: { blocker: string; report: BokslutReadi
   }
 
   return (
-    <div className="flex items-start justify-between gap-3 text-sm">
+    <div className="flex items-baseline justify-between gap-3 border-b border-border/60 px-1 py-3 text-[13px] leading-5 last:border-b-0">
       <p className="flex-1">{blocker}</p>
       {href && actionLabel && (
-        <Link href={href} className="text-xs text-primary hover:underline shrink-0 mt-0.5">
+        <Link href={href} className={QUIET_LINK_CLASS}>
           {actionLabel}
         </Link>
       )}
diff --git a/components/bookkeeping/year-end/PreviewStep.tsx b/components/bookkeeping/year-end/PreviewStep.tsx
index 74bd3d53..f5969731 100644
--- a/components/bookkeeping/year-end/PreviewStep.tsx
+++ b/components/bookkeeping/year-end/PreviewStep.tsx
@@ -1,10 +1,8 @@
 'use client'
 
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Skeleton } from '@/components/ui/skeleton'
-import { ArrowRight, AlertTriangle } from 'lucide-react'
 import {
   Table,
   TableBody,
@@ -27,23 +25,15 @@ interface PreviewStepProps {
 export function PreviewStep({ preview, isLoading, error, onBack, onContinue }: PreviewStepProps) {
   if (isLoading) {
     return (
-      <Card>
-        <CardContent className="p-6 space-y-3">
-          <Skeleton className="h-6 w-1/3" />
-          <Skeleton className="h-32 w-full" />
-        </CardContent>
-      </Card>
+      <div className="space-y-3">
+        <Skeleton className="h-6 w-1/3" />
+        <Skeleton className="h-32 w-full" />
+      </div>
     )
   }
 
   if (error) {
-    return (
-      <Card>
-        <CardContent className="p-6">
-          <p className="text-destructive">{error}</p>
-        </CardContent>
-      </Card>
-    )
+    return <p className="py-4 text-sm text-destructive">{error}</p>
   }
 
   if (!preview) return null
@@ -53,58 +43,49 @@ export function PreviewStep({ preview, isLoading, error, onBack, onContinue }: P
 
   return (
     <div className="space-y-6">
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Årets resultat</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="flex items-baseline justify-between">
-            <div>
-              <p className="text-sm text-muted-foreground">
-                Nettoresultat överförs till {preview.closingAccount} {preview.closingAccountName}
-              </p>
-              {isProfit && <Badge variant="success" className="mt-2">Vinst</Badge>}
-              {isLoss && <Badge variant="destructive" className="mt-2">Förlust</Badge>}
-            </div>
-            <p className="font-display text-3xl tabular-nums">
-              {formatCurrency(preview.netResult)}
-            </p>
-          </div>
-        </CardContent>
-      </Card>
+      <div className="px-1">
+        <p className="font-sans text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+          Årets resultat
+        </p>
+        <div className="mt-1 flex items-baseline justify-between gap-4">
+          <p
+            className={`font-display text-2xl tabular-nums tracking-tight ${isLoss ? 'text-destructive' : ''}`}
+          >
+            {formatCurrency(preview.netResult)}
+          </p>
+          {isProfit && <span className="text-xs text-muted-foreground">Vinst</span>}
+          {isLoss && <Badge variant="destructive" className="font-normal">Förlust</Badge>}
+        </div>
+        <p className="mt-1 text-xs text-muted-foreground">
+          Nettoresultat överförs till {preview.closingAccount} {preview.closingAccountName}
+        </p>
+      </div>
 
       {preview.bolagsskattMissing && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base flex items-center gap-2">
-              <AlertTriangle className="h-4 w-4 text-warning-foreground" />
-              Ingen bolagsskatt är bokförd
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            <p className="text-sm">
-              Året visar vinst men ingen skatt på årets resultat (konto 8910) finns bland de konton
-              som stängs. Gå tillbaka till dispositionssteget och boka bolagsskatten innan du
-              verkställer, om inte skattemässigt resultat är noll (t.ex. genom underskottsavdrag,
-              avsättning till periodiseringsfond eller överavskrivningar).
-            </p>
-            <Button variant="outline" size="sm" onClick={onBack}>
-              Till dispositionssteget
-            </Button>
-          </CardContent>
-        </Card>
+        <p className="px-1 text-[12.5px] leading-5 text-attn">
+          Året visar vinst men ingen skatt på årets resultat (konto 8910) finns bland de konton
+          som stängs. Gå tillbaka till dispositionssteget och boka bolagsskatten innan du
+          verkställer, om inte skattemässigt resultat är noll (t.ex. genom underskottsavdrag,
+          avsättning till periodiseringsfond eller överavskrivningar).{' '}
+          <button type="button" onClick={onBack} className="underline underline-offset-2 hover:opacity-80">
+            Till dispositionssteget
+          </button>
+        </p>
       )}
 
       {preview.currencyRevaluation && preview.currencyRevaluation.items.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">Kursrevaluering (ÅRL 4:13)</CardTitle>
-            <p className="text-sm text-muted-foreground">
-              Öppna fordringar/skulder i utländsk valuta värderas om till balansdagens kurs innan bokslut.
-              Detta sker automatiskt som en del av verkställandet.
-            </p>
-          </CardHeader>
-          <CardContent>
+        <section>
+          <div className="mb-1 flex items-center gap-2 px-1">
+            <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">
+              Kursrevaluering (ÅRL 4:13)
+            </h3>
+            <div className="h-px flex-1 bg-border/60" />
+          </div>
+          <p className="px-1 text-xs leading-5 text-muted-foreground">
+            Öppna fordringar/skulder i utländsk valuta värderas om till balansdagens kurs innan
+            bokslut. Detta sker automatiskt som en del av verkställandet.
+          </p>
+          <div className="px-1 pt-4">
             <div className="grid grid-cols-3 gap-4 text-sm">
               <div>
                 <p className="text-muted-foreground text-xs uppercase tracking-wider">Kursvinst</p>
@@ -125,18 +106,20 @@ export function PreviewStep({ preview, isLoading, error, onBack, onContinue }: P
                 </p>
               </div>
             </div>
-          </CardContent>
-        </Card>
+          </div>
+        </section>
       )}
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Bokslutsverifikation: förhandsgranskning</CardTitle>
-          <p className="text-sm text-muted-foreground">
-            {preview.closingLines.length} kontorader. Nollställer klass 3-8 mot {preview.closingAccount}.
-          </p>
-        </CardHeader>
-        <CardContent className="p-0">
+      <section>
+        <div className="mb-1 flex items-center gap-2 px-1">
+          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">
+            Bokslutsverifikation: förhandsgranskning
+          </h3>
+          <div className="h-px flex-1 bg-border/60" />
+        </div>
+        <p className="px-1 pb-2 text-xs leading-5 text-muted-foreground">
+          {preview.closingLines.length} kontorader. Nollställer klass 3-8 mot {preview.closingAccount}.
+        </p>
           <Table>
             <TableHeader>
               <TableRow>
@@ -161,15 +144,14 @@ export function PreviewStep({ preview, isLoading, error, onBack, onContinue }: P
               ))}
             </TableBody>
           </Table>
-        </CardContent>
-      </Card>
+      </section>
 
       <div className="flex justify-between">
-        <Button variant="outline" onClick={onBack}>
-          Tillbaka
+        <Button variant="outline" size="sm" onClick={onBack}>
+          ← Tillbaka
         </Button>
-        <Button onClick={onContinue}>
-          Verkställ bokslut <ArrowRight className="ml-1 h-4 w-4" />
+        <Button variant="outline" size="sm" onClick={onContinue}>
+          Nästa: Verkställ →
         </Button>
       </div>
     </div>
diff --git a/components/bookkeeping/year-end/ResultStep.tsx b/components/bookkeeping/year-end/ResultStep.tsx
index 8e67e58e..6f71ad07 100644
--- a/components/bookkeeping/year-end/ResultStep.tsx
+++ b/components/bookkeeping/year-end/ResultStep.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Checkbox } from '@/components/ui/checkbox'
@@ -36,8 +35,7 @@ export function ResultStep({ result }: ResultStepProps) {
   // grouped by BAS class so the user can confirm visually before leaving.
   return (
     <div className="space-y-6">
-      <Card>
-        <CardContent className="p-6 text-center space-y-4">
+      <div className="space-y-4 py-6 text-center">
           <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-success/10">
             <CheckCircle2 className="h-7 w-7 text-success" />
           </div>
@@ -45,14 +43,14 @@ export function ResultStep({ result }: ResultStepProps) {
           <p className="text-muted-foreground">
             Perioden är stängd och en ny räkenskapsperiod har skapats.
           </p>
-        </CardContent>
-      </Card>
+      </div>
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Resultat</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-3 text-sm">
+      <section>
+        <div className="mb-1 flex items-center gap-2 px-1">
+          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">Resultat</h3>
+          <div className="h-px flex-1 bg-border/60" />
+        </div>
+        <div className="space-y-3 px-1 pt-2 text-sm">
           <ResultRow
             label="Bokslutsverifikation"
             value={formatVoucher(result.closingEntry)}
@@ -78,12 +76,11 @@ export function ResultStep({ result }: ResultStepProps) {
             />
           )}
           <ResultRow label="Ny räkenskapsperiod" value={result.nextPeriod.name} />
-        </CardContent>
-      </Card>
+        </div>
+      </section>
 
       {result.resultAppropriationFailed && (
-        <Card className="border-destructive/30 bg-destructive/5">
-          <CardContent className="p-4 flex items-start gap-3">
+        <div className="flex items-start gap-3 px-1 py-2 text-destructive">
             <AlertTriangle className="h-4 w-4 mt-0.5 text-destructive shrink-0" />
             <p className="text-sm">
               <span className="font-medium">
@@ -94,8 +91,7 @@ export function ResultStep({ result }: ResultStepProps) {
               Det måste flyttas till 2098 innan balansräkningen stämmer. Kör om bokslutet
               eller kontakta support: felet är loggat.
             </p>
-          </CardContent>
-        </Card>
+        </div>
       )}
 
       {continuity && (
@@ -105,8 +101,7 @@ export function ResultStep({ result }: ResultStepProps) {
         />
       )}
 
-      <Card>
-        <CardContent className="p-6 space-y-4">
+      <section className="space-y-4 px-1">
           <label className="flex items-start gap-3 cursor-pointer">
             <Checkbox
               checked={acknowledged}
@@ -153,8 +148,7 @@ export function ResultStep({ result }: ResultStepProps) {
               </Link>
             </Button>
           </div>
-        </CardContent>
-      </Card>
+      </section>
     </div>
   )
 }
@@ -197,9 +191,9 @@ function ContinuityPanel({ discrepancies, checkedAccounts }: ContinuityPanelProp
   )
 
   return (
-    <Card>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0">
-        <CardTitle className="text-base">IB/UB-avstämning</CardTitle>
+    <section>
+      <div className="mb-3 flex items-center justify-between gap-2 px-1">
+        <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">IB/UB-avstämning</h3>
         {hasIssues ? (
           <Badge variant="destructive" className="gap-1">
             <AlertTriangle className="h-3 w-3" />
@@ -211,8 +205,8 @@ function ContinuityPanel({ discrepancies, checkedAccounts }: ContinuityPanelProp
             Stämmer
           </Badge>
         )}
-      </CardHeader>
-      <CardContent className="space-y-4">
+      </div>
+      <div className="space-y-4 px-1">
         <p className="text-sm text-muted-foreground">
           {checkedAccounts} balanskonto(n) jämförda mellan utgående balans i
           stängd period och ingående balans i ny period.
@@ -230,7 +224,7 @@ function ContinuityPanel({ discrepancies, checkedAccounts }: ContinuityPanelProp
               if (rows.length === 0) return null
               return (
                 <div key={klass}>
-                  <h3 className="text-sm font-medium uppercase tracking-wider text-muted-foreground mb-2">
+                  <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2">
                     Klass {klass}: {klass === 1 ? 'Tillgångar' : 'Skulder & eget kapital'}
                   </h3>
                   <Table>
@@ -280,7 +274,7 @@ function ContinuityPanel({ discrepancies, checkedAccounts }: ContinuityPanelProp
             })}
           </div>
         )}
-      </CardContent>
-    </Card>
+      </div>
+    </section>
   )
 }
diff --git a/components/reports/FocusedReport.tsx b/components/reports/FocusedReport.tsx
index dc1c39e9..8d6da661 100644
--- a/components/reports/FocusedReport.tsx
+++ b/components/reports/FocusedReport.tsx
@@ -11,7 +11,7 @@ import { EmptyState } from '@/components/ui/empty-state'
 import { Card, CardContent } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
 import { useCompany } from '@/contexts/CompanyContext'
-import { FiscalYearSelector } from '@/components/common/FiscalYearSelector'
+import { FyPicker } from '@/components/common/FyPicker'
 import { ReportDateRange, type DateRangeValue } from '@/components/common/ReportDateRange'
 import { DimensionFilter, type DimensionFilterValue } from '@/components/reports/DimensionFilter'
 import { DATE_RANGE_SLUGS, DIMENSION_FILTER_SLUGS, getReport } from '@/lib/reports/catalog'
@@ -117,7 +117,7 @@ function FocusedReportInner({
         title={reportName}
         action={
           isStandalone ? undefined : (
-            <FiscalYearSelector
+            <FyPicker
               value={selectedPeriod || null}
               onChange={(id, period) => {
                 setSelectedPeriod(id || '')
diff --git a/components/reports/INK2DeclarationView.tsx b/components/reports/INK2DeclarationView.tsx
index c1dc989d..746c2abc 100644
--- a/components/reports/INK2DeclarationView.tsx
+++ b/components/reports/INK2DeclarationView.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Table, TableBody, TableHead, TableHeader, TableRow } from '@/components/ui/table'
@@ -97,26 +96,22 @@ export function INK2DeclarationView({ periodId }: { periodId: string }) {
 
   if (error) {
     return (
-      <Card>
-        <CardContent className="p-6 flex flex-wrap items-center gap-3 text-destructive">
-          <AlertCircle className="h-4 w-4 shrink-0" />
-          <span className="text-sm">{error}</span>
-          <Button variant="outline" onClick={() => setRetryKey((k) => k + 1)}>
-            Försök igen
-          </Button>
-        </CardContent>
-      </Card>
+      <div className="flex flex-wrap items-center gap-3 py-4 text-destructive">
+        <AlertCircle className="h-4 w-4 shrink-0" />
+        <span className="text-sm">{error}</span>
+        <Button variant="outline" onClick={() => setRetryKey((k) => k + 1)}>
+          Försök igen
+        </Button>
+      </div>
     )
   }
 
   if (loading && !data) {
     return (
-      <Card>
-        <CardContent className="p-6 space-y-4">
-          <Skeleton className="h-5 w-48" />
-          <Skeleton className="h-64" />
-        </CardContent>
-      </Card>
+      <div className="space-y-4">
+        <Skeleton className="h-5 w-48" />
+        <Skeleton className="h-64" />
+      </div>
     )
   }
 
@@ -127,11 +122,10 @@ export function INK2DeclarationView({ periodId }: { periodId: string }) {
       className={`space-y-8 transition-opacity duration-150 ${loading ? 'opacity-60' : ''}`}
     >
       {/* Header: company, year, filing artifact, and how to file it */}
-      <Card>
-        <CardHeader>
+      <div className="px-1">
           <div className="flex flex-wrap items-start justify-between gap-3">
             <div>
-              <CardTitle className="text-base">INK2 (Aktiebolag)</CardTitle>
+              <h3 className="font-sans text-sm font-medium">INK2 (Aktiebolag)</h3>
               <p className="text-sm text-muted-foreground mt-1">
                 {data.companyInfo.companyName} · {data.fiscalYear.name}
                 {data.companyInfo.orgNumber && ` · Org.nr: ${data.companyInfo.orgNumber}`}
@@ -148,11 +142,9 @@ export function INK2DeclarationView({ periodId }: { periodId: string }) {
               {downloadError}
             </div>
           )}
-        </CardHeader>
-        <CardContent>
-          <div className="flex items-start gap-2 rounded-lg border border-border bg-muted/30 p-3">
-            <Info className="h-4 w-4 mt-1 shrink-0 text-muted-foreground" />
-            <div className="text-sm text-muted-foreground space-y-2">
+          <div className="mt-4 flex items-start gap-2">
+            <Info className="mt-1 h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+            <div className="text-[13px] leading-6 text-muted-foreground space-y-2">
               <p>
                 INK2 visar det bokföringsmässiga resultatet baserat på din bokföring.
               </p>
@@ -172,35 +164,31 @@ export function INK2DeclarationView({ periodId }: { periodId: string }) {
               </ol>
             </div>
           </div>
-        </CardContent>
-      </Card>
+      </div>
 
       {/* Warnings */}
       {data.warnings.length > 0 && (
-        <Card>
-          <CardContent className="py-4">
-            <div className="flex items-start gap-2">
-              <AlertTriangle className="h-4 w-4 mt-1 shrink-0 text-warning" />
-              <div className="space-y-1">
-                <p className="text-sm font-medium">
-                  {data.warnings.length}{' '}
-                  {data.warnings.length === 1 ? 'varning' : 'varningar'}
-                </p>
-                {data.warnings.map((warning, i) => (
-                  <p key={i} className="text-sm text-muted-foreground">{warning}</p>
-                ))}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+        <div className="flex items-start gap-2 px-1">
+          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-attn" aria-hidden="true" />
+          <div className="space-y-1">
+            <p className="text-[12.5px] font-medium leading-5 text-attn">
+              {data.warnings.length}{' '}
+              {data.warnings.length === 1 ? 'varning' : 'varningar'}
+            </p>
+            {data.warnings.map((warning, i) => (
+              <p key={i} className="text-[12.5px] leading-5 text-muted-foreground">{warning}</p>
+            ))}
+          </div>
+        </div>
       )}
 
       {/* Assets section */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Tillgångar</CardTitle>
-        </CardHeader>
-        <CardContent>
+      <section>
+        <div className="mb-1 flex items-center gap-2 px-1">
+          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">Tillgångar</h3>
+          <div className="h-px flex-1 bg-border/60" />
+        </div>
+        <div className="px-1 pt-2">
           <Table>
             <TableHeader>
               <TableRow>
@@ -228,15 +216,16 @@ export function INK2DeclarationView({ periodId }: { periodId: string }) {
               </tr>
             </tfoot>
           </Table>
-        </CardContent>
-      </Card>
+        </div>
+      </section>
 
       {/* Equity & Liabilities section */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Eget kapital och skulder</CardTitle>
-        </CardHeader>
-        <CardContent>
+      <section>
+        <div className="mb-1 flex items-center gap-2 px-1">
+          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">Eget kapital och skulder</h3>
+          <div className="h-px flex-1 bg-border/60" />
+        </div>
+        <div className="px-1 pt-2">
           <Table>
             <TableHeader>
               <TableRow>
@@ -264,15 +253,16 @@ export function INK2DeclarationView({ periodId }: { periodId: string }) {
               </tr>
             </tfoot>
           </Table>
-        </CardContent>
-      </Card>
+        </div>
+      </section>
 
       {/* Income Statement section */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Resultaträkning</CardTitle>
-        </CardHeader>
-        <CardContent>
+      <section>
+        <div className="mb-1 flex items-center gap-2 px-1">
+          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">Resultaträkning</h3>
+          <div className="h-px flex-1 bg-border/60" />
+        </div>
+        <div className="px-1 pt-2">
           <Table>
             <TableHeader>
               <TableRow>
@@ -314,15 +304,16 @@ export function INK2DeclarationView({ periodId }: { periodId: string }) {
               </tr>
             </tfoot>
           </Table>
-        </CardContent>
-      </Card>
+        </div>
+      </section>
 
       {/* INK2S summary */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">INK2S: Skattemässiga justeringar</CardTitle>
-        </CardHeader>
-        <CardContent>
+      <section>
+        <div className="mb-1 flex items-center gap-2 px-1">
+          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">INK2S: Skattemässiga justeringar</h3>
+          <div className="h-px flex-1 bg-border/60" />
+        </div>
+        <div className="px-1 pt-2">
           <p className="text-sm text-muted-foreground mb-4">
             Grundläggande justeringar och de återläggningar som sparats i bokslutet
             beräknas automatiskt. Kontrollera övriga deklarationsjusteringar med din
@@ -384,8 +375,8 @@ export function INK2DeclarationView({ periodId }: { periodId: string }) {
               </tr>
             </tfoot>
           </Table>
-        </CardContent>
-      </Card>
+        </div>
+      </section>
     </div>
   )
 }
diff --git a/components/reports/NEDeclarationView.tsx b/components/reports/NEDeclarationView.tsx
index f6537ac2..8e4fe6a1 100644
--- a/components/reports/NEDeclarationView.tsx
+++ b/components/reports/NEDeclarationView.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Table, TableBody, TableHead, TableHeader, TableRow } from '@/components/ui/table'
@@ -108,26 +107,22 @@ export function NEDeclarationView({ periodId }: { periodId: string }) {
 
   if (error) {
     return (
-      <Card>
-        <CardContent className="p-6 flex flex-wrap items-center gap-3 text-destructive">
-          <AlertCircle className="h-4 w-4 shrink-0" />
-          <span className="text-sm">{error}</span>
-          <Button variant="outline" onClick={() => setRetryKey((k) => k + 1)}>
-            Försök igen
-          </Button>
-        </CardContent>
-      </Card>
+      <div className="flex flex-wrap items-center gap-3 py-4 text-destructive">
+        <AlertCircle className="h-4 w-4 shrink-0" />
+        <span className="text-sm">{error}</span>
+        <Button variant="outline" onClick={() => setRetryKey((k) => k + 1)}>
+          Försök igen
+        </Button>
+      </div>
     )
   }
 
   if (loading && !data) {
     return (
-      <Card>
-        <CardContent className="p-6 space-y-4">
-          <Skeleton className="h-5 w-48" />
-          <Skeleton className="h-64" />
-        </CardContent>
-      </Card>
+      <div className="space-y-4">
+        <Skeleton className="h-5 w-48" />
+        <Skeleton className="h-64" />
+      </div>
     )
   }
 
@@ -138,11 +133,10 @@ export function NEDeclarationView({ periodId }: { periodId: string }) {
       className={`space-y-8 transition-opacity duration-150 ${loading ? 'opacity-60' : ''}`}
     >
       {/* Header: company, year, and the filing artifact */}
-      <Card>
-        <CardHeader>
+      <div className="px-1">
           <div className="flex flex-wrap items-start justify-between gap-3">
             <div>
-              <CardTitle className="text-base">NE-bilaga (Enskild firma)</CardTitle>
+              <h3 className="font-sans text-sm font-medium">NE-bilaga (Enskild firma)</h3>
               <p className="text-sm text-muted-foreground mt-1">
                 {data.companyInfo.companyName} · {data.fiscalYear.name}
                 {data.companyInfo.orgNumber && ` · Org.nr: ${data.companyInfo.orgNumber}`}
@@ -159,35 +153,31 @@ export function NEDeclarationView({ periodId }: { periodId: string }) {
               {downloadError}
             </div>
           )}
-        </CardHeader>
-      </Card>
+      </div>
 
       {/* Warnings */}
       {data.warnings.length > 0 && (
-        <Card>
-          <CardContent className="py-4">
-            <div className="flex items-start gap-2">
-              <AlertTriangle className="h-4 w-4 mt-1 shrink-0 text-warning" />
-              <div className="space-y-1">
-                <p className="text-sm font-medium">
-                  {data.warnings.length}{' '}
-                  {data.warnings.length === 1 ? 'varning' : 'varningar'}
-                </p>
-                {data.warnings.map((warning, i) => (
-                  <p key={i} className="text-sm text-muted-foreground">{warning}</p>
-                ))}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+        <div className="flex items-start gap-2 px-1">
+          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-attn" aria-hidden="true" />
+          <div className="space-y-1">
+            <p className="text-[12.5px] font-medium leading-5 text-attn">
+              {data.warnings.length}{' '}
+              {data.warnings.length === 1 ? 'varning' : 'varningar'}
+            </p>
+            {data.warnings.map((warning, i) => (
+              <p key={i} className="text-[12.5px] leading-5 text-muted-foreground">{warning}</p>
+            ))}
+          </div>
+        </div>
       )}
 
       {/* Revenue section */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Intäkter</CardTitle>
-        </CardHeader>
-        <CardContent>
+      <section>
+        <div className="mb-1 flex items-center gap-2 px-1">
+          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">Intäkter</h3>
+          <div className="h-px flex-1 bg-border/60" />
+        </div>
+        <div className="px-1 pt-2">
           <Table>
             <TableHeader>
               <TableRow>
@@ -217,15 +207,16 @@ export function NEDeclarationView({ periodId }: { periodId: string }) {
               </tr>
             </tfoot>
           </Table>
-        </CardContent>
-      </Card>
+        </div>
+      </section>
 
       {/* Expenses section */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Kostnader</CardTitle>
-        </CardHeader>
-        <CardContent>
+      <section>
+        <div className="mb-1 flex items-center gap-2 px-1">
+          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">Kostnader</h3>
+          <div className="h-px flex-1 bg-border/60" />
+        </div>
+        <div className="px-1 pt-2">
           <Table>
             <TableHeader>
               <TableRow>
@@ -261,27 +252,21 @@ export function NEDeclarationView({ periodId }: { periodId: string }) {
               </tr>
             </tfoot>
           </Table>
-        </CardContent>
-      </Card>
+        </div>
+      </section>
 
-      {/* Result */}
-      <Card>
-        <CardContent className="py-4">
-          <div className="flex justify-between items-center">
-            <div>
-              <span className="font-mono text-xs bg-muted px-1 rounded mr-2">R11</span>
-              <span className="font-display text-xl">Årets resultat</span>
-            </div>
-            <span
-              className={`font-display text-2xl tabular-nums ${
-                data.rutor.R11 >= 0 ? 'text-success' : 'text-destructive'
-              }`}
-            >
-              {formatWholeKronor(data.rutor.R11)}
-            </span>
-          </div>
-        </CardContent>
-      </Card>
+      {/* Result: the emphasized document foot (house skv-foot idiom). */}
+      <div className="flex items-baseline gap-3 border-t-2 border-foreground/80 px-1 pt-3">
+        <span className="font-mono text-xs text-muted-foreground">R11</span>
+        <span className="flex-1 text-sm font-medium">Årets resultat</span>
+        <span
+          className={`text-sm font-semibold tabular-nums ${
+            data.rutor.R11 >= 0 ? '' : 'text-destructive'
+          }`}
+        >
+          {formatWholeKronor(data.rutor.R11)}
+        </span>
+      </div>
     </div>
   )
 }
diff --git a/components/reports/SkatteverketPanel.tsx b/components/reports/SkatteverketPanel.tsx
index ea321465..064bf156 100644
--- a/components/reports/SkatteverketPanel.tsx
+++ b/components/reports/SkatteverketPanel.tsx
@@ -946,7 +946,7 @@ function SkatteverketPanelInner({
         {/* Validation results from Skatteverket */}
         {kontroller.length > 0 && (
           <div className="space-y-2">
-            <h3 className="text-sm font-medium uppercase tracking-wider text-muted-foreground">
+            <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">
               Skatteverkets valideringsresultat
             </h3>
             {kontroller.map((k, i) => (
diff --git a/components/reports/VatChecksCard.tsx b/components/reports/VatChecksCard.tsx
index 8ce361f7..4a75021d 100644
--- a/components/reports/VatChecksCard.tsx
+++ b/components/reports/VatChecksCard.tsx
@@ -316,10 +316,7 @@ export function VatChecksCard({
                 ) : (
                   <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-attn" aria-hidden="true" />
                 )}
-                <div>
-                  <span className="mr-2 font-mono text-xs text-muted-foreground">{c.code}</span>
-                  {c.message}
-                </div>
+                <div>{c.message}</div>
               </div>
             ))}
           </div>
@@ -327,12 +324,15 @@ export function VatChecksCard({
 
         {showGapWorklist && (
           <div className="space-y-3">
-            <h3
-              className="text-sm font-medium uppercase tracking-wider text-muted-foreground"
-              aria-live="polite"
-            >
-              Verifikationer som saknar basbelopp ({gaps.length})
-            </h3>
+            <div className="mb-1 flex items-center gap-2">
+              <h3
+                className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground"
+                aria-live="polite"
+              >
+                Verifikationer som saknar basbelopp ({gaps.length})
+              </h3>
+              <div className="h-px flex-1 bg-border/60" />
+            </div>
 
             {gapsLoading ? (
               <div className="flex items-center gap-2 text-sm text-muted-foreground">
diff --git a/components/reports/views/index.tsx b/components/reports/views/index.tsx
index c7cf0080..dac83815 100644
--- a/components/reports/views/index.tsx
+++ b/components/reports/views/index.tsx
@@ -21,7 +21,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { FiscalYearSelector } from '@/components/common/FiscalYearSelector'
+import { FyPicker } from '@/components/common/FyPicker'
+import { ContextPicker } from '@/components/common/ContextPicker'
 import { cn, formatDate } from '@/lib/utils'
 import { roundOre } from '@/lib/money'
 import { formatVoucher } from '@/lib/bookkeeping/voucher-series-resolver'
@@ -1671,35 +1672,29 @@ export function VatDeclarationView() {
   return (
     <VatDrillContext.Provider value={{ fiscalPeriodId: isYearly ? fiscalPeriodId : undefined }}>
     <div className="space-y-8">
-      {/* XML and PDF live in "Lämna in" below: they are filing artifacts, not
-          report exports, and one home avoids two competing download surfaces. */}
-      <ReportExportMenu
-        variant="default"
-        items={[
-          { format: 'xlsx', href: `/api/reports/vat-declaration/xlsx?${vatQueryString()}` },
-        ]}
-      />
-
-      {/* Period selection — the declaration below follows it automatically.
-          Flat toolbar row (concept language), far right like a context picker. */}
+      {/* One flat toolbar row (concept language): period pickers + Exportera
+          far right. XML and PDF live in "Lämna in" below: they are filing
+          artifacts, not report exports, and one home avoids two competing
+          download surfaces. */}
       <div className="flex flex-wrap items-center justify-end gap-2">
-              <Select
+              {/* Cadence lives behind a settings-style "Period" chip: the
+                  concrete period chip next to it already shows the cadence
+                  ("Kvartal 2" implies quarterly, "Räkenskapsår ..." yearly). */}
+              <ContextPicker
+                items={[
+                  { id: 'monthly', label: 'Månadsvis' },
+                  { id: 'quarterly', label: 'Kvartalsvis' },
+                  { id: 'yearly', label: 'Årsvis' },
+                ]}
                 value={periodType}
-                onValueChange={(value) => handlePeriodTypeChange(value as VatPeriodType)}
-              >
-                <SelectTrigger aria-label="Periodicitet" className="h-9 w-36">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="monthly">Månadsvis</SelectItem>
-                  <SelectItem value="quarterly">Kvartalsvis</SelectItem>
-                  <SelectItem value="yearly">Årsvis</SelectItem>
-                </SelectContent>
-              </Select>
+                onChange={(value) => handlePeriodTypeChange(value as VatPeriodType)}
+                triggerLabel="Period"
+                ariaLabel="Periodicitet"
+              />
             {isYearly ? (
               // Annual VAT covers a räkenskapsår: picked here, not a
               // calendar year.
-              <FiscalYearSelector
+              <FyPicker
                 value={fiscalPeriodId || null}
                 onChange={(id, fp) => {
                   setFiscalPeriodId(id || '')
@@ -1710,35 +1705,35 @@ export function VatDeclarationView() {
               />
             ) : (
               <>
-                  <Select value={String(year)} onValueChange={(value) => setYear(parseInt(value))}>
-                    <SelectTrigger aria-label="År" className="h-9 w-24 tabular-nums">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {yearOptions.map((y) => (
-                        <SelectItem key={y} value={String(y)} className="tabular-nums">
-                          {y}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <Select
+                  <ContextPicker
+                    items={yearOptions.map((y) => ({ id: String(y), label: String(y) }))}
+                    value={String(year)}
+                    onChange={(value) => setYear(parseInt(value))}
+                    triggerLabel={String(year)}
+                    ariaLabel="År"
+                    className="tabular-nums"
+                  />
+                  <ContextPicker
+                    items={getPeriodOptions().map((opt) => ({
+                      id: String(opt.value),
+                      label: opt.label,
+                    }))}
                     value={String(period)}
-                    onValueChange={(value) => setPeriod(parseInt(value))}
-                  >
-                    <SelectTrigger aria-label="Period" className="h-9 w-44">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {getPeriodOptions().map((opt) => (
-                        <SelectItem key={opt.value} value={String(opt.value)}>
-                          {opt.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+                    onChange={(value) => setPeriod(parseInt(value))}
+                    triggerLabel={
+                      getPeriodOptions().find((opt) => opt.value === period)?.label ??
+                      String(period)
+                    }
+                    ariaLabel="Redovisningsperiod"
+                  />
               </>
             )}
+            <ReportExportMenu
+              variant="default"
+              items={[
+                { format: 'xlsx', href: `/api/reports/vat-declaration/xlsx?${vatQueryString()}` },
+              ]}
+            />
       </div>
 
       {error && (