diff --git a/src/Components/Templates/OverlayItemsIndexPage.tsx b/src/Components/Templates/OverlayItemsIndexPage.tsx
index b9f46fc5..2ce1ce38 100644
--- a/src/Components/Templates/OverlayItemsIndexPage.tsx
+++ b/src/Components/Templates/OverlayItemsIndexPage.tsx
@@ -108,8 +108,6 @@ export const OverlayItemsIndexPage = ({ url, layerName, parameterField, plusButt
 
     return (
         <>
-
-
             <MapOverlayPage className='tw-rounded-none tw-overflow-y-auto tw-bg-base-200 !tw-p-4'>
                 <div className='tw-flex tw-flex-col tw-h-full'>
                     <div className='tw-flex-none'>
@@ -119,55 +117,45 @@ export const OverlayItemsIndexPage = ({ url, layerName, parameterField, plusButt
                         </Control>
                     </div>
                     <div className="tw-overflow-scroll fade tw-flex-1">
-                        <div className='tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 2xl:tw-grid-cols-4 tw-gap-6 tw-pt-4'>
+                        <div className='tw-columns-1 md:tw-columns-2 lg:tw-columns-3 2xl:tw-columns-4 tw-gap-6 tw-pt-4'>
                             {
                                 items?.filter(i => i.layer?.name === layerName).
-                                    filter(item =>
-                                        filterTags.length == 0 ? item : filterTags.every(tag => getItemTags(item).some(filterTag => filterTag.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())))?.
-                                    sort((a, b) => {
-                                        // Convert date_created to milliseconds, handle undefined by converting to lowest possible date (0 milliseconds)
-                                        const dateA = a.date_updated ? new Date(a.date_updated).getTime() : a.date_created ? new Date(a.date_created).getTime() : 0;
-                                        const dateB = b.date_updated ? new Date(b.date_updated).getTime() : b.date_created ? new Date(b.date_created).getTime() : 0;
-                                        return dateB - dateA; // Subtracts milliseconds which are numbers
-                                    })?.
-                                    map((i, k) => {
-                                        return (
-                                            <ItemCard key={k} i={i} loading={loading} url={url} parameterField={parameterField} deleteCallback={() => deleteItem(i)} ></ItemCard>
-                                        )
-                                    })
+                                filter(item =>
+                                    filterTags.length == 0 ? item : filterTags.every(tag => getItemTags(item).some(filterTag => filterTag.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())))?.
+                                sort((a, b) => {
+                                    // Convert date_created to milliseconds, handle undefined by converting to lowest possible date (0 milliseconds)
+                                    const dateA = a.date_updated ? new Date(a.date_updated).getTime() : a.date_created ? new Date(a.date_created).getTime() : 0;
+                                    const dateB = b.date_updated ? new Date(b.date_updated).getTime() : b.date_created ? new Date(b.date_created).getTime() : 0;
+                                    return dateB - dateA; // Subtracts milliseconds which are numbers
+                                })?.
+                                map((i, k) => (
+                                    <div key={k} className="tw-break-inside-avoid tw-mb-6">
+                                        <ItemCard i={i} loading={loading} url={url} parameterField={parameterField} deleteCallback={() => deleteItem(i)} />
+                                    </div>
+                                ))
                             }
                         </div>
-                        {addItemPopupType == "place" ?
-
-                            <form ref={tabRef} autoComplete='off' onSubmit={e => submitNewItem(e)}  >
-
+                        {addItemPopupType == "place" && (
+                            <form ref={tabRef} autoComplete='off' onSubmit={e => submitNewItem(e)}>
                                 <div className='tw-cursor-pointer tw-card tw-border-[1px] tw-border-base-300 tw-card-body tw-shadow-xl tw-bg-base-100 tw-text-base-content tw-p-6 tw-mb-10'>
-                                    <label className="tw-btn tw-btn-sm tw-rounded-2xl tw-btn-circle tw-btn-ghost hover:tw-bg-transparent tw-absolute tw-right-0 tw-top-0 tw-text-gray-600" onClick={() => {
-                                        setAddItemPopupType("")
-                                    }}>
-                                        <p className='tw-text-center '>✕</p></label>
+                                    <label className="tw-btn tw-btn-sm tw-rounded-2xl tw-btn-circle tw-btn-ghost hover:tw-bg-transparent tw-absolute tw-right-0 tw-top-0 tw-text-gray-600" onClick={() => setAddItemPopupType("")}>
+                                        <p className='tw-text-center'>✕</p>
+                                    </label>
                                     <TextInput type="text" placeholder="Name" dataField="name" defaultValue={""} inputStyle='' />
-                                    {layer?.itemType.show_start_end_input &&
-                                        <PopupStartEndInput></PopupStartEndInput>
-                                    }
+                                    {layer?.itemType.show_start_end_input && <PopupStartEndInput />}
                                     <TextAreaInput placeholder="Text" dataField="text" defaultValue={""} inputStyle='tw-h-40 tw-mt-5' />
                                     <div className='tw-flex tw-justify-center'>
-                                        <button className={loading ? 'tw-btn tw-btn-disabled tw-mt-5 tw-place-self-center' : 'tw-btn tw-mt-5 tw-place-self-center'} type='submit'>{loading ? <span className="tw-loading tw-loading-spinner"></span> : 'Save'}</button>
+                                        <button className={loading ? 'tw-btn tw-btn-disabled tw-mt-5 tw-place-self-center' : 'tw-btn tw-mt-5 tw-place-self-center'} type='submit'>
+                                            {loading ? <span className="tw-loading tw-loading-spinner"></span> : 'Save'}
+                                        </button>
                                     </div>
                                 </div>
-                            </form> : <></>
-                        }
-
+                            </form>
+                        )}
                     </div>
                 </div>
-
             </MapOverlayPage>
 
-
             {plusButton && <PlusButton layer={layer} triggerAction={() => { setAddItemPopupType("place"); scroll(); }} color={'#777'} collection='items' />}
-
         </>
-
-
-    )
-}
+    )}