diff --git a/app/globals.css b/app/globals.css
index c482064..4f141da 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -144,6 +144,7 @@ body {
 .pn-bento {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
+  grid-auto-flow: dense;
 }
 
 @media (max-width: 860px) {
diff --git a/components/widgets/system/Widget.tsx b/components/widgets/system/Widget.tsx
index 2446096..00a904b 100644
--- a/components/widgets/system/Widget.tsx
+++ b/components/widgets/system/Widget.tsx
@@ -19,7 +19,7 @@ export function SystemWidget({ widget, widgetId }: { widget: SystemWidget; widge
   const errorMessage = result?.type === "error" ? result.message : null;
 
   return (
-    <WidgetCard span={5} rowSpan={2}>
+    <WidgetCard span={4} rowSpan={2}>
       <div className="text-[10px] tracking-[0.1em] text-accent uppercase">System</div>
       <span className="text-[15px] font-medium text-fg">{widget.name}</span>
       {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
diff --git a/components/widgets/traefik/Widget.tsx b/components/widgets/traefik/Widget.tsx
index 410d57e..af68f4c 100644
--- a/components/widgets/traefik/Widget.tsx
+++ b/components/widgets/traefik/Widget.tsx
@@ -4,6 +4,8 @@ import type { Widget } from "@/lib/config/schema";
 import { useWidgetSubscription } from "@/lib/ws/client";
 import { SkeletonLines } from "@/components/widgets/Skeleton";
 import { WidgetCard } from "@/components/widgets/WidgetCard";
+import { StatusDot } from "@/components/widgets/StatusDot";
+import { BrandIcon } from "@/components/widgets/BrandIcon";
 
 type TraefikWidget = Extract<Widget, { type: "traefik" }>;
 
@@ -15,13 +17,30 @@ export function TraefikWidget({ widget, widgetId }: { widget: TraefikWidget; wid
 
   return (
     <WidgetCard span={4}>
-      <div className="flex items-center justify-between">
-        <span className="text-[15px] font-medium text-fg">{widget.name}</span>
-        {data && (
-          <span className="font-mono text-[11px] tabular-nums text-fg-muted">
-            {data.entrypoints.length} entrypoints
-          </span>
-        )}
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex min-w-0 items-center gap-2">
+          <BrandIcon slug={widget.icon} />
+          {widget.href ? (
+            <a
+              href={widget.href}
+              target="_blank"
+              rel="noreferrer"
+              className="truncate text-[15px] font-medium text-fg hover:text-accent"
+            >
+              {widget.name}
+            </a>
+          ) : (
+            <span className="truncate text-[15px] font-medium text-fg">{widget.name}</span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {data && (
+            <span className="font-mono text-[11px] tabular-nums text-fg-muted">
+              {data.entrypoints.length} entrypoints
+            </span>
+          )}
+          <StatusDot status={data ? "running" : undefined} />
+        </div>
       </div>
       {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
       {!result && !errorMessage && <SkeletonLines count={3} />}
diff --git a/lib/config/schema.ts b/lib/config/schema.ts
index abb5f47..7223cf1 100644
--- a/lib/config/schema.ts
+++ b/lib/config/schema.ts
@@ -62,6 +62,8 @@ export const traefikWidgetSchema = z.object({
   type: z.literal("traefik"),
   name: z.string().default("Traefik"),
   apiUrl: z.string().url(),
+  href: z.string().url().optional(),
+  icon: z.string().optional(),
   interval: durationSchema.default("15s"),
 });