diff --git a/frontend/src/pages/TripChecklist.tsx b/frontend/src/pages/TripChecklist.tsx
index ff90a36..83eac91 100644
--- a/frontend/src/pages/TripChecklist.tsx
+++ b/frontend/src/pages/TripChecklist.tsx
@@ -67,6 +67,18 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
   const trip = trips.find((t) => t.id === id);
   const [selectedTags, setSelectedTags] = useState<any[]>([]);
 
+  // Sort tags: mitnahme (normal) -> bedingung (mandatory) -> kategorie (category),
+  // each group sorted alphabetically (German collation, base sensitivity).
+  function sortTagsForDisplay(tags: any[]) {
+    const typeOrder = (t: any) => (t.category ? 2 : t.mandatory ? 1 : 0);
+    return [...tags].sort((a, b) => {
+      const ta = typeOrder(a);
+      const tb = typeOrder(b);
+      if (ta !== tb) return ta - tb;
+      return a.name.localeCompare(b.name, "de", { sensitivity: "base" });
+    });
+  }
+
   useEffect(() => {
     if (trip) {
       setSelectedTags(trip.selected_tags);
@@ -244,7 +256,7 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
               {selectedTags.length === 0 ? (
                 <span className="text-gray-400 text-sm">keine</span>
               ) : (
-                selectedTags.map((tag: any) => (
+                sortTagsForDisplay(selectedTags).map((tag: any) => (
                   <Tag
                     key={tag.id}
                     tag={tag}
@@ -350,7 +362,7 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
                     {selectedTags.length === 0 ? (
                       <span className="text-gray-400 text-sm">keine</span>
                     ) : (
-                      selectedTags.map((tag: any) => (
+                      sortTagsForDisplay(selectedTags).map((tag: any) => (
                         <Tag
                           key={tag.id}
                           tag={tag}