diff --git a/src/components/atoms/SBBLineBadge.tsx b/src/components/atoms/SBBLineBadge.tsx
new file mode 100644
index 0000000..617d091
--- /dev/null
+++ b/src/components/atoms/SBBLineBadge.tsx
@@ -0,0 +1,5 @@
+export const SBBLineBadge = ({ name }: { name: string; category?: string }) => (
+  <span className="border border-white text-white px-2 py-0.5 font-bold min-w-[56px] text-center text-xl inline-block">
+    {name}
+  </span>
+);
diff --git a/src/components/molecules/SBBDepartureItem.tsx b/src/components/molecules/SBBDepartureItem.tsx
new file mode 100644
index 0000000..d09d1b2
--- /dev/null
+++ b/src/components/molecules/SBBDepartureItem.tsx
@@ -0,0 +1,24 @@
+import { SBBLineBadge } from '../atoms/SBBLineBadge';
+import { SBBDeparture } from '../../types';
+import { useAlwaysOn } from '../../contexts/AlwaysOnContext';
+
+export const SBBDepartureItem = ({ departure }: { departure: SBBDeparture }) => {
+  const alwaysOn = useAlwaysOn();
+  const dep = departure.stop.departure ? new Date(departure.stop.departure) : null;
+  const diffMin = dep ? Math.round((dep.getTime() - Date.now()) / 60000) : null;
+  const timeText = diffMin === null ? '—' : diffMin <= 0 ? 'Now' : `${diffMin} min`;
+  const delay = departure.stop.delay;
+
+  return (
+    <div className={`flex justify-between items-center py-3 border-b border-zinc-700 text-2xl ${alwaysOn ? 'font-light' : ''}`}>
+      <div className="flex items-center gap-4">
+        <SBBLineBadge name={`${departure.category} ${departure.number}`} category={departure.category} />
+        <span>{departure.to}</span>
+      </div>
+      <div className={`flex items-center gap-2 ${alwaysOn ? 'font-normal' : 'font-bold'}`}>
+        {delay != null && delay > 0 && <span className="text-lg font-normal">+{delay}'</span>}
+        <span>{timeText}</span>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/organisms/SBBDepartureList.tsx b/src/components/organisms/SBBDepartureList.tsx
new file mode 100644
index 0000000..c8a5a5a
--- /dev/null
+++ b/src/components/organisms/SBBDepartureList.tsx
@@ -0,0 +1,14 @@
+import { SBBDepartureItem } from '../molecules/SBBDepartureItem';
+import { SBBDeparture } from '../../types';
+
+export const SBBDepartureList = ({ departures, loading }: { departures: SBBDeparture[]; loading: boolean }) => {
+  if (loading && departures.length === 0) return <p className="text-gray-500 text-xl mt-4">Loading...</p>;
+  if (!loading && departures.length === 0) return <p className="text-gray-500 text-xl mt-4">No departures.</p>;
+  return (
+    <div className="flex-1 overflow-hidden">
+      {departures.map((dep, i) => (
+        <SBBDepartureItem key={`${dep.name}-${i}`} departure={dep} />
+      ))}
+    </div>
+  );
+};