diff --git a/package-lock.json b/package-lock.json
index b675712..a0e5801 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,8 @@
 				"firebase": "^10.12.5",
 				"react": "^18.3.1",
 				"react-dom": "^18.3.1",
-				"react-router-dom": "^6.26.0"
+				"react-router-dom": "^6.26.0",
+				"uuid": "^10.0.0"
 			},
 			"devDependencies": {
 				"@nabla/vite-plugin-eslint": "^2.0.4",
@@ -10209,6 +10210,18 @@
 				"requires-port": "^1.0.0"
 			}
 		},
+		"node_modules/uuid": {
+			"version": "10.0.0",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+			"integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
+		},
 		"node_modules/vite": {
 			"version": "5.3.5",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-5.3.5.tgz",
diff --git a/package.json b/package.json
index 53f507d..24bff38 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
 		"firebase": "^10.12.5",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
-		"react-router-dom": "^6.26.0"
+		"react-router-dom": "^6.26.0",
+		"uuid": "^10.0.0"
 	},
 	"devDependencies": {
 		"@nabla/vite-plugin-eslint": "^2.0.4",
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
index adb5b3a..e0d32a9 100644
--- a/src/views/Home.jsx
+++ b/src/views/Home.jsx
@@ -1,6 +1,6 @@
 import './Home.css';
 import { SingleList } from '../components';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 import { createList, useAuth } from '../api';
 import { useNavigate } from 'react-router-dom';
 
@@ -40,15 +40,15 @@ export function Home({ data, setListPath }) {
 			<ul>
 				{data &&
 					data.map((list) => {
+						const uniqueId = crypto.randomUUID();
 						return (
-							<>
+							<Fragment key={uniqueId}>
 								<SingleList
-									key={crypto.randomUUID()}
 									name={list.name}
 									setListPath={setListPath}
 									path={list.path}
 								/>
-							</>
+							</Fragment>
 						);
 					})}
 			</ul>
diff --git a/src/views/List.jsx b/src/views/List.jsx
index 7387a47..231880e 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -1,7 +1,8 @@
 import { ListItem } from '../components';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, Fragment } from 'react';
 import BasicModal from './Modal';
 import { comparePurchaseUrgency } from '../api';
+import { v4 as uuidv4 } from 'uuid';
 
 export function List({ data, userId }) {
 	const [filterVal, setFilterVal] = useState('');
@@ -82,14 +83,14 @@ export function List({ data, userId }) {
 			<ul>
 				{filteredObject &&
 					Object.entries(filteredObject).map(([timeBucket, list]) => (
-						<>
+						<Fragment key={uuidv4()}>
 							<div>
 								<h3>{labels[timeBucket]}</h3>
 							</div>
 							{list.map((item) => (
-								<ListItem key={item.id} item={item} />
+								<ListItem item={item} key={uuidv4()} />
 							))}
-						</>
+						</Fragment>
 					))}
 			</ul>
 		</>