diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5c03d4b..d268c54 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -44,7 +44,7 @@ export default function App() {
   }
 
   return (
-    <div className="p-4 max-w-2xl mx-auto">
+    <div className="p-4 max-w-5xl mx-auto">
       <h1 className="text-2xl font-bold mb-4">Packlist</h1>
 
       <div className="flex gap-2 mb-4">
diff --git a/frontend/src/pages/TripChecklist.tsx b/frontend/src/pages/TripChecklist.tsx
index b6ab5d8..30fdf61 100644
--- a/frontend/src/pages/TripChecklist.tsx
+++ b/frontend/src/pages/TripChecklist.tsx
@@ -127,54 +127,10 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
 
     return (
       <>
-        {normalItems.map((item) => (
-          <li
-            key={item.id}
-            className={
-              "flex items-center gap-2 cursor-pointer select-none px-2 py-1 rounded group " +
-              (item.checked ? "bg-green-100" : "hover:bg-gray-100")
-            }
-            onClick={async () => {
-              await toggleTripItem(item.id);
-              const updated = await getTripItems(id!);
-              setItems(updated);
-            }}
-          >
-            <input
-              type="checkbox"
-              checked={item.checked}
-              readOnly
-              tabIndex={-1}
-              className="pointer-events-none"
-            />
-            <span className={item.checked ? "line-through text-gray-400" : ""}>
-              {item.name_calculated}
-            </span>
-            {item.item && item.item.tags && item.item.tags.length > 0 && (
-              <span className="ml-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                {[...item.item.tags]
-                  .slice()
-                  .sort((a, b) => a.name.localeCompare(b.name))
-                  .map((tag: any) => (
-                    <span
-                      key={tag.id}
-                      className="text-xs text-gray-400 rounded px-1 py-0.5"
-                    >
-                      #{tag.name}
-                    </span>
-                  ))}
-              </span>
-            )}
-          </li>
-        ))}
-        {Object.entries(slashCategoryMap).map(([cat, catItems]) => (
-          <React.Fragment key={cat}>
-            <li className="mt-2 mb-1 flex items-center gap-2">
-              <h3 className="text-base font-semibold text-gray-600 m-0">
-                {cat.charAt(0).toUpperCase() + cat.slice(1)}
-              </h3>
-            </li>
-            {catItems.map((item) => (
+        {/* Haupt-Items als Grid */}
+        {normalItems.length > 0 && (
+          <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-2 mb-4">
+            {normalItems.map((item) => (
               <li
                 key={item.id}
                 className={
@@ -195,7 +151,7 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
                   className="pointer-events-none"
                 />
                 <span className={item.checked ? "line-through text-gray-400" : ""}>
-                  {item._sub}
+                  {item.name_calculated}
                 </span>
                 {item.item && item.item.tags && item.item.tags.length > 0 && (
                   <span className="ml-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
@@ -214,6 +170,58 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
                 )}
               </li>
             ))}
+          </ul>
+        )}
+        {/* Slash-Kategorien wie gehabt */}
+        {Object.entries(slashCategoryMap).map(([cat, catItems]) => (
+          <React.Fragment key={cat}>
+            <li className="mt-2 mb-1 flex items-center gap-2">
+              <h3 className="text-base font-semibold text-gray-600 m-0">
+                {cat.charAt(0).toUpperCase() + cat.slice(1)}
+              </h3>
+            </li>
+            <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-2">
+              {catItems.map((item) => (
+                <li
+                  key={item.id}
+                  className={
+                    "flex items-center gap-2 cursor-pointer select-none px-2 py-1 rounded group " +
+                    (item.checked ? "bg-green-100" : "hover:bg-gray-100")
+                  }
+                  onClick={async () => {
+                    await toggleTripItem(item.id);
+                    const updated = await getTripItems(id!);
+                    setItems(updated);
+                  }}
+                >
+                  <input
+                    type="checkbox"
+                    checked={item.checked}
+                    readOnly
+                    tabIndex={-1}
+                    className="pointer-events-none"
+                  />
+                  <span className={item.checked ? "line-through text-gray-400" : ""}>
+                    {item._sub}
+                  </span>
+                  {item.item && item.item.tags && item.item.tags.length > 0 && (
+                    <span className="ml-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                      {[...item.item.tags]
+                        .slice()
+                        .sort((a, b) => a.name.localeCompare(b.name))
+                        .map((tag: any) => (
+                          <span
+                            key={tag.id}
+                            className="text-xs text-gray-400 rounded px-1 py-0.5"
+                          >
+                            #{tag.name}
+                          </span>
+                        ))}
+                    </span>
+                  )}
+                </li>
+              ))}
+            </ul>
           </React.Fragment>
         ))}
       </>
@@ -228,93 +236,94 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
   }
 
   return (
-    <div>
+    <div className="py-4 max-w-5xl mx-auto">
       {/* Trip-Titel und Zeitraum */}
-      <div className="mb-2">
-        <h2 className="text-xl font-bold">{trip.name}</h2>
-        <div className="text-gray-600 text-sm">
+      <div className="mb-6 p-6 rounded-xl border-2 border-blue-200 bg-blue-50 shadow flex flex-col gap-2">
+        <h2 className="text-2xl font-bold text-blue-900">{trip.name}</h2>
+        <div className="text-gray-600 text-base">
           {trip.start_date} – {trip.end_date}
         </div>
-      </div>
-      {/* Tag-Liste */}
-      <div className="mb-2 flex flex-wrap gap-2 items-center">
-        <span className="font-semibold">Tags: </span>
-        {selectedTags.length === 0 ? (
-          <span className="text-gray-400">keine</span>
-        ) : (
-          selectedTags.map((tag: any) => {
-            const isMarked = markedTags.some((mt: any) => mt.id === tag.id);
-            return (
-              <span
-                key={tag.id}
-                className={
-                  "relative px-2 py-0.5 rounded mr-1 text-sm cursor-pointer transition " +
-                  (isMarked
-                    ? "bg-yellow-200 text-yellow-900 font-bold"
-                    : "bg-blue-100 text-blue-800")
-                }
-                onClick={() => handleToggleMark(tag.id)}
-                onMouseEnter={() => setHoveredTag(tag.id)}
-                onMouseLeave={() => setHoveredTag(null)}
-              >
-                #{tag.name}
-                {hoveredTag === tag.id && (
-                  <button
-                    className="absolute -top-2 -right-2 text-xs text-red-500 bg-white rounded-full px-1 shadow"
-                    onClick={e => {
-                      e.stopPropagation();
-                      handleRemoveTag(tag.id);
-                    }}
-                  >
-                    ×
-                  </button>
-                )}
-              </span>
-            );
-          })
-        )}
-        {/* Tag hinzufügen */}
-        <div className="relative">
-          <input
-            type="text"
-            placeholder="+ Tag"
-            value={tagInput}
-            onChange={e => setTagInput(e.target.value)}
-            className="border rounded px-2 py-0.5 text-sm ml-2"
-            list="tag-suggestions"
-          />
-          <datalist id="tag-suggestions">
-            {allTags
-              .filter(
-                (t) =>
-                  t.name.toLowerCase().includes(tagInput.toLowerCase()) &&
-                  !selectedTags.some((st) => st.id === t.id)
-              )
-              .map((t) => (
-                <option key={t.id} value={t.name} />
-              ))}
-          </datalist>
-          {tagInput &&
-            allTags
-              .filter(
-                (t) =>
-                  t.name.toLowerCase() === tagInput.toLowerCase() &&
-                  !selectedTags.some((st) => st.id === t.id)
-              )
-              .map((t) => (
-                <button
-                  key={t.id}
-                  className="ml-2 text-xs text-blue-500 underline"
-                  onClick={() => handleAddTag(t.id)}
-                  type="button"
+        <div className="flex flex-wrap gap-2 items-center">
+          <span className="font-semibold">Tags: </span>
+          {selectedTags.length === 0 ? (
+            <span className="text-gray-400">keine</span>
+          ) : (
+            selectedTags.map((tag: any) => {
+              const isMarked = markedTags.some((mt: any) => mt.id === tag.id);
+              return (
+                <span
+                  key={tag.id}
+                  className={
+                    "relative px-2 py-0.5 rounded mr-1 text-sm cursor-pointer transition " +
+                    (isMarked
+                      ? "bg-yellow-200 text-yellow-900 font-bold"
+                      : "bg-blue-100 text-blue-800")
+                  }
+                  onClick={() => handleToggleMark(tag.id)}
+                  onMouseEnter={() => setHoveredTag(tag.id)}
+                  onMouseLeave={() => setHoveredTag(null)}
                 >
-                  Hinzufügen
-                </button>
-              ))}
+                  #{tag.name}
+                  {hoveredTag === tag.id && (
+                    <button
+                      className="absolute -top-2 -right-2 text-xs text-red-500 bg-white rounded-full px-1 shadow"
+                      onClick={e => {
+                        e.stopPropagation();
+                        handleRemoveTag(tag.id);
+                      }}
+                    >
+                      ×
+                    </button>
+                  )}
+                </span>
+              );
+            })
+          )}
+          {/* Tag hinzufügen */}
+          <div className="relative">
+            <input
+              type="text"
+              placeholder="+ Tag"
+              value={tagInput}
+              onChange={e => setTagInput(e.target.value)}
+              className="border rounded px-2 py-0.5 text-sm ml-2"
+              list="tag-suggestions"
+            />
+            <datalist id="tag-suggestions">
+              {allTags
+                .filter(
+                  (t) =>
+                    t.name.toLowerCase().includes(tagInput.toLowerCase()) &&
+                    !selectedTags.some((st) => st.id === t.id)
+                )
+                .map((t) => (
+                  <option key={t.id} value={t.name} />
+                ))}
+            </datalist>
+            {tagInput &&
+              allTags
+                .filter(
+                  (t) =>
+                    t.name.toLowerCase() === tagInput.toLowerCase() &&
+                    !selectedTags.some((st) => st.id === t.id)
+                )
+                .map((t) => (
+                  <button
+                    key={t.id}
+                    className="ml-2 text-xs text-blue-500 underline"
+                    onClick={() => handleAddTag(t.id)}
+                    type="button"
+                  >
+                    Hinzufügen
+                  </button>
+                ))}
+          </div>
         </div>
       </div>
       {/* ...Rest der Checklist... */}
-      <ul>
+      <ul
+        className="grid grid-cols-1 gap-x-8 gap-y-2"
+      >
         {/* 1. Ohne Tag */}
         {renderItemsWithCategories(itemsWithoutTag)}