ADD: added first working version

app/routes/companies.$id.customers.tsx

@@ -1,5 +1,13 @@
 import { useState } from "react";
-import { Link, useLoaderData, useParams, useRevalidator } from "react-router";
+import { Link, useLoaderData, useRevalidator } from "react-router";
+
+export const handle = {
+  breadcrumbs: (data: { companyId: string; companyName: string }) => [
+    { label: "Mandanten", href: "/companies" },
+    { label: data.companyName, href: `/companies/${data.companyId}` },
+    { label: "Kunden" },
+  ],
+};
 import { requireUser } from "@/session.server";
 import prisma from "@/lib/prisma";
 import { Button } from "@/components/ui/button";
@@ -47,7 +55,7 @@ export async function loader({ request, params }: { request: Request; params: {
     orderBy: { name: "asc" },
   });
 
-  return { customers, companyId: params.id };
+  return { customers, companyId: params.id, companyName: company.name };
 }
 
 function CustomerForm({

app/routes/companies.$id.edit.tsx

@@ -1,4 +1,12 @@
 import { Link, useLoaderData, useNavigate } from "react-router";
+
+export const handle = {
+  breadcrumbs: (data: { company: { id: string; name: string } }) => [
+    { label: "Mandanten", href: "/companies" },
+    { label: data.company.name, href: `/companies/${data.company.id}` },
+    { label: "Bearbeiten" },
+  ],
+};
 import { requireUser } from "@/session.server";
 import prisma from "@/lib/prisma";
 import { CompanyForm } from "@/components/company/company-form";

app/routes/companies.$id.invoices.$invoiceId.tsx

@@ -1,4 +1,13 @@
 import { Link, useLoaderData, useNavigate, useRevalidator } from "react-router";
+
+export const handle = {
+  breadcrumbs: (data: { invoice: { companyId: string; number: string; company: { name: string } } }) => [
+    { label: "Mandanten", href: "/companies" },
+    { label: data.invoice.company.name, href: `/companies/${data.invoice.companyId}` },
+    { label: "Rechnungen", href: `/companies/${data.invoice.companyId}/invoices` },
+    { label: data.invoice.number },
+  ],
+};
 import { requireUser } from "@/session.server";
 import prisma from "@/lib/prisma";
 import { useState } from "react";

app/routes/companies.$id.invoices.new.tsx

@@ -1,4 +1,13 @@
 import { Link, useLoaderData, useNavigate, redirect } from "react-router";
+
+export const handle = {
+  breadcrumbs: (data: { company: { id: string; name: string } }) => [
+    { label: "Mandanten", href: "/companies" },
+    { label: data.company.name, href: `/companies/${data.company.id}` },
+    { label: "Rechnungen", href: `/companies/${data.company.id}/invoices` },
+    { label: "Neue Rechnung" },
+  ],
+};
 import { requireUser } from "@/session.server";
 import prisma from "@/lib/prisma";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

app/routes/companies.$id.invoices.tsx

@@ -1,4 +1,12 @@
 import { Link, useLoaderData } from "react-router";
+
+export const handle = {
+  breadcrumbs: (data: { company: { id: string; name: string } }) => [
+    { label: "Mandanten", href: "/companies" },
+    { label: data.company.name, href: `/companies/${data.company.id}` },
+    { label: "Rechnungen" },
+  ],
+};
 import { requireUser } from "@/session.server";
 import prisma from "@/lib/prisma";
 import { Button } from "@/components/ui/button";

app/routes/companies.$id.reports.tsx

@@ -1,9 +1,29 @@
 import { useState, useEffect } from "react";
-import { Link, useParams } from "react-router";
+import { Link, useLoaderData } from "react-router";
+import { requireUser } from "@/session.server";
+import prisma from "@/lib/prisma";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { formatCurrency } from "@/lib/tax";
 import { ChevronLeft, TrendingUp, BarChart3 } from "lucide-react";
 
+export const handle = {
+  breadcrumbs: (data: { companyId: string; companyName: string }) => [
+    { label: "Mandanten", href: "/companies" },
+    { label: data.companyName, href: `/companies/${data.companyId}` },
+    { label: "Berichte" },
+  ],
+};
+
+export async function loader({ request, params }: { request: Request; params: { id: string } }) {
+  const user = await requireUser(request);
+  const company = await prisma.company.findFirst({
+    where: { id: params.id, userId: user.id },
+    select: { id: true, name: true },
+  });
+  if (!company) throw new Response("Not Found", { status: 404 });
+  return { companyId: company.id, companyName: company.name };
+}
+
 const MONTHS = ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"];
 
 interface TaxGroup {
@@ -42,7 +62,7 @@ interface ReportData {
 }
 
 export default function ReportsPage() {
-  const { id: companyId } = useParams<{ id: string }>();
+  const { companyId } = useLoaderData<typeof loader>();
   const [year, setYear] = useState(new Date().getFullYear());
   const [data, setData] = useState<ReportData | null>(null);
   const [loading, setLoading] = useState(true);

app/routes/companies.$id.tsx

@@ -11,6 +11,13 @@ import {
 } from "lucide-react";
 import { InvoiceStatus } from "@prisma/client";
 
+export const handle = {
+  breadcrumbs: (data: { company: { id: string; name: string } }) => [
+    { label: "Mandanten", href: "/companies" },
+    { label: data.company.name },
+  ],
+};
+
 const statusLabels: Record<InvoiceStatus, string> = {
   DRAFT: "Entwurf",
   SENT: "Versendet",

app/routes/companies.new.tsx

@@ -1,4 +1,11 @@
 import { Link, useNavigate } from "react-router";
+
+export const handle = {
+  breadcrumbs: () => [
+    { label: "Mandanten", href: "/companies" },
+    { label: "Neuer Mandant" },
+  ],
+};
 import { CompanyForm } from "@/components/company/company-form";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { ChevronLeft } from "lucide-react";

app/routes/companies.tsx

@@ -1,88 +1,281 @@
 import { Link, useLoaderData } from "react-router";
+import { useState } from "react";
 import { requireUser } from "@/session.server";
 import prisma from "@/lib/prisma";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Building2, Plus, FileText, Users } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { formatCurrency, formatDate } from "@/lib/tax";
+import {
+  Building2, Plus, FileText, Users, X, Edit, Receipt,
+  Mail, Phone, CreditCard, ChevronRight,
+} from "lucide-react";
+import { InvoiceStatus } from "@prisma/client";
+
+export const handle = {
+  breadcrumbs: () => [{ label: "Mandanten" }],
+};
+
+const statusLabels: Record<InvoiceStatus, string> = {
+  DRAFT: "Entwurf",
+  SENT: "Versendet",
+  PAID: "Bezahlt",
+  CANCELLED: "Storniert",
+};
+
+const statusVariants: Record<
+  InvoiceStatus,
+  "secondary" | "default" | "success" | "destructive" | "warning"
+> = {
+  DRAFT: "secondary",
+  SENT: "warning",
+  PAID: "success",
+  CANCELLED: "destructive",
+};
 
 export async function loader({ request }: { request: Request }) {
   const user = await requireUser(request);
   const companies = await prisma.company.findMany({
     where: { userId: user.id },
-    include: { _count: { select: { invoices: true, customers: true } } },
+    include: {
+      _count: { select: { invoices: true, customers: true } },
+      invoices: {
+        include: { customer: { select: { name: true } } },
+        orderBy: { issueDate: "desc" },
+      },
+    },
     orderBy: { name: "asc" },
   });
-  return { companies };
+  return {
+    companies: companies.map((c) => ({
+      ...c,
+      invoices: c.invoices.map((inv) => ({
+        ...inv,
+        grossTotal: Number(inv.grossTotal),
+        issueDate: inv.issueDate.toISOString(),
+        dueDate: inv.dueDate.toISOString(),
+      })),
+    })),
+  };
 }
 
 export default function CompaniesPage() {
   const { companies } = useLoaderData<typeof loader>();
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const selected = companies.find((c) => c.id === selectedId) ?? null;
 
   return (
-    <div>
-      <div className="flex items-center justify-between mb-8">
-        <div>
-          <h1 className="text-2xl font-bold text-gray-900">Mandanten</h1>
-          <p className="text-gray-500 mt-1">{companies.length} Mandanten verwaltet</p>
+    <div className="animate-fade-in flex gap-6">
+      {/* Kacheln */}
+      <div className={selected ? "flex-1 min-w-0" : "w-full"}>
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-2xl font-bold text-slate-900">Mandanten</h1>
+            <p className="text-slate-500 mt-1 text-sm">{companies.length} Mandanten verwaltet</p>
+          </div>
+          <Button asChild>
+            <Link to="/companies/new">
+              <Plus className="h-4 w-4" />
+              Mandant anlegen
+            </Link>
+          </Button>
         </div>
-        <Button asChild>
-          <Link to="/companies/new">
-            <Plus className="h-4 w-4" />
-            Mandant anlegen
-          </Link>
-        </Button>
-      </div>
 
-      {companies.length === 0 ? (
-        <Card>
-          <CardContent className="py-16 text-center">
-            <Building2 className="h-12 w-12 text-gray-300 mx-auto mb-4" />
-            <h3 className="font-semibold text-gray-700 mb-2">Noch keine Mandanten</h3>
-            <p className="text-gray-500 mb-6 text-sm">Legen Sie Ihren ersten Mandanten an, um loszulegen.</p>
+        {companies.length === 0 ? (
+          <div className="bg-white rounded-2xl border border-slate-200 shadow-sm py-16 text-center">
+            <div className="flex items-center justify-center w-14 h-14 rounded-2xl bg-slate-100 mx-auto mb-4">
+              <Building2 className="h-7 w-7 text-slate-400" />
+            </div>
+            <h3 className="font-semibold text-slate-700 mb-1">Noch keine Mandanten</h3>
+            <p className="text-slate-400 mb-6 text-sm">Legen Sie Ihren ersten Mandanten an, um loszulegen.</p>
             <Button asChild>
               <Link to="/companies/new">
                 <Plus className="h-4 w-4" />
                 Ersten Mandanten anlegen
               </Link>
             </Button>
-          </CardContent>
-        </Card>
-      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-          {companies.map((company) => (
-            <Link key={company.id} to={`/companies/${company.id}`}>
-              <Card className="hover:shadow-md transition-all hover:border-indigo-200 cursor-pointer h-full">
-                <CardHeader>
-                  <div className="flex items-start gap-3">
-                    <div className="p-2 rounded-lg bg-indigo-50 shrink-0">
+          </div>
+        ) : (
+          <div className={`grid gap-4 ${selected ? "grid-cols-1 lg:grid-cols-2" : "grid-cols-1 md:grid-cols-2 xl:grid-cols-3"}`}>
+            {companies.map((company) => {
+              const isActive = selectedId === company.id;
+              return (
+                <button
+                  key={company.id}
+                  type="button"
+                  onClick={() => setSelectedId(isActive ? null : company.id)}
+                  className={`text-left bg-white rounded-2xl border shadow-sm p-5 hover:shadow-md transition-all duration-200 cursor-pointer w-full ${
+                    isActive
+                      ? "border-indigo-400 ring-2 ring-indigo-100"
+                      : "border-slate-200 hover:border-indigo-200"
+                  }`}
+                >
+                  <div className="flex items-start gap-3 mb-4">
+                    <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-indigo-50 shrink-0">
                       <Building2 className="h-5 w-5 text-indigo-600" />
                     </div>
                     <div className="min-w-0">
-                      <CardTitle className="text-base truncate">{company.name}</CardTitle>
+                      <p className="font-semibold text-slate-900 text-sm truncate">{company.name}</p>
                       {company.legalForm && (
-                        <p className="text-xs text-gray-500 mt-0.5">{company.legalForm}</p>
+                        <p className="text-xs text-slate-400 mt-0.5">{company.legalForm}</p>
                       )}
                     </div>
                   </div>
-                </CardHeader>
-                <CardContent>
-                  <div className="flex gap-4 text-sm text-gray-600">
-                    <span className="flex items-center gap-1">
+                  <div className="flex gap-4 text-xs text-slate-500">
+                    <span className="flex items-center gap-1.5">
                       <FileText className="h-3.5 w-3.5" />
                       {company._count.invoices} Rechnungen
                     </span>
-                    <span className="flex items-center gap-1">
+                    <span className="flex items-center gap-1.5">
                       <Users className="h-3.5 w-3.5" />
                       {company._count.customers} Kunden
                     </span>
                   </div>
                   {company.city && (
-                    <p className="text-xs text-gray-400 mt-2">{company.zip} {company.city}</p>
+                    <p className="text-xs text-slate-400 mt-2">{company.zip} {company.city}</p>
                   )}
-                </CardContent>
-              </Card>
-            </Link>
-          ))}
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Detail-Panel */}
+      {selected && (
+        <div className="w-[460px] shrink-0">
+          <div className="bg-white rounded-2xl border border-slate-200 shadow-sm sticky top-[calc(3.5rem+2rem)] max-h-[calc(100vh-3.5rem-4rem)] overflow-y-auto">
+            {/* Header */}
+            <div className="flex items-start justify-between p-5 border-b border-slate-100">
+              <div className="flex items-start gap-3">
+                <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-indigo-50 shrink-0">
+                  <Building2 className="h-5 w-5 text-indigo-600" />
+                </div>
+                <div>
+                  <h2 className="font-semibold text-slate-900">{selected.name}</h2>
+                  {selected.legalForm && (
+                    <p className="text-xs text-slate-400 mt-0.5">{selected.legalForm}</p>
+                  )}
+                </div>
+              </div>
+              <button
+                type="button"
+                onClick={() => setSelectedId(null)}
+                className="p-1.5 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-colors"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+
+            {/* Aktionen */}
+            <div className="flex gap-2 p-4 border-b border-slate-100">
+              <Button variant="outline" size="sm" asChild className="flex-1">
+                <Link to={`/companies/${selected.id}/edit`}>
+                  <Edit className="h-3.5 w-3.5" />
+                  Bearbeiten
+                </Link>
+              </Button>
+              <Button size="sm" asChild className="flex-1">
+                <Link to={`/companies/${selected.id}/invoices/new`}>
+                  <Plus className="h-3.5 w-3.5" />
+                  Neue Rechnung
+                </Link>
+              </Button>
+            </div>
+
+            {/* Firmendaten */}
+            <div className="p-4 border-b border-slate-100 grid grid-cols-2 gap-3 text-sm">
+              {selected.city && (
+                <div>
+                  <p className="text-xs text-slate-400 mb-0.5">Adresse</p>
+                  <p className="text-slate-700">{selected.zip} {selected.city}</p>
+                </div>
+              )}
+              {selected.email && (
+                <div>
+                  <p className="text-xs text-slate-400 mb-0.5">E-Mail</p>
+                  <p className="text-slate-700 flex items-center gap-1.5">
+                    <Mail className="h-3.5 w-3.5 text-slate-400 shrink-0" />
+                    <span className="truncate">{selected.email}</span>
+                  </p>
+                </div>
+              )}
+              {selected.phone && (
+                <div>
+                  <p className="text-xs text-slate-400 mb-0.5">Telefon</p>
+                  <p className="text-slate-700 flex items-center gap-1.5">
+                    <Phone className="h-3.5 w-3.5 text-slate-400 shrink-0" />
+                    {selected.phone}
+                  </p>
+                </div>
+              )}
+              {selected.taxId && (
+                <div>
+                  <p className="text-xs text-slate-400 mb-0.5">Steuernummer</p>
+                  <p className="text-slate-700 font-mono text-xs">{selected.taxId}</p>
+                </div>
+              )}
+              {selected.vatId && (
+                <div>
+                  <p className="text-xs text-slate-400 mb-0.5">USt-IdNr.</p>
+                  <p className="text-slate-700 font-mono text-xs">{selected.vatId}</p>
+                </div>
+              )}
+              {selected.bankIban && (
+                <div className="col-span-2">
+                  <p className="text-xs text-slate-400 mb-0.5">IBAN</p>
+                  <p className="text-slate-700 flex items-center gap-1.5">
+                    <CreditCard className="h-3.5 w-3.5 text-slate-400 shrink-0" />
+                    <span className="font-mono text-xs">{selected.bankIban}</span>
+                  </p>
+                </div>
+              )}
+            </div>
+
+            {/* Rechnungen */}
+            <div className="p-4">
+              <div className="flex items-center justify-between mb-3">
+                <h3 className="text-sm font-semibold text-slate-900">Rechnungen</h3>
+                <Link
+                  to={`/companies/${selected.id}/invoices`}
+                  className="text-xs text-indigo-600 hover:text-indigo-700 flex items-center gap-0.5"
+                >
+                  Alle <ChevronRight className="h-3.5 w-3.5" />
+                </Link>
+              </div>
+
+              {selected.invoices.length === 0 ? (
+                <div className="py-8 text-center text-slate-400">
+                  <Receipt className="h-7 w-7 mx-auto mb-2 text-slate-200" />
+                  <p className="text-sm">Noch keine Rechnungen</p>
+                </div>
+              ) : (
+                <div className="divide-y divide-slate-100">
+                  {selected.invoices.map((invoice) => (
+                    <Link
+                      key={invoice.id}
+                      to={`/companies/${selected.id}/invoices/${invoice.id}`}
+                      className="flex items-center justify-between py-2.5 hover:bg-slate-50 -mx-1 px-1 rounded-lg transition-colors"
+                    >
+                      <div className="min-w-0">
+                        <p className="text-sm font-medium text-slate-900">{invoice.number}</p>
+                        <p className="text-xs text-slate-400 truncate">
+                          {invoice.customer.name} · {formatDate(invoice.issueDate)}
+                        </p>
+                      </div>
+                      <div className="flex items-center gap-2 shrink-0 ml-2">
+                        <Badge variant={statusVariants[invoice.status]}>
+                          {statusLabels[invoice.status]}
+                        </Badge>
+                        <span className="text-sm font-medium text-slate-900">
+                          {formatCurrency(invoice.grossTotal)}
+                        </span>
+                      </div>
+                    </Link>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
         </div>
       )}
     </div>

app/routes/dashboard-layout.tsx

@@ -1,6 +1,6 @@
 import { Outlet, useLoaderData } from "react-router";
 import { requireUser } from "@/session.server";
-import { Sidebar } from "@/components/layout/sidebar";
+import { Topbar } from "@/components/layout/topbar";
 
 export async function loader({ request }: { request: Request }) {
   const user = await requireUser(request);
@@ -11,9 +11,9 @@ export default function DashboardLayout() {
   const { userName } = useLoaderData<typeof loader>();
 
   return (
-    <div className="flex min-h-screen bg-gray-50">
-      <Sidebar userName={userName} />
-      <main className="flex-1 overflow-auto">
+    <div className="min-h-screen bg-slate-50 flex flex-col">
+      <Topbar userName={userName} />
+      <main className="flex-1">
         <div className="max-w-7xl mx-auto px-6 py-8">
           <Outlet />
         </div>

app/routes/home.tsx

@@ -3,9 +3,13 @@ import { requireUser } from "@/session.server";
 import prisma from "@/lib/prisma";
 import { formatCurrency } from "@/lib/tax";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Building2, FileText, Euro } from "lucide-react";
+import { Building2, FileText, Euro, TrendingUp } from "lucide-react";
 import { InvoiceStatus } from "@prisma/client";
 
+export const handle = {
+  breadcrumbs: () => [{ label: "Dashboard" }],
+};
+
 export async function loader({ request }: { request: Request }) {
   const user = await requireUser(request);
   const userId = user.id;
@@ -38,116 +42,150 @@ export async function loader({ request }: { request: Request }) {
   };
 }
 
+const statCards = [
+  {
+    key: "companies",
+    label: "Mandanten",
+    icon: Building2,
+    gradient: "from-indigo-500 to-violet-600",
+    bg: "bg-indigo-50",
+    iconColor: "text-indigo-600",
+    shadowColor: "shadow-indigo-500/15",
+  },
+  {
+    key: "totalInvoices",
+    label: "Rechnungen gesamt",
+    icon: FileText,
+    gradient: "from-blue-500 to-cyan-500",
+    bg: "bg-blue-50",
+    iconColor: "text-blue-600",
+    shadowColor: "shadow-blue-500/15",
+  },
+  {
+    key: "openInvoices",
+    label: "Offen / Entwurf",
+    icon: TrendingUp,
+    gradient: "from-amber-500 to-orange-500",
+    bg: "bg-amber-50",
+    iconColor: "text-amber-600",
+    shadowColor: "shadow-amber-500/15",
+  },
+  {
+    key: "paidTotal",
+    label: "Bezahlt (brutto)",
+    icon: Euro,
+    gradient: "from-emerald-500 to-teal-500",
+    bg: "bg-emerald-50",
+    iconColor: "text-emerald-600",
+    shadowColor: "shadow-emerald-500/15",
+  },
+];
+
 export default function DashboardPage() {
   const { companies, totalInvoices, paidTotal, openInvoices } = useLoaderData<typeof loader>();
 
+  const statValues: Record<string, string | number> = {
+    companies: companies.length,
+    totalInvoices,
+    openInvoices,
+    paidTotal: formatCurrency(paidTotal),
+  };
+
   return (
-    <div>
+    <div className="animate-fade-in">
       <div className="mb-8">
-        <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
-        <p className="text-gray-500 mt-1">Übersicht aller Mandanten und Rechnungen</p>
+        <h1 className="text-2xl font-bold text-slate-900">Dashboard</h1>
+        <p className="text-slate-500 mt-1 text-sm">Übersicht aller Mandanten und Rechnungen</p>
       </div>
 
+      {/* Stats */}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-4">
-              <div className="p-2 rounded-lg bg-indigo-50">
-                <Building2 className="h-5 w-5 text-indigo-600" />
-              </div>
-              <div>
-                <p className="text-2xl font-bold text-gray-900">{companies.length}</p>
-                <p className="text-sm text-gray-500">Mandanten</p>
+        {statCards.map((card) => {
+          const Icon = card.icon;
+          return (
+            <div
+              key={card.key}
+              className={`bg-white rounded-2xl border border-slate-200 shadow-sm ${card.shadowColor} p-5 hover:shadow-md transition-shadow duration-200`}
+            >
+              <div className="flex items-start justify-between mb-4">
+                <div className={`p-2.5 rounded-xl ${card.bg}`}>
+                  <Icon className={`h-5 w-5 ${card.iconColor}`} />
+                </div>
+                <span className="text-xs font-medium text-slate-400 bg-slate-100 rounded-full px-2 py-0.5">
+                  Gesamt
+                </span>
               </div>
+              <p className="text-2xl font-bold text-slate-900 tabular-nums">
+                {statValues[card.key]}
+              </p>
+              <p className="text-sm text-slate-500 mt-0.5">{card.label}</p>
             </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-4">
-              <div className="p-2 rounded-lg bg-blue-50">
-                <FileText className="h-5 w-5 text-blue-600" />
-              </div>
-              <div>
-                <p className="text-2xl font-bold text-gray-900">{totalInvoices}</p>
-                <p className="text-sm text-gray-500">Rechnungen gesamt</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-4">
-              <div className="p-2 rounded-lg bg-yellow-50">
-                <FileText className="h-5 w-5 text-yellow-600" />
-              </div>
-              <div>
-                <p className="text-2xl font-bold text-gray-900">{openInvoices}</p>
-                <p className="text-sm text-gray-500">Offen / Entwurf</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-4">
-              <div className="p-2 rounded-lg bg-green-50">
-                <Euro className="h-5 w-5 text-green-600" />
-              </div>
-              <div>
-                <p className="text-2xl font-bold text-gray-900">{formatCurrency(paidTotal)}</p>
-                <p className="text-sm text-gray-500">Bezahlt (brutto)</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+          );
+        })}
       </div>
 
+      {/* Companies */}
       <div>
         <div className="flex items-center justify-between mb-4">
-          <h2 className="text-lg font-semibold text-gray-900">Mandanten</h2>
-          <Link to="/companies" className="text-sm text-indigo-600 hover:text-indigo-700 font-medium">
-            Alle anzeigen →
+          <div>
+            <h2 className="text-lg font-semibold text-slate-900">Mandanten</h2>
+            <p className="text-xs text-slate-500 mt-0.5">{companies.length} Mandanten verwaltet</p>
+          </div>
+          <Link
+            to="/companies"
+            className="text-sm text-indigo-600 hover:text-indigo-700 font-medium inline-flex items-center gap-1 transition-colors"
+          >
+            Alle anzeigen
+            <span aria-hidden>→</span>
           </Link>
         </div>
 
         {companies.length === 0 ? (
-          <Card>
-            <CardContent className="py-12 text-center">
-              <Building2 className="h-12 w-12 text-gray-300 mx-auto mb-4" />
-              <p className="text-gray-500 mb-4">Noch keine Mandanten angelegt.</p>
-              <Link
-                to="/companies/new"
-                className="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 transition-colors"
-              >
-                Mandant anlegen
-              </Link>
-            </CardContent>
-          </Card>
+          <div className="bg-white rounded-2xl border border-slate-200 shadow-sm py-14 text-center">
+            <div className="flex items-center justify-center w-14 h-14 rounded-2xl bg-slate-100 mx-auto mb-4">
+              <Building2 className="h-7 w-7 text-slate-400" />
+            </div>
+            <p className="text-slate-700 font-medium mb-1">Noch keine Mandanten angelegt</p>
+            <p className="text-slate-400 text-sm mb-6">Legen Sie Ihren ersten Mandanten an, um loszulegen.</p>
+            <Link
+              to="/companies/new"
+              className="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-indigo-700 transition-colors shadow-sm shadow-indigo-500/25"
+            >
+              Mandant anlegen
+            </Link>
+          </div>
         ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+          <div className="flex flex-wrap justify-center gap-4">
             {companies.map((company) => (
-              <Link key={company.id} to={`/companies/${company.id}`}>
-                <Card className="hover:shadow-md transition-shadow cursor-pointer">
-                  <CardHeader>
-                    <CardTitle className="text-base">{company.name}</CardTitle>
-                    {company.legalForm && (
-                      <p className="text-xs text-gray-500">{company.legalForm}</p>
-                    )}
-                  </CardHeader>
-                  <CardContent>
-                    <div className="flex gap-4 text-sm text-gray-600">
-                      <span>{company._count.invoices} Rechnungen</span>
-                      <span>{company._count.customers} Kunden</span>
+              <Link key={company.id} to={`/companies/${company.id}`} className="w-full sm:w-80">
+                <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-5 hover:shadow-md hover:border-indigo-200 transition-all duration-200 cursor-pointer h-full">
+                  <div className="flex items-start gap-3 mb-4">
+                    <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-indigo-50 shrink-0">
+                      <Building2 className="h-5 w-5 text-indigo-600" />
                     </div>
-                    {company.city && (
-                      <p className="text-xs text-gray-400 mt-1">{company.zip} {company.city}</p>
-                    )}
-                  </CardContent>
-                </Card>
+                    <div className="min-w-0">
+                      <p className="font-semibold text-slate-900 text-sm truncate">{company.name}</p>
+                      {company.legalForm && (
+                        <p className="text-xs text-slate-400 mt-0.5">{company.legalForm}</p>
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex gap-4 text-xs text-slate-500">
+                    <span className="flex items-center gap-1.5">
+                      <FileText className="h-3.5 w-3.5" />
+                      {company._count.invoices} Rechnungen
+                    </span>
+                    <span className="flex items-center gap-1.5">
+                      <Building2 className="h-3.5 w-3.5" />
+                      {company._count.customers} Kunden
+                    </span>
+                  </div>
+                  {company.city && (
+                    <p className="text-xs text-slate-400 mt-2">
+                      {company.zip} {company.city}
+                    </p>
+                  )}
+                </div>
               </Link>
             ))}
           </div>

app/routes/login.tsx

@@ -3,7 +3,6 @@ import { login, createUserSession, getUserSession } from "@/session.server";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Calculator, AlertCircle } from "lucide-react";
 
 export async function loader({ request }: { request: Request }) {
@@ -29,26 +28,69 @@ export default function LoginPage() {
   const loading = navigation.state === "submitting";
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-indigo-50 to-blue-50 flex items-center justify-center p-4">
-      <div className="w-full max-w-md">
-        <div className="text-center mb-8">
-          <div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-indigo-600 mb-4">
-            <Calculator className="w-7 h-7 text-white" />
-          </div>
-          <h1 className="text-2xl font-bold text-gray-900">Annas Rechnungsmanager</h1>
-          <p className="text-gray-500 mt-1">Buchhaltung & Rechnungsverwaltung</p>
+    <div className="min-h-screen flex">
+      {/* Left decorative panel */}
+      <div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: "var(--sidebar-bg)" }}>
+        <div className="absolute inset-0">
+          {/* Decorative gradient blobs */}
+          <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-indigo-600/20 rounded-full blur-3xl" />
+          <div className="absolute bottom-1/3 right-1/4 w-48 h-48 bg-violet-600/20 rounded-full blur-3xl" />
+          <div className="absolute top-2/3 left-1/3 w-32 h-32 bg-blue-600/15 rounded-full blur-2xl" />
         </div>
+        <div className="relative z-10 flex flex-col justify-center px-14">
+          <div className="flex items-center gap-3 mb-10">
+            <div className="flex items-center justify-center w-11 h-11 rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 shadow-lg shadow-indigo-500/40">
+              <Calculator className="w-5 h-5 text-white" />
+            </div>
+            <span className="text-white font-semibold text-lg">Rechnungsmanager</span>
+          </div>
+          <h2 className="text-4xl font-bold text-white leading-tight mb-4">
+            Buchhaltung<br />
+            <span className="text-indigo-400">einfach gemacht.</span>
+          </h2>
+          <p className="text-slate-400 text-base leading-relaxed max-w-xs">
+            Verwalten Sie Mandanten, erstellen Sie Rechnungen und behalten Sie den Überblick über alle Zahlungen.
+          </p>
 
-        <Card>
-          <CardHeader>
-            <CardTitle>Anmelden</CardTitle>
-            <CardDescription>Geben Sie Ihre Zugangsdaten ein</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Form method="post" className="space-y-4">
+          <div className="mt-12 space-y-4">
+            {[
+              { label: "Mandantenverwaltung", desc: "Alle Firmen im Blick" },
+              { label: "Rechnungserstellung", desc: "Schnell und professionell" },
+              { label: "Zahlungsübersicht", desc: "Offene Posten auf einen Blick" },
+            ].map((feat) => (
+              <div key={feat.label} className="flex items-center gap-3">
+                <div className="w-2 h-2 rounded-full bg-indigo-400 shrink-0" />
+                <div>
+                  <span className="text-slate-200 text-sm font-medium">{feat.label}</span>
+                  <span className="text-slate-500 text-sm"> — {feat.desc}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Right login form */}
+      <div className="flex-1 flex items-center justify-center p-8 bg-slate-50">
+        <div className="w-full max-w-sm animate-fade-in">
+          {/* Mobile logo */}
+          <div className="flex lg:hidden items-center gap-3 mb-8 justify-center">
+            <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 shadow-md">
+              <Calculator className="w-5 h-5 text-white" />
+            </div>
+            <span className="font-semibold text-slate-900 text-base">Rechnungsmanager</span>
+          </div>
+
+          <div className="mb-8">
+            <h1 className="text-2xl font-bold text-slate-900">Willkommen zurück</h1>
+            <p className="text-slate-500 mt-1 text-sm">Melden Sie sich mit Ihren Zugangsdaten an</p>
+          </div>
+
+          <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-8">
+            <Form method="post" className="space-y-5">
               {actionData?.error && (
-                <div className="flex items-center gap-2 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
-                  <AlertCircle className="h-4 w-4 shrink-0" />
+                <div className="flex items-center gap-2.5 rounded-xl bg-red-50 border border-red-100 p-3.5 text-sm text-red-700">
+                  <AlertCircle className="h-4 w-4 shrink-0 text-red-500" />
                   {actionData.error}
                 </div>
               )}
@@ -76,12 +118,12 @@ export default function LoginPage() {
                 />
               </div>
 
-              <Button type="submit" className="w-full" disabled={loading}>
+              <Button type="submit" className="w-full h-10 mt-2" disabled={loading}>
                 {loading ? "Anmelden..." : "Anmelden"}
               </Button>
             </Form>
-          </CardContent>
-        </Card>
+          </div>
+        </div>
       </div>
     </div>
   );