diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
index f92653533..d97fa534f 100644
--- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
+++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
@@ -1,5 +1,5 @@
 import './brewItem.less';
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import moment from 'moment';
 import request from '../../../../utils/request-middleware.js';
 
@@ -19,6 +19,8 @@ const BrewItem = ({
 	renderStorage = true,
 })=>{
 
+	const [detailsOpen, setDetailsOpen] = useState(false);
+
 	const deleteBrew = useCallback(()=>{
 		if(brew.authors.length <= 1) {
 			if(!window.confirm('Are you sure you want to delete this brew? Because you are the only owner of this brew, the document will be deleted permanently.')) return;
@@ -117,7 +119,7 @@ const BrewItem = ({
 	const dateFormatString = 'YYYY-MM-DD HH:mm:ss';
 
 	return (
-		<div className='brewItem'>
+		<div className={`brewItem${detailsOpen ? ' detailsOpen' : ''}`} onClick={() => setDetailsOpen(!detailsOpen)} >
 			{brew.thumbnail && <div className='thumbnail' style={{ backgroundImage: `url(${brew.thumbnail})` }}></div>}
 			<div className='text'>
 				<h2>{brew.title}</h2>
@@ -160,7 +162,7 @@ const BrewItem = ({
 					title={dedent` Created: ${moment(brew.createdAt).local().format(dateFormatString)}
                         Last updated: ${moment(brew.updatedAt).local().format(dateFormatString)}`}
 				>
-					<span aria-hidden='true'><i className='fas fa-sync-alt' /> {moment(brew.updatedAt).fromNow()}</span>
+					<i className='fas fa-sync-alt' /><span aria-hidden='true'> {moment(brew.updatedAt).fromNow()}</span>
 				</span>
 				{renderStorageIcon()}
 			</div>
diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
index 758fa2f48..97789b393 100644
--- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
+++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
@@ -125,13 +125,10 @@
 	position: relative;
 	box-sizing: border-box;
 	display: inline-block;
-	width: 48%;
-	min-width:400px;
+	width: clamp(400px, 48%, 600px);
 	min-height: 125px;
 	padding: 5px 15px 2px 6px;
 	padding-right: 15px;
-	margin-right: 15px;
-	margin-bottom: 15px;
 	overflow: hidden;
 	vertical-align: top;
 	background-color: #cab2802e;
@@ -226,9 +223,6 @@
 			opacity: 1;
 		}
 	}
-	&:nth-child(2n) {
-		margin-right: 0px;
-	}
 	.links {
 		.animate(opacity);
 		position: absolute;
@@ -276,7 +270,7 @@
 	min-height: unset;
 	width: 100%;
 	display: grid;
-	grid-template-columns: 2fr 2fr 1fr;
+	grid-template-columns: 2fr 3fr 1fr;
 	align-items: center;
 	color: rgb(2, 2, 2);
 	background: #efefef;
@@ -309,29 +303,26 @@
 		}
 	}
 
-	hr {
-		display: none;
-	}
-
 	.info {
-		width: 100%;
+		width: clamp(400px, 100%, 650px);
 		display: grid;
 		grid-template-areas: 'tags authors views pages update storage';
 		justify-content: end;
 		align-content: space-around;
 		align-items:center;
-		grid-template-columns: 200px 150px 70px 60px 150px 20px;
+		    grid-template-columns: 2fr 1.5fr 0.7fr 0.6fr 1.5fr 20px;
 		br {
 			display: none;
 		}
 		.brewTags {
 			display: inline-block;
 			grid-area: tags;
+			min-width:100px;
 		}
-		[title*='Authors:'] {
+		.brewAuthors {
 			display: inline-block;
 			grid-area: authors;
-			height: 40px;
+			height: fit-content;
 			overflow: hidden;
 			width: 150px;
 			overflow: hidden;
@@ -339,14 +330,21 @@
 			display: -webkit-box;
 			-webkit-line-clamp: 3;
 			-webkit-box-orient: vertical;
+
+			&:has(a:only-of-type) {
+				width:fit-content;
+			}
 		}
-		[title*='Last'] {
+
+		.lastViewed {
 			display: inline-block;
 			grid-area: views;
+			min-width:50px;
 		}
-		[title*='Page'] {
+		.brewPages {
 			display: inline-block;
 			grid-area: pages;
+			min-width:40px;
 		}
 		[title*='Created'] {
 			display: inline-block;
@@ -564,3 +562,63 @@
 	}
 
 }
+
+
+@media screen and (max-width: 1400px)  {
+	.brewCollection {
+		background:@yellow;
+	}
+
+	.brewCollection .brewGroup {
+		&.list {
+			.brewItem:not(.detailsOpen) {
+				grid-template-columns: 3fr 2.5fr 1fr;
+				.info {
+					width: clamp(200px, 100%, 650px);
+					grid-template-columns: 2fr 1fr  20px;
+					grid-template-areas: 'tags update storage';
+				}
+
+				.brewPages, .lastViewed, .brewAuthors {
+					display:none;
+				}		
+			}
+			.brewItem {
+				transition:height 0.2s;
+			}
+			.detailsOpen {
+				height:70px;
+			}
+		}
+	}
+}
+
+@media screen and (max-width: 1200px)  {
+	.brewCollection {
+		background:@yellow;
+	}
+
+	.brewCollection .brewGroup {
+		&.list {
+			.brewItem:not(.detailsOpen) {
+				grid-template-columns: 3fr 2fr 1fr;
+				.info {
+					width: clamp(200px, 100%, 650px);
+					grid-template-columns: 1fr 20px;
+					grid-template-areas: 'tags storage';
+				}
+
+				.brewPages, .lastViewed, .brewAuthors, .lastUpdated {
+					display:none;
+				}		
+			}
+			.detailsOpen {
+				grid-template-columns: 1fr 2fr;
+				.links{
+					display:none;
+				}
+			}
+		}
+	}
+}
+
diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx
index 893198281..c06e0dca3 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.jsx
+++ b/client/homebrew/pages/basePages/listPage/listPage.jsx
@@ -21,7 +21,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 	const [sortType, setSortType] = useState(query?.sort || null);
 	const [sortDir, setSortDir] = useState(query?.dir || null);
 	const [groupVisibility, setGroupVisibility] = useState({});
-	const [layoutMode, setLayoutMode] = useState(null);
+	const [layoutMode, setLayoutMode] = useState(DEFAULT_LAYOUT_MODE);
 
 	const groupVisibilityRef = useRef(groupVisibility);
 	const sortTypeRef = useRef(sortType);
@@ -52,7 +52,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 			return visibility;
 		}, {});
 
-		const newLayoutMode = layoutMode ?? (localStorage.getItem(USERPAGE_LAYOUT_MODE) || DEFAULT_LAYOUT_MODE);
+		const newLayoutMode = localStorage.getItem(USERPAGE_LAYOUT_MODE) || DEFAULT_LAYOUT_MODE;
 
 		setGroupVisibility(namedBrewCollection);
 		setSortType(newSortType);
@@ -70,7 +70,6 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 		});
 		localStorage.setItem(USERPAGE_SORT_TYPE, sortTypeRef.current);
 		localStorage.setItem(USERPAGE_SORT_DIR, sortDirRef.current);
-		localStorage.setItem(USERPAGE_LAYOUT_MODE, layoutMode);
 	};
 
 	const renderBrews = (brews)=>{
@@ -284,6 +283,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 
 	const handleLayoutChange = (e, mode)=>{
 		setLayoutMode(e.target.checked ? mode : 'grid');
+		localStorage.setItem(USERPAGE_LAYOUT_MODE, e.target.checked ? mode : 'grid');
 		return;
 	};
 
diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less
index 170ae6f3e..b7e241fa7 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.less
+++ b/client/homebrew/pages/basePages/listPage/listPage.less
@@ -20,13 +20,15 @@
 .listPage {
 	.content {
 		z-index : 1;
-		padding : 100px 250px;
+		padding : clamp(50px, 5vh, 200px) 10vw;
 		.noBrews {
 			margin     : 10px 0px;
 			font-size  : 1.3em;
 			font-style : italic;
 		}
 		.brewCollection {
+			width:fit-content;
+
 			h1 {
 				margin-bottom : 20px;
 				font-size     : 25px;
@@ -46,6 +48,14 @@
 			h1:hover { cursor : pointer; }
 			
 			.brewGroup {
+
+				&.grid {
+					display:flex;
+					flex-wrap: wrap;
+					justify-content: center;
+					gap:20px;
+					min-width:400px;
+				}
 			
 
 				&.list {
@@ -56,7 +66,8 @@
 				&.card {
 					display   : flex;
 					flex-wrap : wrap;
-					column-gap:50px;
+					column-gap:40px;
+					justify-content: center;
 					
 					h1 { position : absolute; }
 				}