diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
index 2e02a4d9f..570e0659a 100644
--- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
+++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
@@ -4,7 +4,8 @@ import moment from 'moment';
 import request from '../../../../utils/request-middleware.js';
 
 import googleDriveIcon from '../../../../googleDrive.svg';
-import homebreweryIcon from '../../../../thumbnail.svg';
+import homebreweryIconWhite from '@themes/assets/naturalCritLogoWhite.svg';
+import homebreweryIconBlack from '@themes/assets/naturalCritLogoBlack.svg';
 import dedent from 'dedent';
 
 const BrewItem = ({
@@ -16,6 +17,7 @@ const BrewItem = ({
 	},
 	updateListFilter = ()=>{},
 	reportError = ()=>{},
+	theme,
 	renderStorage = true,
 })=>{
 
@@ -101,10 +103,10 @@ const BrewItem = ({
 				</span>
 			);
 		}
-
+		console.log(theme);
 		return (
 			<span className='storage' title='Homebrewery Storage'>
-				<img className='homebreweryIcon' src={homebreweryIcon} alt='Homebrewery Storage' />
+				<img className='homebreweryIcon' src={theme === 'light' ? homebreweryIconBlack : homebreweryIconWhite} alt='Homebrewery Storage' />
 			</span>
 		);
 	};
diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
index e695a786b..fe7d7ae58 100644
--- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
+++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
@@ -7,6 +7,7 @@
 	--bg-image                  : @backgroundImageAlt;
 	--text-clr                  : black;
 	--text-shadow-clr           : white;
+	--hb-logo: url('@themes/assets/naturalCritLogoBlack.svg');
 
 	position                    : relative;
 	display                     : flex;
@@ -57,9 +58,11 @@
 		font-weight      : bold;
 		white-space      : nowrap;
 		cursor           : pointer;
-		background-color : rgba(from var(--tag-base) r g b / 0.1);
+		color:black;
+		background : hsl(from currentColor h 20% 80%);
 		border           : 1px solid currentColor;
 		border-radius    : 4px;
+
 		&::before {
 			margin-right : 3px;
 			font-family  : 'Font Awesome 6 Free';
@@ -72,22 +75,18 @@
 		--tag-system     : #800000;
 		&.type {
 			color            : var(--tag-type);
-			background-color : rgba(from var(--tag-type) r g b / 0.2);
 			&::before { content : '\f0ad'; }
 		}
 		&.group {
 			color            : var(--tag-group);
-			background-color : rgba(from var(--tag-group) r g b / 0.1);
 			&::before { content : '\f500'; }
 		}
 		&.meta {
 			color            : var(--tag-meta);
-			background-color : rgba(from var(--tag-meta) r g b / 0.2);
 			&::before { content : '\f05a'; }
 		}
 		&.system {
 			color            : var(--tag-system);
-			background-color : rgba(from var(--tag-system) r g b / 0.2);
 			&::before { content : '\f518'; }
 		}
 	}
@@ -127,11 +126,20 @@
 		.deleteLink { color : @red; }
 	}
 }
+
+.darkMode .brewItem {
+	--bg-clr                    : #444;
+	--bg-image                  : @backgroundImageAltDark;
+	--text-clr                  : #ddd;
+	--text-shadow-clr           : black;
+	--hb-logo: url('@themes/assets/naturalCritLogoWhite.svg');
+}
+
 .grid > .brewItem {
 	justify-content  : space-between;
 	width            : clamp(300px, 48%, 500px);
 	min-height       : 125px;
-	padding          : 5px 15px 5px 6px;
+	padding          : 7px 17px 7px 8px;
 	padding-right    : 30px;
 	border-radius    : 5px;
 	box-shadow       : 0 4px 5px 0 #333333;
@@ -160,7 +168,7 @@
 	width                 : 300px;
 	height                : 400px;
 	padding               : 100px 10px 50px;
-	background-image      : url('@themes/assets/naturalCritLogoBlack.svg'), var(--bg-image);
+	background-image      : var(--hb-logo), var(--bg-image);
 	background-repeat     : no-repeat;
 	background-position   : center 20%, center;
 	background-size       : 50%, cover;
@@ -221,7 +229,6 @@
 			grid-area : tags;
 			color     : inherit;
 			i { color : inherit;}
-			> span { background : hsl(from currentColor h 20% 80%); }
 		}
 		.brewAuthors { grid-area : authors; }
 		.brewPages { grid-area : pages; }
@@ -235,6 +242,9 @@
 		height   : 40px;
 	}
 }
+.darkMode .card .brewItem {
+	border-width:2px;
+}
 .list > .brewItem {
 	display               : grid;
 	grid-template-columns : 35% 3fr 150px;
diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx
index b415bc80d..2ec78151f 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.jsx
+++ b/client/homebrew/pages/basePages/listPage/listPage.jsx
@@ -10,10 +10,12 @@ const USERPAGE_SORT_DIR = 'HB_listPage_sortDir';
 const USERPAGE_SORT_TYPE = 'HB_listPage_sortType';
 const USERPAGE_GROUP_VISIBILITY_PREFIX = 'HB_listPage_visibility_group';
 const USERPAGE_LAYOUT_MODE = 'HB_listPage_layout_mode';
+const USERPAGE_THEME_MODE = 'HB_listPage_theme_mode';
 
 const DEFAULT_SORT_TYPE = 'alpha';
 const DEFAULT_SORT_DIR = 'asc';
 const DEFAULT_LAYOUT_MODE = 'grid';
+const DEFAULT_THEME_MODE = 'light';
 
 const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navItems = <></>, reportError = null, query })=>{
 	const [filterString, setFilterString] = useState(query?.filter || '');
@@ -22,6 +24,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 	const [sortDir, setSortDir] = useState(query?.dir || null);
 	const [groupVisibility, setGroupVisibility] = useState({});
 	const [layoutMode, setLayoutMode] = useState(DEFAULT_LAYOUT_MODE);
+	const [themeMode, setThemeMode] = useState(DEFAULT_THEME_MODE);
 
 	const groupVisibilityRef = useRef(groupVisibility);
 	const sortTypeRef = useRef(sortType);
@@ -53,11 +56,13 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 		}, {});
 
 		const newLayoutMode = localStorage.getItem(USERPAGE_LAYOUT_MODE) || DEFAULT_LAYOUT_MODE;
+		const newThemeMode = localStorage.getItem(USERPAGE_THEME_MODE) || DEFAULT_THEME_MODE;
 
 		setGroupVisibility(namedBrewCollection);
 		setSortType(newSortType);
 		setSortDir(newSortDir);
 		setLayoutMode(newLayoutMode);
+		setThemeMode(newThemeMode);
 
 		return ()=>{
 			window.onbeforeunload = null;
@@ -80,6 +85,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 				brew={brew}
 				key={idx}
 				reportError={reportError}
+				theme={themeMode}
 				updateListFilter={(tag)=>{
 					updateUrl(filterString, sortType, sortDir, tag);
 				}}
@@ -282,8 +288,8 @@ 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');
+		setLayoutMode(e.target.checked ? mode : DEFAULT_LAYOUT_MODE);
+		localStorage.setItem(USERPAGE_LAYOUT_MODE, e.target.checked ? mode : DEFAULT_LAYOUT_MODE);
 		return;
 	};
 
@@ -306,16 +312,22 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 			</div>
 		);
 	};
+
+	const handleThemeChange = (e, mode)=>{
+		setThemeMode(e.target.checked ? mode : DEFAULT_THEME_MODE);
+		localStorage.setItem(USERPAGE_THEME_MODE, e.target.checked ? mode : DEFAULT_THEME_MODE);
+		return;
+	};
 	const renderThemePicker = ()=>{
 		return (
 			<div className="radio-toggle theme-container">
 				<h6>Theme:</h6>
 				<label className="option">
-					<input type="radio" name="theme" onChange={(e)=>handleThemeChange(e, 'light')}/>
+					<input type="radio" name="theme" onChange={(e)=>handleThemeChange(e, 'light')} checked={themeMode === 'light'}/>
 					<i className="fas fa-sun"/>
 				</label>
 				<label className="option">
-					<input type="radio" name="theme" onChange={(e)=>handleThemeChange(e, 'light')}/>
+					<input type="radio" name="theme" onChange={(e)=>handleThemeChange(e, 'dark')}  checked={themeMode === 'dark'}/>
 					<i className="fas fa-moon"/>
 				</label>
 			</div>
@@ -337,12 +349,12 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 	} 
 
 	return (
-		<div className='listPage sitePage'>
+		<div className='sitePage listPage'>
 			{navItems}
 
 			{renderNav()}
 
-			<div className='content V3'>
+			<div className={`content V3 ${themeMode + 'Mode'}`}>
 				<div className='brewCollection'>{renderBrewCollection(brewCollection)}</div>
 			</div>
 		</div>